/* Fat Chance Commando landing */

@property --c { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --night: #06140b;
  --ink: #1b0f08;
  --cream: #fff1d1;
  --sun: #ffc53d;
  --ember: #ff6a1a;
  --blood: #d7192f;
  --pixel: 'Silkscreen', monospace;
  --display: 'Bungee', 'Rubik', sans-serif;
  --body: 'Rubik', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); }
body {
  background: var(--night);
  color: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background: #030a05;
  transition: opacity .7s ease .1s, visibility 0s linear .8s;
}
.is-ready #loader { opacity: 0; visibility: hidden; }
.loader-run {
  width: 116px; height: 106px;
  background: url(img/chance-run.webp) 0 0 / 696px 106px no-repeat;
  animation: run-cycle .6s steps(6) infinite;
}
@keyframes run-cycle { to { background-position: -696px 0; } }
.loader-text { font: 14px/1 var(--pixel); letter-spacing: 2px; color: var(--sun); }
.dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.loader-bar { width: 200px; height: 8px; border: 2px solid var(--sun); padding: 1px; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--sun); transition: width .3s; }

/* ---------- topbar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  font: 13px/1 var(--pixel);
  background: linear-gradient(#000a, #0000);
  opacity: 0; transform: translateY(-100%);
  transition: opacity .6s .9s, transform .6s .9s;
}
.is-ready .topbar { opacity: 1; transform: none; }
.brand { color: var(--cream); text-decoration: none; letter-spacing: 1px; }
.brand b { color: var(--sun); font-weight: 400; }
.freq { margin-left: auto; color: #fff9; display: flex; gap: 8px; align-items: center; }
.rec { width: 8px; height: 8px; background: var(--blood); border-radius: 50%; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chip { padding: 6px 8px; border: 2px solid var(--sun); color: var(--sun); }

/* ---------- scene engine ---------- */
.scene { position: relative; }
.stage {
  --p: 0; --in: 1; --out: 0; --show: 1;
  position: fixed; inset: 0;
  overflow: hidden; overflow: clip; isolation: isolate;
  visibility: hidden;
}
.stage.is-visible { visibility: visible; }
.stage > .body { position: absolute; inset: 0; }
[data-r] { --t: 0; }

/* entrances: each new scene arrives over the previous one, never as a hard cut */
.stage[data-enter="iris"] { clip-path: circle(calc(var(--in) * var(--ir, 74%)) at var(--ix, 50%) var(--iy, 50%)); }
.stage[data-enter="leaves"] > .body { opacity: var(--show); }
.stage[data-enter="blend"] > .card-bg { opacity: var(--in); }

/* ---------- jungle curtain (--c: 0 open, 1 shut) ---------- */
.curtain { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.curtain::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%, #0d2a16, #030a05 70%);
  opacity: clamp(0, calc((var(--c) - .55) * 2.6), 1);
}
.leaf { position: absolute; image-rendering: pixelated; max-width: none; filter: drop-shadow(0 18px 30px #000c); will-change: transform; }
.leaf.l, .leaf.r { top: 50%; height: 118vh; width: auto; translate: 0 -50%; }
.leaf.l {
  left: -3vw; transform-origin: left center;
  transform: translateX(calc((var(--c) - 1) * 80%));
  animation: sway-l 7s ease-in-out infinite alternate;
}
.leaf.r {
  right: -3vw; transform-origin: right center;
  transform: translateX(calc((1 - var(--c)) * 80%));
  animation: sway-r 8s ease-in-out infinite alternate;
}
.leaf.t {
  left: -5vw; top: -2vh; width: 110vw; height: auto; transform-origin: center top;
  transform: translateY(calc((var(--c) - 1) * 76%));
  animation: sway-t 9s ease-in-out infinite alternate;
}
@keyframes sway-l { from { rotate: -1.2deg; } to { rotate: 1.4deg; } }
@keyframes sway-r { from { rotate: 1.2deg; } to { rotate: -1.6deg; } }
@keyframes sway-t { from { rotate: .6deg; } to { rotate: -.6deg; } }

/* ---------- animated jungle backdrop (portada y cierre) ---------- */
.jungle {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #22602f 0%, #0e3018 45%, #03100a 100%);
}
.j-rays {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 150deg at 50% -4%, #fff3b014 0 4deg, #0000 4deg 11deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, #0000 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000, #0000 72%);
  animation: rays-sway 14s ease-in-out infinite alternate;
}
@keyframes rays-sway { from { rotate: -3deg; opacity: .7; } to { rotate: 3deg; opacity: 1; } }
.j-back { position: absolute; image-rendering: pixelated; max-width: none; filter: brightness(.34) saturate(.8) blur(.6px); }
.j-back.b1 { left: -8vh; top: 18vh; height: 72vh; transform-origin: left center; animation: sway-l 10s ease-in-out infinite alternate; }
.j-back.b2 { right: -8vh; top: 26vh; height: 66vh; transform-origin: right center; animation: sway-r 11s ease-in-out infinite alternate; }
.j-back.b3 { left: -5vw; top: 6vh; width: 110vw; filter: brightness(.26) blur(.8px); animation: sway-t 12s ease-in-out infinite alternate; }
.fireflies { position: absolute; inset: 0; }
.fireflies i {
  position: absolute; width: 4px; height: 4px;
  background: #ecff9a; box-shadow: 0 0 10px 3px #d6ff5a77;
  animation-name: drift, glow; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
@keyframes drift { from { translate: 0 0; } to { translate: 40px -60px; } }
@keyframes glow { from { opacity: .1; } to { opacity: 1; } }

.center-card {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 2.2vh;
  text-align: center; padding: 0 16px;
}
.center-card::before {
  content: ''; position: absolute; inset: 10% 0; z-index: -1;
  background: radial-gradient(closest-side, #030a05e6 30%, #030a0500);
}

/* ---------- shared type ---------- */
.kicker { font: 13px/1.6 var(--pixel); letter-spacing: 2px; color: var(--sun); }
.kicker.red { color: #ff6b6b; }
.logo {
  font-family: var(--display); font-weight: 400;
  display: flex; flex-direction: column; align-items: center;
  line-height: .86;
}
.logo span {
  display: block;
  background: linear-gradient(#fff6c8 8%, var(--sun) 40%, var(--ember) 78%, #b8320f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .045em #2a0f05; paint-order: stroke fill;
  filter: drop-shadow(0 .07em 0 #2a0f05) drop-shadow(0 .14em 0 #000a);
}
.logo span:first-child { font-size: .62em; }
.tag { font: 600 clamp(15px, 1.6vw, 20px)/1.3 var(--body); text-shadow: 0 2px 0 #000; }

/* ---------- 1 · portada ---------- */
.is-loading .hero { --c: 1; }
.hero { transition: --c 2.2s cubic-bezier(.65, 0, .2, 1) .3s; }
.settled .hero { transition: none; }
.hero-center { transform: translateY(calc(var(--p) * -5vh)) scale(calc(1 + var(--p) * .05)); }
.hero-center .logo { font-size: clamp(54px, 11vw, 170px); }
.hero-center > * { transition: opacity 1s, transform 1.2s cubic-bezier(.2, .9, .2, 1.2); }
.hero-center .logo { transition-delay: 1.1s; }
.hero-center .kicker { transition-delay: 1.45s; }
.hero-center .tag { transition-delay: 1.75s; }
.is-loading .hero-center > * { opacity: 0; transform: translateY(30px) scale(.9); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 5vh; z-index: 25; translate: -50% 0;
  display: grid; justify-items: center; gap: 10px;
  font: 12px/1 var(--pixel); letter-spacing: 3px; color: var(--sun);
  transition: opacity .6s;
}
.is-loading .scroll-cue { opacity: 0; transition-delay: 2.4s; }
.scroll-cue i { width: 14px; height: 14px; border-right: 3px solid; border-bottom: 3px solid; rotate: 45deg; animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 6px; } }
body:not([data-scene="hero"]) .scroll-cue { opacity: 0; }

/* ---------- 2 · islas ---------- */
.islands { --burn: clamp(0, calc((var(--p) - .48) * 5), 1); }
.sunset {
  position: absolute; inset: 0;
  background: linear-gradient(#2b1a4d 0%, #7a3a86 26%, #e0566f 46%, #ff8a55 56%, #ffc06a 62%);
}
.sun {
  position: absolute; left: 50%; top: 62%; z-index: 1;
  width: min(44vh, 62vw); aspect-ratio: 1;
  translate: -50% -58%;
  transform: translateY(calc(var(--p) * 18%));
  border-radius: 50%;
  background: linear-gradient(#fff4b0, #ffc25a 45%, #ff6a3a);
  -webkit-mask-image: linear-gradient(#000 52%, #0000 52% 56%, #000 56% 64%, #0000 64% 69%, #000 69% 76%, #0000 76% 82%, #000 82% 87%, #0000 87%);
  mask-image: linear-gradient(#000 52%, #0000 52% 56%, #000 56% 64%, #0000 64% 69%, #000 69% 76%, #0000 76% 82%, #000 82% 87%, #0000 87%);
  box-shadow: 0 0 120px 40px #ffb34755;
}
.sea {
  position: absolute; left: 0; right: 0; top: 62%; bottom: 0; z-index: 2;
  background: linear-gradient(#ff9a62 0, #2c88a0 5%, #11506b 55%, #062636);
}
.sea::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(#0000 0 10px, #ffe1a855 10px 12px, #0000 12px 22px);
  -webkit-mask-image: radial-gradient(ellipse 22% 100% at 50% 0%, #000, #0000);
  mask-image: radial-gradient(ellipse 22% 100% at 50% 0%, #000, #0000);
  animation: shimmer 1.6s steps(4) infinite;
}
@keyframes shimmer { to { background-position: 0 22px; } }
.cloud {
  position: absolute; z-index: 1; width: 160px; height: 36px; opacity: .75;
  background:
    linear-gradient(#ffc9b4, #ffc9b4) 34px 0 / 64px 12px no-repeat,
    linear-gradient(#ffb7a6, #ffb7a6) 12px 12px / 118px 12px no-repeat,
    linear-gradient(#f39a9a, #f39a9a) 0 24px / 160px 12px no-repeat;
  animation: cloud 70s linear infinite;
}
.cloud.c1 { top: 14vh; animation-delay: -20s; }
.cloud.c2 { top: 26vh; scale: 1.6; animation-duration: 95s; animation-delay: -60s; }
.cloud.c3 { top: 38vh; scale: .8; animation-duration: 55s; animation-delay: -5s; }
@keyframes cloud { from { left: -200px; } to { left: 110vw; } }
.isl-title {
  position: absolute; z-index: 5; left: 6vw; top: 16vh;
  font: 400 clamp(44px, 5.6vw, 104px)/.92 var(--display);
  color: var(--cream);
  -webkit-text-stroke: .04em #3a1030; paint-order: stroke fill;
  text-shadow: 0 .07em 0 #3a1030, 0 .14em 0 #0005;
  opacity: calc(var(--t) - var(--burn) * 1.5);
  transform: translateY(calc((1 - var(--t)) * 60px));
}
.isl-sub {
  position: absolute; z-index: 5; left: 6vw; top: calc(16vh + clamp(100px, 11.5vw, 210px));
  font: 700 clamp(18px, 2vw, 28px)/1.3 var(--body);
  text-shadow: 0 2px 0 #3a1030;
  opacity: calc(var(--t) - var(--burn) * 1.5);
  transform: translateY(calc((1 - var(--t)) * 40px));
}
.postcard {
  position: absolute; z-index: 4; right: 5vw; top: 20vh;
  width: min(48vw, 820px);
  padding: 12px 12px 48px;
  background: #fff4dc;
  box-shadow: 0 30px 60px #0007;
  rotate: calc(3deg + var(--burn) * 22deg);
  translate: 0 calc(var(--burn) * 110vh);
  opacity: min(1, calc(var(--t) * 3));
  transform: translateY(calc((1 - var(--t)) * 70vh)) rotate(calc((1 - var(--t)) * 10deg));
  filter: sepia(var(--burn)) brightness(calc(1 - var(--burn) * .4));
}
.postcard img { width: 100%; aspect-ratio: 1828 / 860; object-fit: cover; }
.postcard figcaption {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font: 400 clamp(13px, 1.4vw, 20px)/1 var(--display); color: #c2410c;
}
.pc-stamp {
  position: absolute; top: -16px; right: -14px; rotate: 9deg;
  padding: 10px 12px; background: #fff4dc; border: 3px dashed #d7192f;
  font: 12px/1.2 var(--pixel); color: #d7192f; text-align: center;
}
.red-wash {
  position: absolute; inset: 0; z-index: 6;
  background: linear-gradient(#3a0303ee, #7a0d0dd9 55%, #1a0202f5);
  opacity: var(--t);
}
.embers {
  position: absolute; inset: 0; z-index: 7; opacity: var(--t);
  background-image:
    radial-gradient(3px 3px at 20% 80%, #ffb347, #0000),
    radial-gradient(4px 4px at 70% 90%, #ff6a1a, #0000),
    radial-gradient(3px 3px at 45% 70%, #ffd27a, #0000),
    radial-gradient(4px 4px at 85% 60%, #ff6a1a, #0000),
    radial-gradient(3px 3px at 10% 50%, #ffb347, #0000);
  background-size: 300px 300px;
  animation: embers 6s linear infinite;
}
@keyframes embers { to { background-position: 40px -600px, -30px -600px, 20px -600px, -50px -600px, 10px -600px; } }
.isl-him {
  position: absolute; z-index: 8; left: 0; right: 0; top: 50%; translate: 0 -50%;
  display: grid; justify-items: center; text-align: center;
  font: 400 clamp(30px, 7.4vw, 124px)/1 var(--display); color: #fff;
  text-shadow: 0 .06em 0 #000;
  opacity: var(--t);
  transform: scale(calc(1.35 - var(--t) * .35));
}
.isl-him span { white-space: nowrap; }
.isl-him em { font-style: normal; font-size: 1.5em; color: var(--blood); -webkit-text-stroke: .03em #fff; }

/* ---------- 3 · Krank ---------- */
.villain { --swap: clamp(0, calc((var(--p) - .54) * 8), 1); }
.villain-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, #4a0a0a, #120202 70%); }
.v-rays {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(#ff2a2a10 0 6deg, #0000 6deg 14deg);
  animation: spin 90s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.villain::after {
  content: ''; position: absolute; inset: 0; z-index: 12; pointer-events: none;
  background: repeating-linear-gradient(#0000 0 3px, #0004 3px 4px);
}
.warn {
  position: absolute; left: -5vw; right: -5vw; z-index: 10; padding: 6px 0;
  background: repeating-linear-gradient(-45deg, var(--sun) 0 22px, #111 22px 44px);
}
.warn-top { top: 62px; rotate: -2deg; }
.warn-bottom { bottom: 2vh; rotate: 1.5deg; background: repeating-linear-gradient(45deg, var(--blood) 0 22px, #111 22px 44px); }
.marquee { display: flex; width: max-content; background: #111; animation: marquee 18s linear infinite; }
.marquee.rev { animation-direction: reverse; }
.marquee span { font: 400 22px/1.4 var(--display); color: var(--sun); white-space: nowrap; padding-right: 12px; }
.warn-bottom .marquee span { color: #ff5b5b; }
@keyframes marquee { to { transform: translateX(-50%); } }
.portal {
  --size: min(44vw, 66vh);
  position: absolute; z-index: 4;
  left: 6vw; top: calc(50% - var(--size) / 2);
  width: var(--size); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  clip-path: circle(calc(var(--t) * 50%));
  background: #1a0303;
}
.portal::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 3;
  box-shadow: inset 0 0 0 6px var(--blood), inset 0 0 70px #000;
}
.p-throne {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform: scale(calc(1.35 - var(--t) * .35 + var(--swap) * .3));
  filter: brightness(calc(1 - var(--swap) * .7));
}
.p-mecha {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle, #7a1414, #1a0303 72%);
  clip-path: circle(calc(var(--t) * 72%));
}
.p-mecha-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(#ffd23f22 0 8deg, #0000 8deg 18deg); animation: spin 30s linear infinite; }
.p-mecha img { position: relative; width: 80%; transform: scale(calc(.6 + var(--t) * .4)); animation: stomp .5s steps(2) infinite; }
@keyframes stomp { 50% { translate: 0 -5px; } }
.p-flash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #fff, #fff0 70%);
  opacity: calc(var(--t) * (1 - var(--t)) * 4);
}
.krank-name {
  position: absolute; z-index: 6; right: 6vw; top: 15vh;
  width: min(40vw, 600px);
  opacity: var(--t);
  transform: translateX(calc((1 - var(--t)) * 20vw));
}
.krank-name h2 {
  margin: 12px 0 16px;
  font: 400 clamp(52px, 7.6vw, 132px)/.86 var(--display);
  color: #fff;
  -webkit-text-stroke: 3px #2a0303;
  text-shadow: 6px 6px 0 var(--blood), 12px 12px 0 #000;
}
.krank-sub { display: grid; font: 600 clamp(16px, 1.6vw, 22px)/1.35 var(--body); color: #ffd5c8; }
.krank-sub span { grid-area: 1 / 1; }
.krank-sub .s1 { opacity: calc(1 - var(--swap)); transform: translateY(calc(var(--swap) * -12px)); }
.krank-sub .s2 { opacity: var(--swap); transform: translateY(calc((1 - var(--swap)) * 12px)); }
.krank-sub b { color: var(--sun); font-weight: 900; }

/* ---------- 4 · equipo (se funde personaje a personaje) ---------- */
.squad { --ir: 150%; background: var(--sun); display: grid; place-content: center; text-align: center; }
.rays {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(#ffb01f 0 8deg, #ffd25c 8deg 16deg);
  animation: spin 40s linear infinite;
}
.stamp-title {
  position: relative;
  font: 400 clamp(54px, 11vw, 180px)/.86 var(--display);
  color: var(--cream);
  -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--ink), 0 .12em 0 #0005;
  opacity: min(var(--in), calc(1 - var(--out) * 1.6));
  transform: scale(calc(2.2 - var(--in) * 1.2 + var(--out) * .6)) rotate(-4deg);
}
.stamp-title small { display: block; font: 15px/2 var(--pixel); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 3px; }
.squad-note {
  position: relative; margin-top: 4vh;
  font: 700 clamp(16px, 1.8vw, 24px)/1.3 var(--body); color: var(--ink);
  opacity: calc(var(--t) - var(--out) * 2);
  transform: translateY(calc((1 - var(--t)) * 20px));
}

.member .card-bg { position: absolute; inset: 0; overflow: hidden; }
.chance .card-bg { background: radial-gradient(circle at 70% 60%, #ffb347, #e8590c 60%, #8a2a06); }
.lola .card-bg { background: radial-gradient(circle at 70% 70%, #ff7a1a, #b3151f 55%, #3a0508); }
.abuela .card-bg { background: radial-gradient(circle at 70% 60%, #d9b8f0, #8a5fc0 55%, #2e1747); }
.burst {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(#fff2 0 6deg, #0000 6deg 14deg);
  animation: spin 60s linear infinite;
}
.flames {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 20% 110%, #ffd27acc, #0000),
    radial-gradient(35% 40% at 55% 115%, #ff6a1acc, #0000),
    radial-gradient(40% 30% at 85% 110%, #ffb347bb, #0000);
  animation: flicker 1.4s ease-in-out infinite alternate;
}
@keyframes flicker { to { transform: scaleY(1.15) translateY(-2%); } }
.floral {
  position: absolute; inset: 0; opacity: .25;
  background:
    radial-gradient(circle at 25% 25%, #fff 0 5px, #0000 6px),
    radial-gradient(circle at 75% 75%, #ffc6e8 0 7px, #0000 8px);
  background-size: 70px 70px;
  animation: floral 20s linear infinite;
}
@keyframes floral { to { background-position: 70px 70px, 70px 70px; } }
.giant {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; z-index: 1;
  white-space: nowrap; pointer-events: none;
  font: 400 clamp(120px, 24vw, 380px)/1 var(--display);
  color: transparent; -webkit-text-stroke: 2px #fff5;
  opacity: calc(var(--in) - var(--out));
  transform: translateX(calc(var(--p) * -40% + (1 - var(--in)) * 15%));
}
.member-art {
  position: absolute; z-index: 3; right: 5vw; bottom: 0;
  width: min(38vw, 62vh);
  opacity: calc(var(--in) * 1.6 - .3 - var(--out) * 1.6);
  transform: translateY(calc((1 - var(--in)) * 30vh)) translateX(calc(var(--out) * 35vw));
}
.member-art img { width: 100%; filter: drop-shadow(14px 14px 0 #0005); }
.lola .member-art { bottom: 6vh; width: min(36vw, 58vh); }
.member-art.tank { bottom: 7vh; width: min(46vw, 70vh); }
.member-art.tank img { animation: rumble .18s steps(2) infinite; }
@keyframes rumble { 50% { translate: 1px -1px; } }
.dossier {
  position: absolute; z-index: 4; left: 6vw; top: 15vh;
  width: min(440px, 40vw);
  padding: 22px 24px 26px;
  background: #f4e6c4 repeating-linear-gradient(#0000 0 27px, #0001 27px 28px);
  color: var(--ink);
  box-shadow: 10px 10px 0 #0007;
  opacity: calc(var(--in) * 1.6 - .4 - var(--out) * 1.8);
  transform: translateX(calc((1 - var(--in)) * -40vw - var(--out) * 30vw)) rotate(calc(-2deg + var(--in) * 3deg));
}
.dossier header {
  display: flex; justify-content: space-between;
  font: 11px/1 var(--pixel); letter-spacing: 1px; color: #7a4a20;
  padding-bottom: 10px; border-bottom: 2px dashed #7a4a2066;
}
.dossier h3 { font: 400 clamp(22px, 2.2vw, 32px)/1 var(--display); margin: 14px 0 12px; }
.dossier dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px; }
.dossier dt { font: 11px/19px var(--pixel); color: #7a4a20; }
.dossier dd { font-weight: 700; }
.kit { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.kit li { font-size: 14px; line-height: 1.3; padding-left: 14px; position: relative; }
.kit li::before { content: '▸'; position: absolute; left: 0; color: var(--ember); }
.kit b { display: block; font: 400 15px/1.2 var(--display); color: #8a1f0a; }
.stamp {
  position: absolute; right: 18px; bottom: 20px;
  font: 400 28px/1 var(--display); color: #c41e1e;
  border: 4px solid #c41e1e; padding: 6px 10px;
  rotate: -14deg; mix-blend-mode: multiply;
  opacity: var(--t);
  transform: scale(calc(3 - var(--t) * 2));
}
.fine {
  margin-top: 10px; font-size: 12px; font-weight: 700; color: #a0280e;
  opacity: var(--t); transform: translateX(calc((1 - var(--t)) * -12px));
}
.bar { text-decoration: none; background: #111; color: #111; letter-spacing: -1px; }
.runner {
  position: absolute; z-index: 5; bottom: 2vh; left: 0;
  width: 116px; height: 106px;
  background: url(img/chance-run.webp) 0 0 / 696px 106px no-repeat;
  animation: run-cycle .55s steps(6) infinite;
  transform: translateX(calc(-140px + var(--t) * (100vw + 160px)));
  opacity: calc(min(1, var(--t) * 20) - var(--out) * 3);
}
.face-peek {
  position: absolute; z-index: 6; right: 4vw; top: 13vh;
  width: clamp(110px, 12vw, 170px); border-radius: 50%;
  background: #0003; border: 4px solid #fff;
  box-shadow: 6px 6px 0 #0006;
  opacity: calc(1 - var(--out) * 3);
  transform: scale(var(--t)) rotate(calc((1 - var(--t)) * 30deg));
}

/* ---------- 5 · juego + carrusel ---------- */
.arcade-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #26391b, #080d06 72%); }
.a-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(#c8ff7a0b 0 7deg, #0000 7deg 16deg); animation: spin 70s linear infinite reverse; }
.arcade::after {
  content: ''; position: absolute; inset: 0; z-index: 12; pointer-events: none;
  background: repeating-linear-gradient(#0000 0 3px, #0003 3px 4px);
}
.gp-title {
  --gone: clamp(0, calc((var(--p) - .18) * 6), 1);
  position: absolute; z-index: 3; left: 6vw; top: 17vh;
  opacity: calc(var(--in) - var(--gone));
  transform: translateY(calc((1 - var(--in)) * 8vh - var(--gone) * 14vh));
}
.gp-title h2 { font: 400 clamp(48px, 8vw, 130px)/.9 var(--display); text-shadow: 0 6px 0 #000; }
.gp-title em { font-style: normal; color: var(--sun); }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; margin-top: 4vh; }
.pills li { font: 700 15px/1 var(--body); padding: 10px 14px; background: #000b; border: 2px solid var(--sun); }
.monitor-wrap {
  position: absolute; z-index: 4; left: 50%; top: 12vh;
  width: min(86vw, 1000px, calc((100vh - 270px) * 1.6));
  translate: -50% 0;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 70vh)) scale(calc(.85 + var(--t) * .15));
}
.monitor {
  position: relative; aspect-ratio: 16 / 9;
  border: 14px solid #2b2118; border-radius: 18px;
  overflow: hidden; background: #000;
  box-shadow: 0 0 0 4px #000, inset 0 0 0 2px #5a4632, 0 40px 80px #000c;
  overflow: clip;
  touch-action: pan-y; outline: none; cursor: grab;
}
.monitor:focus-visible { box-shadow: 0 0 0 4px var(--sun), 0 40px 80px #000c; }
.monitor.shake { animation: shake .4s steps(8); }
@keyframes shake {
  0%, 100% { translate: 0 0; } 15% { translate: -10px 4px; } 30% { translate: 8px -6px; }
  45% { translate: -6px -3px; } 60% { translate: 5px 5px; } 80% { translate: -2px 2px; }
}
.slide { position: absolute; inset: 0; opacity: 0; }
.slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide.locked { background: #111; display: grid; place-items: center; }
.noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .55; }
.lost {
  position: relative; padding: 12px 18px; background: #000c;
  font: 20px/1 var(--pixel); letter-spacing: 3px; color: var(--sun);
  animation: blink 1.2s steps(2) infinite;
}
.lost::before { content: '🔒 '; }
.scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(#0000 0 2px, #0003 2px 3px); }
.flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #fff; opacity: 0; }
.flash.on { animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.nav {
  position: absolute; z-index: 4; top: 50%; translate: 0 -50%;
  width: 48px; height: 48px; border: 0; cursor: pointer;
  background: var(--sun); color: var(--ink);
  box-shadow: 4px 4px 0 #000;
  font: 16px/1 var(--pixel);
  transition: transform .15s;
}
.nav:hover { transform: scale(1.12); }
.nav:active { transform: scale(.95); }
.nav.prev { left: 12px; }
.nav.next { right: 12px; }
.plate {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px;
  margin-top: 16px; padding: 0 4px;
}
.plate-count { font: 14px/1 var(--pixel); color: #fff8; grid-row: span 2; align-self: center; }
.plate-name { font: 400 clamp(20px, 2.2vw, 30px)/1 var(--display); color: var(--sun); }
.plate-note { font: 600 15px/1.3 var(--body); color: #fffc; }
.plate.glitch { animation: glitch .35s steps(5); }
@keyframes glitch {
  0% { transform: translateX(-8px) skewX(-12deg); opacity: .3; filter: hue-rotate(90deg); }
  40% { transform: translateX(6px) skewX(8deg); opacity: 1; }
  100% { transform: none; filter: none; }
}
.dots { display: flex; gap: 8px; margin-top: 12px; padding: 0 4px; }
.dots button { width: 14px; height: 14px; border: 2px solid var(--sun); background: transparent; cursor: pointer; padding: 0; }
.dots button[aria-selected="true"] { background: var(--sun); }
.boom {
  position: absolute; left: -8%; top: -12%; width: 116%; height: 110%;
  z-index: 6; pointer-events: none; image-rendering: pixelated;
}

/* ---------- 6 · cierre ---------- */
.final { opacity: var(--t); transform: scale(calc(1.25 - var(--t) * .25)); }
.mission { font: 18px/1 var(--pixel); letter-spacing: 4px; color: var(--cream); }
.start {
  font: 400 clamp(64px, 12vw, 190px)/.9 var(--display); color: var(--sun);
  text-shadow: 0 6px 0 var(--ember), 0 12px 0 #000;
  animation: pulse 1s steps(2) infinite;
}
@keyframes pulse { 50% { color: #fff; } }
.logo.small { font-size: clamp(34px, 5vw, 70px); margin-top: 3vh; }
.soon { font: 13px/1.6 var(--pixel); letter-spacing: 2px; color: var(--sun); }
.foot {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 6; text-align: center;
  font: 11px/1.6 var(--pixel); color: #fff6; padding: 0 16px;
  opacity: var(--p);
}

/* ---------- the speakers: Mamba (izquierda) y Krank (derecha) ---------- */
.speaker {
  --art: clamp(200px, 42vh, 410px);
  position: fixed; bottom: 0; z-index: 80; width: 0; height: 0;
  pointer-events: none;
}
/* whoever is talking is drawn over the other one, so a dimmed bust never covers a speech box */
.speaker.is-dim { z-index: 79; }
.speaker.is-talking, .speaker.is-in:not(.is-dim) { z-index: 81; }
.speaker.mamba { left: 0; }
.speaker.krank { right: 0; }
.speaker-art {
  position: absolute; bottom: 0; width: var(--art); max-width: none;
  filter: drop-shadow(0 0 18px #0008);
  transition: transform .6s cubic-bezier(.3, 1.35, .5, 1), filter .3s;
  /* The bust is cut flat at the bottom and, below the head, on its inner side. Fade those edges:
     (keep the head) + (fade the inner side), then intersect with a fade at the bottom. */
  --keep: 52%;
  --edges: linear-gradient(to top, #0000, #000 14%),
           linear-gradient(#000 var(--keep), #0000 calc(var(--keep) + 12%)),
           linear-gradient(to right, #000 68%, #0000 97%);
  -webkit-mask-image: var(--edges);
  -webkit-mask-composite: source-in, source-over;
  mask-image: var(--edges);
  mask-composite: intersect, add;
}
.krank .speaker-art { --keep: 70%; }
.mamba .speaker-art { left: 0; transform: translateX(-110%); }
.krank .speaker-art { right: 0; transform: scaleX(-1) translateX(-110%); }
.mamba.is-in .speaker-art { transform: none; }
.krank.is-in .speaker-art { transform: scaleX(-1); }
.is-dim .speaker-art { filter: brightness(.4) saturate(.5) drop-shadow(0 0 18px #0008); }

.speech {
  position: absolute; bottom: 30px; z-index: 1;
  width: min(600px, calc(100vw - var(--art) * .62 - 40px));
  padding: 26px 24px 20px;
  background: #140c07f4;
  border: 4px solid var(--sun);
  box-shadow: 0 0 0 4px #000, 12px 12px 0 #000a;
  opacity: 0; transform: translateY(24px) scale(.92);
  transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.mamba .speech { left: calc(var(--art) * .62); transform-origin: left bottom; }
.krank .speech { right: calc(var(--art) * .62); transform-origin: right bottom; border-color: var(--blood); background: #1a0505f4; }
.is-in .speech { opacity: 1; transform: none; transition-delay: .25s; }
.is-dim .speech { opacity: 0; transform: translateY(24px) scale(.92); transition-delay: 0s; }
.bump .speech { animation: bump .3s; }
@keyframes bump { 40% { transform: scale(1.04); } }
.speech-name {
  position: absolute; top: -17px; left: 18px;
  padding: 6px 10px; background: var(--sun); color: var(--ink);
  font: 13px/1 var(--pixel); letter-spacing: 1px;
  box-shadow: 3px 3px 0 #000;
}
.krank .speech-name { left: auto; right: 18px; background: var(--blood); color: #fff; }
.speech-text { font: 600 19px/1.45 var(--body); min-height: 2.9em; }
.speech-text::after { content: '▌'; color: var(--sun); animation: blink .8s steps(2) infinite; margin-left: 2px; }
.krank .speech-text { font-weight: 700; }
.krank .speech-text::after { color: #ff6b6b; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .topbar { padding: 12px 16px; font-size: 11px; }
  .freq { display: none; }
  .chip { margin-left: auto; }

  .speaker { --art: 150px; }
  .speaker-art { bottom: 88px; }
  .speech { position: fixed; left: 10px !important; right: 10px !important; bottom: 10px; width: auto; padding: 22px 16px 14px; }
  .speech-text { font-size: 15px; min-height: 4.35em; }
  .speech-name { font-size: 11px; }

  .isl-title { left: 16px; top: 12vh; }
  .isl-sub { left: 16px; top: calc(12vh + 100px); font-size: 17px; }
  .postcard { left: 6vw; right: auto; top: 37vh; width: 88vw; padding: 8px 8px 34px; }
  .postcard figcaption { font-size: 11px; bottom: 10px; }
  .pc-stamp { font-size: 10px; padding: 6px 8px; right: -6px; }

  .portal { --size: min(72vw, 38vh); left: 50%; top: 11vh; translate: -50% 0; }
  .krank-name { left: 16px; right: 16px; top: calc(13vh + min(72vw, 38vh)); width: auto; transform: translateY(calc((1 - var(--t)) * 10vh)); }
  .krank-name h2 { font-size: 50px; margin: 6px 0 8px; text-shadow: 4px 4px 0 var(--blood), 8px 8px 0 #000; }
  .warn-top { top: 46px; }
  .warn-bottom { display: none; }

  .member-art { right: auto; left: 50%; bottom: auto; top: 9vh; width: min(80vw, 42vh); translate: -50% 0; }
  .lola .member-art { bottom: auto; width: min(76vw, 40vh); }
  .member-art.tank { bottom: auto; top: 12vh; width: 88vw; }
  .dossier {
    left: 16px; right: 16px; top: auto; bottom: 15vh; width: auto;
    padding: 14px 16px 16px;
    transform: translateY(calc((1 - var(--in)) * 50vh)) translateX(calc(var(--out) * -100vw)) rotate(calc(1deg - var(--in) * 2deg));
  }
  .dossier h3 { font-size: 20px; margin: 10px 0 8px; }
  .dossier dl { font-size: 13px; }
  .kit { margin-top: 10px; gap: 4px; }
  .kit li { font-size: 12px; }
  .kit b { font-size: 13px; display: inline; margin-right: 6px; }
  .stamp { font-size: 18px; bottom: 12px; right: 12px; }
  .face-peek { display: none; }

  .gp-title { left: 16px; right: 16px; top: 14vh; }
  .pills li { font-size: 13px; }
  .monitor-wrap { width: 92vw; top: 16vh; }
  .monitor { border-width: 8px; border-radius: 12px; }
  .nav { width: 36px; height: 36px; font-size: 12px; }
  .nav.prev { left: 6px; } .nav.next { right: 6px; }
  .plate-note { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}