/* ══════════════════════════════════════════════════════════════════════════
   DHAR PRELOADER — Production · Haute Couture
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --dhar-champagne: #f0e2c0;
    --dhar-gold: #c9a84c;
    --dhar-gold-deep: #8a6f2e;
    --dhar-burgundy-deep: #140004;
    --dhar-velvet: #2a0006;
    --dhar-curtain-w: 50.15%;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
.dhar-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--dhar-burgundy-deep);
    contain: strict;
    isolation: isolate;
}

.dhar-preloader.is-exiting {
    pointer-events: none;
    background: transparent;
}

.dhar-preloader[data-state="revealing"] .dhar-preloader__stage {
    pointer-events: none;
}

/* ── Stage ───────────────────────────────────────────────────────────────── */
.dhar-preloader__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(74, 0, 9, 0.7) 0%, transparent 68%),
        radial-gradient(ellipse 35% 25% at 50% 48%, rgba(201, 168, 76, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #0e0003 0%, #1e0005 40%, #2a0006 60%, #140004 100%);
    will-change: opacity, transform;
}

.dhar-preloader__silk {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background:
        repeating-linear-gradient(122deg, transparent 0 4px, rgba(0,0,0,0.03) 4px 5px),
        repeating-linear-gradient(58deg, transparent 0 8px, rgba(255,255,255,0.012) 8px 9px);
}

.dhar-preloader__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.dhar-preloader__velvet-glow {
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(65vw, 480px);
    height: min(65vw, 480px);
    margin-left: calc(min(65vw, 480px) / -2);
    margin-top: calc(min(65vw, 480px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 0, 9, 0.35) 0%, transparent 68%);
    filter: blur(45px);
    opacity: 0;
    transform: scale(0.6);
    will-change: opacity, transform;
}

.dhar-preloader__dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
    z-index: 1;
}

/* ── Decor ───────────────────────────────────────────────────────────────── */
.dhar-preloader__torana {
    position: absolute;
    top: clamp(16px, 3.5vw, 36px);
    left: 50%;
    transform: translateX(-50%);
    width: min(80vw, 440px);
    opacity: 0;
    z-index: 3;
}

.dhar-torana-path { stroke-dasharray: 600; stroke-dashoffset: 600; }
.dhar-torana-dot  { opacity: 0; transform-origin: center; }

.dhar-preloader__rangoli {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(82vmin, 520px);
    height: min(82vmin, 520px);
    margin-left: calc(min(82vmin, 520px) / -2);
    margin-top: calc(min(82vmin, 520px) / -2);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

.dhar-rangoli-spin {
    transform-box: fill-box;
    transform-origin: center;
}

.dhar-rangoli-path { stroke-dasharray: 400; stroke-dashoffset: 400; }

.dhar-preloader__frame {
    position: absolute;
    inset: clamp(20px, 4.5vw, 48px);
    z-index: 4;
    pointer-events: none;
}

.dhar-preloader__filigree {
    position: absolute;
    width: clamp(52px, 9vw, 88px);
    height: clamp(52px, 9vw, 88px);
    opacity: 0;
}

.dhar-preloader__filigree--tl { top: 0; left: 0; }
.dhar-preloader__filigree--tr { top: 0; right: 0; transform: scaleX(-1); }
.dhar-preloader__filigree--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.dhar-preloader__filigree--br { bottom: 0; right: 0; transform: scale(-1); }

.dhar-filigree-path { stroke-dasharray: 80; stroke-dashoffset: 80; }

/* ── Content ─────────────────────────────────────────────────────────────── */
.dhar-preloader__content {
    position: relative;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    max-width: 100%;
    will-change: opacity, transform;
}

.dhar-preloader__medallion {
    position: relative;
    z-index: 10;
    width: clamp(170px, 36vw, 240px);
    height: clamp(170px, 36vw, 240px);
    margin-bottom: clamp(20px, 3.5vw, 30px);
}

.dhar-preloader__progress-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.dhar-preloader__logo-wrap {
    position: absolute;
    inset: clamp(10px, 2.5vw, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dhar-preloader__logo-halo {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 226, 192, 0.12) 0%, transparent 68%);
    opacity: 0;
}

.dhar-preloader__logo {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 38%, #5c0010 0%, #2a0006 55%, #140004 100%);
    opacity: 0;
    transform: scale(0.88);
    filter: blur(4px);
    box-shadow:
        0 0 0 1px rgba(240, 226, 192, 0.55),
        0 0 0 4px rgba(201, 168, 76, 0.22),
        0 0 36px rgba(201, 168, 76, 0.28),
        0 12px 40px rgba(0, 0, 0, 0.5);
    will-change: opacity, transform, filter;
}

.dhar-preloader__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.dhar-preloader__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,0.06) 47%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.06) 53%, transparent 60%);
    transform: translateX(-130%);
    pointer-events: none;
    mix-blend-mode: overlay;
}

.dhar-preloader__sanskrit {
    margin: 0 0 10px;
    font-family: var(--ff-title-sub, 'Playfair Display', serif);
    font-size: clamp(11px, 2vw, 14px);
    letter-spacing: 0.35em;
    color: rgba(240, 226, 192, 0.65);
    opacity: 0;
    transform: translateY(12px);
}

.dhar-preloader__brand {
    margin: 0 0 8px;
    font-family: var(--ff-title, 'Monotype Corsiva', cursive);
    font-size: clamp(32px, 5.8vw, 50px);
    letter-spacing: 0.06em;
    color: var(--dhar-champagne);
    text-shadow: 0 1px 20px rgba(201, 168, 76, 0.25);
    opacity: 0;
    transform: translateY(16px);
}

.dhar-preloader__tagline {
    margin: 0 0 clamp(24px, 4vw, 36px);
    font-family: var(--ff-title-sub, 'Playfair Display', serif);
    font-size: clamp(10px, 1.8vw, 12px);
    font-style: italic;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    opacity: 0;
    transform: translateY(10px);
}

.dhar-preloader__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
}

.dhar-preloader__progress-label {
    font-family: var(--ff-base, 'Mulish', sans-serif);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(240, 226, 192, 0.4);
}

.dhar-preloader__progress-text {
    font-family: var(--ff-title-sub, 'Playfair Display', serif);
    font-size: clamp(16px, 2.8vw, 20px);
    letter-spacing: 0.15em;
    color: var(--dhar-champagne);
}

/* ── Curtains — production split reveal ──────────────────────────────────── */
.dhar-preloader__curtains {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    overflow: hidden;
}

.dhar-preloader__curtain {
    position: absolute;
    top: 0;
    width: var(--dhar-curtain-w);
    height: 100%;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    background: #1a0005;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.45);
}

.dhar-preloader__curtain--left {
    left: 0;
    transform-origin: left center;
}

.dhar-preloader__curtain--right {
    right: 0;
    transform-origin: right center;
}

.dhar-preloader__curtain-fold {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.07) 0px,
            rgba(0, 0, 0, 0.07) 3px,
            transparent 3px,
            transparent 14px
        ),
        linear-gradient(180deg, #220006 0%, #3d0009 38%, #2a0006 72%, #180004 100%);
}

.dhar-preloader__curtain--left .dhar-preloader__curtain-fold {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.07) 0px,
            rgba(0, 0, 0, 0.07) 3px,
            transparent 3px,
            transparent 14px
        ),
        linear-gradient(100deg, #180004 0%, #320008 45%, #220006 100%);
}

.dhar-preloader__curtain--right .dhar-preloader__curtain-fold {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.07) 0px,
            rgba(0, 0, 0, 0.07) 3px,
            transparent 3px,
            transparent 14px
        ),
        linear-gradient(260deg, #180004 0%, #320008 45%, #220006 100%);
}

.dhar-preloader__curtain-trim {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 2;
    background: linear-gradient(180deg, #6b5520 0%, var(--dhar-champagne) 45%, #6b5520 100%);
    box-shadow:
        0 0 8px rgba(201, 168, 76, 0.6),
        0 0 20px rgba(201, 168, 76, 0.25);
}

.dhar-preloader__curtain--left .dhar-preloader__curtain-trim  { right: 0; }
.dhar-preloader__curtain--right .dhar-preloader__curtain-trim { left: 0; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dhar-preloader__logo,
    .dhar-preloader__sanskrit,
    .dhar-preloader__brand,
    .dhar-preloader__tagline,
    .dhar-preloader__progress {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

@media (max-width: 480px) {
    .dhar-preloader__rangoli {
        width: 90vmin;
        height: 90vmin;
        margin-left: -45vmin;
        margin-top: -45vmin;
    }
}

/* ── Mobile — simple, professional fallback ──────────────────────────────────
   The GSAP/DrawSVG/canvas-dust production sequence above is desktop-grade
   spectacle. On phones it costs battery and jank without adding perceived
   value, so mobile gets a lighter mark: logo, brand, tagline, a plain CSS
   spinner instead of the SVG progress ring, no dust, no line-draw ornaments. */
@media (max-width: 767px) {
    .dhar-preloader__torana,
    .dhar-preloader__rangoli,
    .dhar-preloader__frame,
    .dhar-preloader__dust,
    .dhar-preloader__velvet-glow,
    .dhar-preloader__progress-ring {
        display: none !important;
    }

    .dhar-preloader__medallion {
        width: 104px;
        height: 104px;
        margin-bottom: 20px;
    }

    .dhar-preloader__medallion::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(201, 168, 76, 0.18);
        border-top-color: var(--dhar-gold);
        animation: dhar-preloader-spin 900ms linear infinite;
    }

    .dhar-preloader__sanskrit {
        margin-bottom: 6px;
    }

    .dhar-preloader__tagline {
        margin-bottom: clamp(18px, 5vw, 26px);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .dhar-preloader__medallion::after {
        animation: none;
    }
}