/* ImproveFit · heroe con scroll — solo lo carga la portada
   Generado desde el index monolitico de agosto. No editar a mano sin avisar. */

/* ============================================================
   HÉROE SCRUB
   ============================================================ */
/* 220vh deja 120vh de recorrido real. El vídeo se recortó en la misma
   proporción (34 fotogramas), así que el ritmo de la cámara por píxel
   es el mismo de antes: solo hay que bajar la mitad para verlo entero. */
.hero{position:relative;height:220vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.stage__poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity 1s var(--ease)}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-ready .stage__poster{opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 62% 45%,rgba(10,10,18,0) 30%,rgba(10,10,18,.66) 100%)}
.scrim--left{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,13,.80) 0%,rgba(8,9,13,.60) 34%,
    rgba(8,9,13,.26) 52%,rgba(8,9,13,0) 72%)}

.ring{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);
  width:44px;height:44px;color:var(--accent);opacity:.9;
  transition:opacity .5s var(--ease)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .12s linear}
.cue{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);opacity:0;transition:opacity .6s var(--ease);text-align:center}
.stage.video-ready .cue{opacity:.75;animation:cueBreathe 4.6s var(--ease-soft) -1.4s infinite}
@keyframes cueBreathe{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

.bands{position:absolute;inset:0;pointer-events:none}
/* el contenedor va en px: un tope en ch aquí se mediría con la fuente de cuerpo,
   no con la display que lleva dentro */
.band{position:absolute;left:clamp(1.4rem,7vw,7.5rem);top:50%;transform:translateY(-50%);
  width:min(640px,54vw);opacity:0;text-shadow:var(--tshadow)}
/* --sa es el alfa de pico del velo de cada banda, afinado contra SU peor fotograma */
.band::before{content:"";position:absolute;inset:-54% -36% -54% -72%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 88% 76% at 40% 50%,
    rgba(5,5,10,var(--sa,.70)) 0%,
    rgba(5,5,10,calc(var(--sa,.70)*.68)) 48%,
    rgba(5,5,10,0) 80%)}
/* El tramo que se conserva del vídeo es más claro que el antiguo arranque,
   así que los velos suben. Los valores salen de medir el peor fotograma. */
.band--1{--sa:.80}
.band--2{--sa:.86}
.band h1,.band h2,.band p{position:relative}
.band h1,.band h2{font-size:clamp(2.1rem,4.55vw,4.15rem);max-width:19ch;text-wrap:balance;
  font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.015em;margin:0}
.band .sub{margin-top:1.3rem;font-size:clamp(1rem,1.28vw,1.16rem);color:#DCD8D1;max-width:40ch}
.band .cta-row{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.85rem;pointer-events:auto}
.band .btn{text-shadow:none}
.band--2 h1{max-width:15ch}

/* letras y palabras partidas */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter */
[data-entrance="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* (f) drift-down */
[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
/* (c) blur-to-sharp */
[data-entrance="blur"] .layer{display:block}
[data-entrance="blur"] .layer--soft{position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));pointer-events:none}
[data-entrance="blur"] .layer--sharp{opacity:var(--k,0)}
[data-entrance="blur"] h2{position:relative}
/* (d) word-punch con overshoot */
[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
[data-entrance="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) settle en tres llegadas */
[data-entrance="settle"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px))}
[data-entrance="settle"] .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
[data-entrance="settle"] .cta-row{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}

/* ============================================================
   HÉROE ESTÁTICO (móvil, tablet en vertical, motion reducido)
   ============================================================ */
.static-hero{display:none;position:relative;min-height:100svh;
  padding:8.5rem clamp(1.3rem,6vw,3rem) 4.5rem;
  align-items:flex-end;background-size:cover;background-position:center;
  /* Ruta SIN "assets/": en CSS, url() se resuelve respecto a la hoja, no a
     la pagina. Esta hoja ya vive dentro de assets/. */
  background-image:linear-gradient(180deg,rgba(10,11,15,.55) 0%,rgba(10,11,15,.2) 32%,rgba(10,11,15,.88) 100%),url("hero-ending.jpg")}
.static-hero__in{position:relative;width:100%}
.static-hero h1{font-size:clamp(2.35rem,8.6vw,3.5rem);max-width:14ch;text-shadow:var(--tshadow)}
.static-hero .sub{margin-top:1.15rem;color:#DCD8D1;max-width:34ch;text-shadow:var(--tshadow)}
.static-hero .cta-row{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.8rem}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
}
@media (max-height:560px){.cue,.ring{display:none}}