/* ── Respaldo: navegadores sin scroll-driven animations ───────── */
.reveal{opacity:0;transform:translateY(64px) scale(.96);transition:opacity var(--speed-slow) var(--ease),transform var(--speed-slow) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ── Motor nativo ─────────────────────────────────────────────── */
@supports (animation-timeline: view()){
  .reveal{
    opacity:1;transform:none;transition:none;
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 95%;
  }
  @keyframes rise{
    from{opacity:0;transform:translateY(64px) scale(.96);filter:blur(5px)}
    to  {opacity:1;transform:none;filter:blur(0)}
  }
  /* Primera pantalla: sin desenfoque, no se puede mostrar borroso al cargar */
  .home-hero .reveal{animation:riseFlat linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes riseFlat{
    from{opacity:0;transform:translateY(28px)}
    to  {opacity:1;transform:none}
  }

  .reveal-stagger>*{
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 30%;
  }
  .reveal-stagger>:nth-child(2){animation-range:entry 8% cover 33%}
  .reveal-stagger>:nth-child(3){animation-range:entry 11% cover 36%}
  .reveal-stagger>:nth-child(4){animation-range:entry 14% cover 39%}
  .reveal-stagger>:nth-child(5){animation-range:entry 17% cover 42%}
  .reveal-stagger>:nth-child(6){animation-range:entry 20% cover 45%}

  .scene-zoom{
    animation:zoom linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 35%;
  }
  @keyframes zoom{
    from{transform:scale(.9);opacity:.5}
    to  {transform:scale(1);opacity:1}
  }

 
}

/* ── Titular por líneas con máscara ──────────────────────────── */
.split-lines .line{display:block;overflow:hidden;padding-block:.14em;margin-block:-.14em}
.split-lines .line>span{display:block}
@supports (animation-timeline: view()){
  .split-lines .line>span{
    animation:lineUp linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 22%;
  }
  .split-lines .line:nth-child(2)>span{animation-range:entry 3% cover 25%}
  .split-lines .line:nth-child(3)>span{animation-range:entry 6% cover 28%}
  .split-lines .line:nth-child(4)>span{animation-range:entry 9% cover 31%}
  .split-lines .line:nth-child(5)>span{animation-range:entry 12% cover 34%}
  @keyframes lineUp{
    from{transform:translateY(105%)}
    to  {transform:none}
  }
}
@media (prefers-reduced-motion: reduce){
  .split-lines .line>span{animation:none!important;transform:none!important}
}

/* ── Fondo que muta con el scroll ────────────────────────────── */
.bg-morph{position:fixed;inset:0;z-index:-1;background:var(--ink);opacity:0;pointer-events:none}
@supports (animation-timeline: view()){
  body{timeline-scope:--showcase}
  .dark-showcase{view-timeline-name:--showcase}
  .site-header.is-sticky{animation:hdrDark linear both;animation-timeline:--showcase;animation-range:cover 0% cover 100%}
  .site-header.is-sticky .site-logo img{animation:hdrLogo linear both;animation-timeline:--showcase;animation-range:cover 0% cover 100%}
  @keyframes hdrDark{
    0%,16%{background-color:rgba(247,246,243,.92);color:var(--ink)}
    28%,72%{background-color:rgba(16,16,16,.92);color:#fff}
    84%,100%{background-color:rgba(247,246,243,.92);color:var(--ink)}
  }
  @keyframes hdrLogo{
    0%,16%{filter:none}
    28%,72%{filter:brightness(0) invert(1)}
    84%,100%{filter:none}
  }
  .bg-morph{
    animation:bgIn linear both;
    animation-timeline:--showcase;
    animation-range:cover 0% cover 100%;
  }
  @keyframes bgIn{
    0%{opacity:0} 22%{opacity:1} 78%{opacity:1} 100%{opacity:0}
  }
}
@media (prefers-reduced-motion: reduce){
  .bg-morph{animation:none!important;opacity:0!important}
  .site-header.is-sticky,.site-header.is-sticky .site-logo img{animation:none!important}
}

/* ── Marquesina ───────────────────────────────────────────────── */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Respeto a la preferencia del sistema ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .scene{height:auto!important}
  .scene-sticky{position:static!important;height:auto!important}
  .scene-zoom{animation:none!important;transform:none!important}
  .marquee{animation:none!important}
}