/* ==== Self-hosted fonts (latin subsets) ==== */
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/press-start-2p-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/vt323-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== Base VHS & CRT Setup ==== */
body {
    background-color: #050505;
    color: #ffffff;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    background-attachment: fixed;
}

/* Scanlines Overlay */
.scanlines {
    position: fixed;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.2)
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 9999;
}

/* VCR Tracking Bar Effect */
.tracking-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 8vh;
    background: rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 9998;
    animation: tracking 6s infinite linear;
}

@keyframes tracking {
    0% { transform: translateY(-10vh) skewX(0deg); opacity: 0; }
    5% { transform: translateY(10vh) skewX(10deg); opacity: 0.5; }
    10% { transform: translateY(30vh) skewX(-10deg); opacity: 0.8; }
    15% { transform: translateY(50vh) skewX(0deg); opacity: 0.2; filter: hue-rotate(90deg) blur(4px); }
    20% { transform: translateY(110vh); opacity: 0; }
    100% { transform: translateY(110vh); opacity: 0; }
}

/* Screen Flicker */
.crt-flicker {
    animation: flicker 0.15s infinite;
}
@keyframes flicker {
    0% { opacity: 0.98; }
    50% { opacity: 1; }
    100% { opacity: 0.95; }
}

/* Unhinged Text Glitch */
.glitch-wrapper {
    position: relative;
    display: inline-block;
}
.glitch-text {
    position: relative;
    z-index: 2;
}
.glitch-wrapper::before, .glitch-wrapper::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}
.glitch-wrapper::before {
    left: 3px;
    text-shadow: -3px 0 #ff00ff;
    clip-path: inset(20% 0 80% 0);
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}
.glitch-wrapper::after {
    left: -3px;
    text-shadow: 3px 0 #00ffff;
    clip-path: inset(80% 0 5% 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(0); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(-4px, 2px); }
    40% { clip-path: inset(40% 0 50% 0); transform: translate(4px, -2px); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(-4px, 2px); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(4px, -2px); }
    100% { clip-path: inset(30% 0 50% 0); transform: translate(0); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(0); }
    20% { clip-path: inset(80% 0 5% 0); transform: translate(4px, -2px); }
    40% { clip-path: inset(30% 0 20% 0); transform: translate(-4px, 2px); }
    60% { clip-path: inset(70% 0 10% 0); transform: translate(4px, -2px); }
    80% { clip-path: inset(20% 0 50% 0); transform: translate(-4px, 2px); }
    100% { clip-path: inset(50% 0 30% 0); transform: translate(0); }
}

/* 3D Tilt Cards */
.tilt-card {
    transition: all 0.1s ease-out;
    transform-style: preserve-3d;
    border: 4px solid #fff;
}
.tilt-card:hover {
    transform: perspective(800px) rotateX(10deg) rotateY(-5deg) scale(1.05);
    box-shadow: -15px 15px 0px 0px #ff00ff, 15px -15px 0px 0px #00ffff;
    z-index: 50;
    border-color: #ffff00;
}
.tilt-card-content {
    transform: translateZ(30px);
}

/* Neon Pulsing Container */
.neon-pulse-container {
    animation: container-pulse 2s infinite;
}
@keyframes container-pulse {
    0% { box-shadow: 0 0 15px #00ffff, 0 0 30px #00ffff; border-color: #00ffff; }
    50% { box-shadow: 0 0 30px #ff00ff, 0 0 60px #ff00ff; border-color: #ff00ff; }
    100% { box-shadow: 0 0 15px #00ffff, 0 0 30px #00ffff; border-color: #00ffff; }
}

/* Floaters */
.floater-1 { animation: float-1 3s ease-in-out infinite; }
.floater-2 { animation: float-2 4s ease-in-out infinite reverse; }
@keyframes float-1 {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-20px) rotate(5deg) scale(1.1); }
}
@keyframes float-2 {
    0%, 100% { transform: translateY(0) rotate(15deg); }
    50% { transform: translateY(-15px) rotate(-5deg) scale(0.9); }
}

/* Blinking Text */
.blink-text {
    animation: blinker 0.8s step-start infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}

/* Color Flasher */
.bg-flasher {
    animation: bg-flash 0.5s infinite alternate;
}
@keyframes bg-flash {
    0% { background-color: #220000; }
    100% { background-color: #000022; }
}

.text-shadow-hard {
    text-shadow: 4px 4px 0 #000;
}
.text-shadow-neon {
    text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00ffff;
}

/* ==== Presentation-style scroll reveal ====
   Scoped to html.js (set by site.js) so content is never hidden without JS. */
.js .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==== Accessibility: calm everything down for reduced-motion users ==== */
@media (prefers-reduced-motion: reduce) {
    .crt-flicker,
    .tracking-bar,
    .glitch-wrapper::before,
    .glitch-wrapper::after,
    .neon-pulse-container,
    .floater-1,
    .floater-2,
    .blink-text,
    .bg-flasher,
    .animate-pulse {
        animation: none !important;
    }
    .bg-flasher {
        background-color: #110011;
    }
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==== Retro icon system (game-icons.net / pixelarticons via CSS mask) ==== */
/* Replaces modern emoji so iconography blends with the VHS/pixel aesthetic. */
.rico {
    display: inline-block;
    vertical-align: -0.15em;
    background: currentColor;
    -webkit-mask: var(--ri) center / contain no-repeat;
    mask: var(--ri) center / contain no-repeat;
}
.rico-swords { --ri: url(/assets/quest/icons/crossed-swords.svg); }
.rico-dice   { --ri: url(/assets/quest/icons/dice-six-faces-five.svg); }
.rico-scroll { --ri: url(/assets/quest/icons/scroll-unfurled.svg); }
.rico-chest  { --ri: url(/assets/quest/icons/open-treasure-chest.svg); }
.rico-book   { --ri: url(/assets/quest/icons/spell-book.svg); }
.rico-crown  { --ri: url(/assets/quest/icons/laurel-crown.svg); }
.rico-spark  { --ri: url(/assets/quest/icons/sparkles.svg); }
.rico-sm { width: 1.4em; height: 1.4em; }
.rico-md { width: 2em; height: 2em; }
.rico-xl { width: 3.6rem; height: 3.6rem; }