/* ===== Diwali festive scene (home page) ===== */
.fscene { position: relative; overflow: hidden; color: #fff7ed;
  background: radial-gradient(ellipse 55% 60% at 75% 55%, rgba(245, 158, 11, .28), transparent 65%),
              radial-gradient(ellipse 60% 50% at 15% 10%, rgba(219, 39, 119, .22), transparent 60%),
              linear-gradient(180deg, #1a0b2e 0%, #2b0f2a 55%, #3d1408 100%); }
.fireworks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.shubh { position: absolute; top: 14px; font: 400 clamp(26px, 3vw, 40px)/1 "Yatra One", "Mukta", serif; color: #fbbf24; text-shadow: 0 0 18px rgba(251, 191, 36, .6); z-index: 2; }
.shubh-l { left: max(16px, env(safe-area-inset-left, 0px)); } .shubh-r { right: max(16px, env(safe-area-inset-right, 0px)); }
.kandils { position: absolute; inset: 0 0 auto; height: 0; z-index: 1; }
.kandil { position: absolute; left: var(--left); top: 0; width: 52px; transform-origin: 50% 0; animation: sway 4.5s ease-in-out var(--delay) infinite; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--k) 70%, transparent)); }
.kandil-string { display: block; width: 2px; height: 34px; margin: 0 auto; background: #fde68a; opacity: .7; }
.kandil-body { width: 52px; height: auto; display: block; }
.kandil-light { animation: glow 2.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.fs-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding-block: 150px 96px; }
.fs-kicker { display: inline-flex; gap: 10px; align-items: center; font: 700 14px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #fcd34d; }
.greet { display: grid; margin-top: 18px; }
.greet-layer { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .7s, transform .7s; }
.greet-layer.on { opacity: 1; transform: none; }
.greet-h { font: 800 clamp(40px, 5.6vw, 68px)/1.1 var(--font-display); color: #fff;
  background: linear-gradient(90deg, #fde68a, #fbbf24 40%, #fb923c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 22px rgba(251, 191, 36, .35)); }
.greet-hi { font-family: "Yatra One", "Mukta", serif; font-weight: 400; line-height: 1.25; }
.greet-layer p { margin-top: 14px; font-size: 19px; color: #fde9cf; max-width: 46ch; }
.fs-offer { margin-top: 22px; padding: 14px 16px; border: 1px dashed rgba(253, 230, 138, .55); border-radius: 10px; background: rgba(0, 0, 0, .18); color: #ffedd5; max-width: 52ch; }
.fs-offer strong { color: #fcd34d; }
.fs-ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.fs-link { color: #fde68a; font-weight: 700; }
.fs-art { position: relative; }
.rangoli-scene { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.rangoli-scene .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame 1.6s ease-in-out infinite; }
.diya-svg:nth-of-type(2n) .flame { animation-duration: 1.9s; }
.diya-svg:nth-of-type(3n) .flame { animation-duration: 1.3s; }
@keyframes flame { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.92, 1.08) rotate(-3deg); } 60% { transform: scale(1.05, .94) rotate(3deg); } }
#rangoli { animation: spin 90s linear infinite; transform-box: view-box; }
@keyframes spin { to { rotate: 360deg; } }
.floor-diyas { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: space-around; z-index: 2; pointer-events: none; }
.floor-diya { width: 26px; height: 12px; border-radius: 0 0 14px 14px; background: linear-gradient(#c2410c, #7c2d12); position: relative; }
.floor-diya::before { content: ""; position: absolute; left: 50%; bottom: 9px; width: 9px; height: 15px; margin-left: -4.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fffbe6, #fde047 45%, #f97316 80%); box-shadow: 0 0 14px 6px rgba(251, 191, 36, .45);
  animation: flicker 2s ease-in-out calc(var(--i) * -0.23s) infinite; transform-origin: 50% 100%; }
@media (max-width: 900px) {
  .fs-in { grid-template-columns: 1fr; padding-block: 120px 80px; }
  .fs-art { max-width: 380px; margin: 0 auto; }
  .kandil:nth-child(2), .kandil:nth-child(3) { display: none; }
}
@media (max-width: 520px) { .floor-diya:nth-child(n+8) { display: none; } .kandil { width: 40px; } .kandil-body { width: 40px; } }
@media (prefers-reduced-motion: reduce) { .fireworks { display: none; } .greet-layer { transition: none; } }

/* Theme backgrounds */
.fscene-ganesh { background: radial-gradient(ellipse 55% 60% at 75% 55%, rgba(251, 191, 36, .3), transparent 65%), linear-gradient(180deg, #4a1204, #7c2d12 60%, #431407); }
.fscene-navratri { background: radial-gradient(ellipse 55% 60% at 75% 55%, rgba(236, 72, 153, .28), transparent 65%), linear-gradient(135deg, #3b0764, #831843 55%, #1e1b4b); }
.fscene-holi { background: linear-gradient(135deg, #fdf2f8, #fefce8 50%, #ecfdf5); color: #3b0a2a; }
.fscene-holi .greet-h { background: linear-gradient(90deg, #db2777, #f59e0b, #16a34a); -webkit-background-clip: text; background-clip: text; filter: none; }
.fscene-holi .greet-layer p, .fscene-holi .fs-offer { color: #4a1d3a; } .fscene-holi .fs-kicker, .fscene-holi .fs-link { color: #be185d; }
.fscene-holi .fs-offer { background: rgba(255, 255, 255, .6); border-color: #f9a8d4; }
.fscene-tricolor { background: linear-gradient(180deg, #fff7ed 0%, #ffffff 50%, #f0fdf4 100%); color: #0f1a33; }
.fscene-tricolor .greet-h { background: linear-gradient(90deg, #ea580c, #1e3a8a 50%, #15803d); -webkit-background-clip: text; background-clip: text; filter: none; }
.fscene-tricolor .greet-layer p, .fscene-tricolor .fs-offer { color: #334155; } .fscene-tricolor .fs-kicker, .fscene-tricolor .fs-link { color: #1e3a8a; }
.fscene-tricolor .fs-offer { background: rgba(255, 255, 255, .7); border-color: #94a3b8; }
.fscene-newyear { background: radial-gradient(ellipse 60% 60% at 70% 50%, rgba(244, 114, 182, .25), transparent 65%), linear-gradient(180deg, #0b1530, #1e1b4b); }
.fs-in { padding-block: 110px 90px; }
.fscene-diwali .fs-in { padding-block: 150px 96px; }

/* Toran (marigold garland) for Ganesh / Navratri */
.toran { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; z-index: 1; height: 56px; }
.toran::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, #f97316 0 14px, #fbbf24 14px 28px); }
.toran-flower { width: 22px; height: 22px; margin-top: calc(10px + (var(--i) * 7 % 3) * 9px); border-radius: 50%; background: radial-gradient(circle, #fde047 25%, #f97316 60%, #c2410c); box-shadow: 0 0 0 3px rgba(251, 191, 36, .4); }
.fscene-navratri .toran-flower:nth-child(3n) { background: radial-gradient(circle, #fff 20%, #ec4899 60%); }
.fscene-navratri .toran-flower:nth-child(3n+1) { background: radial-gradient(circle, #fff 20%, #22c55e 60%); }

/* Art animations */
.gulal { transform-box: fill-box; transform-origin: center; animation: puff 5s ease-in-out infinite; mix-blend-mode: multiply; }
.gulal:nth-child(2n) { animation-delay: -1.5s; } .gulal:nth-child(3n) { animation-delay: -3s; }
@keyframes puff { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.chakra { animation: spin 18s linear infinite; transform-box: fill-box; transform-origin: center; }
.flag-wave { animation: wave 3s ease-in-out infinite; transform-origin: 70px 185px; }
@keyframes wave { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-2deg); } }
.dandiya { animation: tap 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tap { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
.ny-year { animation: glow 2.4s ease-in-out infinite; }

/* Tap-to-burst diyas */
.floor-diyas.tappable { pointer-events: auto; z-index: 3; }
button.floor-diya { border: 0; padding: 0; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
button.floor-diya::after { content: ""; position: absolute; inset: -18px -10px -8px; }            /* bigger tap area */
button.floor-diya:hover, button.floor-diya:focus-visible { filter: brightness(1.25) drop-shadow(0 0 8px #fbbf24); outline: none; }
button.floor-diya:focus-visible { box-shadow: 0 0 0 2px #fde68a; }
.floor-diya.firing { animation: diyaHop .45s ease-out; }
@keyframes diyaHop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.15); filter: brightness(1.6); } 100% { transform: none; } }
.tap-hint { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); margin: 0; z-index: 3; font: 600 13px/1 "Mukta", sans-serif; letter-spacing: .02em; color: #fde68a; background: rgba(0, 0, 0, .28); padding: 6px 12px; border-radius: 999px; pointer-events: none; animation: hintPulse 2.4s ease-in-out infinite; white-space: nowrap; }
@keyframes hintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Uploaded festival packs */
.fest-pack-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fest-pack-layer [data-burst], .fest-pack-layer a, .fest-pack-layer button { pointer-events: auto; }
.fscene-pack [data-burst] { cursor: pointer; }
.fscene-custom { background: linear-gradient(160deg, #1e1b4b, #312e81 55%, #0b1530); }
@media (prefers-reduced-motion: reduce) { .tap-hint, .floor-diya.firing { animation: none; } }
/* Let taps reach pack decorations behind the text block; links and buttons stay clickable. */
.fscene-pack .fs-in { pointer-events: none; }
.fscene-pack .fs-in a, .fscene-pack .fs-in button { pointer-events: auto; }

/* ===== Fit-to-screen pass (v5): the festive banner never taller than the screen ===== */
.greet-hi { font-family: "Baloo 2", "Mukta", sans-serif; font-weight: 700; line-height: 1.22; letter-spacing: 0; }
.greet-h { font-size: clamp(32px, 4.3vw, 56px); }
.fs-in, .fscene-diwali .fs-in { padding-block: clamp(92px, 14vh, 132px) clamp(58px, 9vh, 88px); gap: 24px; }
.fs-art > svg, .fs-art .rangoli-scene, .fs-art .cd-art { display: block; width: 100%; height: auto; max-height: min(50vh, 400px); margin-inline: auto; }
.fs-offer { margin-top: 16px; padding: 11px 14px; }
.fs-ctas { margin-top: 18px; }
.greet { margin-top: 12px; }
/* short laptop screens (1366x768, 1280x720 …) */
@media (min-width: 901px) and (max-height: 800px) {
  .fs-in, .fscene-diwali .fs-in { padding-block: 96px 60px; }
  .greet-h { font-size: clamp(30px, 3.6vw, 46px); }
  .greet-layer p { font-size: 15px; }
  .fs-art > svg, .fs-art .rangoli-scene, .fs-art .cd-art { max-height: 44vh; }
  .kandil { width: 42px; } .kandil-body { width: 42px; } .kandil-string { height: 22px; }
  .shubh { font-size: 28px; }
}
/* tablets and phones: one column, smaller picture */
@media (max-width: 900px) {
  .fs-in, .fscene-diwali .fs-in { padding-block: 92px 64px; text-align: left; }
  .fs-art { max-width: 300px; }
  .fs-art > svg, .fs-art .rangoli-scene { max-height: 34vh; }
}
@media (max-width: 520px) {
  .fs-in, .fscene-diwali .fs-in { padding-block: 84px 60px; }
  .greet-h { font-size: 32px; }
  .fs-art { max-width: 230px; }
  .kandil-string { height: 16px; }
  .shubh { font-size: 22px; top: 10px; }
  .tap-hint { bottom: 34px; font-size: 12px; }
}
@media (max-width: 600px) { .fs-art { display: none; } .fs-in, .fscene-diwali .fs-in { padding-block: 78px 70px; } }
@media (max-width: 520px) { .shubh { display: none; } }