/* =====================================================
   DragonCore — Splash / Loading Screen
   Shown while Blazor WASM downloads and initialises.
   Removed via dcSite.hideSplash() after first render.
   ===================================================== */

/* ── Overlay ──────────────────────────────────────── */
#dc-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
}

/* ── Background layer (fades out during fire transition) ─ */
.splash-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 55% at 50% 50%,
            rgba(255,215,0,0.04) 0%,
            transparent 70%),
        #080808;
    transition: opacity 0.4s ease;
}

/* ── Fire canvas ──────────────────────────────────── */
#fire-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* ── Content wrapper — clip-path driven by --dc-fire-ep during exit ─── */
.splash-content-wrap {
    position: absolute;
    inset: 0;
    z-index: 4; /* above fire-canvas so content renders on top of the dark layer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* ── Logo ─────────────────────────────────────────── */
.splash-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 22px rgba(255,215,0,0.35))
            drop-shadow(0 0 6px  rgba(255,215,0,0.18));
    animation: splash-item-in 0.6s cubic-bezier(0.22,1,0.36,1) both;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ── Heading ──────────────────────────────────────── */
.splash-heading {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    letter-spacing: 0.08em;
    color: #e5bd47;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    text-shadow:
        0 0 40px rgba(255,215,0,0.18),
        0 2px 20px rgba(0,0,0,0.8);
    animation: splash-item-in 0.6s 0.12s cubic-bezier(0.22,1,0.36,1) both;
    position: relative;
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* ── Sub-heading ──────────────────────────────────── */
.splash-sub {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: rgba(255,215,0,0.45);
    text-transform: uppercase;
    margin: 0.45rem 0 0;
    animation: splash-item-in 0.6s 0.22s cubic-bezier(0.22,1,0.36,1) both;
    position: relative;
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* ── Progress bar ─────────────────────────────────── */
.splash-progress-wrap {
    margin-top: 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    animation: splash-item-in 0.5s 0.3s ease both;
    position: relative;
    z-index: 2;
}

.splash-progress-track {
    width: clamp(140px, 22vw, 220px);
    height: 2px;
    background: rgba(255,215,0,0.10);
    border-radius: 2px;
    overflow: hidden;
}

.splash-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255,215,0,0.55), rgba(255,215,0,0.85));
    border-radius: 2px;
    width: var(--blazor-load-percentage, 0%);
    transition: width 0.25s ease;
    box-shadow: 0 0 8px rgba(255,215,0,0.3);
}

.splash-progress-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: rgba(255,215,0,0.28);
    text-transform: uppercase;
}
.splash-progress-label::after {
    content: var(--blazor-load-percentage-text, 'Loading');
}

/* ── Entrance animations ──────────────────────────── */
@keyframes splash-item-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Outro — grow + fade exit before fire transition ─────────────────────── */
/* Content scales up from center and fades out, then fire holes burn the bg.   */
@keyframes splash-outro {
    from { opacity: 1; transform: scale(1);   }
    to   { opacity: 0; transform: scale(1.6); }
}

#dc-splash.dc-splash--outro .splash-content-wrap {
    animation: splash-outro 1.1s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Kill fill-mode on children so the wrapper animation is uncontested */
#dc-splash.dc-splash--outro .splash-logo,
#dc-splash.dc-splash--outro .splash-heading,
#dc-splash.dc-splash--outro .splash-sub,
#dc-splash.dc-splash--outro .splash-progress-wrap {
    animation: none;
}

/* ── Fire exit ────────────────────────────────────────────────────────────── */
/* The outro animation owns content-wrap opacity; burning only kills the bg.   */
/* animation:none on children is still needed — fill:both holds opacity:1 and  */
/* would otherwise override the parent wrapper's outro animation.               */
#dc-splash.dc-splash--burning .splash-bg {
    opacity: 0;
    transition: none;
}
#dc-splash.dc-splash--burning .splash-logo,
#dc-splash.dc-splash--burning .splash-heading,
#dc-splash.dc-splash--burning .splash-sub,
#dc-splash.dc-splash--burning .splash-progress-wrap {
    animation: none;
}

/* ── Fallback exit (reduced-motion / no JS fire) ─── */
#dc-splash.dc-splash--exit {
    animation: splash-exit 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
    pointer-events: none;
}

@keyframes splash-exit {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .splash-logo,
    .splash-heading,
    .splash-sub,
    .splash-progress-wrap {
        animation: none;
        opacity: 1;
        transform: none;
    }

    #dc-splash.dc-splash--exit {
        animation: splash-exit-instant 0.2s ease forwards;
    }

    @keyframes splash-exit-instant {
        to { opacity: 0; }
    }
}

/* ── Mobile splash ────────────────────────────────── */
@media (max-width: 767.98px) {
    .splash-content-wrap   { padding: 0 clamp(1rem, 6vw, 1.5rem); box-sizing: border-box; }
    .splash-logo           { width: clamp(88px, 28vw, 120px); height: clamp(88px, 28vw, 120px); margin-bottom: 1.15rem; }
    .splash-heading        { font-size: clamp(1.85rem, 9.2vw, 3rem); letter-spacing: 0.015em; text-align: center; max-width: 100%; line-height: 1.05; }
    .splash-sub            { font-size: 0.58rem; letter-spacing: 0.26em; }
    .splash-progress-track { width: clamp(180px, 72vw, 260px); }
}

@media (max-width: 360px) {
    .splash-heading { font-size: clamp(1.65rem, 8.8vw, 2rem); letter-spacing: 0; }
}