/* ANIMEX · Entrar en el anime. Blanco y negro: el color lo ponen los mundos. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
:root {
  --ink: #000; --tx: #f1f1f1; --tx2: rgb(241 241 241 / .72); --line: rgb(255 255 255 / .16);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-cam: cubic-bezier(.65, 0, .2, 1);
  --gut: clamp(20px, 4.2vw, 64px);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--ink); color: var(--tx); font-family: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; contain: paint; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.worlds, .world { position: absolute; inset: 0; overflow: clip; }
.world { visibility: hidden; opacity: 0; }
.world.on { visibility: visible; opacity: 1; }
.layer { position: absolute; inset: -6%; will-change: transform; }
.layer svg { display: block; width: 100%; height: 100%; }

/* Atmósfera: una sola capa por mundo se mueve despacio, y solo la del mundo en pantalla */
.amb-drift svg { animation: drift 46s ease-in-out infinite alternate; }
.amb-bob svg { animation: bob 7s ease-in-out infinite alternate; transform-origin: 70% 75%; }
.amb-fall svg { animation: fall 38s ease-in-out infinite alternate; }
.world:not(.on) .layer svg, .paused .layer svg { animation-play-state: paused; }
@keyframes drift { to { transform: translate3d(-3.5%, 0, 0); } }
@keyframes bob { to { transform: translate3d(0, 1.4%, 0) rotate(.5deg); } }
@keyframes fall { to { transform: translate3d(-2%, 4%, 0); } }

/* Luz para que el texto se lea siempre, sin tapar el mundo */
.shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to top, rgb(0 0 0 / .88) 0, rgb(0 0 0 / .55) 26%, transparent 58%),
  linear-gradient(to right, rgb(0 0 0 / .62), rgb(0 0 0 / .28) 38%, transparent 62%),
  linear-gradient(to left, rgb(0 0 0 / .4), transparent 22%),
  linear-gradient(to bottom, rgb(0 0 0 / .5), transparent 22%); transition: opacity .6s; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 58%, #fff 0, rgb(255 255 255 / .45) 35%, transparent 70%); }
/* Barras de cine: el encuadre se cierra cuando eliges */
.bar { position: absolute; left: 0; right: 0; height: 0; background: #000; pointer-events: none; z-index: 3; }
.bar-t { top: 0; } .bar-b { bottom: 0; }
.locked .bar { height: 9vh; transition: height .9s var(--ease-cam); }
.stage:not(.locked) .bar { transition: height .6s var(--ease-out); }

.top { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(18px, env(safe-area-inset-top)) var(--gut) 0; }
.mark { width: 36px; height: 36px; object-fit: contain; }
.top-links { display: flex; align-items: center; gap: 4px; margin-right: -14px; }
.top-links .skip { margin-right: 0; }
.skip { font-size: 13px; font-weight: 600; color: var(--tx2); text-decoration: none; padding: 10px 14px; margin-right: -14px; border-radius: 999px; transition: color .2s, background .2s; }
.skip:hover { color: #fff; background: rgb(255 255 255 / .1); }

/* Texto editorial: aparece en orden, de abajo arriba */
.copy, .confirm { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px)); max-width: 880px; }
.r { opacity: 0; transform: translate3d(0, .7em, 0); transition: opacity .25s, transform .25s; }
.on-copy .r { opacity: 1; transform: none; transition: opacity .6s calc(var(--i) * 80ms), transform .9s var(--ease-out) calc(var(--i) * 80ms); }
.kicker { text-shadow: 0 1px 12px rgb(0 0 0 / .8); display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tx2); }
.kicker i { width: 36px; height: 1px; background: var(--line); background: rgb(255 255 255 / .5); }
.title { margin-top: 14px; font-size: clamp(48px, 10.5vw, 148px); font-weight: 800; line-height: .94; letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 2px 40px rgb(0 0 0 / .35); }
.line { text-shadow: 0 1px 18px rgb(0 0 0 / .7); margin-top: 18px; max-width: 34ch; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; color: var(--tx2); text-wrap: pretty; }
.cta { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.go { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; font-size: 15px; transition: transform .2s var(--ease-out), box-shadow .2s; }
.go svg { width: 20px; height: 20px; transition: transform .25s var(--ease-out); }
.go:hover svg { transform: translateX(4px); }
.go:active { transform: scale(.97); }
.ghost { height: 52px; padding: 0 8px; font-weight: 600; font-size: 14px; color: var(--tx2); }
.ghost:hover { color: #fff; }
.hint { font-size: 12px; color: rgb(241 241 241 / .5); }

/* Carril de mundos */
.rail { position: absolute; z-index: 4; right: var(--gut); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; align-items: flex-end; transition: opacity .4s; }
.rail button { text-shadow: 0 1px 10px rgb(0 0 0 / .85); display: flex; align-items: center; gap: 14px; padding: 9px 0 9px 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(241 241 241 / .5); transition: color .25s; }
.rail button span { opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .35s var(--ease-out); pointer-events: none; }
.rail button i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: width .4s var(--ease-out), background .25s; }
.rail button:hover, .rail button[aria-current="true"] { color: #fff; }
.rail button:hover span, .rail button[aria-current="true"] span { opacity: 1; transform: none; }
.rail button[aria-current="true"] i { width: 44px; }
.locked .rail, .locked .top, .locked .prov { opacity: 0; pointer-events: none; transition: opacity .3s; }

.prov { position: absolute; z-index: 4; right: var(--gut); bottom: max(14px, env(safe-area-inset-bottom)); font-size: 11px; letter-spacing: .04em; color: rgb(241 241 241 / .5); }

/* Confirmación: la escena se oscurece y queda tu mundo */
.confirm { z-index: 5; }
.confirm[hidden] { display: none; }
.confirm::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 100%, rgb(0 0 0 / .9), rgb(0 0 0 / .62) 60%, rgb(0 0 0 / .5)); opacity: 0; transition: opacity .7s; }
.confirm.on-copy::before { opacity: 1; }

@media (max-width: 720px) {
  .rail { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); left: var(--gut); right: auto; transform: none; flex-direction: row; gap: 2px; align-items: center; }
  .rail button { padding: 14px 6px; }
  .rail button span { display: none; }
  .rail button i { width: 14px; } .rail button[aria-current="true"] i { width: 30px; }
  .copy, .confirm { bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); }
  .hint { display: none; }
  .prov { display: none; }
  .go { height: 54px; }
}
@media (max-height: 520px) and (orientation: landscape) { .title { font-size: clamp(36px, 9vh, 80px); } .line { display: none; } .copy, .confirm { bottom: 28px; } }

/* Sin movimiento: se cambia de mundo con un fundido corto y no hay parallax ni atmósfera */
@media (prefers-reduced-motion: reduce) {
  .amb-drift svg, .amb-bob svg, .amb-fall svg { animation: none; }
  .on-copy .r { transition: opacity .3s; transform: none; }
  .r { transform: none; }
  .locked .bar { height: 0; }
}

/* Imagen del mundo: ocupa la capa entera y se encuadra donde está el sujeto */
.layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot { position: absolute; inset: -6%; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Entrada: negro, el logo, y los mundos pasan como cortes de cámara hasta quedarse el primero */
.intro { position: absolute; inset: 0; z-index: 10; background: #000; overflow: hidden; }
.intro[hidden] { display: none; }
.cuts, .cut { position: absolute; inset: 0; }
.cut { will-change: clip-path; }
.intro-logo { position: absolute; left: 50%; top: 50%; width: min(52vw, 340px); height: auto; translate: -50% -50%; opacity: 0; }
.intro-skip { position: absolute; z-index: 2; right: var(--gut); bottom: max(18px, env(safe-area-inset-bottom)); height: 44px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tx2); background: rgb(0 0 0 / .45); border: 1px solid var(--line); }
.intro-skip:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }