/* ==========================================================================
   ThePitchLab — core.css
   Mecánica de movimiento reutilizable que acompaña a core.js.
   Extraído y generalizado de work/halden.

   Aquí SOLO hay comportamiento visual genérico: transiciones, escalonados,
   keyframes y utilidades de animación. NO hay colores de marca, tipografías,
   tamaños de texto, grids ni layout — todo eso lo pones en el CSS de tu sitio.

   Las clases marcadas con color/tamaño DELIBERADAMENTE los dejan a tu CSS:
   p. ej. una barra de progreso aquí solo transiciona su width; el alto y el
   color los defines tú.

   --------------------------------------------------------------------------
   ÍNDICE
     1) reveals            .reveal / .wipe / .d1..d4   (con core.js -> .reveals)
     2) texto por scroll   .ch                          (-> .scrollText)
     3) barras de progreso [data-progress-bar] / [data-scrolltext-bar]
     4) utilidades de anim .blink / .grainwrap + @keyframes
     5) accesibilidad      prefers-reduced-motion
   --------------------------------------------------------------------------
   Cómo se usa: incluye este archivo, marca el HTML con las clases/atributos y
   activa el módulo correspondiente de core.js. Ver core.js para el HTML.
   ========================================================================== */

/* ----- 1) reveals: aparición al entrar en viewport ------------------------ */
/* core.js añade la clase `on` cuando el elemento (o su grupo) entra en pantalla. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(.2, .7, .1, 1),
              transform 1.1s cubic-bezier(.2, .7, .1, 1);
}
.reveal.on { opacity: 1; transform: none; }

/* Escalonado: aplica .d1..d4 junto a .reveal para retrasar cada elemento. */
.d1 { transition-delay: .12s; }
.d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; }
.d4 { transition-delay: .48s; }

/* Variante "wipe": revela de abajo hacia arriba recortando el contenido. */
.wipe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1);
}
.wipe.on { clip-path: inset(0 0 0% 0); }

/* ----- 2) texto por scroll (scrollText): fundido por carácter ------------- */
/* core.js escribe la opacidad de cada .ch en función del scroll. Aquí solo se
   suaviza el cambio. El color/tipografía del texto los pones tú. */
.ch {
  white-space: pre-wrap;
  transition: opacity .25s linear;
}

/* ----- 3) barras de progreso --------------------------------------------- */
/* core.js escribe el width en %. Dale altura y color en tu CSS. La transición
   suave es opcional; quítala si prefieres que siga al scroll sin inercia. */
[data-progress-bar],
[data-scrolltext-bar] {
  width: 0;
  transition: width .12s linear;
}

/* ----- 4) utilidades de animación (opcionales) --------------------------- */
/* Parpadeo, p. ej. para un punto REC o un cursor. El color lo pones tú. */
.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Grano de película: overlay animado a pantalla completa. Sin color propio;
   combínalo con mix-blend-mode y un background de ruido en tu CSS. */
.grainwrap {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 60;
  animation: grain .9s steps(5) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ----- 5) accesibilidad --------------------------------------------------- */
/* Respeta a quien pide menos movimiento: los estados finales quedan visibles. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .wipe, .ch,
  [data-progress-bar], [data-scrolltext-bar] {
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .wipe { clip-path: none; }
  .blink, .grainwrap { animation: none !important; }
}