/*
 * Deepavali theme - the alternate side of the Light/Diwali pair (APP_ACTIVE_THEME=diwali,
 * see ThemeService::THEMES). Loaded only while diwali is the active pair, after core.css
 * and the page CSS, so these tokens win.
 *
 * Built on dark mode, like theme-xmas.css: while it's on, <html> carries
 * `dark theme-diwali theme-alt`, so every html.dark rule still applies and this file only
 * re-colours the tokens. Follows the legacy site's .diwali-mode (BSM/src/bsm/css/css.css):
 * deep indigo page (#150942 -> #4a2c5a), gold/saffron links and prices, the hanging-diya
 * header band (img/diwali-header.png + videos/diwali-header.mp4), twinkling gold stars and
 * floating diyas (the last three driven by public/js/v3/theme-diwali.js).
 *
 * Contrast (WCAG, computed): --ink on --page 15.9:1, --ink-soft on --page 10.9:1, --accent
 * on --page 8.7:1, --accent-text on --accent 8.7:1, --gold on --page 12.0:1, --gold on
 * --plate 10.3:1, --up on --page 9.8:1, --down on --page 8.6:1, white on --down-fill
 * 5.9:1, --strip-gold on --strip-bg 13.6:1 - all clear 4.5:1.
 */
html.theme-diwali {
    --page: #1F0F4D;
    --panel: #170A3F;
    --plate: #2E1A62;
    --ink: #FFF6E5;
    --ink-soft: #D8C8F0;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23D8C8F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --accent: #FFA62B;
    --accent-text: #1F0F4D;
    --gold: #FFD45C;
    --line: #40296E;
    --up: #4ADE80;
    --down: #FF9E9E;
    /* Fills behind white text (LIVE tag, badges, danger button) - --down is tuned light
       for text on indigo, too pale for that; white on this red is 5.9:1. */
    --down-fill: #C8102E;
    --shadow: rgba(0, 0, 0, .5);
    --focus: #FFD45C;

    /* Header price strip: near-black indigo. Gold on it 13.6:1. */
    --strip-bg: #0E0630;
    --strip-gold: #FFD45C;
}

/* --- Header band (logo row): legacy's hanging-diya art -------------------------
   The PNG is the static band (and the video's poster); theme-diwali.js lays the
   animated mp4 over it, centred behind the logo like legacy's .header-video. Tokens
   re-scoped inside the band so its text stays cream on the indigo (17.0:1). */
html.theme-diwali .v3-brand-row {
    --ink: #FFF6E5;
    --ink-soft: #D8C8F0;
    --accent: #FFD45C;
    --accent-text: #150942;
    --line: rgba(255, 246, 229, .3);
    position: relative;
    overflow: hidden;
    background: #150942 url("/img/diwali-header.png") center top / auto 100% no-repeat;
    border-bottom-color: #2E1A62;
}
html.theme-diwali .v3-brand-row > .v3-inner { position: relative; z-index: 1; }
.v3-diwali-video {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    /* Legacy cropped the clip to a wide strip (500x110, object-fit: cover) - same
       ~4.5:1 strip here at the band's height. */
    height: 100%; width: 460px; max-width: 100%; object-fit: cover; z-index: 0; pointer-events: none;
    /* Fade the strip's sides into the band instead of a hard-edged box. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
html:not(.theme-diwali) .v3-diwali-video { display: none; }

/* Product card plates: core's --plate -> --panel gradient (#2E1A62 -> #170A3F) all but
   vanishes on the #1F0F4D page, so lift the frame to a lighter violet with a warm gold
   glow at the top and a faint gold rest ring. The hover ring (.v3-card:hover) and PDP
   thumb is-current/hover rings are more specific, so they still replace the rest ring.
   The home hero's frame (home.css .v3-hero-plate-frame) uses the same gradient, so it
   gets the same lift, keeping its own drop shadow alongside the ring. */
html.theme-diwali :is(.v3-card-plate, .v3-hero-plate-frame) {
    background:
        radial-gradient(120% 55% at 50% 0%, rgba(255, 212, 92, .22), transparent 70%),
        linear-gradient(180deg, #4E2F92 0%, #382072 100%);
}
html.theme-diwali .v3-card-plate { box-shadow: inset 0 0 0 1px rgba(255, 212, 92, .35); }
html.theme-diwali .v3-hero-plate-frame { box-shadow: inset 0 0 0 1px rgba(255, 212, 92, .35), 0 24px 48px var(--shadow); }

/* Cart badge: --down is a pale pink here, too light for white digits. */
html.theme-diwali .v3-cart-count { background: #C8102E; }

/* Switch: purple track while on, purple rangoli on the white knob (9.8:1). */
html.theme-diwali .v3-theme-toggle input:checked + .v3-theme-slider { background: #5A2D82; border-color: #5A2D82; }
html.theme-diwali .v3-theme-circle svg { color: #5A2D82; }

/* --- Twinkling stars + floating diyas (theme-diwali.js adds/removes .v3-diwali) ---
   Two fixed star layers on different tile sizes / timings so the twinkle never lines
   up - same gradients as legacy body.diwali-mode::before/::after. */
/* Behind the content (z-index -1, under every in-flow element but above the page
   background), so stars and diyas only show through the bare page and never sit on
   text, menus or cards - unlike theme-snow's front overlay. */
.v3-diwali { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
/* For that layer to show at all, the full-width page bands must not paint a solid
   colour over it (body's --page paints the canvas, beneath the layer). --page bands go
   clear; --panel bands keep their alternating shade as a tint (#170A3F at 55%). Header,
   menu, announcements, cards, inputs and tables stay solid, so nothing sits on content. */
html.theme-diwali :is(.v3-triptych, .v3-footer-press) { background: transparent; }
html.theme-diwali :is(.v3-hero, .v3-section.on-panel, .v3-assurance, .v3-footer-badges) { background: rgba(23, 10, 63, .55); }
.v3-diwali-stars { position: absolute; inset: 0; background-repeat: repeat; }
.v3-diwali-stars--a {
    background-image:
        radial-gradient(2px 2px at 17% 23%, #ffd700, transparent), radial-gradient(3px 3px at 73% 8%, #ff8c00, transparent),
        radial-gradient(2px 2px at 41% 67%, #ffd700, transparent), radial-gradient(3px 3px at 89% 34%, #ffb347, transparent),
        radial-gradient(2px 2px at 3% 91%, #ffd700, transparent),  radial-gradient(3px 3px at 62% 45%, #ff8c00, transparent),
        radial-gradient(2px 2px at 28% 12%, #ffd700, transparent), radial-gradient(3px 3px at 94% 78%, #ffb347, transparent),
        radial-gradient(2px 2px at 51% 29%, #ffd700, transparent), radial-gradient(3px 3px at 8% 56%, #ff8c00, transparent),
        radial-gradient(1px 1px at 35% 84%, #ffd700, transparent), radial-gradient(2px 2px at 76% 19%, #ff8c00, transparent),
        radial-gradient(1px 1px at 14% 73%, #ffd700, transparent), radial-gradient(2px 2px at 58% 6%, #ffb347, transparent),
        radial-gradient(1px 1px at 82% 52%, #ffd700, transparent), radial-gradient(2px 2px at 21% 38%, #ff8c00, transparent),
        radial-gradient(1px 1px at 67% 95%, #ffd700, transparent), radial-gradient(2px 2px at 39% 61%, #ffb347, transparent),
        radial-gradient(1px 1px at 96% 27%, #ffd700, transparent), radial-gradient(2px 2px at 5% 15%, #ff8c00, transparent);
    background-size: 800px 600px;
    animation: v3-diwali-twinkle-a 3s ease-in-out infinite;
}
.v3-diwali-stars--b {
    background-image:
        radial-gradient(1px 1px at 24% 47%, #ffd700, transparent), radial-gradient(2px 2px at 68% 71%, #ff8c00, transparent),
        radial-gradient(1px 1px at 47% 18%, #ffd700, transparent), radial-gradient(2px 2px at 11% 85%, #ffb347, transparent),
        radial-gradient(1px 1px at 83% 39%, #ffd700, transparent), radial-gradient(2px 2px at 56% 92%, #ff8c00, transparent),
        radial-gradient(1px 1px at 32% 53%, #ffd700, transparent), radial-gradient(2px 2px at 77% 14%, #ffb347, transparent),
        radial-gradient(1px 1px at 9% 68%, #ffd700, transparent),  radial-gradient(2px 2px at 61% 25%, #ff8c00, transparent),
        radial-gradient(1px 1px at 88% 81%, #ffd700, transparent), radial-gradient(2px 2px at 43% 7%, #ffb347, transparent),
        radial-gradient(1px 1px at 19% 96%, #ffd700, transparent), radial-gradient(2px 2px at 74% 58%, #ff8c00, transparent),
        radial-gradient(1px 1px at 92% 33%, #ffd700, transparent);
    background-size: 900px 700px;
    animation: v3-diwali-twinkle-b 4s ease-in-out 1s infinite;
}
@keyframes v3-diwali-twinkle-a { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes v3-diwali-twinkle-b { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
@media (max-width: 768px) {
    .v3-diwali-stars--a { background-size: 600px 400px; }
    .v3-diwali-stars--b { background-size: 500px 350px; }
}

/* Floating diyas: a soft gold glow with the 🪔 on top, bobbing - legacy .floating-diya.
   Positions/timings are set per diya by theme-diwali.js (legacy's seven nth-child slots). */
.v3-diya {
    position: absolute; width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, .55) 20%, rgba(255, 140, 0, .35) 60%, transparent 80%);
    animation: v3-diya-float 6s ease-in-out infinite;
}
.v3-diya::after {
    content: '🪔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px;
}
@keyframes v3-diya-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-20px) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .v3-diwali, .v3-diwali-video { display: none; }
}