/* PGK Web Motion v3, módulo de scroll por actos (pgk-scroll.css).
 * Reescritura nativa de scroll-craft (MIT, Nate Herk). Ver ../NOTICE.md.
 *
 * Solo mecanismo. No hay tarjetas, píldoras ni escala tipográfica: la
 * composición y la tipografía las pone cada página (pgk-web-art-direction).
 * Regla de base: SIN la clase .pgk-scroll-ready (sin JS, o si el módulo
 * falla) todo el texto es visible y en orden de lectura.
 */

:root {
  /* Tokens por defecto de PGK Hiszpania. Otra marca los sobrescribe con su
     paleta; la paleta crema/papel está prohibida. */
  --pgk-canvas: #121f1b;
  --pgk-ink: #f3efe7;
  --pgk-ink-soft: #9ab4ac;
  --pgk-accent: #dccbb3;
  --pgk-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --pgk-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pgk-z-stage: 1;
  --pgk-z-copy: 20;
  --pgk-z-chrome: 60;
}

/* Sin scroll-behavior: smooth global. El scroll suave es opt-in
   (data-pgk-smooth de pgk-motion.js). */
body {
  background: var(--pgk-canvas);
}

/* ---------------------------------------------------------------- escenario */
.pgk-act--pinned {
  position: relative;
}

/* Sin JS el escenario es un bloque normal que crece con su texto: nada se
   recorta. Con el módulo activo se fija y mide un viewport. */
.pgk-stage,
[data-pgk-stage] {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  z-index: var(--pgk-z-stage);
}

.pgk-scroll-ready .pgk-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}

:is(.pgk-stage, [data-pgk-stage]) :is(video[data-pgk-scrub], canvas[data-pgk-sequence], .pgk-stage__poster) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* El vídeo y el canvas solo se ven cuando hay un frame real pintado. Hasta
   entonces, y siempre con reduced motion, manda el póster. */
video[data-pgk-scrub],
canvas[data-pgk-sequence] {
  opacity: 0;
  transition: opacity 380ms var(--pgk-ease-out);
}
.pgk-has-clip video[data-pgk-scrub],
video[data-pgk-scrub].pgk-has-clip,
canvas[data-pgk-sequence].pgk-has-frame {
  opacity: 1;
}
.pgk-stage__poster {
  z-index: 0;
  transition: opacity 380ms var(--pgk-ease-out);
}
.pgk-has-clip .pgk-stage__poster {
  opacity: 0;
}

/* ------------------------------------------------------------------- scrims
   Densidad solo donde está el texto. Nunca un velo a pantalla completa. */
.pgk-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    var(--pgk-scrim-angle, 180deg),
    color-mix(in oklab, var(--pgk-canvas) var(--pgk-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--pgk-canvas) 30%, transparent) 42%,
    transparent 68%
  );
}
.pgk-scrim--bottom { --pgk-scrim-angle: 0deg; }
.pgk-scrim--left { --pgk-scrim-angle: 90deg; }
.pgk-scrim--right { --pgk-scrim-angle: 270deg; }
.pgk-scrim--lead,
.pgk-scrim--trail,
.pgk-scrim--band {
  background: linear-gradient(
    var(--pgk-scrim-dir),
    color-mix(in oklab, var(--pgk-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--pgk-canvas) 72%, transparent) 26%,
    color-mix(in oklab, var(--pgk-canvas) 30%, transparent) 46%,
    transparent 64%
  );
}
.pgk-scrim--lead { --pgk-scrim-dir: to top right; }
.pgk-scrim--trail { --pgk-scrim-dir: to top left; }
.pgk-scrim--band { --pgk-scrim-dir: to top; }

/* ------------------------------------------------------------- bloques copy
   Sin JS: los bloques van en columna, en flujo, sobre el póster. Con JS: se
   anclan en el escenario. max-width en rem, nunca en ch (el ch del contenedor
   se resuelve con el cuerpo de texto, no con el titular). */
.pgk-copy {
  position: relative;
  z-index: var(--pgk-z-copy);
  max-width: min(46rem, 100%);
  margin: 0 var(--pgk-gutter);
  padding-block: 2rem;
}
.pgk-scroll-ready .pgk-copy {
  position: absolute;
  margin: 0;
  padding: 0;
  inset-inline: var(--pgk-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.pgk-scroll-ready .pgk-copy--lead {
  left: var(--pgk-gutter);
  bottom: clamp(3rem, 12vh, 9rem);
}
/* inset-inline auto antes de left: 50%, o el bloque se va del borde. */
.pgk-scroll-ready .pgk-copy--center {
  inset-inline: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  text-align: center;
}
.pgk-scroll-ready .pgk-copy--trail {
  inset-inline: auto;
  right: var(--pgk-gutter);
  bottom: clamp(3rem, 12vh, 9rem);
  text-align: right;
}

/* ---------------------------------------------------------------------- cues
   Se ocultan SOLO con el módulo activo. Sin transición: el motor escribe
   opacidad por frame y una transición la haría ir con retraso. */
.pgk-scroll-ready [data-pgk-cue] {
  opacity: 0;
  transition: none;
  will-change: opacity, transform;
}
.pgk-split {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
/* La máscara de línea se come los rabos de g, y, p, j. El padding los salva. */
.pgk-split--line {
  display: block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.pgk-split-word {
  display: inline-block;
  white-space: nowrap;
}
.pgk-split__i {
  display: inline-block;
  will-change: transform, opacity;
}
.pgk-is-split {
  opacity: 1 !important;
}
/* Copia accesible del texto partido: la lee el lector de pantalla, no se ve
   y no entra al copiar (lo visible ya lleva el mismo texto). */
.pgk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  user-select: none;
}

/* --------------------------------------------------------------- dispositivos */
[data-pgk-pan] {
  display: flex;
}
.pgk-scroll-ready [data-pgk-pan] {
  will-change: transform;
}
.pgk-scroll-ready [data-pgk-wipe] {
  will-change: clip-path;
}
.pgk-scroll-ready [data-pgk-parallax] {
  will-change: transform;
  max-width: none;
}
:where([data-pgk-count]) {
  font-variant-numeric: tabular-nums;
}
[data-pgk-tilt] {
  transform-style: preserve-3d;
}
/* :where() a propósito: un position: relative con peso normal ganaría a
   .pgk-stage y el escenario dejaría de ser sticky. */
[data-pgk-spotlight] {
  isolation: isolate;
}
:where([data-pgk-spotlight]) {
  position: relative;
}
[data-pgk-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--pgk-mx, 0.5) * 100%) calc(var(--pgk-my, 0.5) * 100%),
    color-mix(in oklab, var(--pgk-accent) 16%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 420ms var(--pgk-ease-out);
}
[data-pgk-spotlight]:hover::after {
  opacity: 1;
}

[data-pgk-progress] {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--pgk-z-chrome);
  background: var(--pgk-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ------------------------------------------------------------ sin movimiento
   Menos y más suave, no cero. La opacidad sigue contando la historia; los
   desplazamientos se van. El raíl lateral se devuelve como scroll horizontal
   normal: su transform ES su navegación y quitarlo dejaría contenido fuera. */
@media (prefers-reduced-motion: reduce) {
  [data-pgk-parallax],
  [data-pgk-pan],
  .pgk-split__i {
    transform: none !important;
  }
  [data-pgk-wipe] {
    clip-path: none !important;
  }
  [data-pgk-act="pan"] :is(.pgk-stage, [data-pgk-stage]) {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-pgk-pan] > * {
    scroll-snap-align: center;
  }
  [data-pgk-spotlight]::after {
    display: none;
  }
}

/* -------------------------------------------------------------------- móvil */
@media (max-width: 860px) {
  .pgk-scroll-ready .pgk-copy {
    inset-inline: var(--pgk-gutter);
    max-width: none;
  }
  .pgk-scroll-ready .pgk-copy--trail {
    text-align: left;
  }
  /* Entre gutters el centrado horizontal ya no hace falta: quitar la mitad
     de -50% en x o el bloque se sale por la izquierda. */
  .pgk-scroll-ready .pgk-copy--center {
    left: auto;
    inset-inline: var(--pgk-gutter);
    translate: 0 -50%;
  }
  /* El trail pasa a la izquierda: su degradado de esquina oscurecería la
     esquina que el texto acaba de dejar. Banda inferior en su lugar. */
  .pgk-scrim--trail,
  .pgk-scrim--lead {
    --pgk-scrim-dir: to top;
  }
}