/* ═══════════ Luxury layer for the Functions & Ceremonies cards ═══════════ */

/* decorative glows poke past the right edge and let phones pan sideways — clip them */
html, body { overflow-x: clip; }

/* the living picture: taller frame, gold double ring, slow settle-in zoom */
.ev-media { border-color: rgba(255, 215, 104, .7) !important;
  box-shadow: 0 0 0 4px #070b14, 0 0 0 5px rgba(223, 177, 65, .45), 0 18px 40px rgba(0, 0, 0, .55) !important; }
.ev-media .ev-video { display: block; height: auto !important; aspect-ratio: 16 / 10; background: #070b14; }
.ev-media .lux-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; container-type: size; }
.ev-media > .absolute.bottom-2\.5 { z-index: 2; }   /* keep the venue label above the effects */
.lux-fx *, .lux-fx::before, .lux-fx::after { animation-play-state: paused !important; }
.fx-on .lux-fx * { animation-play-state: running !important; }

/* Pooja & Tilak — a slow sweep of lamp-light across the brass, like a thali catching the diya */
.lux-sheen span { position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 228, 150, .0) 20%, rgba(255, 228, 150, .28) 50%, rgba(255, 228, 150, 0) 80%, transparent);
  transform: skewX(-18deg); mix-blend-mode: screen; animation: luxSheen 5.5s ease-in-out infinite; }
@keyframes luxSheen { 0%, 35% { left: -60%; } 75%, 100% { left: 130%; } }

/* Sangeet — twinkling starlight over the ring */
.lux-stars i { position: absolute; width: var(--z); height: var(--z); border-radius: 50%; background: #fff6dc;
  box-shadow: 0 0 6px rgba(255, 240, 200, .9); animation: luxTwinkle var(--t) ease-in-out var(--delay) infinite; }
@keyframes luxTwinkle { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

/* Haldi — turmeric powder puffs bloom and dissolve, fine haldi dust drifts up */
.lux-haldi b { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2);
  border-radius: 46% 54% 60% 40% / 44% 42% 58% 56%;
  background: radial-gradient(circle at 45% 45%, rgba(255, 226, 120, .95), rgba(245, 179, 1, .7) 38%, rgba(240, 160, 0, .25) 62%, transparent 72%);
  filter: blur(5px); mix-blend-mode: screen; opacity: 0; transform: rotate(var(--rot)) scale(.3);
  animation: luxBurst 7s cubic-bezier(.2, .9, .3, 1) var(--delay) infinite; }
.lux-haldi i { position: absolute; bottom: -6px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: #ffd54a; box-shadow: 0 0 6px 1px rgba(255, 200, 40, .7); opacity: 0;
  animation: luxDust var(--d) ease-out var(--delay) infinite; }
@keyframes luxBurst {
  0% { opacity: 0; transform: rotate(var(--rot)) scale(.3); }
  7% { opacity: .95; transform: rotate(var(--rot)) scale(1); }
  22% { opacity: .6; }
  40% { opacity: 0; transform: rotate(calc(var(--rot) + 25deg)) scale(1.7); }
  100% { opacity: 0; }
}
@keyframes luxDust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translate(var(--sway), calc(-100cqh - 10px)); opacity: 0; } }

/* Shaadi — the sacred fire breathes, embers rise */
.lux-embers .firelight { position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 55% 60%, rgba(255, 150, 50, .22), transparent 65%); mix-blend-mode: screen;
  animation: luxFire 2.8s ease-in-out infinite; }
.lux-embers i { position: absolute; bottom: 18%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: #ffc46b; box-shadow: 0 0 8px 2px rgba(255, 140, 40, .85); opacity: 0;
  animation: luxEmber var(--d) ease-out var(--delay) infinite; }
@keyframes luxFire { 0%, 100% { opacity: .65; } 40% { opacity: 1; } 70% { opacity: .8; } }
@keyframes luxEmber { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; }
  100% { transform: translate(var(--sway), -85cqh) scale(.3); opacity: 0; } }

/* the two big nights stand out: Sangeet in starlit violet-gold, Shaadi as the crowned main event */
.ev-card.ev-sangeet { border-color: rgba(196, 160, 255, .45) !important; animation: luxGlowViolet 4s ease-in-out infinite; }
.ev-card.ev-shaadi { border-color: rgba(255, 215, 104, .85) !important; animation: luxGlowGold 3.6s ease-in-out infinite; }
@keyframes luxGlowGold { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 215, 104, .35), 0 0 26px rgba(223, 177, 65, .18); }
  50% { box-shadow: 0 0 0 1px rgba(255, 215, 104, .7), 0 0 46px rgba(223, 177, 65, .38); } }
@keyframes luxGlowViolet { 0%, 100% { box-shadow: 0 0 0 1px rgba(196, 160, 255, .25), 0 0 22px rgba(150, 110, 230, .14); }
  50% { box-shadow: 0 0 0 1px rgba(196, 160, 255, .5), 0 0 40px rgba(150, 110, 230, .3); } }
.ev-shaadi .ev-media::after { content: "✦ The Main Event ✦"; position: absolute; z-index: 2; top: 10px; right: 10px;
  font-family: Cinzel, serif; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #070b14;
  padding: 5px 10px; border-radius: 999px; background: linear-gradient(90deg, #dfb141, #ffe9a8, #dfb141); background-size: 200% 100%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45); animation: luxFoil 4s linear infinite; }
@keyframes luxFoil { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .lux-fx, .ev-shaadi .ev-media::after { animation: none !important; }
  .lux-fx { display: none; }
  .ev-card.ev-sangeet, .ev-card.ev-shaadi { animation: none !important; }
}