/*!
 * DemonGaming.net — experience layer
 * Custom cursor, original-style branded loader / page-transition curtain, polish.
 * Pairs with js/dg-experience.js. Accent themed per page via --dg-accent
 * (dg-experience.js sets it from window.DG_ANIM.accent; defaults purple).
 * Honors prefers-reduced-motion; degrades safely if the JS never runs.
 */

:root {
    --dg-accent: #8c00ff;
    --dg-accent-soft: rgba(140, 0, 255, 0.55);
    --dg-accent-faint: rgba(140, 0, 255, 0.15);
}

/* =========================================================================
   1) Loader / page-transition curtain — the ORIGINAL look:
   flat near-black screen, "Demon Gaming" wordmark, a thin accent progress bar,
   and "LOADING". Drawn instantly from first paint via html.dg-loading::before so
   there is no flash and no per-page markup; js/dg-experience.js layers the real
   #dg-loader on top and slides it up when done. A CSS failsafe clears it even if
   the JS never runs.
   ========================================================================= */
html.dg-loading { overflow: hidden; }

html.dg-loading::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    background: #0b0b0d;                       /* flat dark, like the original */
    animation: dgLoaderFailsafe 0.6s ease 5s forwards;
}
@keyframes dgLoaderFailsafe { to { opacity: 0; visibility: hidden; } }

#dg-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0b0b0d;
    opacity: 1;
    transition: opacity 0.5s ease;
    will-change: transform, opacity;
}
#dg-loader.dg-hidden { opacity: 0; pointer-events: none; }

#dg-loader .dg-loader-logo {
    font-family: 'NoScary', sans-serif;
    font-size: clamp(30px, 6vw, 64px);
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 0 10px var(--dg-accent-faint);
}
#dg-loader .dg-loader-progress {
    width: min(280px, 60vw);
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
#dg-loader .dg-loader-progress > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--dg-accent);
    box-shadow: 0 0 10px var(--dg-accent);
}
#dg-loader .dg-loader-text {
    margin-top: 16px;
    color: #fff;
    opacity: 0.75;
    letter-spacing: 5px;
    font-size: 13px;
}

/* =========================================================================
   2) Custom cursor — instant dot + lagging ring. Fine-pointer devices only;
   touch keeps the native cursor. Hidden until JS marks it ready.
   ========================================================================= */
.dg-cursor-dot,
.dg-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100001;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}
.dg-cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--dg-accent);
    box-shadow: 0 0 6px var(--dg-accent);
}
.dg-cursor-ring {
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--dg-accent);
    box-shadow: 0 0 8px var(--dg-accent-soft);
    transition: width 0.18s ease, height 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.dg-cursor-ring.dg-cursor-hot {
    width: 44px;
    height: 44px;
    background: var(--dg-accent-faint);
    border-color: #fff;
    box-shadow: 0 0 14px var(--dg-accent-soft);
}
.dg-cursor-ring.dg-cursor-click { width: 16px; height: 16px; }

@media (hover: hover) and (pointer: fine) {
    html.dg-cursor-on,
    html.dg-cursor-on * { cursor: none !important; }
    html.dg-cursor-on .dg-cursor-dot,
    html.dg-cursor-on .dg-cursor-ring { opacity: 1; }
}

/* =========================================================================
   3) Polish
   ========================================================================= */
::selection { background: var(--dg-accent); color: #fff; }

/* =========================================================================
   Reduced motion: no cursor lag, instant reveal of content.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    html.dg-loading::before { animation: dgLoaderFailsafe 0.3s ease 0.2s forwards; }
    .dg-cursor-dot,
    .dg-cursor-ring { display: none !important; }
    html.dg-cursor-on,
    html.dg-cursor-on * { cursor: auto !important; }
}