/* avengers.css -- loaded only by /avengers. Split out of fanpages.css. */

.mcu-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 0%, #1b0f10 0%, #0d0809 50%, #050405 100%);
}

.mcu-sky i {
  position: absolute; left: 50%; top: 12%; translate: -50% 0;
  width: clamp(320px, 46vw, 700px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(224,72,58,.16);
}

.mcu-sky i:nth-child(2) { width: clamp(220px, 32vw, 500px); border-color: rgba(245,198,60,.14); animation: mcu-spin 90s linear infinite; border-style: dashed; }

.mcu-sky i:nth-child(3) { width: clamp(120px, 18vw, 280px); border-color: rgba(224,72,58,.2); }

/* Endgame portals: sparking rings opening at different depths. Each ring is a
   radial gradient for the body and a conic gradient for the sparks turning
   against it, masked to the rim. No images, no canvas. */
.mcu-portal {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(closest-side,
    transparent 0 76%, rgba(214,140,54,.12) 84%,
    rgba(240,182,102,.30) 91%, rgba(214,134,44,.11) 96%, transparent 100%);
  filter: drop-shadow(0 0 16px rgba(214,140,54,.14));
  animation: mcu-portal-breathe 11s ease-in-out infinite alternate;
}

.mcu-portal::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 5%, rgba(255,222,150,.34) 8%, transparent 13% 28%,
    rgba(255,200,110,.26) 32%, transparent 37% 55%,
    rgba(255,232,180,.36) 59%, transparent 64% 82%,
    rgba(255,196,104,.24) 86%, transparent 91%);
  -webkit-mask: radial-gradient(closest-side, transparent 0 80%, #000 86% 97%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 0 80%, #000 86% 97%, transparent 100%);
  animation: mcu-portal-spin 14s linear infinite;
}

.mcu-portal--1 { width: clamp(200px, 30vw, 460px); aspect-ratio: 1; left: -6%;  top: 12%; }

.mcu-portal--2 { width: clamp(130px, 19vw, 290px); aspect-ratio: 1; right: 4%;  top: 20%; animation-delay: -3s; }

.mcu-portal--2::before { animation-duration: 19s; animation-direction: reverse; }

.mcu-portal--3 { width: clamp(90px, 13vw, 190px);  aspect-ratio: 1; left: 24%;  bottom: 14%; animation-delay: -6s; }

.mcu-portal--3::before { animation-duration: 10s; }

.mcu-portal--4 { width: clamp(150px, 22vw, 340px); aspect-ratio: 1; right: 20%; bottom: -8%; animation-delay: -1.5s; }

.mcu-portal--4::before { animation-duration: 23s; animation-direction: reverse; }

.mcu-portal--5 { width: clamp(70px, 10vw, 150px);  aspect-ratio: 1; left: 58%;  top: 6%; animation-delay: -8s; }

.mcu-portal--5::before { animation-duration: 8s; }

/* the six stones, loose and circling. Each .mcu-orbit is a tilted ring that
   turns; the stone rides at the top of it and counter-rotates on X so it stays
   a disc rather than an ellipse. --r radius, --t period, --tilt lean, --c color. */
.mcu-orbits { position: absolute; inset: 0; display: block; perspective: 900px; }

.mcu-orbit {
  position: absolute; left: 50%; top: 50%;
  width: var(--r); aspect-ratio: 1; border-radius: 50%;
  transform-style: preserve-3d;
  animation: mcu-orbit-spin var(--t, 40s) linear infinite;
  animation-delay: var(--d, 0s);
}

.mcu-orbit--rev { animation-direction: reverse; }

.mcu-orbit s {
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  width: 15px; height: 15px; border-radius: 50%; text-decoration: none;
  transform: rotateX(calc(var(--tilt, 70deg) * -1));
  background: radial-gradient(circle at 36% 34%, #fff 0 14%, var(--c) 52%, transparent 78%);
  box-shadow: 0 0 14px 3px var(--c), 0 0 40px 10px color-mix(in srgb, var(--c) 40%, transparent);
  opacity: .75;
}

/* ash and embers drifting over the whole field */
.mcu-embers {
  position: absolute; inset: 0; display: block;
  background-size: 300px 300px;
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px,   rgba(255,190,110,.65), transparent),
    radial-gradient(1px 1px at 150px 30px,      rgba(255,214,150,.5),  transparent),
    radial-gradient(1.6px 1.6px at 250px 120px, rgba(255,170,80,.55),  transparent),
    radial-gradient(1px 1px at 90px 190px,      rgba(255,206,140,.45), transparent),
    radial-gradient(1.3px 1.3px at 210px 250px, rgba(255,180,90,.5),   transparent);
  animation: mcu-ember-drift 26s linear infinite;
  opacity: .28;
}

.fan-art--mcu .g-plate > * {
  fill: #1b1410; stroke: #e0a05f; stroke-width: 2.6; stroke-linejoin: round;
}

.fan-art--mcu .g-seam { fill: none; stroke: #e0a05f; stroke-width: 1.5; opacity: .45; stroke-linecap: round; }

.fan-art--mcu .g-rivet circle { fill: #e0a05f; opacity: .55; }

.fan-art--mcu .gem {
  fill: var(--g); stroke: rgba(255,255,255,.5); stroke-width: 1.2;
  filter: drop-shadow(0 0 7px var(--g)) drop-shadow(0 0 18px var(--g));
  animation: mcu-gemlight 4.4s ease-in-out infinite alternate;
}

.fan-art--mcu .gem:nth-child(2n) { animation-delay: -1.4s; }

.fan-art--mcu .gem:nth-child(3n) { animation-delay: -2.6s; }

/* ── the six stones, as crests ── */
.crest-grid--stones { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* ── villain caricatures ── */
.bust-grid {
  display: grid; gap: clamp(0.8rem, 2vw, 1.2rem);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.bust {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.35rem; padding: 1.3rem 1.1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--v) 32%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--v) 16%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--v) 8%, transparent), rgba(9,7,9,.7) 70%);
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}

.bust:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--v) 75%, transparent);
  box-shadow: 0 26px 50px -28px #000, 0 0 46px -20px var(--v);
}

.bust-art {
  width: 88px; height: auto; margin-bottom: 0.5rem;
  transition: transform .5s var(--ease);
}

.bust:hover .bust-art { transform: translateY(-3px) scale(1.07); }

.bust-art .b-fill { fill: color-mix(in srgb, var(--v) 26%, #0c0a0f); stroke: var(--v); stroke-width: 2.4; stroke-linejoin: round; }

.bust-art .b-dark { fill: #07060a; }

.bust-art .b-line { fill: none; stroke: var(--v); stroke-width: 2.2; stroke-linecap: round; }

.bust-art .b-line-f { fill: var(--v); }

.bust :is(h2, h3, h4, h5) { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.02em; color: var(--v); }

.bust-sub { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

.bust p { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 74%, transparent); }

.bust:hover p { color: var(--ink); }

/* ── the Doomsday layer ──
   Latveria green in the corner the portals do not reach, and the mask itself,
   outlined and nearly subliminal. It breathes; it does not blink. */
.mcu-doom {
  position: absolute; inset: 0;
  background: radial-gradient(42% 34% at 84% 76%, rgba(79,208,127,.11), transparent 70%);
  animation: mcu-doom-breathe 11s ease-in-out infinite alternate;
}
.mcu-doommask {
  position: absolute; right: 4vmin; bottom: 6vmin;
  width: clamp(120px, 24vmin, 240px); height: auto;
  fill: none; stroke: #4fd07f; stroke-width: 2; stroke-linecap: round;
  opacity: .1;
  animation: mcu-doom-breathe 11s ease-in-out infinite alternate;
}
.mcu-doommask circle { fill: #4fd07f; stroke: none; }
@keyframes mcu-doom-breathe { from { opacity: .07; } to { opacity: .16; } }
@media (prefers-reduced-motion: reduce) {
  .mcu-doom, .mcu-doommask { animation: none; }
}

/* ── one stone per film ──
   Six rows: an uncut gem, the title in this site's lettering tinted to its
   stone, and the stone's name on the right. The color is the whole point. */
.av-saga { display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .av-saga { grid-template-columns: 1fr 1fr; } }
.av-saga-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 60%);
  transition: border-color .3s, transform .3s var(--ease);
}
.av-saga-row:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
.av-gem {
  width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 75%, transparent));
}
.av-gem-body { fill: var(--c); }
.av-gem-facets { fill: none; stroke: #fff; stroke-width: 1; opacity: .3; }
.av-saga-name { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.av-saga-name b {
  font-family: var(--serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.06rem; line-height: 1.2;
  background: linear-gradient(180deg, var(--c2), var(--c) 62%, color-mix(in srgb, var(--c) 55%, #000));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.av-saga-name i {
  font-style: normal; font-family: var(--mono); font-size: 0.56rem;
  letter-spacing: 0.1em; color: var(--mute);
}
.av-saga-stone {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c);
  padding: 0.22rem 0.55rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}

/* ── the Doomsday panels: the A as a window, and the doctor in the fog ── */
.av-doomart {
  display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 860px) { .av-doomart { grid-template-columns: 1fr 1fr; } }
.avd-stage {
  margin: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0a100b 0%, #060a07 100%);
}
.avd-stage svg { display: block; width: 100%; height: auto; }
.avd-stage figcaption {
  padding: 0.7rem 1rem 0.9rem; text-align: center;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: #9fe8a8;
  text-shadow: 0 0 14px rgba(79,208,127,.6);
}
.avd-body { grid-column: 1 / -1; max-width: 62ch; }
.avd-body q {
  display: block; font-family: var(--serif); font-size: 1.15rem; font-style: italic;
  color: #9fe8a8; quotes: '\201C' '\201D'; margin-bottom: 0.6rem;
}
.avd-body p { font-size: 0.94rem; line-height: 1.75; color: var(--ink-dim); }