/* ============================================================
 * Festival effects overlay — rendered on top of the themed palette when the active
 * AppTheme sets an `effect`, plus an optional faint background `pattern` watermark.
 * The overlay (.rd-fx) is fixed and non-interactive; festival-fx.js populates it with
 * the particles / marigold garlands for the chosen effect. The pattern watermark
 * (.rd-bg-pattern) sits BEHIND page content. All colours pull from the theme vars so
 * they re-tint with the active palette. Honors reduced-motion.
 * ============================================================ */
.rd-fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.rd-fx > * { position: absolute; will-change: transform, opacity; }

/* --- Realistic marigold flower (SVG, theme-tinted). Built by festival-fx.js and reused
   by every garland. Petal rings alternate light/dark gold for a layered, domed look. --- */
.rd-marigold { display: inline-block; transform-origin: top center;
    animation: rdSway 3s ease-in-out infinite; filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)); }
.rd-mg-outer { fill: var(--rd-highlight-soft, #f8d583); }
.rd-mg-mid   { fill: var(--rd-accent-dark, #e6712b); }
.rd-mg-inner { fill: var(--rd-highlight, #d4a64b); }
.rd-mg-core  { fill: var(--rd-accent-deep, #c95613); }
.rd-mg-glint { fill: #fff; opacity: .5; }
@keyframes rdSway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* Green mango leaf tucked between flowers. */
.rd-mg-leaf { display: inline-block; transform-origin: top center;
    animation: rdSway 4.2s ease-in-out infinite; }
.rd-leaf-body { fill: var(--rd-success, #2d7a3f); }
.rd-leaf-vein { stroke: rgba(255,255,255,.5); stroke-width: 1; fill: none; }

/* --- Garland (toran) layout — flowers + leaves strung on a thread (the border-top). --- */
.rd-fx-garland { top: 0; left: 0; right: 0; min-height: 30px; display: flex;
    justify-content: space-between; align-items: flex-start; padding: 0 6px;
    border-top: 3px solid var(--rd-accent-deep, #b47611); }
.rd-g-flower.rd-g-small, .rd-g-leaf { margin-top: 7px; }
.rd-g-flower.rd-g-small { animation-duration: 3.6s; }
.rd-g-flower:nth-child(3n) { animation-delay: .5s; }

.rd-fx-lantern { top: -2px; font-size: 38px; line-height: 1; transform-origin: top center;
    animation: rdSway 4s ease-in-out infinite; filter: drop-shadow(0 4px 5px rgba(0,0,0,.22)); }

.rd-fx-spark { width: 3px; height: 3px; border-radius: 50%; background: var(--rd-highlight-soft, #ffd54f);
    box-shadow: 0 0 6px 1px var(--rd-highlight, #ffc107); animation: rdSparkle 2.4s ease-in-out infinite; }
@keyframes rdSparkle { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }

.rd-fx-diya { bottom: -40px; font-size: 26px; line-height: 1; animation: rdRise linear infinite; }
@keyframes rdRise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .95; }
    90% { opacity: .95; } 100% { transform: translateY(-112vh) rotate(8deg); opacity: 0; } }

/* --- Snow (Christmas / New Year) --- */
.rd-fx-snow { top: -24px; color: #fff; line-height: 1; text-shadow: 0 0 4px rgba(255,255,255,.6); animation: rdFall linear infinite; }
@keyframes rdFall { 0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; } 10% { opacity: 1; }
    100% { transform: translateY(112vh) translateX(40px) rotate(360deg); opacity: .9; } }

/* --- Holi colour powder (drifts upward, fades) --- */
.rd-fx-powder { width: 10px; height: 10px; border-radius: 50%; filter: blur(1px); animation: rdDrift linear infinite; }
@keyframes rdDrift { 0% { transform: translateY(24px) scale(.6); opacity: 0; } 20% { opacity: .8; }
    100% { transform: translateY(-70px) translateX(30px) scale(1.25); opacity: 0; } }

/* --- Confetti (Tricolor / generic celebration) — falls + tumbles --- */
.rd-fx-confetti { top: -20px; width: 8px; height: 12px; border-radius: 2px; animation: rdConfetti linear infinite; }
@keyframes rdConfetti { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; }
    100% { transform: translateY(112vh) rotate(540deg); opacity: .9; } }

/* --- Diwali element decorations (JS attaches these to banners + section titles) --- */
/* Marigold garland framing a banner — four strips (top/bottom/left/right) positioned by
   festival-fx.js to the banner's edges; the border is the gold "thread" of each strip. */
.rd-fx-banner-garland {
    position: absolute; z-index: 100; display: flex; pointer-events: none;
}
.rd-fx-banner-garland.top, .rd-fx-banner-garland.bottom {
    flex-direction: row; justify-content: space-around; padding: 0 6px;
}
.rd-fx-banner-garland.left, .rd-fx-banner-garland.right {
    flex-direction: column; justify-content: space-around; align-items: center; padding: 6px 0;
}
.rd-fx-banner-garland.top    { align-items: flex-start; border-top: 3px solid var(--rd-accent-deep, #b47611); }
.rd-fx-banner-garland.bottom { align-items: flex-end;   border-bottom: 3px solid var(--rd-accent-deep, #b47611); }
.rd-fx-banner-garland.left   { border-left: 3px solid var(--rd-accent-deep, #b47611); }
.rd-fx-banner-garland.right  { border-right: 3px solid var(--rd-accent-deep, #b47611); }

/* Diyas resting at the bottom corners of a banner. */
.rd-fx-corner-diya {
    position: absolute; bottom: 8px; font-size: 26px; line-height: 1; z-index: 100;
    pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
    animation: rdFlicker .5s ease-in-out infinite alternate;
}
.rd-fx-corner-diya.left  { left: 12px; }
.rd-fx-corner-diya.right { right: 12px; animation-delay: .25s; }
@keyframes rdFlicker { from { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)) brightness(1); }
    to { filter: drop-shadow(0 2px 5px rgba(240,180,58,.5)) brightness(1.25); } }

/* Small diyas flanking a section title (left + right). */
.rd-fx-title-diya {
    font-size: .8em; margin: 0 .38em; vertical-align: 0.04em; line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
    animation: rdFlicker .6s ease-in-out infinite alternate;
}

/* --- Background pattern watermark (AppTheme.background_pattern = "mandala").
   festival-fx.js SCATTERS accent-tinted mandala motifs across this fixed, non-interactive
   overlay (random position/rotation/scale, well-spaced) so it reads as an organic watermark
   rather than a rigid tiled grid. Sits above the opaque section fills but below the sticky
   header/cart/particles. The .rd-* fill/stroke vars below tint the hero-backdrop mandala. --- */
.rd-bg-pattern {
    position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .08; overflow: hidden;
}
.rd-bg-pattern .rd-bg-mandala { position: absolute; display: block; }
.rd-mandala-line { fill: none; stroke: var(--rd-accent, #e8a62e); stroke-width: 1; }
.rd-mandala-fill { fill: var(--rd-accent, #e8a62e); }

/* Visible mandala backdrop centred on a hero banner (festival-banner look). Blended so
   the accent lines glow over the themed banner; sits below the garland/diyas (z:100). */
.rd-fx-banner-mandala {
    position: absolute; inset: 0; z-index: 2; display: flex; overflow: hidden;
    align-items: center; justify-content: center; pointer-events: none;
    opacity: .18; mix-blend-mode: screen;
}
.rd-fx-banner-mandala svg { width: min(68%, 460px); height: auto; }

@media (prefers-reduced-motion: reduce) {
    .rd-fx { display: none; }
    .rd-marigold, .rd-mg-leaf, .rd-fx-corner-diya, .rd-fx-title-diya { animation: none !important; }
}