/* Home — Navratri & Diwali 2026 layer. Original layout stays in home-page.css. */

body.is-festive {
    --fest-maroon: #6b1230;
    --fest-deep: #3a0d1e;
    --fest-saffron: #e07a2f;
    --fest-gold: #f0c14a;
    --fest-cream: #fff8ee;
    background:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(240, 193, 74, 0.18), transparent 55%),
        var(--page-bg);
}

body.is-festive .site-header {
    border-bottom: 0;
    box-shadow: 0 8px 28px rgba(58, 13, 30, 0.12);
}

body.is-festive .site-header .navbar {
    background:
        linear-gradient(180deg, #fff 0%, #fff 78%, #fff6e8 100%);
}

body.is-festive .nav-menu > li > a.active {
    background: linear-gradient(180deg, #fff4d6, #f3d48a);
    color: var(--fest-deep);
    box-shadow: inset 0 0 0 1px rgba(176, 112, 28, 0.35);
}

/* Light string under the nav */
.festive-lights {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 4px;
    height: 28px;
    margin: 0;
    padding: 0 10px;
    background:
        linear-gradient(#c9a24a, #c9a24a) center 0 / 100% 2px no-repeat,
        linear-gradient(90deg, #4a1024 0%, #7a1b38 50%, #4a1024 100%);
    overflow: hidden;
    pointer-events: none;
}

.festive-lights span {
    width: 12px;
    height: 16px;
    margin-top: 4px;
    border-radius: 50% 50% 42% 42%;
    background: radial-gradient(circle at 50% 35%, #fff8d6 0%, #ffd15c 38%, #f08a2a 72%, #c2410c 100%);
    box-shadow: 0 8px 14px rgba(255, 170, 40, 0.55);
    transform-origin: top center;
    animation: festive-flicker 2.4s ease-in-out infinite;
}

.festive-lights span:nth-child(3n) {
    background: radial-gradient(circle at 50% 35%, #fff 0%, #fecdd3 40%, #e11d48 78%);
    box-shadow: 0 8px 14px rgba(225, 29, 72, 0.45);
}

.festive-lights span:nth-child(4n) {
    background: radial-gradient(circle at 50% 35%, #fff 0%, #fde68a 36%, #f59e0b 78%);
}

.festive-lights span:nth-child(5n) {
    background: radial-gradient(circle at 50% 35%, #fff 0%, #ddd6fe 40%, #7c3aed 80%);
    box-shadow: 0 8px 14px rgba(124, 58, 237, 0.4);
}

.festive-lights span:nth-child(odd) { animation-delay: 0.35s; }
.festive-lights span:nth-child(3n + 1) { animation-delay: 0.9s; }
.festive-lights span:nth-child(4n + 2) { animation-delay: 1.4s; }

@keyframes festive-flicker {
    0%, 100% { opacity: 1; filter: brightness(1); transform: scaleY(1); }
    45% { opacity: 0.72; filter: brightness(1.25); transform: scaleY(0.92); }
    70% { opacity: 1; filter: brightness(0.9); }
}

/* Hero */
body.is-festive .hero {
    padding: 42px 0 36px;
    background:
        radial-gradient(circle at 12% 20%, rgba(240, 193, 74, 0.28), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(225, 29, 72, 0.16), transparent 26%),
        radial-gradient(circle at 70% 90%, rgba(124, 58, 237, 0.12), transparent 24%),
        linear-gradient(165deg, #fff9f1 0%, #ffe8c7 42%, #f7d7e4 100%);
}

body.is-festive .hero__bg { opacity: 0.2; }

.festive-spark {
    position: absolute;
    z-index: 1;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 3px rgba(240, 193, 74, 0.85);
    animation: festive-spark 4.5s ease-in-out infinite;
    pointer-events: none;
}

.festive-spark:nth-child(1) { top: 18%; left: 8%; animation-delay: 0s; }
.festive-spark:nth-child(2) { top: 28%; right: 10%; left: auto; animation-delay: 0.8s; }
.festive-spark:nth-child(3) { bottom: 22%; left: 16%; animation-delay: 1.4s; }
.festive-spark:nth-child(4) { top: 14%; left: 42%; animation-delay: 2s; }
.festive-spark:nth-child(5) { bottom: 16%; right: 18%; left: auto; animation-delay: 2.6s; }
.festive-spark:nth-child(6) { top: 46%; left: 6%; width: 4px; height: 4px; animation-delay: 1.1s; }

@keyframes festive-spark {
    0%, 100% { opacity: 0.15; transform: translateY(0) scale(0.6); }
    50% { opacity: 1; transform: translateY(-10px) scale(1); }
}

.festive-diya {
    position: absolute;
    z-index: 1;
    width: 54px;
    height: 36px;
    pointer-events: none;
    animation: festive-float 6s ease-in-out infinite;
}

.festive-diya--left { left: 4%; bottom: 18%; }
.festive-diya--right { right: 4%; bottom: 22%; animation-delay: 1.2s; }

.festive-diya__flame {
    width: 14px;
    height: 22px;
    margin: 0 auto 2px;
    border-radius: 50% 50% 40% 40%;
    background: radial-gradient(circle at 50% 70%, #fff6c2, #ffb703 45%, #fb5607 80%);
    filter: blur(0.2px);
    animation: festive-flame 0.9s ease-in-out infinite alternate;
}

.festive-diya__bowl {
    height: 16px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #f6d98a, #b45309);
    box-shadow: 0 8px 16px rgba(180, 83, 9, 0.28);
}

@keyframes festive-flame {
    from { transform: scaleX(0.85) scaleY(1); }
    to { transform: scaleX(1.08) scaleY(1.12); }
}

@keyframes festive-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

body.is-festive .hero__badge {
    background: rgba(255, 248, 238, 0.92);
    border-color: rgba(176, 112, 28, 0.45);
    color: var(--fest-maroon);
}

body.is-festive .hero__en .gold {
    background: linear-gradient(90deg, #b45309, #f0c14a, #e11d48, #f0c14a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: festive-shimmer 5s linear infinite;
}

@keyframes festive-shimmer {
    to { background-position: 200% center; }
}

.festive-dates {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.festive-dates span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(107, 18, 48, 0.12);
    font-size: 12px;
    font-weight: 700;
    color: var(--fest-deep);
}

body.is-festive .trust-strip {
    background: linear-gradient(90deg, #fff8ee, #fff, #fff4f6);
    border-bottom-color: rgba(224, 122, 47, 0.25);
}

/* Season stage */
.festive-season {
    position: relative;
    padding: 28px 0 8px;
    overflow: hidden;
}

.festive-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 22px;
    align-items: center;
    padding: 28px 28px 24px;
    border-radius: 24px;
    color: #fff8ee;
    background:
        radial-gradient(circle at 0% 0%, rgba(240, 193, 74, 0.35), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(225, 29, 72, 0.35), transparent 36%),
        linear-gradient(135deg, #4a1024 0%, #7a1b38 48%, #9a3412 100%);
    box-shadow: 0 18px 40px rgba(74, 16, 36, 0.22);
    overflow: hidden;
}

.festive-rangoli {
    position: absolute;
    right: -70px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: conic-gradient(
        #f97316, #fff, #dc2626, #1d4ed8, #eab308, #16a34a, #94a3b8, #7c3aed, #0f766e, #f97316
    );
    opacity: 0.28;
    filter: blur(0.2px);
    animation: festive-spin 28s linear infinite;
    pointer-events: none;
}

.festive-rangoli::after {
    content: "";
    position: absolute;
    inset: 42px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 40%, rgba(74, 16, 36, 0.2) 41%, transparent 42%),
        repeating-conic-gradient(from 0deg, transparent 0 12deg, rgba(255, 255, 255, 0.35) 12deg 14deg);
}

@keyframes festive-spin { to { transform: rotate(360deg); } }

.festive-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(240, 193, 74, 0.45);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fest-gold);
}

.festive-stage h2 {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    max-width: 16ch;
}

.festive-stage h2 span {
    display: block;
    margin-top: 6px;
    font-family: var(--font-hi);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0;
    color: #ffe7b0;
}

.festive-stage p {
    position: relative;
    margin-top: 12px;
    max-width: 52ch;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 248, 238, 0.88);
}

.festive-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.festive-actions a,
.festive-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.festive-actions .is-gold {
    background: linear-gradient(180deg, #ffe08a, #e0a325);
    color: #3a0d1e;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.festive-actions .is-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.festive-count {
    position: relative;
    z-index: 1;
    padding: 16px 14px 14px;
    border-radius: 18px;
    background: rgba(255, 248, 238, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    text-align: center;
}

.festive-count__label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffe7b0;
}

.festive-count__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.festive-count__grid div {
    padding: 8px 4px;
    border-radius: 12px;
    background: rgba(26, 6, 12, 0.28);
}

.festive-count__grid strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.festive-count__grid span {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

.festive-count__note {
    margin: 10px 0 0;
    font-size: 12px;
    color: rgba(255, 248, 238, 0.8);
}

/* Nine nights */
.festive-nights {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.festive-night {
    min-width: 0;
    padding: 10px 6px 8px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(107, 18, 48, 0.08);
    text-align: center;
    box-shadow: 0 6px 16px rgba(74, 16, 36, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.festive-night:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(74, 16, 36, 0.12);
}

.festive-night i {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 6px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(0, 0, 0, 0.12);
}

.festive-night strong {
    display: block;
    font-size: 11px;
    color: var(--fest-deep);
}

.festive-night span {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-muted);
}

.festive-night.is-today {
    outline: 2px solid var(--fest-gold);
    transform: translateY(-3px);
}

/* Offer cards */
.festive-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.festive-card {
    position: relative;
    overflow: hidden;
    padding: 18px 16px 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(224, 122, 47, 0.22);
    box-shadow: 0 10px 24px rgba(26, 82, 120, 0.06);
}

.festive-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #f0c14a, #e11d48);
}

.festive-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--fest-deep);
    margin-bottom: 6px;
}

.festive-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
}

.festive-card a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fest-maroon);
}

body.is-festive .cta-banner {
    background:
        radial-gradient(circle at 10% 0%, rgba(240, 193, 74, 0.35), transparent 28%),
        linear-gradient(135deg, #4a1024 0%, #7a1b38 55%, #9a3412 100%);
}

body.is-festive .steps__grid::before {
    background: linear-gradient(90deg, transparent, rgba(224, 122, 47, 0.45), transparent);
}

@media (max-width: 980px) {
    .festive-stage { grid-template-columns: 1fr; padding: 22px 18px; }
    .festive-rangoli { width: 180px; height: 180px; right: -40px; top: -50px; }
    .festive-nights {
        display: flex;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .festive-night { flex: 0 0 92px; scroll-snap-align: start; }
    .festive-cards { grid-template-columns: 1fr; }
    .festive-diya { display: none; }
}

@media (max-width: 640px) {
    .festive-lights { height: 22px; }
    .festive-lights span:nth-child(n + 13) { display: none; }
    .festive-lights span { width: 9px; height: 12px; }
    body.is-festive .hero { padding: 28px 0 24px; }
    .festive-count__grid strong { font-size: 18px; }
    .festive-stage h2 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .festive-lights span,
    .festive-spark,
    .festive-diya,
    .festive-diya__flame,
    .festive-rangoli,
    body.is-festive .hero__en .gold {
        animation: none !important;
    }
    body.is-festive .hero__en .gold {
        color: #f0c14a;
        background: none;
        -webkit-text-fill-color: #f0c14a;
    }
}