/* ====================================================================
   DIWALI THEME (Frontend) — Rich India
   Festive decorations only (site colours untouched): greeting strip,
   twinkling string-lights, glowing diyas in the hero, firework burst
   and cursor sparkle trail.
   Completely isolated. Toggle via DIWALI_THEME_ENABLED in .env.
   Safe to delete: remove this file, diwali-theme.js, and the @if
   blocks in css.blade.php / js.blade.php.
   ==================================================================== */

:root {
    --dw-gold: #f6c453;
    --dw-gold-deep: #d99a1c;
    --dw-saffron: #ff8a00;
    --dw-red: #c8102e;
    --dw-maroon: #5e0b15;
    --dw-cream: #fff6df;
}

/* ---------- Top greeting strip ---------- */
.dw-top-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 10px 44px;
    background: linear-gradient(90deg, var(--dw-maroon) 0%, #8d1226 25%, var(--dw-red) 50%, #8d1226 75%, var(--dw-maroon) 100%);
    color: var(--dw-cream);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
    z-index: 9999;
    overflow: hidden;
    border-bottom: 2px solid var(--dw-gold);
}
.dw-top-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(246,196,83,.35) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: dwShine 5s ease-in-out infinite;
    pointer-events: none;
}
.dw-top-bar__text { position: relative; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.dw-top-bar__text b { color: var(--dw-gold); }
.dw-top-bar__diya { width: 22px; height: 22px; flex: none; position: relative; }
.dw-top-bar__close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); color: #fff; font-size: 13px;
    cursor: pointer; transition: background .2s ease;
}
.dw-top-bar__close:hover { background: rgba(255,255,255,.32); }
@keyframes dwShine { 0%,55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- Hanging string-lights (fairy lights) ---------- */
.dw-lights {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 54px;
    pointer-events: none;
    z-index: 5;
}
.dw-lights svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dw-lights .dw-wire { fill: none; stroke: #7a5a1a; stroke-width: 1.4; }
.dw-bulb { animation: dwTwinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dw-bulb:nth-of-type(4n+1) { animation-delay: 0s; }
.dw-bulb:nth-of-type(4n+2) { animation-delay: .6s; }
.dw-bulb:nth-of-type(4n+3) { animation-delay: 1.2s; }
.dw-bulb:nth-of-type(4n)   { animation-delay: 1.8s; }
@keyframes dwTwinkle {
    0%,100% { opacity: 1; filter: drop-shadow(0 0 5px currentColor); }
    50%     { opacity: .45; filter: drop-shadow(0 0 1px currentColor); }
}

/* ---------- Sparkle burst canvas ---------- */
.dw-burst-canvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 10000;
}

/* ---------- Hero: glowing diyas + warm glow ---------- */
.main-slider { position: relative; }
.dw-diya {
    position: absolute;
    width: 74px; height: 50px;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 0 14px rgba(255,160,30,.75));
}
.dw-diya-1 { left: 4%;  bottom: 7%; }
.dw-diya-2 { left: 16%; bottom: 3%; transform: scale(.75); }
.dw-diya-3 { right: 5%; bottom: 8%; }
.dw-diya-4 { right: 17%; bottom: 3%; transform: scale(.75); }
.dw-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dwFlicker 1.3s ease-in-out infinite alternate; }
.dw-diya-2 .dw-flame { animation-delay: .3s; }
.dw-diya-3 .dw-flame { animation-delay: .6s; }
.dw-diya-4 .dw-flame { animation-delay: .9s; }
@keyframes dwFlicker {
    0%   { transform: scale(1, 1)    skewX(0deg);  opacity: 1; }
    35%  { transform: scale(.92, 1.1) skewX(-3deg); }
    70%  { transform: scale(1.05, .94) skewX(3deg); opacity: .92; }
    100% { transform: scale(.95, 1.08) skewX(-2deg); opacity: 1; }
}

/* ---------- Floating embers / marigold petals ---------- */
.dw-ember {
    position: absolute; bottom: -20px;
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle, #ffe08a 0%, #ff9d00 60%, transparent 70%);
    opacity: 0;
    pointer-events: none; z-index: 3;
    animation: dwRise 9s linear infinite;
}
@keyframes dwRise {
    0%   { transform: translate(0,0) scale(.6); opacity: 0; }
    15%  { opacity: .9; }
    100% { transform: translate(var(--dw-drift, 30px), -520px) scale(1.1); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .dw-diya-2, .dw-diya-4 { display: none; }
    .dw-diya { width: 58px; height: 40px; }
}
@media (max-width: 767px) {
    .dw-top-bar { font-size: 12px; padding: 8px 36px; gap: 6px; }
    .dw-top-bar__diya { width: 16px; height: 16px; }
    .dw-lights { height: 40px; }
    .dw-diya { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dw-top-bar::before, .dw-bulb, .dw-flame, .dw-ember { animation: none !important; }
    .dw-ember { display: none; }
}

/* ---------- Loader: no blocking preloader on the Diwali theme ---------- */
.loader.js-preloader { display: none !important; }

/* ===== Welcome loader: "Lighting the Diya" ===== */
.dw-intro {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer; text-align: center;
    background: radial-gradient(120% 90% at 50% 45%, #3a0716 0%, #1c030c 55%, #0b0105 100%);
    transition: opacity .8s ease, transform .8s ease;
}
.dw-intro.is-leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* warm light that spreads from the diya */
.dw-i-glow {
    position: absolute; left: 50%; top: 46%;
    width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax;
    background: radial-gradient(closest-side, rgba(255,170,50,.42), rgba(255,90,30,.18) 38%, transparent 70%);
    transform: scale(0); animation: dwLight 2.6s cubic-bezier(.2,.7,.2,1) .35s forwards;
    pointer-events: none;
}
@keyframes dwLight { to { transform: scale(.5); } }

/* marigold toran */
.dw-i-toran { position: absolute; top: 0; left: 0; width: 100%; height: clamp(46px, 9vh, 80px); transform-origin: top center; animation: dwToranIn .9s ease-out both, dwSwayX 6s ease-in-out 1s infinite; }
.dw-i-flower { filter: drop-shadow(0 0 3px rgba(255,160,20,.7)); transform-box: fill-box; transform-origin: center; animation: dwPop .5s ease-out both; }
@keyframes dwToranIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes dwPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dwSwayX { 0%,100% { transform: skewX(0deg); } 50% { transform: skewX(.8deg); } }

/* star lanterns */
.dw-i-kandil { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: dwSwing 5s ease-in-out infinite; pointer-events: none; }
.dw-i-kandil i { display: block; width: 1px; height: calc(var(--h) + 4vh); background: rgba(255,207,120,.6); }
.dw-i-kandil svg { width: clamp(42px, 6vw, 74px); height: auto; filter: drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 30px var(--c)); animation: dwKandilGlow 2.2s ease-in-out infinite alternate; }
@keyframes dwSwing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes dwKandilGlow { from { opacity: .8; } to { opacity: 1; } }

/* copy */
.dw-intro-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 18px; }
.dw-i-rangoli { position: absolute; top: 50%; left: 50%; z-index: -1; width: min(112vw, 86vh, 720px); height: min(112vw, 86vh, 720px); transform: translate(-50%, -50%); opacity: .85; }
.dw-rg-spin { transform-origin: 200px 200px; animation: dwSpin 70s linear infinite; }
.dw-rg-rev { animation-direction: reverse; animation-duration: 90s; }
@keyframes dwSpin { to { transform: rotate(360deg); } }
.rg { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dwDraw 1.6s ease-out var(--d, 0s) forwards; filter: drop-shadow(0 0 3px currentColor); }
@keyframes dwDraw { to { stroke-dashoffset: 0; } }

.dw-i-bigdiya { width: clamp(86px, 12vw, 130px); height: auto; margin-bottom: 4px; filter: drop-shadow(0 0 24px rgba(255,150,30,.9)); animation: dwDiyaIn .9s ease-out .2s both; }
.dw-i-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dwFlame 1.2s ease-in-out infinite alternate, dwFlameOn .8s ease-out .6s both; }
@keyframes dwFlame { 0% { transform: scale(1,1) skewX(0); } 50% { transform: scale(.93,1.08) skewX(-3deg); } 100% { transform: scale(1.04,.95) skewX(3deg); } }
@keyframes dwFlameOn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dwDiyaIn { from { opacity: 0; transform: translateY(24px) scale(.8); } to { opacity: 1; transform: none; } }

.dw-i-hindi {
    margin: 0; font-family: 'Yatra One', 'Tiro Devanagari Hindi', Georgia, serif;
    font-size: clamp(40px, min(9vw, 12vh), 104px); line-height: 1.25;
    background: linear-gradient(100deg, #ffb703 10%, #fff3c4 40%, #ff8a00 70%, #ffcf33 95%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(255,150,30,.5));
    animation: dwTitleIn 1s ease-out 1s both, dwShineText 3.4s linear 1s infinite;
}
.dw-i-en {
    margin: 0 0 12px; font-family: 'Yatra One', Georgia, serif; font-weight: 400;
    font-size: clamp(18px, 3vw, 32px); letter-spacing: .38em; text-transform: uppercase; color: #ffd9a0;
    animation: dwTitleIn 1s ease-out 1.3s both;
}
@keyframes dwTitleIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dwShineText { to { background-position: -120% 0; } }
.dw-i-logo { margin: 4px 0 12px; padding: 7px 18px; border-radius: 14px; background: rgba(255,248,236,.95); box-shadow: 0 0 0 1px rgba(255,183,3,.7), 0 0 28px rgba(255,160,40,.45); animation: dwTitleIn 1s ease-out 1.6s both; }
.dw-i-logo img { display: block; width: clamp(120px, 14vw, 170px); height: auto; }
.dw-i-tag { margin: 0; max-width: 560px; color: #ffe7c2; font-size: clamp(14px, 1.8vw, 20px); line-height: 1.5; animation: dwTitleIn 1s ease-out 1.9s both; }

/* progress: seven lamps catching light */
.dw-i-prog { display: flex; gap: 12px; margin-top: 22px; }
.dw-i-prog b { width: 11px; height: 15px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #4a2a22; animation: dwLamp .5s ease-out calc(2.2s + var(--i) * .55s) forwards; }
@keyframes dwLamp { to { background: radial-gradient(circle at 50% 70%, #fff6d6, #ffcf33 45%, #ff6b00); box-shadow: 0 0 12px 3px rgba(255,160,30,.85); } }

/* petals */
.dw-i-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dw-i-petals span { position: absolute; top: -24px; width: 11px; height: 15px; border-radius: 60% 0 60% 0; background: linear-gradient(135deg, #ffcf33, #ff7a00); opacity: .9; animation: dwFall 10s linear infinite; }
.dw-i-petals span:nth-child(3n) { background: linear-gradient(135deg, #ff7ab0, #e0245e); }
@keyframes dwFall { 0% { transform: translate(0,-20px) rotate(0); opacity: 0; } 8% { opacity: .9; } 100% { transform: translate(var(--w), 108vh) rotate(var(--r)); opacity: .9; } }

/* glowing floor line */
.dw-i-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, rgba(255,120,30,.35), transparent); pointer-events: none; }
.dw-i-floor::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 14px; height: 10px; background: radial-gradient(circle, #ffb703 0 3px, transparent 4px) 0 0 / 28px 10px repeat-x; filter: drop-shadow(0 0 6px #ff9a00); opacity: .9; }

.dw-intro-skip { position: absolute; z-index: 3; top: 16px; right: 16px; padding: 7px 18px; border: 1px solid rgba(255,207,120,.55); border-radius: 999px; background: rgba(40,6,18,.6); color: #ffd9a0; font-size: 14px; cursor: pointer; transition: background .3s ease; }
.dw-intro-skip:hover { background: rgba(255,207,120,.22); }

/* fx canvas */
#dw-fx-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10002; }

@media (max-width: 768px) {
    .dw-i-kandil:nth-of-type(n+3) { display: none; }
    .dw-i-prog { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .dw-i-petals, .dw-i-toran, .dw-i-kandil, .dw-rg-spin { animation: none !important; }
}
@media print { .dw-intro, #dw-fx-canvas { display: none !important; } }