@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · SEC-03 · ACTO 3 «El momento exacto» (el queso)
   Fichero: web/estilos/sec-03.css        Frente: S03 (bloque F2-secciones, acto 3)
   -----------------------------------------------------------------------------------------
   QUÉ ES ESTO: la piel del valle. El acto 3 es el acto CORTO Y CALLADO de la página a
   propósito (BRIEF §10: es el silencio que le da algo de donde caer al pico del acto 4).
   Un solo texto y animación mínima: el barrido (wipe) que cambia el estado de la foto
   (loncha entera > queso fundido cubriendo la carne) y una microanimación de brillo.
   Las dos las mueve el SCROLL: aquí no hay nada que lata solo.

   CÓMO SE MUEVE (sin JS propio; el motor no se edita):
   · El barrido: [data-sc-reveal] sobre la capa del fundido. El motor escribe su
     clip-path desde el progreso del acto; el tramo (0,3 > 0,7) lo declara el fragmento
     (data-sc-reveal-at). La dirección «up» descubre el fundido desde arriba: el queso
     que cae y cubre.
   · El brillo: este fichero deriva --a3-t del --sc-p que el motor publica en #acto-3
     (el mismo tramo 0,3 > 0,7, normalizado) y lo gasta en transform/opacity. Si el
     motor no está, --sc-p cae a 0 y el brillo queda apagado: la foto y el texto siguen
     ahí, legibles.

   REGLAS DEL BLOQUE: 0 HEX (todo var(--…) de tokens.css o color-mix de tokens); sin
   transition: all; solo se animan transform/opacity/clip-path; clases con prefijo a3-;
   ninguna clase .esq-* (el andamio se retira).
   ========================================================================================= */

/* ---- Tramo del acto: el motor publica --sc-p (0..1) en el elemento del acto ---------- */
#acto-3 {
  /* 0,3 = el marco entra en pantalla · 0,7 = el marco se está yendo.
     Es el mismo tramo declarado en el fragmento (data-sc-reveal-at="0.3 0.7"). */
  --a3-t: clamp(0, calc((var(--sc-p, 0) - .3) / .4), 1);
}

/* ---- El primer plano: la foto a sangre, con el barrido ------------------------------ */
#acto-3 .a3-cine {
  position: relative;
  margin: 0;
  width: 100%;
  /* El acto corto: una banda generosa, no una pantalla entera (BRIEF §8.1: presupuesto 0,8). */
  height: 60svh;
  overflow: hidden;                 /* el barrido y el brillo mueren en el borde del marco */
  background-color: var(--sp-negro);
  isolation: isolate;
}
@media (min-width: 861px) {
  #acto-3 .a3-cine { height: 72svh; }
}

#acto-3 .a3-shot { position: absolute; inset: 0; display: block; }

#acto-3 .a3-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* encuadre: el recorte ya viene compuesto por estado */
  object-position: center;
}

/* Capa del 2.º estado (la loncha se rinde): el motor le manda el clip-path. */
#acto-3 .a3-capa { position: absolute; inset: 0; }

/* ---- Microanimación de brillo (declarada): una pasada de luz sobre el fundido -------- */
/* Solo transform/opacity, y las dos las manda el progreso del scroll: sube con el
   barrido, se apaga al cerrarse. En reduced motion queda fija y tenue (más abajo). */
#acto-3 .a3-brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
#acto-3 .a3-brillo::before {
  content: '';
  position: absolute;
  inset: -25% -45%;
  background: linear-gradient(100deg,
    transparent 40%,
    color-mix(in oklab, var(--sp-blanco) 30%, transparent) 50%,
    transparent 60%);
  opacity: calc(var(--a3-t) * (1 - var(--a3-t)) * 4 * .7);
  transform: translate3d(calc((var(--a3-t) * 2 - 1) * 22%), 0, 0);
}

/* ---- El único texto del acto -------------------------------------------------------- */
#acto-3 .a3-pie {
  display: grid;
  gap: var(--esp-3);
  justify-items: start;             /* a la izquierda: el acto es tranquilo, no un cartel */
  margin-top: var(--esp-6);
  max-width: 46rem;
}
#acto-3 .a3-titulo {
  margin: 0;
  text-transform: uppercase;        /* titulares de marca en mayúsculas (BRIEF §9) */
}
#acto-3 .a3-linea {
  margin: 0;
  max-width: 36ch;
  font-size: var(--fs-h5);
  line-height: 1.4;
  letter-spacing: var(--ls-texto);
  color: var(--sp-blanco);          /* blanco sobre negro: la medida segura del sistema */
  text-wrap: pretty;
}

/* ---- Móvil: el texto respira sin separarse del marco -------------------------------- */
@media (max-width: 860px) {
  #acto-3 .a3-pie { margin-top: var(--esp-5); }
}

/* ---- prefers-reduced-motion: sin pasada de luz -------------------------------------- */
/* El barrido lo anula scrollcraft.css ([data-sc-reveal] { clip-path: none }), así que
   el estado final (el fundido) se ve entero; aquí solo se queda quieto el brillo. */
@media (prefers-reduced-motion: reduce) {
  #acto-3 .a3-brillo::before {
    transform: none;
    opacity: .14;
  }
}