/* =====================================================================
   Festival decorations for the website themes (lib/themes.php)
   Loaded only when the chosen theme has a greeting, decorations or an effect.
   Every picture is inline SVG coloured here; every animation moves only
   transform / opacity (cheap for phones) and stops for reduced motion.
   ---------------------------------------------------------------------
   1 strip under the menu bar   2 logo ornaments   3 greeting banner
   4 greeting art (dhak, dhunuchi, diyas, veena, notes, flag, bells, abir)
   5 alpana backdrop            6 moving effect canvas + preview bar
   7 pause when scrolled away / reduced motion
   ===================================================================== */

/* ---------- 1. Strip under the menu bar ---------- */
.fest-border { height: 10px; position: relative; }
.fest-border-lal-paar {
  /* red border of a white saree: gold dots on red, a scalloped edge and a thin gold line */
  background:
    radial-gradient(circle, var(--gold) 0 1.6px, transparent 2.2px) 0 4px / 12px 10px repeat-x,
    linear-gradient(var(--blue), var(--blue)) 0 0 / 100% 8px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 8px / 100% 2px no-repeat;
}
.fest-border-lal-paar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px;
  background: radial-gradient(circle at 50% 0, var(--blue) 0 3.2px, transparent 3.6px) 0 0 / 12px 6px repeat-x;
}
.fest-border-zari {
  height: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--gold-600), var(--gold), #F6DC9C, var(--gold), var(--gold-600));
}
.fest-border-tricolour { height: 9px; background: linear-gradient(#FF9933 0 3px, #FFFFFF 3px 6px, #138808 6px); }

/* ---------- 2. Ornament on the logo ---------- */
.brand-mark { position: relative; display: inline-block; flex: none; line-height: 0; }
.logo-orn { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); pointer-events: none; line-height: 0; }
.logo-orn svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-orn-durga-eyes { width: 46px; bottom: -11px; }
.logo-orn-diya { width: 30px; bottom: -12px; }
.logo-orn-marigold, .logo-orn-star { width: 20px; bottom: auto; top: -6px; left: auto; right: -8px; transform: none; }
.logo-orn-lotus { width: 30px; bottom: -11px; }
.site-header.is-scrolled .logo-orn { bottom: -8px; }

/* Maa Durga's eyes */
.orn-eyes .orn-pill { fill: #FFF8EC; stroke: var(--gold); stroke-width: 1.4; }
.orn-eyes .kohl { fill: none; stroke: #2A0C0C; stroke-width: 1.7; stroke-linecap: round; }
.orn-eyes .white { fill: #FFFFFF; stroke: #2A0C0C; stroke-width: 1.3; }
.orn-eyes .iris { fill: #1D0B08; }
.orn-eyes .glint { fill: #FFFFFF; }
.orn-eyes .sindoor { fill: #C1121F; }
.orn-eyes .eye { transform-box: fill-box; transform-origin: center; animation: durga-blink 6.4s infinite; }
.orn-eyes .eye-3 { animation-delay: .08s; }
.orn-eyes .pupil { animation: durga-glance 11s ease-in-out infinite; }
@keyframes durga-blink { 0%, 91%, 100% { transform: scaleY(1); } 93.5% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }
@keyframes durga-glance { 0%, 38%, 100% { transform: translateX(0); } 45%, 58% { transform: translateX(1.7px); } 66%, 80% { transform: translateX(-1.7px); } }

/* Diya on the logo */
.orn-diya .clay, .art-diyas .clay { fill: #B35A1F; }
.orn-diya .rim, .art-diyas .rim { fill: none; stroke: #7A3810; stroke-width: 1.4; }
.orn-diya .flame { fill: #FFB020; transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.7s ease-in-out infinite; }
.orn-diya .glow { fill: rgba(255, 176, 32, .35); transform-box: fill-box; transform-origin: center; animation: glow 2.6s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) rotate(0deg); } 30% { transform: scale(.92, 1.08) rotate(-3deg); } 60% { transform: scale(1.05, .94) rotate(2deg); } }
@keyframes glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }

/* Marigold, lotus, star */
.mg-o { fill: #F29A0A; }
.mg-i { fill: #FDBA21; }
.mg-c { fill: #B65A00; }
.orn-marigold { animation: spin-slow 24s linear infinite; }
.orn-lotus .petal-c { fill: #F49AB4; }
.orn-lotus .petal { fill: #F7B5C8; }
.orn-lotus .petal-o { fill: #FAD3DF; }
.orn-star path { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: twinkle 2.8s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.82) rotate(0deg); opacity: .8; } 50% { transform: scale(1.08) rotate(20deg); opacity: 1; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- 3. Greeting banner (home page, top of the hero) ---------- */
.fest-banner {
  position: relative; margin: 6px 0 26px; padding: 16px 22px 14px; text-align: center;
  background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 5px #FFFFFF, 0 0 0 6.5px rgba(var(--gold-rgb), .55), var(--shadow);
  animation: rise .9s var(--ease) both;
}
.fest-banner.has-art { padding-inline: 74px; }
.fest-banner.has-toran { padding-top: 28px; }
.fest-head {
  margin: 0; font-family: "Noto Serif Bengali", var(--f-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.3; color: var(--blue);
}
.fest-sub { margin: 4px 0 0; font-size: .95rem; font-weight: 600; color: var(--muted); line-height: 1.4; }
.fest-sub[lang="bn"] { font-family: "Noto Serif Bengali", var(--f-body); font-weight: 700; }
.fest-art { position: absolute; bottom: -10px; width: 78px; line-height: 0; }
.fest-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.fest-art-l { left: -16px; }
.fest-art-r { right: -16px; }

/* marigold garland (gaanda phool) along the top edge, with mango leaves */
.fest-toran {
  position: absolute; left: 14px; right: 14px; top: -9px; height: 30px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, #FDBA21 0 3px, #F29A0A 3.4px 7px, transparent 7.6px) 0 0 / 18px 18px repeat-x,
    radial-gradient(ellipse 3.2px 6.5px at 50% 50%, #3E8E41 0 92%, transparent 100%) 6px 15px / 54px 15px repeat-x,
    radial-gradient(ellipse 3.2px 6.5px at 50% 50%, #2F7D32 0 92%, transparent 100%) 33px 15px / 54px 15px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

/* ---------- 4. Greeting art ---------- */
/* Dhak with kash plume and beating sticks */
.art-dhak .kash path { fill: none; stroke-linecap: round; }
.art-dhak .kash > g:first-child path { stroke: #C9B58A; stroke-width: 6; }
.art-dhak .kash > g:last-child path { stroke: #FFFDF6; stroke-width: 3.6; }
.art-dhak .kash { transform-box: fill-box; transform-origin: 50% 100%; animation: kash-sway 5s ease-in-out infinite; }
.art-dhak .drum { fill: #8A4A1E; }
.art-dhak .band { fill: var(--blue); }
.art-dhak .band-line { stroke: var(--gold); stroke-width: 2; }
.art-dhak .lace { fill: none; stroke: #F3E2C0; stroke-width: 1.4; opacity: .85; }
.art-dhak .head { fill: #F3E2C0; stroke: #5C2F12; stroke-width: 1.6; }
.art-dhak .head-r { fill: #EAD3AA; }
.art-dhak .stick path { stroke: #6B3A17; stroke-width: 3.4; stroke-linecap: round; fill: none; }
.art-dhak .stick circle { fill: #6B3A17; }
.art-dhak .stick { transform-box: view-box; animation: dhak-strike 1.4s ease-in-out infinite; }
.art-dhak .stick-a { transform-origin: 110px 26px; }
.art-dhak .stick-b { transform-origin: 8px 28px; animation-name: dhak-strike-b; animation-delay: .35s; }
.art-dhak .beat { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: dhak-beat 1.4s ease-out infinite; }
.art-dhak .beat-2 { animation-delay: .05s; }
@keyframes kash-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes dhak-strike { 0%, 40%, 100% { transform: rotate(-16deg); } 12%, 30% { transform: rotate(4deg); } 20% { transform: rotate(-8deg); } }
@keyframes dhak-strike-b { 0%, 40%, 100% { transform: rotate(14deg); } 12%, 30% { transform: rotate(-4deg); } 20% { transform: rotate(7deg); } }
@keyframes dhak-beat { 0%, 9% { opacity: 0; transform: translateX(-3px); } 13% { opacity: 1; } 30% { opacity: 0; transform: translateX(3px); } 100% { opacity: 0; } }

/* Dhunuchi with smoke and a glowing ember */
.art-dhunuchi .puff { fill: url(#fx-smoke); transform-box: fill-box; transform-origin: center; animation: smoke-puff 4.2s ease-out infinite; opacity: 0; }
.art-dhunuchi .p2 { animation-delay: -1.4s; }
.art-dhunuchi .p3 { animation-delay: -2.8s; }
.art-dhunuchi .curl { fill: none; stroke: rgba(122, 112, 106, .5); stroke-width: 2.6; stroke-linecap: round; animation: smoke-curl 3.6s ease-in-out infinite; }
.art-dhunuchi .curl-2 { animation-delay: -1.8s; stroke-width: 2; }
.art-dhunuchi .ember { fill: #FF7A1A; animation: ember 1.8s ease-in-out infinite; }
.art-dhunuchi .bowl { fill: #B5651D; }
.art-dhunuchi .rim { fill: #8A4513; }
.art-dhunuchi .dot { fill: #F3E2C0; }
.art-dhunuchi .stem { fill: #9A5418; }
.art-dhunuchi .handle { fill: none; stroke: #9A5418; stroke-width: 5; stroke-linecap: round; }
@keyframes smoke-puff { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-46px) scale(2); } }
@keyframes smoke-curl { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: .75; transform: translateY(-5px); } }
@keyframes ember { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* Diyas */
.art-diyas .flame { fill: url(#fx-flame); transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.7s ease-in-out infinite; }
.art-diyas .glow { fill: rgba(255, 176, 32, .28); transform-box: fill-box; transform-origin: center; animation: glow 2.6s ease-in-out infinite; }
.art-diyas .d1 .flame, .art-diyas .d1 .glow { animation-delay: -.6s; }
.art-diyas .d2 .flame, .art-diyas .d2 .glow { animation-delay: -1.1s; }
.fest-art-r .art-diyas .flame { animation-delay: -.9s; }

/* Music notes (also on the veena) */
.art-notes .note, .art-veena .note { fill: var(--gold); transform-box: fill-box; animation: note-float 4.8s ease-in-out infinite; }
.art-notes .stem, .art-veena .stem { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.art-notes .n2, .art-veena .n2 { animation-delay: -1.6s; }
.art-notes .n3 { animation-delay: -3.2s; }
.fest-art-r .art-notes .note { animation-duration: 5.6s; }
@keyframes note-float { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: .75; } 50% { transform: translateY(-7px) rotate(-5deg); opacity: 1; } }

/* Veena (Saraswati Puja) */
.art-veena .neck { stroke: #7A3E14; stroke-width: 7; stroke-linecap: round; fill: none; }
.art-veena .string { stroke: #F3E2C0; stroke-width: .8; fill: none; animation: ember 2.4s ease-in-out infinite; }
.art-veena .fret { stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.art-veena .gourd { fill: #A0522D; stroke: var(--gold); stroke-width: 2; }
.art-veena .gourd-in { fill: #7A3E14; }
.art-veena .curl-top { fill: none; stroke: #7A3E14; stroke-width: 4; stroke-linecap: round; }

/* Tricolour */
.art-flag .pole { stroke: #6B4A2A; stroke-width: 3; stroke-linecap: round; }
.art-flag .knob { fill: var(--gold); }
.art-flag .saffron { fill: #FF9933; }
.art-flag .white { fill: #FFFFFF; stroke: #E4E0D6; stroke-width: .6; }
.art-flag .green { fill: #138808; }
.art-flag .wheel { fill: none; stroke: #0A2A8A; stroke-width: 1.3; }
.art-flag .spoke { stroke: #0A2A8A; stroke-width: .6; }
.art-flag .cloth { transform-box: view-box; transform-origin: 16px 36px; animation: flag-wave 3.2s ease-in-out infinite; }
.art-flag .chakra { transform-box: fill-box; transform-origin: center; animation: spin-slow 12s linear infinite; }
.fest-art-r .art-flag { transform: scaleX(-1); }
@keyframes flag-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-3deg) scaleX(.97); } }

/* Star & bells */
.art-star .star { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: twinkle 2.8s ease-in-out infinite; }
.art-bells .ribbon { fill: none; stroke: var(--blue); stroke-width: 3; }
.art-bells .bow { fill: var(--blue); }
.art-bells .bell path:first-child { stroke: var(--gold-600); stroke-width: 2; }
.art-bells .body { fill: var(--gold); }
.art-bells .clapper { fill: var(--gold-600); }
.art-bells .bell { transform-box: view-box; animation: bell-swing 2.6s ease-in-out infinite; }
.art-bells .b1 { transform-origin: 38px 24px; }
.art-bells .b2 { transform-origin: 72px 24px; animation-delay: -1.3s; }
.art-bells .holly { fill: #1F7A3D; }
.art-bells .berry { fill: #C1121F; }
@keyframes bell-swing { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }

/* Abir (Holi) */
.art-abir .bowl { fill: #C9A24A; }
.art-abir .p1, .art-abir .c1 { fill: #E8197E; }
.art-abir .p2, .art-abir .c2 { fill: #F2B705; }
.art-abir .p3, .art-abir .c3 { fill: #19A463; }
.art-abir .cloud { opacity: 0; transform-box: fill-box; transform-origin: center; animation: abir 3.6s ease-out infinite; }
.art-abir .c2 { animation-delay: -1.2s; }
.art-abir .c3 { animation-delay: -2.4s; }
@keyframes abir { 0% { opacity: 0; transform: translateY(18px) scale(.3); } 25% { opacity: .55; } 100% { opacity: 0; transform: translateY(-10px) scale(1.5); } }

/* ---------- 5. Alpana behind the top of the home page ---------- */
.fest-alpana-defs { position: absolute; }
.fest-alpana { position: absolute; pointer-events: none; color: var(--blue); opacity: .09; animation: spin-slow 240s linear infinite; }
.fest-alpana-a { width: 320px; left: -110px; bottom: 40px; }
.fest-alpana-b { width: 220px; right: 36%; top: -70px; animation-direction: reverse; opacity: .07; }

/* ---------- 6. Moving effect + preview bar ---------- */
.theme-fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; width: 100vw; height: 100vh; }
.theme-preview-bar {
  position: fixed; left: 50%; bottom: 14px; z-index: 400; transform: translateX(-50%);
  max-width: calc(100% - 24px); padding: 10px 16px; border-radius: 999px;
  background: var(--navy-900); color: #fff; font-size: .9rem; box-shadow: var(--shadow-lg);
}
.theme-preview-bar a { color: var(--gold-100); font-weight: 700; margin-left: 6px; }

/* ---------- Phones ---------- */
@media (max-width: 559px) {
  .fest-banner { padding: 14px 14px 12px; margin-bottom: 22px; }
  .fest-banner.has-art { padding-inline: 50px; }
  .fest-art { width: 58px; bottom: -8px; }
  .fest-art-l { left: -10px; }
  .fest-art-r { right: -10px; }
  .fest-sub { font-size: .85rem; }
  .fest-alpana-a { width: 220px; left: -100px; }
  .fest-alpana-b { display: none; }
  .theme-preview-bar { bottom: 10px; padding: 7px 12px; border-radius: 12px; font-size: .78rem; line-height: 1.35; text-align: center; }
}
@media (min-width: 1024px) {
  .fest-alpana-a { width: 420px; left: -140px; }
}

/* ---------- Home top = one screen on laptops (see css/nbss.css): a tighter greeting banner ---------- */
@media (min-width: 1024px) and (orientation: landscape) {
  .fest-banner { margin: 2px 0 clamp(10px, 2.2vh, 24px); padding: clamp(8px, 1.6vh, 16px) 18px clamp(6px, 1.4vh, 14px); }
  .fest-banner.has-art { padding-inline: clamp(58px, 10vh, 74px); }
  .fest-banner.has-toran { padding-top: clamp(20px, 3.6vh, 28px); }
  .fest-head { font-size: clamp(1.1rem, 3.1vh, 1.75rem); line-height: 1.25; }
  .fest-sub { margin-top: 2px; font-size: clamp(.8rem, 1.95vh, .95rem); line-height: 1.35; }
  .fest-art { width: clamp(50px, 10vh, 78px); }
}

@media (min-width: 1024px) and (orientation: landscape) and (max-height: 660px) {
  .fest-sub { display: none; }                       /* very short windows: only the big greeting line */
  .fest-banner.has-toran { padding-top: 20px; }
}
/* ---------- 7. Pause what is scrolled away (js/theme.js marks it) / reduced motion ---------- */
[data-offscreen] .fest-art *, [data-offscreen] .fest-alpana, [data-offscreen].hero::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .fest-banner, .fest-banner *, .logo-orn *, .fest-alpana { animation: none !important; }
  .art-dhunuchi .puff { opacity: .5; }
  .theme-fx { display: none; }
}