/*!
 * 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 {
    position: relative;
    font-family: 'NoScary', sans-serif;
    font-size: clamp(34px, 7vw, 72px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f4f4f4;
    margin-bottom: 22px;
    text-align: center;
    text-shadow: 0 0 8px rgba(139,0,0, 0.55), 0 0 22px rgba(150, 0, 0, 0.45);
    animation: dgLogoFlicker 3.4s linear infinite;
}
/* Horror glitch: two offset copies pulled from data-text (red + blood-red
   channels), each clipped to half the wordmark and jittered for chromatic split. */
#dg-loader .dg-loader-logo::before,
#dg-loader .dg-loader-logo::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    color: #f4f4f4;
    overflow: hidden;
    pointer-events: none;
}
#dg-loader .dg-loader-logo::before {
    text-shadow: -2px 0 #8b0000;
    clip-path: inset(0 0 52% 0);
    animation: dgLogoGlitchTop 2.4s steps(2, jump-none) infinite;
}
#dg-loader .dg-loader-logo::after {
    text-shadow: 2px 0 #6a0000, 0 0 6px rgba(139,0,0, 0.4);
    clip-path: inset(52% 0 0 0);
    animation: dgLogoGlitchBot 3.1s steps(2, jump-none) infinite;
}
@keyframes dgLogoFlicker {
    0%, 18%, 22%, 54%, 57%, 82%, 100% { opacity: 1; }
    20% { opacity: 0.35; }
    21% { opacity: 0.8; }
    55% { opacity: 0.5; }
    56% { opacity: 1; }
    83% { opacity: 0.28; }
    84% { opacity: 0.9; }
}
@keyframes dgLogoGlitchTop {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-3px, -1px); }
    40%  { transform: translate(2px, 0); }
    60%  { transform: translate(-2px, 1px); }
    80%  { transform: translate(3px, -1px); }
    100% { transform: translate(0, 0); }
}
@keyframes dgLogoGlitchBot {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(3px, 1px); }
    40%  { transform: translate(-2px, 0); }
    60%  { transform: translate(2px, -1px); }
    80%  { transform: translate(-3px, 1px); }
    100% { transform: translate(0, 0); }
}
#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: #d8d8d8;
    opacity: 0.75;
    letter-spacing: 8px;
    font-size: 12px;
    text-shadow: 0 0 6px rgba(139,0,0, 0.35);
    animation: dgTextPulse 2.2s ease-in-out infinite;
}
@keyframes dgTextPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }

/* Fake terminal boot log — js/dg-experience.js types original horror-boot
   lines in here (whole lines, fast). Fixed height (~7 lines, overflow
   clipped); oldest lines scroll out terminal-style. Purely cosmetic: it
   fades away with the loader and never affects dismissal timing. */
#dg-loader .dg-loader-boot {
    margin-top: 26px;
    width: min(420px, 80vw);
    height: 112px;                 /* 7 lines x 16px line-height */
    overflow: hidden;
    text-align: left;
    font-family: var(--dg-mono, ui-monospace, Consolas, monospace);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1px;
    color: #999;
    text-transform: uppercase;
}
#dg-loader .dg-boot-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    white-space: nowrap;
}
#dg-loader .dg-boot-line > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
#dg-loader .dg-boot-ok { color: #3fb950; }
#dg-loader .dg-boot-fail { color: #8b0000; }

/* Respect reduced-motion: keep the red glow, drop the flicker/glitch/jitter. */
@media (prefers-reduced-motion: reduce) {
    #dg-loader .dg-loader-logo,
    #dg-loader .dg-loader-text { animation: none; }
    #dg-loader .dg-loader-logo::before,
    #dg-loader .dg-loader-logo::after { display: none; }
}

/* =========================================================================
   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;
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}
/* Center: a tiny red dot (instant). */
.dg-cursor-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dg-accent);
    box-shadow: 0 0 5px var(--dg-accent);
}
/* RETICLE (lagging): four hairline ticks pointing inward — a scope crosshair.
   The ticks live on ::before (the JS rewrites the element's transform every
   frame for positioning, so rotation must happen on the pseudo). Hovering an
   interactive target rotates the ticks 45° into a lock-on diamond, lengthens
   and brightens them; clicking snaps the reticle tight. */
.dg-cursor-ring {
    width: 34px;
    height: 34px;
    border-radius: 0;
    transition: width 0.16s ease, height 0.16s ease;
}
.dg-cursor-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--dg-accent), var(--dg-accent)) top center / 1px 8px no-repeat,
        linear-gradient(var(--dg-accent), var(--dg-accent)) bottom center / 1px 8px no-repeat,
        linear-gradient(var(--dg-accent), var(--dg-accent)) left center / 8px 1px no-repeat,
        linear-gradient(var(--dg-accent), var(--dg-accent)) right center / 8px 1px no-repeat;
    transition: transform 0.18s ease, background-size 0.16s ease, filter 0.16s ease;
}
.dg-cursor-ring.dg-cursor-hot { width: 46px; height: 46px; }
.dg-cursor-ring.dg-cursor-hot::before {
    transform: rotate(45deg);
    background-size: 1px 13px, 1px 13px, 13px 1px, 13px 1px;
    filter: drop-shadow(0 0 6px var(--dg-accent-soft)) brightness(1.6);
}
.dg-cursor-ring.dg-cursor-click { width: 22px; height: 22px; }
.dg-cursor-ring.dg-cursor-click::before {
    background-size: 1px 9px, 1px 9px, 9px 1px, 9px 1px;
}

@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; }
}