/* =====================================================================
   Diwali campaign hero  –  Views/Home/_DiwaliHero.cshtml
   Loaded from Views/Home/Index.cshtml only while the campaign is live.
   ===================================================================== */

.dw-hero {
    --dw-gold: #f3c26b;
    --dw-gold-2: #ffd76a;
    --dw-navy: #0b1a52;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    text-align: center;
    padding: 46px 20px 128px;
    background:
        radial-gradient(ellipse 55% 60% at 50% 40%, rgba(46, 86, 182, .55), rgba(46, 86, 182, 0) 70%),
        linear-gradient(180deg, #0a1850 0%, #0e2266 48%, #0a1746 100%);
}

    /* warm floor glow from the diyas */
    .dw-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            radial-gradient(ellipse 30% 45% at 6% 78%, rgba(255, 150, 40, .38), rgba(255, 150, 40, 0) 70%),
            radial-gradient(ellipse 28% 45% at 94% 75%, rgba(255, 150, 40, .34), rgba(255, 150, 40, 0) 70%),
            linear-gradient(180deg, rgba(5, 10, 40, 0) 70%, rgba(5, 10, 40, .45) 100%);
    }

.dw-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dw-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------------- Background layers ---------------- */
.dw-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.dw-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1600&auto=format&fit=crop') center 35% / cover no-repeat;
    opacity: .34;
    mix-blend-mode: luminosity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

.dw-bokeh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 26px at 4% 14%, rgba(255, 196, 92, .55), transparent),
        radial-gradient(circle 18px at 11% 34%, rgba(255, 178, 70, .5), transparent),
        radial-gradient(circle 34px at 17% 8%, rgba(255, 206, 110, .35), transparent),
        radial-gradient(circle 14px at 22% 46%, rgba(255, 196, 92, .55), transparent),
        radial-gradient(circle 22px at 27% 22%, rgba(255, 170, 60, .3), transparent),
        radial-gradient(circle 12px at 31% 62%, rgba(255, 196, 92, .45), transparent),
        radial-gradient(circle 10px at 36% 12%, rgba(255, 220, 140, .4), transparent),
        radial-gradient(circle 9px at 64% 10%, rgba(255, 220, 140, .4), transparent),
        radial-gradient(circle 16px at 70% 30%, rgba(255, 196, 92, .4), transparent),
        radial-gradient(circle 28px at 76% 12%, rgba(255, 190, 90, .32), transparent),
        radial-gradient(circle 12px at 80% 52%, rgba(255, 196, 92, .55), transparent),
        radial-gradient(circle 20px at 86% 26%, rgba(255, 206, 110, .45), transparent),
        radial-gradient(circle 14px at 90% 46%, rgba(255, 180, 70, .55), transparent),
        radial-gradient(circle 32px at 95% 10%, rgba(255, 206, 110, .38), transparent),
        radial-gradient(circle 10px at 98% 36%, rgba(255, 220, 140, .55), transparent),
        radial-gradient(circle 8px at 74% 64%, rgba(255, 220, 140, .5), transparent),
        radial-gradient(circle 6px at 84% 70%, rgba(255, 230, 160, .7), transparent),
        radial-gradient(circle 6px at 66% 72%, rgba(255, 230, 160, .55), transparent);
    animation: dw-twinkle 6s ease-in-out infinite alternate;
}

/* hanging bead strings – top left */
.dw-garland {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(220px, 21vw, 340px);
    height: auto;
    opacity: .95;
    filter: drop-shadow(0 0 6px rgba(255, 190, 80, .35));
}

/* rangoli on the floor – bottom left */
.dw-rangoli {
    position: absolute;
    left: -7%;
    bottom: 2%;
    width: clamp(320px, 33vw, 540px);
    height: auto;
    transform: perspective(900px) rotateX(58deg);
    transform-origin: 50% 100%;
    opacity: .95;
    filter: drop-shadow(0 0 14px rgba(255, 160, 60, .25));
}

/* ---------------- Diyas ---------------- */
.dw-diya {
    --w: 170px;
    position: absolute;
    width: var(--w);
    height: calc(var(--w) * .45);
}

    .dw-diya::before { /* glow */
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(var(--w) * .5);
        width: calc(var(--w) * 1.7);
        height: calc(var(--w) * 1.7);
        transform: translate(-50%, 50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 186, 70, .55) 0%, rgba(255, 140, 30, .18) 32%, rgba(255, 140, 30, 0) 62%);
        animation: dw-glow 2.6s ease-in-out infinite;
    }

    .dw-diya .dw-bowl {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
    }

    .dw-diya .dw-flame {
        position: absolute;
        left: 50%;
        bottom: calc(var(--w) * .39);
        width: calc(var(--w) * .14);
        height: calc(var(--w) * .315);
        margin-left: calc(var(--w) * -.07);
        transform-origin: 50% 100%;
        filter: drop-shadow(0 0 10px rgba(255, 170, 40, .9));
        animation: dw-flicker 1.8s ease-in-out infinite;
    }

.dw-diya--l1 { --w: clamp(120px, 11vw, 190px); left: 2%; bottom: 25%; }
.dw-diya--l2 { --w: clamp(80px, 6.5vw, 115px); left: 15%; bottom: 46%; filter: blur(1.5px); opacity: .8; }
.dw-diya--r1 { --w: clamp(120px, 12vw, 200px); right: -1.5%; bottom: 34%; }
.dw-diya--r2 { --w: clamp(100px, 9vw, 150px); right: 10%; bottom: 22%; }
.dw-diya--r3 { --w: clamp(70px, 5.5vw, 95px); right: 3%; bottom: 62%; filter: blur(2px); opacity: .7; }

.dw-diya--l2 .dw-flame { animation-delay: -.6s; }
.dw-diya--r1 .dw-flame { animation-delay: -1.1s; }
.dw-diya--r2 .dw-flame { animation-delay: -.3s; }
.dw-diya--r3 .dw-flame { animation-delay: -1.4s; }
.dw-diya--r1::before { animation-delay: -1s; }
.dw-diya--r2::before { animation-delay: -.4s; }

/* ---------------- Content ---------------- */
.dw-inner {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
}

.dw-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
}

.dw-flourish {
    width: 54px;
    height: 18px;
    flex-shrink: 0;
}

.dw-flourish--r {
    transform: scaleX(-1);
}

.dw-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px;
    border: 1.5px solid rgba(243, 194, 107, .9);
    border-radius: 999px;
    background: rgba(8, 16, 58, .6);
    box-shadow: 0 0 22px rgba(255, 190, 70, .22), inset 0 0 14px rgba(255, 190, 70, .14);
    color: var(--dw-gold-2);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
}

.dw-badge-diya {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.dw-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.04;
}

.dw-title-line {
    display: block;
    font-size: clamp(34px, 5vw, 74px);
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.dw-title-gold {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 18px);
    margin-top: 2px;
}

.dw-gold-text {
    font-size: clamp(38px, 5.4vw, 80px);
    background: linear-gradient(180deg, #fff6c2 0%, #ffd34d 38%, #f5a623 72%, #c97a12 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(255, 186, 60, .4));
    padding-bottom: .06em; /* keeps descenders inside the clip */
}

.dw-spark {
    display: inline-block;
    width: clamp(14px, 1.6vw, 24px);
    height: clamp(14px, 1.6vw, 24px);
    background: radial-gradient(circle, #fff 0 12%, #ffd34d 35%, rgba(255, 211, 77, 0) 72%);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
    animation: dw-spark 2.4s ease-in-out infinite;
}

.dw-spark--r {
    animation-delay: -1.2s;
}

.dw-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 16px;
}

    .dw-divider span {
        width: clamp(70px, 11vw, 150px);
        height: 1.5px;
        background: linear-gradient(90deg, rgba(243, 194, 107, 0), var(--dw-gold));
    }

        .dw-divider span:last-child {
            background: linear-gradient(90deg, var(--dw-gold), rgba(243, 194, 107, 0));
        }

    .dw-divider svg {
        width: 28px;
        height: 16px;
    }

.dw-hero .dw-sub {
    margin: 0 0 10px;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(18px, 1.9vw, 27px) !important;
    font-weight: 600;
    color: #fff;
    opacity: 1 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.dw-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(14px, 1.2vw, 17.5px);
    color: rgba(255, 255, 255, .92);
}

    .dw-features li {
        display: inline-flex;
        align-items: center;
    }

        .dw-features li + li::before {
            content: "";
            width: 7px;
            height: 7px;
            margin: 0 18px;
            border-radius: 50%;
            background: var(--dw-gold-2);
            box-shadow: 0 0 8px rgba(255, 210, 100, .8);
        }

/* search (reuses .search-bar from Main.css) */
.dw-search .search-bar {
    max-width: 760px;
    margin: 24px auto 0;
    border: 1px solid rgba(243, 194, 107, .45);
    box-shadow: 0 14px 34px rgba(3, 8, 35, .45), 0 0 0 4px rgba(255, 255, 255, .05);
}

/* buttons */
.dw-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.dw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 230px;
    padding: 14px 30px;
    border-radius: 8px;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .dw-btn svg {
        width: 20px;
        height: 20px;
        transition: transform .2s ease;
    }

.dw-btn--gold {
    color: #1a1a3a !important;
    background: linear-gradient(180deg, #ffd25a 0%, #ffb627 55%, #f39a12 100%);
    border: 1px solid #ffdf8a;
    box-shadow: 0 8px 22px rgba(255, 168, 30, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
}

    .dw-btn--gold:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
        box-shadow: 0 12px 28px rgba(255, 168, 30, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
    }

        .dw-btn--gold:hover svg {
            transform: translateX(4px);
        }

.dw-btn--light {
    color: #0f1f5c !important;
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 8px 22px rgba(3, 8, 35, .3);
}

    .dw-btn--light:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(3, 8, 35, .4);
    }

.dw-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.dw-hero .dw-trust {
    margin: 20px 0 0;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 17px !important;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .92);
    opacity: 1 !important;
}

    .dw-trust strong {
        font-size: 1.35em;
        font-weight: 700;
        color: var(--dw-gold-2);
        text-shadow: 0 0 14px rgba(255, 200, 80, .45);
    }

/* ---------------- Stat cards while Diwali hero is on ---------------- */
.dw-stats .stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: -150px;
}

.dw-stats .stat-box {
    padding: 18px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 16px 34px rgba(6, 14, 50, .28);
}

.dw-stats .stat-icon,
.dw-stats .stat-icon svg {
    width: 30px;
    height: 30px;
}

.dw-stats .stat-info b {
    font-size: clamp(17px, 1.2vw, 21px);
    color: #16213e;
}

.dw-stats .stat-label {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

/* ---------------- Animations ---------------- */
@keyframes dw-flicker {
    0%, 100% { transform: scale(1, 1) skewX(0deg); opacity: 1; }
    20% { transform: scale(.96, 1.06) skewX(1.5deg); }
    40% { transform: scale(1.03, .95) skewX(-1deg); opacity: .92; }
    60% { transform: scale(.97, 1.08) skewX(-2deg); }
    80% { transform: scale(1.02, .98) skewX(1deg); opacity: .96; }
}

@keyframes dw-glow {
    0%, 100% { opacity: .85; transform: translate(-50%, 50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, 50%) scale(1.07); }
}

@keyframes dw-spark {
    0%, 100% { transform: scale(.8); opacity: .7; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes dw-twinkle {
    from { opacity: .75; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dw-hero *,
    .dw-hero *::before {
        animation: none !important;
    }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
    .dw-diya--l2,
    .dw-diya--r3 { display: none; }
    .dw-diya--l1 { bottom: 26%; }
    .dw-diya--r2 { right: 6%; bottom: 16%; }
}

@media (max-width: 1200px) {
    .dw-stats .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dw-stats .stat-info b { font-size: 19px; }
}

@media (max-width: 992px) {
    .dw-garland { width: 200px; opacity: .7; }
    .dw-photo { width: 100%; opacity: .2; }
    .dw-diya--l1 { --w: 110px; left: -2%; bottom: 40%; }
    .dw-diya--r1 { --w: 110px; right: -3%; bottom: 44%; }
    .dw-diya--r2 { display: none; }
}

@media (max-width: 768px) {
    .dw-hero { padding: 30px 16px 130px !important; }
    .dw-garland { display: none; }
    .dw-rangoli { width: 260px; left: -90px; bottom: -6%; opacity: .7; }
    .dw-diya--l1 { --w: 78px; left: -14px; top: 18px; bottom: auto; opacity: .85; }
    .dw-diya--r1 { --w: 78px; right: -16px; top: 18px; bottom: auto; opacity: .85; }
    .dw-flourish { width: 30px; }
    .dw-badge { font-size: 12px; padding: 5px 14px; gap: 7px; }
    .dw-badge-diya { width: 18px; height: 18px; }
    .dw-features { flex-direction: column; align-items: center; gap: 4px; }
        .dw-features li + li::before { display: none; }
        .dw-features li::before {
            content: "";
            display: inline-block !important;
            width: 6px;
            height: 6px;
            margin: 0 8px 0 0 !important;
            border-radius: 50%;
            background: var(--dw-gold-2);
        }
    .dw-search .search-bar { margin-top: 18px; }
    .dw-cta { gap: 10px; }
    .dw-btn { flex: 1 1 100%; min-width: 0; font-size: 15px; padding: 12px 18px; }
    .dw-hero .dw-trust { font-size: 14px !important; }
}

@media (max-width: 576px) {
    .dw-hero { padding-bottom: 80px !important; }
    .dw-stats .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -120px; }
    .dw-stats .stat-box { padding: 12px 10px; gap: 8px; }
    .dw-stats .stat-icon,
    .dw-stats .stat-icon svg { width: 24px; height: 24px; }
    .dw-stats .stat-info b { font-size: 15px; }
    .dw-stats .stat-label { font-size: 11px; }
}

/* ---------------- Rocket-cracker effect layer ---------------- */
.dw-fx {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}