/* ══════════════════════════════════════════════════════════════════════════
   Seva Mera Yogdaan Utsav Chhattisgarh — Intro Preloader / Splash

   Palette is taken straight from the portal surfaces (white / slate-50,
   #ff3333 primary, slate-900 ink, amber accent) via the tokens in
   config/theme.php, with literal fallbacks so it renders correctly even
   before the theme <style> block applies.

   The backdrop is a translucent frosted pane, so the site behind stays
   faintly visible instead of a flat opaque wash.
   ══════════════════════════════════════════════════════════════════════════ */

.du-preloader {
    --du-red:        var(--color-primary, #ff3333);
    --du-red-hover:  var(--color-primary-hover, #e02828);
    --du-red-deep:   var(--color-primary-active, #c51e1e);
    --du-amber:      var(--color-gold, #fbbf24);
    --du-amber-dark: var(--color-gold-dark, #d97706);
    --du-ink:        var(--color-dark, #0f172a);
    --du-muted:      var(--color-muted, #64748b);
    --du-border:     var(--color-border, #e2e8f0);

    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;

    /* Frosted pane: portal shows through, softly blurred and desaturated. */
    background:
        radial-gradient(46% 44% at 50% 42%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .74) 55%, rgba(255, 255, 255, .58) 100%),
        radial-gradient(38% 38% at 50% 44%, rgba(255, 51, 51, .07), transparent 70%),
        rgba(248, 250, 252, .70);
    -webkit-backdrop-filter: blur(26px) saturate(115%);
    backdrop-filter: blur(26px) saturate(115%);
}

/* Browsers without backdrop-filter: fall back to a near-solid slate-50 pane
   so text contrast never drops below the accessible range. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .du-preloader {
        background:
            radial-gradient(46% 44% at 50% 42%, #ffffff 0%, #ffffff 58%, #f8fafc 100%),
            radial-gradient(38% 38% at 50% 44%, rgba(255, 51, 51, .06), transparent 70%),
            #f8fafc;
    }
}

/* Skip states — set synchronously by preloader.js before first paint */
.du-preloader-off .du-preloader { display: none !important; }
.du-preloader-on body { overflow: hidden; }

/* Skip completely in PWA standalone / installed mode — no logo splash after open */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    .du-preloader {
        display: none !important;
    }
}

/* ── Brand hairline across the top (portal red → amber) ────────────────── */
.du-preloader .du-topline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--du-red) 0%, var(--du-red-hover) 45%, var(--du-amber) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: duLineIn 1.4s cubic-bezier(.22, .9, .25, 1) .1s forwards;
}
@keyframes duLineIn { to { transform: scaleX(1); } }

/* ── Soft breathing glow behind the mark ──────────────────────────────── */
.du-preloader .du-glow {
    position: absolute;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 51, 51, .13), rgba(251, 191, 36, .10) 42%, transparent 71%);
    animation: duBreathe 4.4s ease-in-out infinite;
}
@keyframes duBreathe {
    0%, 100% { transform: scale(1);    opacity: .8; }
    50%      { transform: scale(1.1);  opacity: 1;  }
}

/* ── Dignitaries: flanking, anchored to the bottom ────────────────────── */
.du-preloader .du-figure {
    position: absolute;
    z-index: 3;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.du-preloader .du-figure img {
    width: auto;
    display: block;
    filter: drop-shadow(0 22px 34px rgba(15, 23, 42, .22));
}
.du-preloader .du-figure .du-cap {
    margin-top: 10px;
    text-align: center;
    padding-bottom: 22px;
}
.du-preloader .du-figure .du-cap b {
    display: block;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--du-ink);
    line-height: 1.12;
}
.du-preloader .du-figure .du-cap span {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--du-red);
    margin-top: 4px;
}

/* PM — larger, sits a touch higher */
.du-preloader .du-figure.du-left {
    left: max(2%, 10px);
    bottom: 10px;
    animation: duInLeft .6s .15s cubic-bezier(.22, .9, .25, 1) forwards;
}
.du-preloader .du-figure.du-left img { height: min(66vh, 478px); }

/* CM — subtly smaller (~90%) and slightly lower */
.du-preloader .du-figure.du-right {
    right: max(2%, 10px);
    bottom: 0;
    animation: duInRight .6s .25s cubic-bezier(.22, .9, .25, 1) forwards;
}
.du-preloader .du-figure.du-right img { height: min(59vh, 430px); }

@keyframes duInLeft  { 0% { opacity: 0; transform: translateX(-40px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes duInRight { 0% { opacity: 0; transform: translateX( 40px); } 100% { opacity: 1; transform: translateX(0); } }

/* ── Centre stage: logo mark, sheen, wordmark ─────────────────────────── */
.du-preloader .du-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
    /* Was 40px to balance against the flanking figures; now centred on its own. */
    margin-bottom: 0;
}
.du-preloader .du-ring-wrap {
    position: relative;
    width: 262px;
    height: 262px;
    display: grid;
    place-items: center;
}
.du-preloader .du-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(15, 23, 42, .16));
    opacity: 0;
    transform: scale(.82);
    animation: duLogoIn .8s cubic-bezier(.22, .9, .25, 1) .05s forwards,
               duFloat 4s ease-in-out 1.0s infinite;
}
@keyframes duLogoIn { 0% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: scale(1); } }
@keyframes duFloat  { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.012); } }

/* One-time light sweep across the mark */
.du-preloader .du-sheen {
    position: absolute;
    width: 262px;
    height: 262px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 78%, rgba(255, 255, 255, .70) 88%, transparent 96%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: duSheen 1.0s ease-out .3s 1 forwards;
}
@keyframes duSheen {
    0%   { opacity: 0;  transform: rotate(-40deg); }
    30%  { opacity: .9; }
    100% { opacity: 0;  transform: rotate(320deg); }
}

.du-preloader .du-center-word {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(.82);
    animation: duReveal .5s .5s cubic-bezier(.22, .9, .25, 1) forwards;
}
.du-preloader .du-center-word .du-hi {
    font-family: 'Mukta', 'Nirmala UI', 'Noto Sans Devanagari', sans-serif;
    font-weight: 800;
    color: var(--du-red);
    /* Three Devanagari lines (सेवा मेरा / योगदान / उत्सव) filling the clear void
       inside the 262px ring. --du-hi-size is the single knob for the whole
       lockup: उत्सव below scales from it, so changing this one value resizes
       all three lines together and keeps their proportions intact. */
    --du-hi-size: 1.55rem;
    font-size: var(--du-hi-size);
    line-height: 1.06;
    letter-spacing: -.015em;
    text-shadow: 0 2px 14px rgba(255, 255, 255, .98);
}
/* उत्सव carries the same emphasis it has in the English wordmark below, where
   "Utsav" is the large word under a small "Seva Mera Yogdaan" lead. Kept inline
   so the preceding <br> does not open an extra empty line box. */
.du-preloader .du-center-word .du-hi .du-hi-key {
    font-size: 1.45em;
    font-weight: 900;
    letter-spacing: -.02em;
}

.du-preloader .du-word {
    margin-top: 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    animation: duRise .5s .65s ease forwards;
}
.du-preloader .du-word .du-en {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.95rem;
    letter-spacing: -.025em;
    color: var(--du-ink);
    line-height: 1;
}
/* Lead half of the wordmark: "Seva Mera Yogdaan" sits small above a large
   "Utsav", mirroring the stacked hero lockup on the homepage. */
.du-preloader .du-word .du-en .du-en-lead {
    display: block;
    font-size: .46em;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--du-muted);
    margin-bottom: 5px;
}
/* Mirrors the navbar lockup: slate-900 name + red tracked-out district line */
.du-preloader .du-word .du-cg {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 900;
    font-size: .68rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--du-red);
    margin-top: 8px;
}
.du-preloader .du-word .du-rule {
    width: 56px;
    height: 2px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--du-border), transparent);
}
.du-preloader .du-word .du-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    color: #fff;
    background: linear-gradient(90deg, var(--du-red), var(--du-amber));
    padding: 9px 20px;
    border-radius: 999px;
    box-shadow: 0 14px 26px -14px rgba(255, 51, 51, .8);
}
.du-preloader .du-word .du-pill .du-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .35);
}
@keyframes duReveal { to { opacity: 1; transform: scale(1); } }
@keyframes duRise   { to { opacity: 1; transform: translateY(0); } }

/* ── Exit: the frost lifts and the portal resolves ────────────────────── */
.du-preloader.du-done { animation: duVanish .6s ease forwards; }
@keyframes duVanish {
    0%   { opacity: 1; -webkit-backdrop-filter: blur(26px) saturate(115%); backdrop-filter: blur(26px) saturate(115%); }
    100% { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(100%);    backdrop-filter: blur(0) saturate(100%); visibility: hidden; }
}

/* ── Accessibility & responsive ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .du-preloader .du-logo-img,
    .du-preloader .du-figure,
    .du-preloader .du-center-word,
    .du-preloader .du-word,
    .du-preloader .du-glow,
    .du-preloader .du-topline {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .du-preloader .du-sheen { animation: none !important; opacity: 0; }
}

@media (max-width: 900px) {
    .du-preloader .du-figure { display: none; }
    .du-preloader .du-stage { margin-bottom: 0; }
    .du-preloader .du-word .du-en { font-size: 1.6rem; }
}