/* ==========================================================================
   Impacto — transiciones entre secciones y entradas con caracter
   El scroll anterior era plano: todo entraba igual, con el mismo fundido.
   Aqui cada seccion tiene su propia forma de aparecer, y el paso de una a
   otra se nota. Todo con animation-timeline, sin librerias ni JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Titulares que se revelan por palabras
   El texto sube desde detras de una linea invisible, como en un teleprompter.
   Se aplica a los h2 de seccion, que son los hitos de lectura.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {

  .titular-corte {
    /* El recorte es lo que hace el efecto: sin el, las palabras solo se
       desplazarian en vez de emerger de la nada. */
    display: block;
    overflow: hidden;
    padding-bottom: .12em;
  }

  .titular-corte > span {
    display: block;
    animation: emerger linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }

  @keyframes emerger {
    from { transform: translateY(105%) rotate(2.5deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }

  /* ------------------------------------------------------------------------
     2. Entrada con profundidad
     En vez del fade-up de siempre, el bloque llega desde el fondo con una
     pizca de perspectiva. Se nota que avanza hacia ti.
     ------------------------------------------------------------------------ */

  .llega {
    animation: llegada linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 28%;
    transform-origin: 50% 100%;
  }

  @keyframes llegada {
    from {
      opacity: 0;
      transform: perspective(1200px) translateY(46px) translateZ(-90px) rotateX(7deg);
    }
    to {
      opacity: 1;
      transform: perspective(1200px) translateY(0) translateZ(0) rotateX(0);
    }
  }

  /* ------------------------------------------------------------------------
     3. Rejillas que se montan pieza a pieza
     Cada hijo entra desplazado en su propio tramo de scroll, no por retardo
     de tiempo: asi el orden se respeta aunque el scroll sea rapido o vaya
     hacia atras.
     ------------------------------------------------------------------------ */

  .montaje > * {
    animation: pieza linear both;
    animation-timeline: view();
    animation-range:
      entry calc(2% + var(--i, 0) * 7%)
      cover calc(26% + var(--i, 0) * 7%);
  }

  @keyframes pieza {
    from { opacity: 0; transform: translateY(34px) scale(.965); }
    to   { opacity: 1; transform: none; }
  }

  /* ------------------------------------------------------------------------
     4. Panel que se endereza
     Para las maquetas de producto: llegan giradas y se enderezan conforme
     suben. Da sensacion de objeto fisico, no de imagen pegada.
     ------------------------------------------------------------------------ */

  .endereza {
    animation: enderezar linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
    will-change: transform;
  }

  @keyframes enderezar {
    from {
      opacity: .4;
      transform: perspective(1500px) rotateY(-9deg) rotateX(5deg) translateY(50px) scale(.94);
    }
    to {
      opacity: 1;
      transform: perspective(1500px) rotateY(0) rotateX(0) translateY(0) scale(1);
    }
  }

  /* Volteado para los bloques alternos, si no todos giran hacia el mismo lado */
  .endereza--espejo { animation-name: enderezar-espejo; }
  @keyframes enderezar-espejo {
    from {
      opacity: .4;
      transform: perspective(1500px) rotateY(9deg) rotateX(5deg) translateY(50px) scale(.94);
    }
    to {
      opacity: 1;
      transform: perspective(1500px) rotateY(0) rotateX(0) translateY(0) scale(1);
    }
  }

  /* ------------------------------------------------------------------------
     5. Fondo que reacciona al scroll
     La seccion oscura se aclara ligeramente segun avanza. Es sutil, pero
     hace que el paso entre secciones no sea un corte seco.
     ------------------------------------------------------------------------ */

  .respira::before {
    animation: respirar linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  @keyframes respirar {
    from { opacity: .35; transform: translateY(-8%) scale(1.1); }
    50%  { opacity: 1; transform: none; }
    to   { opacity: .5; transform: translateY(6%) scale(1.06); }
  }

  /* ------------------------------------------------------------------------
     6. Desplazamiento a distinta velocidad
     La columna de texto sube un poco mas despacio que la imagen. Es el unico
     parallax de la pagina y es de pocos pixeles: lo justo para dar relieve.
     ------------------------------------------------------------------------ */

  .flota {
    animation: flotar linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes flotar {
    from { transform: translateY(26px); }
    to   { transform: translateY(-26px); }
  }

  /* ------------------------------------------------------------------------
     7. Numeros y sellos que entran girando
     ------------------------------------------------------------------------ */

  .gira-entrada {
    animation: giro-entrada linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
  @keyframes giro-entrada {
    from { opacity: 0; transform: rotate(-12deg) scale(.7); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   Respaldo: sin scroll-driven, el JS marca `.revelado` y usamos transiciones
   normales. Nunca se queda nada invisible.
   -------------------------------------------------------------------------- */

@supports not (animation-timeline: view()) {
  .llega, .montaje > *, .endereza, .gira-entrada {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1),
                transform .7s cubic-bezier(.2, .8, .2, 1);
  }
  .llega.revelado, .montaje.revelado > *, .endereza.revelado, .gira-entrada.revelado {
    opacity: 1;
    transform: none;
  }
  .montaje.revelado > * { transition-delay: calc(var(--i, 0) * 70ms); }
}

/* --------------------------------------------------------------------------
   Sin movimiento: todo quieto y visible. Se retira el animation-timeline
   entero, porque con scroll-driven una duracion de 1ms no basta: el elemento
   se quedaria congelado en el fotograma que marque el scroll.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .titular-corte > span,
  .llega, .montaje > *, .endereza, .endereza--espejo,
  .respira::before, .flota, .gira-entrada {
    animation: none !important;
    animation-timeline: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}