/* Animaciones de la VSL Masterclass FantuLash.
   Solo actúan cuando anim.js añade .anim al <html>; sin JS o con
   "reducir movimiento" la página se ve completa y quieta. */
:root { --fl-ease: cubic-bezier(.2, .7, .2, 1); }

header { transition: box-shadow .4s ease, background-color .4s ease; }
header.is-scrolled { box-shadow: 0 12px 30px -22px rgba(42, 34, 30, .5); }

/* Entradas al hacer scroll */
.anim .fl-rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--fl-ease), transform 1s var(--fl-ease); }
.anim .fl-rv.in { opacity: 1; transform: none; }

/* HERO */
.anim .fl-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .9s ease, transform 1.1s var(--fl-ease), filter 1s ease; }
.anim .fl-words.in .w { opacity: 1; transform: none; filter: none; }
.anim .fl-hero-in { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--fl-ease), transform 1s var(--fl-ease); }
.anim .fl-hero-in.in { opacity: 1; transform: none; }
.anim .fl-brow line, .anim .fl-brow text { opacity: 0; transition: opacity 1.2s ease .3s; }
.anim .fl-brow.in line, .anim .fl-brow.in text { opacity: 1; }
.anim .fl-hero-photo { opacity: 0; transform: translateY(40px) scale(1.04); transition: opacity 1.6s ease .2s, transform 1.8s var(--fl-ease) .2s; }
.anim .fl-hero-photo.in { opacity: 1; transform: none; }
.anim .fl-ghost { opacity: 0; transform: translateX(-6%); transition: opacity 2s ease .5s, transform 2.4s var(--fl-ease) .5s; }
.anim .fl-ghost.in { opacity: 1; transform: none; }
.anim .fl-eco { transition: opacity 2.4s ease .8s; }
.anim .fl-eco:not(.in) { opacity: 0 !important; }

/* Botón de play: un pulso suave que invita a darle clic */
.fl-play { transition: transform .3s var(--fl-ease); }
.fl-play:hover { transform: translate(-50%, -50%) scale(1.06) !important; }
.anim .fl-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(247, 239, 234, .8); animation: fl-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes fl-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* Viñetas que se dibujan */
.anim .fl-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--fl-ease) .3s; }
.anim .in .fl-mark path, .anim .in.fl-mark path { stroke-dashoffset: 0; }

/* Calendario */
.anim .fl-bar { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--fl-ease) .2s; }
.anim .in .fl-bar { transform: none; }
.anim .in .fl-bar:nth-of-type(7) { transition-delay: .45s; }
.anim .in .fl-bar:nth-of-type(8) { transition-delay: .7s; }

/* Cupos */
.anim .fl-seats span { transform: scale(0); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.anim .in .fl-seats span { transform: none; }
.anim .in .fl-seats span:nth-child(2) { transition-delay: .1s; }
.anim .in .fl-seats span:nth-child(3) { transition-delay: .2s; }
.anim .in .fl-seats span:nth-child(4) { transition-delay: .3s; }
.anim .in .fl-seats span:nth-child(5) { transition-delay: .4s; }

/* Brillo que recorre la tarjeta del combo una vez */
.anim #combo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(247, 239, 234, .16) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
.anim #combo.in::after { transform: translateX(100%); transition: transform 1.8s ease .6s; }

@media (prefers-reduced-motion: reduce) {
  .anim *, .anim *::after { animation: none !important; transition: none !important; }
  .anim .fl-rv, .anim .fl-hero-in, .anim .fl-hero-photo, .anim .fl-ghost, .anim .fl-words .w, .anim .fl-bar, .anim .fl-seats span { opacity: 1 !important; transform: none !important; filter: none !important; }
}