/* =====================================================================
   DIWALI – colours and decoration
   Put in /theme/khichdi/css/festivals/diwali.css
   Everything is scoped to .fest-diwali (added to <body> only while Diwali runs).
   ===================================================================== */
.fest-diwali {
    --fx-ink: #330B3F;
    --fx-accent: #ffc107;
    --fx-cream: #fff8e1;
    --fx-line: #f0c64a;
    --fx-bar-bg: linear-gradient(90deg, #2a0835, #4a1559 50%, #2a0835);
    --fx-hero-bg: radial-gradient(ellipse at 75% 30%, #6a2380 0%, #3a0d48 45%, #1f0627 100%);
    --fx-gift-bg: linear-gradient(120deg, #fff4cc, #ffe08a);
    /* marigold edge on cards and boxes */
    --fx-edge: radial-gradient(circle at 5px 5px, #ff7a00 4px, transparent 4.5px) 0 0 / 10px 10px repeat-x;
    --fx-edge-h: 10px;
    --fx-decor-h: 30px;
}

/* Toran: string of marigolds + hanging mango leaves under the header */
.fest-diwali .fx-decor { background: #ffc107; }

    .fest-diwali .fx-decor::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 0;
        right: 0;
        height: 12px;
        background:
            radial-gradient(circle at 6px 6px, #ff7a00 5px, transparent 5.5px) 0 0 / 12px 12px repeat-x,
            radial-gradient(circle at 6px 6px, #ffd23f 3px, transparent 3.5px) 6px 0 / 12px 12px repeat-x;
    }

    .fest-diwali .fx-decor::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        height: 20px;
        background:
            radial-gradient(ellipse 7px 10px at 50% 45%, #3f8f3a 96%, transparent 100%) 0 0 / 48px 20px repeat-x,
            radial-gradient(circle at 50% 30%, #ff7a00 6px, transparent 6.5px) 24px 0 / 48px 20px repeat-x;
    }

/* Hero layer 1: night sky with stars */
.fest-diwali .fx-hero .fx-l1 {
    background-image:
        radial-gradient(2px 2px at 12% 22%, #ffe9a6, transparent), radial-gradient(1.5px 1.5px at 28% 66%, #fff, transparent),
        radial-gradient(2px 2px at 44% 14%, #ffd23f, transparent), radial-gradient(1.5px 1.5px at 62% 48%, #fff, transparent),
        radial-gradient(2px 2px at 86% 18%, #ffe9a6, transparent), radial-gradient(1.5px 1.5px at 92% 70%, #ffd23f, transparent),
        radial-gradient(1.5px 1.5px at 6% 84%, #fff, transparent), radial-gradient(2px 2px at 52% 86%, #ffe9a6, transparent);
}

/* Hero layer 2: faint gold rangoli, top right */
.fest-diwali .fx-hero .fx-l2 {
    inset: auto;
    right: -140px;
    top: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    opacity: .10;
    background: repeating-conic-gradient(#ffc107 0 10deg, transparent 10deg 20deg);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%, #000 49%, transparent 50%, transparent 60%, #000 61%, #000 69%, transparent 70%);
    mask: radial-gradient(circle, transparent 30%, #000 31%, #000 49%, transparent 50%, transparent 60%, #000 61%, #000 69%, transparent 70%);
}

/* Twinkling sparkles */
.fest-diwali .fx-hero .fx-s {
    width: 9px;
    height: 9px;
    background: #ffc107;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: fx-diwali-twinkle 2.4s ease-in-out infinite;
}

    .fest-diwali .fx-hero .fx-s:nth-of-type(2) { animation-delay: .8s; }
    .fest-diwali .fx-hero .fx-s:nth-of-type(3) { animation-delay: 1.4s; }

@keyframes fx-diwali-twinkle {
    0%, 100% { opacity: .2; transform: scale(.6); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Row of flickering diyas along the bottom of the hero */
.fest-diwali .fx-hero .fx-d { width: 46px; height: 32px; }

    .fest-diwali .fx-hero .fx-d::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 18px;
        background: linear-gradient(#e2711d, #a7410f);
        border-radius: 0 0 26px 26px / 0 0 18px 18px;
        box-shadow: inset 0 4px 0 #f08c3a;
    }

    .fest-diwali .fx-hero .fx-d::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 16px;
        width: 12px;
        height: 20px;
        margin-left: -6px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        background: radial-gradient(circle at 50% 70%, #fff7c2 0 25%, #ffd23f 45%, #ff8a00 80%);
        box-shadow: 0 0 18px 6px rgba(255,180,0,.55);
        animation: fx-diwali-flicker 1.6s ease-in-out infinite;
        transform-origin: 50% 100%;
    }

    .fest-diwali .fx-hero .fx-d:nth-child(2n)::after { animation-delay: .4s; }
    .fest-diwali .fx-hero .fx-d:nth-child(3n)::after { animation-delay: .8s; }

@keyframes fx-diwali-flicker {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.08, .94) rotate(2deg); }
}

@media (max-width: 991.98px) {
    .fest-diwali .fx-hero .fx-l2 { right: -230px; top: -230px; }
}

@media (max-width: 575.98px) {
    .fest-diwali { --fx-decor-h: 24px; }
        .fest-diwali .fx-decor::after { top: 8px; height: 16px; background-size: 40px 16px, 40px 16px; }
        .fest-diwali .fx-hero .fx-d { transform: scale(.85); }
}

/* ---------- Page colours + frame (headings, links, banners, window frame) ---------- */
.fest-diwali {
    --fx-head: #7a1430;                 /* deep kumkum maroon */
    --fx-head-line: linear-gradient(90deg, #ff7a00, #ffc107, #ff7a00);
    --fx-orn: "\1FA94";                 /* diya */
    --fx-link: #b23a0b;                 /* copper */
    --fx-link-hover: #7a1430;
    --fx-link-line: #ffc107;
    --fx-banner: radial-gradient(circle at 88% 25%, rgba(255,193,7,.35), transparent 38%),
                 radial-gradient(circle at 8% 90%, rgba(255,122,0,.30), transparent 35%),
                 linear-gradient(120deg, #2a0835, #5a1a6e 60%, #3a0d48);
    --fx-banner-head: #ffd54f;
    --fx-card-line: #f3d27a;
    --fx-glow: 0 10px 28px rgba(255,140,0,.30);
    /* frame: gold lamp dots on maroon */
    --fx-frame: radial-gradient(circle, #ffd54f 2px, transparent 2.6px) 0 0 / 12px 12px, #7a1430;
    --fx-frame-w: 7px;
    --fx-select: #ffe082;
}

/* One symbol per day of Diwali */
.fest-day-dhanteras       { --fx-orn: "\1FA99"; --fx-head: #6b4a00; --fx-link: #8a5a00; }   /* coin, gold-brown */
.fest-day-choti-diwali    { --fx-orn: "\2728"; }                                             /* sparkles */
.fest-day-govardhan-puja  { --fx-orn: "\1F64F"; --fx-head: #1f5e2e; --fx-link-hover: #1f5e2e;   /* green for Annakut */
                            --fx-frame: radial-gradient(circle, #ffd54f 2px, transparent 2.6px) 0 0 / 12px 12px, #1f5e2e; }
.fest-day-bhai-dooj       { --fx-orn: "\1F381"; --fx-head: #a3164f; --fx-link: #a3164f; --fx-link-hover: #7a1430;  /* tilak pink-red */
                            --fx-frame: radial-gradient(circle, #ffd54f 2px, transparent 2.6px) 0 0 / 12px 12px, #a3164f; }

/* Fireworks colours (one-time anar / sparkler animation) */
.fest-diwali { --fx-fire: #fffbe6, #ffe082, #ffc107, #ff9800, #ff6d00; }