/* La escena de la marca: el lettering gira una vuelta en el eje Y y detrás caen los
 * cuatro ingredientes, escalonados. Es el hero del sitio de la marca rehecho en CSS, y la
 * comparten la portada pública (site/index.html, «Hola mi vida») y el Salón
 * (site/salon/index.html, «Salón Virtual»). Cada página pone DÓNDE cae cada cosa; acá
 * vive CÓMO se mueve, en un solo lugar.
 *
 * Los tiempos son los del original (Slider Revolution): el lettering 1390 ms sin demora,
 * y después albahaca 1250 · ajo 1410 · champiñones 1460 · cherry 1690. Los dos easings de
 * GSAP traducidos a cubic-bezier: back.out → (.34,1.56,.64,1) y power4.out → (.16,1,.3,1).
 *
 * 🔴 La lee la portada pública sin sesión: está en ABIERTO (netlify/edge-functions/gate.js).
 * Nada de esto corre si la persona pidió menos movimiento.
 */
.escena img { position: absolute; height: auto; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); }

@keyframes letra-gira {
  from { opacity: 0; transform: perspective(1400px) rotateY(360deg); }
  to   { opacity: 1; transform: perspective(1400px) rotateY(0deg); }
}
@keyframes cae-izq { from { opacity: 0; transform: translateX(-190%); } to { opacity: 1; transform: none; } }
@keyframes cae-x { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes cae-escala { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes cae-cherry {
  from { opacity: 0; transform: translateY(120%) scale(2) rotate(70deg); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .escena img, .escena .gira { animation: none !important; opacity: 1; transform: none !important; }
}