/*
 * Scroll Sequence — estilos del runtime del export
 * ------------------------------------------------
 * Estilos mínimos y autocontenidos para el efecto de secuencia por scroll.
 * NO incluye reset global: solo afecta a las clases `.scroll-seq*` para no
 * interferir con los estilos de la web donde se incruste el bundle.
 */

/* Contenedor principal: su altura (en vh) define la distancia de scroll.
   El JS sobrescribe `height` con el valor de data-scroll. */
.scroll-seq {
  position: relative;
  width: 100%;
  /* Altura por defecto; el runtime la ajusta a data-scroll vh. */
  height: 300vh;
}

/* Capa fija: queda anclada al viewport mientras se recorre el contenedor. */
.scroll-seq__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Modo INLINE (data-mode="inline"): secuencia pequeña dentro de su contenedor.
   El contenedor toma su tamaño del aspecto del contenido (el runtime fija
   aspect-ratio); la capa interna NO se pinea, llena el contenedor. La secuencia
   avanza según el elemento pasa por el viewport. */
.scroll-seq--inline {
  height: auto;
  border-radius: inherit;
}
.scroll-seq--inline .scroll-seq__sticky {
  position: relative;
  top: auto;
  height: 100%;
  border-radius: inherit;
}

/* Modo FIXED (data-mode="fixed"): el canvas queda FIJO a pantalla completa (z:0)
   y avanza durante toda la zona de scroll del contenedor (cuya altura la define su
   contenido). El contenido va POR ENCIMA: dale a tus secciones position:relative y
   z-index:1 para que tapen/revelen la secuencia (aperturas, "agujeros"). El runtime
   oculta este canvas cuando la zona sale del viewport. */
.scroll-seq--fixed {
  position: relative;
  /* La altura de la zona la define su CONTENIDO (anula el height:300vh por defecto
     de .scroll-seq); si no, el contenido desborda y el progreso del canvas llega a 1
     antes de tiempo (la secuencia se congelaría a media zona). */
  height: auto;
}
.scroll-seq--fixed > .scroll-seq__sticky {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 0;
}

/* Canvas donde se pinta cada fotograma. Ocupa toda la capa sticky.
   El tamaño del backing-store lo gestiona el JS (display * devicePixelRatio). */
.scroll-seq__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Posicionado con z-index propio para poder intercalar capas: una capa
     .scroll-seq__behind queda por DEBAJO (z:0) y el overlay por ENCIMA (z:2). */
  position: relative;
  z-index: 1;
}

/* Capa opcional DETRÁS del canvas (efecto "weaving"): el sujeto recortado con
   alfa pasa por DELANTE de lo que haya aquí y por DETRÁS del overlay. El runtime
   la reubica como primer hijo de .scroll-seq__sticky. */
.scroll-seq__behind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.scroll-seq__behind [data-from] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Capa de superposición opcional (textos/escenas) sobre el canvas pineado.
   El runtime la reubica dentro de .scroll-seq__sticky. Los hijos con
   data-from/data-to hacen fade in/out automático según el progreso del scroll. */
.scroll-seq__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* deja pasar el ratón al canvas… */
  overflow: hidden;
}
.scroll-seq__overlay a,
.scroll-seq__overlay button {
  pointer-events: auto; /* …salvo en elementos interactivos */
}
.scroll-seq__overlay [data-from] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Loader: overlay centrado con barra de progreso durante la precarga. */
.scroll-seq__loader {
  position: absolute;
  inset: 0;
  z-index: 3; /* por encima del overlay mientras dura la precarga */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #0b0b0c;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  transition: opacity 0.35s ease;
}

/* Oculta el loader al terminar la precarga. */
.scroll-seq__loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Riel de la barra de progreso. */
.scroll-seq__loader-track {
  width: 200px;
  max-width: 60vw;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

/* Relleno de la barra; su ancho lo actualiza el JS (0%..100%). */
.scroll-seq__loader-bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: #fff;
  transition: width 0.15s ease;
}

/* Texto del porcentaje de carga. */
.scroll-seq__loader-text {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.85;
}