@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-02.css · ACTO 2 «La plancha» (frente S02, bloque F2-secciones)
   -----------------------------------------------------------------------------------------
   SOLO estilos de este acto. Prefijo propio: .a2- . No toca tokens, componentes ni el motor.

   QUE HACE HOY (BRIEF §3 acto 2 y §8.4: sin clip de cocina todavia):
     · foto real a sangre con ZOOM LENTO progresivo conducido por --sc-p (custom property que
       el motor publica en el <section> del acto). Se descarto data-sc-parallax para el zoom
       porque el parallax del motor SOLO traslada en Y (translate3d) y no escala: con el no
       hay zoom posible; --sc-p da el zoom y ademas gobierna el brillo y la neblina.
     · humo y brillo como animacion CSS declarada (keyframes), encima de la foto.
     · los tres textos del acto entran y salen con los tres cues del motor (atributos en el
       HTML, no aqui).
   El zoom es transform puro (scale + translate) y el resto de capas solo animan transform y
   opacity (SPEC §2.8). prefers-reduced-motion: foto quieta y humo parado como neblina fija.

   .a2- .a2-foto   zoom por --sc-p   (retirar cuando llegue el clip: BRIEF §8.4)
   ========================================================================================= */

/* ---------------------------------------------------------------- el acto (stage) ------ */
.a2 {
  background: var(--sp-negro);   /* el suelo nunca es blanco mientras entra el stage */
  color: var(--sp-blanco);
}

.a2-stage { isolation: isolate; }   /* que el screen del humo se mezcle con la foto, no con la pagina */

/* ------------------------------------------------------------------- foto a sangre ------ */
.a2-fondo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.a2-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 52%;
  transform-origin: 46% 52%;
  /* el zoom del acto: 1 -> 1,28 a lo largo del pin, con una deriva leve hacia arriba */
  transform:
    scale(calc(1 + var(--sc-p, 0) * 0.28))
    translate3d(0, calc((1 - var(--sc-p, 0)) * 1.2vh), 0);
  will-change: transform;
}

/* ------------------------------------------------------- capas declaradas (decorativas) -- */
.a2-capas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* humo: dos masas suaves que suben y se ensanchan. Base = neblina fija (asi se queda en
   prefers-reduced-motion, donde tokens.css anula las animaciones). */
.a2-humo {
  position: absolute;
  width: min(120vmax, 160rem);
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--sp-blanco-hueso) 13%, transparent) 0%,
    color-mix(in oklab, var(--sp-blanco-hueso) 6%, transparent) 44%,
    transparent 74%);
}

.a2-humo--a {
  left: -20%;
  bottom: -38%;
  opacity: .38;
  transform: translate3d(0, -6%, 0) scale(1.06);
  animation: a2-humo-a 19s var(--ease-salida) infinite alternate;
}

.a2-humo--b {
  right: -26%;
  bottom: -50%;
  width: min(96vmax, 130rem);
  opacity: .30;
  transform: translate3d(0, -4%, 0) scale(1.1);
  animation: a2-humo-b 27s var(--ease-salida) infinite alternate;
}

@keyframes a2-humo-a {
  from { transform: translate3d(-3%, 7%, 0) scale(1); opacity: .30; }
  to   { transform: translate3d(7%, -18%, 0) scale(1.22); opacity: .55; }
}

@keyframes a2-humo-b {
  from { transform: translate3d(4%, 9%, 0) scale(1.04); opacity: .24; }
  to   { transform: translate3d(-6%, -22%, 0) scale(1.3); opacity: .44; }
}

/* neblina: el humo que se queda. Se espesa con el progreso del acto. */
.a2-neblina {
  position: absolute;
  inset: 0;
  background: radial-gradient(92% 74% at 50% 62%,
    color-mix(in oklab, var(--sp-blanco) 10%, transparent) 0%,
    transparent 70%);
  opacity: calc(var(--sc-p, 0) * 0.4);
}

/* brillo: el calor de la plancha. Late despacio y crece con el acto. */
.a2-brillo {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: calc(0.22 + var(--sc-p, 0) * 0.5);
  background: radial-gradient(58% 42% at 47% 66%,
    color-mix(in oklab, var(--sp-mostaza) 26%, transparent) 0%,
    color-mix(in oklab, var(--sp-mostaza) 8%, transparent) 52%,
    transparent 78%);
  animation: a2-brillo-pulso 7s ease-in-out infinite alternate;
}

@keyframes a2-brillo-pulso {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}

/* velos de lectura: esquina del titulo, banda de los textos y viñeta del mundo low-key */
.a2-velo { position: absolute; inset: 0; }

.a2-velo--alto {
  background: linear-gradient(to bottom right,
    color-mix(in oklab, var(--sp-negro) 88%, transparent) 0%,
    color-mix(in oklab, var(--sp-negro) 52%, transparent) 24%,
    transparent 56%);
}

.a2-velo--bajo {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sp-negro) 92%, transparent) 0%,
    color-mix(in oklab, var(--sp-negro) 70%, transparent) 20%,
    color-mix(in oklab, var(--sp-negro) 24%, transparent) 44%,
    transparent 62%);
}

.a2-velo--vigneta {
  background: radial-gradient(120% 92% at 50% 44%,
    transparent 40%,
    color-mix(in oklab, var(--sp-negro) 58%, transparent) 100%);
}

/* --------------------------------------------------------------------------- copy ------- */
.a2-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--esp-5);
  padding: clamp(5rem, 12vh, 7.5rem) var(--esp-pagina-x) clamp(3rem, 9vh, 6rem);
  pointer-events: none;
}

/* H2 del acto: dispositivo de marca (relleno transparente + contorno mostaza, BRIEF §9). */
.a2-titulo {
  max-width: 22ch;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-titular);
  text-shadow: 0 0.25rem 1.5rem color-mix(in oklab, var(--sp-negro) 75%, transparent);
}

/* los tres textos sincronizados: filas estables (el motor les escribe opacity/transform) */
.a2-lineas {
  display: grid;
  gap: var(--esp-3);
  max-width: min(44rem, 84vw);
}

.a2-linea {
  position: relative;
  margin: 0;
  padding-left: var(--esp-5);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto);
  font-size: var(--fs-h5);
  line-height: var(--lh-compacto);
  color: var(--sp-blanco);
  text-shadow: 0 0.125rem 0.6rem color-mix(in oklab, var(--sp-negro) 80%, transparent);
}

.a2-linea::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--esp-4);
  height: 2px;
  background: var(--sp-mostaza);
}

/* hook de la comanda: marcador sin pintura (el modulo de S04 lo convierte en linea) */
.a2-comanda {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------------- movil -------- */
@media (max-width: 700px) {
  .a2-copy {
    padding-top: clamp(3.5rem, 10vh, 5rem);
    padding-bottom: clamp(2.5rem, 8vh, 4rem);
  }

  .a2-titulo { max-width: 14ch; }

  .a2-lineas { gap: var(--esp-2); max-width: 100%; }

  .a2-linea {
    font-size: var(--fs-p);
    padding-left: var(--esp-4);
  }
}

/* ------------------------------------------------------- prefers-reduced-motion -------- */
/* Menos y mas suave, no cero (SPEC §7): la foto se queda quieta (sin zoom) y el humo y el
   brillo pasan a su estado base, que ya es una neblina fija legible. */
@media (prefers-reduced-motion: reduce) {
  .a2-foto { transform: none; }
  .a2-humo { animation: none; }
  .a2-brillo { animation: none; opacity: .5; }
  .a2-neblina { opacity: .25; }
}