/* ==========================================================================
   heYUM — Diwali festive layer  (additive / drop-in / safe to delete)
   --------------------------------------------------------------------------
   Pair with assets/diwali.js. Both are purely decorative: every rule here is
   either a new .dw-* class or a *tint* on existing tokens. Remove the two
   <link>/<script> tags from a page and that page returns to normal.
   ========================================================================== */

:root {
    /* Festive palette — layered ON TOP of the brand tokens, never replacing. */
    --dw-marigold: #ff9f1c;
    --dw-gold: #ffd166;
    --dw-gold-soft: rgba(255, 209, 102, 0.22);
    --dw-magenta: #e0218a;
    --dw-magenta-soft: rgba(224, 33, 138, 0.18);
    --dw-emerald: #2ec4a0;
    --dw-flame: #ffcc5c;
    --dw-ink: #080705;
}

/* A warm festive wash behind everything. Sits under all content. */
body.dw-on::before {
    content: "";
    position: fixed;
    inset: 0;
    /* -1 paints above the page background but below every bit of content,
       static or positioned. With z-index:0 a fixed box paints ON TOP of
       non-positioned content and dims the page. */
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(70% 45% at 50% 108%, rgba(255, 159, 28, 0.17), transparent 70%),
        radial-gradient(45% 35% at 8% 4%, rgba(224, 33, 138, 0.10), transparent 70%),
        radial-gradient(45% 35% at 94% 10%, rgba(255, 209, 102, 0.10), transparent 70%);
}

/* NOTE: deliberately no z-index/position rules on existing page elements.
   Every decorative layer below sits at z-index:-1, so page content keeps
   whatever stacking it already had. Nothing here can reorder a page. */

/* --- Gold-leaf tint on existing cards (subtle, inherits all geometry) ---- */
body.dw-on .feature-card,
body.dw-on .app-promo-card,
body.dw-on .waitlist-container {
    border-color: rgba(255, 209, 102, 0.26);
    box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.06), 0 18px 50px -30px rgba(255, 159, 28, 0.55);
}

body.dw-on .badge,
body.dw-on .live-badge {
    border-color: rgba(255, 209, 102, 0.4);
    box-shadow: 0 0 26px -6px rgba(255, 159, 28, 0.5);
}

/* ==========================================================================
   DECORATION 1 — Diyas (clay oil lamps) resting in the lower corners
   ========================================================================== */
.dw-diyas {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: -1;
    pointer-events: none;
}

.dw-diya {
    position: absolute;
    bottom: 14px;
    width: 46px;
}

.dw-diya.dw-left {
    left: 3vw;
}

.dw-diya.dw-right {
    right: 3vw;
}

.dw-diya .dw-pot {
    height: 15px;
    border-radius: 0 0 46px 46px / 0 0 26px 26px;
    background: linear-gradient(180deg, #8d4b23, #4a2412);
    box-shadow: inset 0 2px 0 rgba(255, 209, 102, 0.3), 0 6px 18px rgba(0, 0, 0, 0.6);
}

.dw-diya .dw-flame {
    width: 11px;
    height: 20px;
    margin: 0 auto -3px;
    border-radius: 50% 50% 46% 46% / 72% 72% 28% 28%;
    background: radial-gradient(circle at 50% 76%, #fff6d8 0 18%, var(--dw-flame) 42%, var(--dw-marigold) 72%, rgba(224, 33, 138, 0) 100%);
    filter: blur(0.3px);
    transform-origin: 50% 90%;
    animation: dw-flicker 2.4s ease-in-out infinite;
}

.dw-diya .dw-halo {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 120px;
    height: 120px;
    margin-left: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 159, 28, 0.3), transparent 62%);
    animation: dw-breathe 3.6s ease-in-out infinite;
}

@keyframes dw-flicker {

    0%,
    100% {
        transform: rotate(-3deg) scaleY(1);
        opacity: 0.95;
    }

    35% {
        transform: rotate(2deg) scaleY(1.1);
        opacity: 1;
    }

    65% {
        transform: rotate(-1deg) scaleY(0.94);
        opacity: 0.88;
    }
}

@keyframes dw-breathe {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.12);
    }
}

/* ==========================================================================
   DECORATION 2 — Rising embers / sparkles
   ========================================================================== */
.dw-sparks {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.dw-spark {
    position: absolute;
    bottom: -14px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--dw-gold);
    box-shadow: 0 0 7px 1px rgba(255, 209, 102, 0.85);
    opacity: 0;
    animation: dw-rise linear infinite;
}

@keyframes dw-rise {
    0% {
        transform: translateY(0) translateX(0) scale(0.6);
        opacity: 0;
    }

    12% {
        opacity: 0.85;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(-104vh) translateX(26px) scale(1.1);
        opacity: 0;
    }
}

/* ==========================================================================
   DECORATION 3 — Rangoli mandala, faint, bottom-centre
   ========================================================================== */
.dw-rangoli {
    position: fixed;
    left: 50%;
    bottom: -210px;
    width: 560px;
    height: 560px;
    margin-left: -280px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.16;
    animation: dw-spin 90s linear infinite;
}

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

/* ==========================================================================
   The festive chip — the one interactive piece of the layer
   ========================================================================== */
.dw-chip {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #1a0f03;
    background: linear-gradient(135deg, var(--dw-gold), var(--dw-marigold));
    box-shadow: 0 10px 30px -8px rgba(255, 159, 28, 0.75), 0 0 0 1px rgba(255, 246, 216, 0.35) inset;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.dw-chip:hover,
.dw-chip:focus-visible {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 38px -8px rgba(255, 159, 28, 0.9);
}

.dw-chip .dw-chip-diya {
    font-size: 1rem;
    animation: dw-breathe 2.8s ease-in-out infinite;
}

@media (max-width: 560px) {
    .dw-chip {
        right: 12px;
        bottom: 12px;
        font-size: 0.72rem;
        padding: 9px 13px;
        max-width: calc(100vw - 24px);
    }

    .dw-diya {
        width: 36px;
    }

    .dw-rangoli {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        bottom: -160px;
    }
}

/* Respect people who don't want motion, and people on slow/print paths. */
@media (prefers-reduced-motion: reduce) {

    .dw-diya .dw-flame,
    .dw-diya .dw-halo,
    .dw-spark,
    .dw-rangoli,
    .dw-chip .dw-chip-diya {
        animation: none !important;
    }

    .dw-sparks {
        display: none;
    }
}

@media print {

    .dw-diyas,
    .dw-sparks,
    .dw-rangoli,
    .dw-chip {
        display: none !important;
    }
}

/* ==========================================================================
   Homepage festive banner — entry point to the Diwali Plate Decider.
   Styles live here (not in the page) so index.html's own CSS is untouched.
   ========================================================================== */
.dw-banner {
    display: block;
    text-decoration: none;
    color: inherit;
    margin: 2.6rem auto 0;
    max-width: 680px;
    padding: 24px 26px;
    border-radius: 22px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(255, 159, 28, 0.14), transparent 62%),
        radial-gradient(120% 140% at 100% 100%, rgba(224, 33, 138, 0.12), transparent 62%),
        #13100d;
    box-shadow: 0 30px 70px -44px rgba(255, 159, 28, 0.85);
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
    text-align: left;
}

.dw-banner:hover,
.dw-banner:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(255, 209, 102, 0.6);
    box-shadow: 0 36px 80px -40px rgba(255, 159, 28, 1);
}

.dw-banner .dw-b-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--dw-gold);
}

.dw-banner h3 {
    font-size: clamp(1.15rem, 3.2vw, 1.6rem);
    font-weight: 900;
    letter-spacing: -0.6px;
    line-height: 1.2;
    margin: 12px 0 8px;
    color: #fdfbf7;
}

.dw-banner p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: #a69f95;
}

.dw-banner .dw-b-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 0.86rem;
    font-weight: 900;
    color: var(--dw-marigold);
}

.dw-banner .dw-b-go span {
    transition: transform 0.24s ease;
}

.dw-banner:hover .dw-b-go span {
    transform: translateX(5px);
}

@media (max-width: 560px) {
    .dw-banner {
        padding: 20px;
        margin-top: 2rem;
    }
}

/* ==========================================================================
   CINEMA MODE  —  body.dw-cinema, opted into with data-dw-mode="cinema"
   --------------------------------------------------------------------------
   For intro.html, which is a letterboxed WebGL film rather than a web page.
   Two things make the default layer wrong there:

   1. It paints `background` on BOTH <html> and <body>. That stops the body
      background propagating to the canvas, so body's own opaque background
      covers anything at z-index:-1 — the whole layer would be invisible.
   2. It owns a deliberate stack: film 0 · halation 1 · grain 3 · letterbox
      bars 4 · copy 10 · chrome 20-22.

   So here the decorations move to z-index 2: above the film and its bloom,
   but UNDER the grain and the letterbox bars. The decorations pick up the
   film's grain and get cropped by the letterbox, which is what makes them
   read as part of the shot instead of stuck on top of it.
   ========================================================================== */

/* The film already carries its own colour grade (.halation) — a second wash
   on top of it just milks the blacks. */
body.dw-cinema::before {
    display: none;
}

body.dw-cinema .dw-diyas,
body.dw-cinema .dw-sparks,
body.dw-cinema .dw-rangoli {
    z-index: 2;
}

body.dw-cinema .dw-rangoli {
    opacity: 0.1;
}

body.dw-cinema .dw-sparks {
    /* The keyframes animate `opacity`, so dimming the individual spark does
       nothing — the container is the only place this can be turned down. */
    opacity: 0.5;
}

body.dw-cinema .dw-spark {
    box-shadow: 0 0 6px 1px rgba(255, 209, 102, 0.6);
}

/* Lamps flank the foot of the frame instead of sitting in the corners, which
   belong to .act-tag (bottom-left) and the .sound toggle (bottom-right).
   Raised clear of the bottom letterbox bar so they are not sliced in half. */
body.dw-cinema .dw-diyas {
    bottom: clamp(18px, 3.4vh, 44px);
}

body.dw-cinema .dw-diya.dw-left {
    left: 28vw;
}

body.dw-cinema .dw-diya.dw-right {
    right: 28vw;
}

/* The chip moves to the top-right. Bottom-right is the .sound button (z 22)
   and the chip would sit on top of it and swallow the click. */
body.dw-cinema .dw-chip {
    /* Clears the top letterbox bar with a little breathing room. */
    top: calc(clamp(18px, 3.4vh, 44px) + 18px);
    right: clamp(20px, 4vw, 52px);
    bottom: auto;
    font-size: 0.72rem;
    padding: 9px 15px;
    opacity: 0.9;
}

body.dw-cinema .dw-chip:hover,
body.dw-cinema .dw-chip:focus-visible {
    opacity: 1;
}

@media (max-width: 640px) {
    body.dw-cinema .dw-diya.dw-left {
        left: 14vw;
    }

    body.dw-cinema .dw-diya.dw-right {
        right: 14vw;
    }
}