/* La Destilería — efectos (efectos.js).
   Todo es decorativo: pointer-events:none y por debajo de la interfaz (cabecera, puntos e indicador tienen z-index 10).
   Nada deforma los vídeos: la luz solo cambia la luz, el grano va encima y el parallax es un
   desplazamiento mínimo con un aumento uniforme. */

/* 1 · Luz de brasa
   Adaptada de Unblur («la luz», commit a579614, tema.css .escaparate-luz): mismas tres capas
   (base suave + overlay que calienta + screen pequeño que hace brillar), pero en tonos de brasa/horno,
   con un temblor de fuego (--llama) y un bajón breve al cambiar de escena (--paso). */
.efecto-luz {
  position: absolute;
  inset: 0;
  z-index: 3; /* por encima de las escenas (GSAP les pone 0–2), dentro de .escenas */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  --llama: 1;
  --paso: 1;
  background: radial-gradient(
    ellipse 32vmax 38vmax at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 168, 92, 0.22) 0%,
    rgba(255, 140, 70, 0.09) 40%,
    rgba(255, 140, 70, 0) 72%
  );
}
.efecto-luz--pagina { position: fixed; z-index: 5; } /* páginas sin .escenas (carta.html) */
.efecto-luz::before,
.efecto-luz::after {
  content: "";
  position: absolute;
  inset: 0;
}
.efecto-luz::before {
  background: radial-gradient(
    ellipse 38vmax 46vmax at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 190, 120, 1) 0%,
    rgba(240, 150, 80, 0.45) 35%,
    rgba(240, 150, 80, 0) 70%
  );
  mix-blend-mode: overlay;
  opacity: calc(0.6 * var(--llama) * var(--paso));
}
.efecto-luz::after {
  background: radial-gradient(
    circle 6vmax at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 226, 180, 0.3) 0%,
    rgba(255, 200, 140, 0.07) 50%,
    rgba(255, 200, 140, 0) 100%
  );
  mix-blend-mode: screen;
  opacity: calc(var(--llama) * var(--paso));
}
.efecto-luz.encendida { opacity: 1; transition-duration: 0.35s; }

/* 2 · Grano de película
   Una tesela de ruido generada en un canvas (efectos.js), a pantalla completa y a saltos,
   como el grano de un proyector. Por encima de los vídeos, por debajo de la interfaz. */
.efecto-grano {
  position: fixed;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: efecto-grano 0.9s steps(1) infinite;
}
@keyframes efecto-grano {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-7%, 4%); }
  25%  { transform: translate(5%, -9%); }
  37%  { transform: translate(-11%, -3%); }
  50%  { transform: translate(8%, 7%); }
  62%  { transform: translate(-4%, 11%); }
  75%  { transform: translate(12%, -6%); }
  87%  { transform: translate(-9%, -10%); }
}

/* 3 · Parallax con el ratón (--px/--py entre -1 y 1, suavizados en efectos.js).
   Propiedades sueltas translate/scale: se suman a las transformaciones de GSAP sin pisarlas. */
.efectos-parallax .escena__video {
  scale: 1.035;
  translate: calc(var(--px, 0) * -1.1%) calc(var(--py, 0) * -1.1%);
}
.efectos-parallax .escena__texto {
  translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 8px);
}

/* 4 · Destello que barre el título al entrar una escena
   Inspirado en el brillo lateral de los frascos SVG de Unblur (preview/*.html, linearGradient «brillo…»):
   aquí un reflejo ámbar, como el de las brasas sobre el cobre, recorre el texto de izquierda a derecha. */
.efectos-destello .escena__titulo .linea > span {
  background-image: linear-gradient(
    100deg,
    var(--tinta) 0%,
    var(--tinta) 42%,
    #ffd29a 48%,
    #fff3df 50%,
    #ffd29a 52%,
    var(--tinta) 58%,
    var(--tinta) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.efectos-destello .escena__titulo .linea > span em {
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.efectos-destello .escena__titulo.destellando .linea > span {
  animation: efecto-destello 1.5s cubic-bezier(0.45, 0, 0.25, 1) both;
  animation-delay: var(--retraso, 0.6s);
}
.efectos-destello .escena__titulo.destellando .linea:nth-child(2) > span {
  animation-delay: calc(var(--retraso, 0.6s) + 0.14s);
}
@keyframes efecto-destello {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

/* Movimiento reducido: el grano queda quieto (la luz, el parallax y el destello no se activan en JS) */
@media (prefers-reduced-motion: reduce) {
  .efecto-grano { animation: none; inset: 0; }
  .efectos-destello .escena__titulo.destellando .linea > span { animation: none; }
}