/**
 * UnrealFPSKit - Main Stylesheet
 * Multi-page compatible. Fonts loaded locally from /fonts/.
 */
/* build marker: 2026-02-12 */

/* ========== READABILITY (site-wide) ========== */
/* Secondary text: enough contrast on dark background */
.text-tech-dim {
    color: #bdbdbd !important;
}

/* Accessibility: don't rely on link color only */
a.text-tech-accent.hover\:underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.text-tech-accent.hover\:underline:hover {
    text-decoration-thickness: 2px;
}
/* Borders when used as text/subtle UI */
.border-tech-dim {
    border-color: #6a6a6a;
}

/* Card typography scale */
.card-title { font-size: 0.875rem; }
@media (min-width: 768px) { .card-title { font-size: 1rem; } }
.card-body { font-size: 0.75rem; }
@media (min-width: 768px) { .card-body { font-size: 0.875rem; } }
.card-meta { font-size: 0.625rem; }
@media (min-width: 768px) { .card-meta { font-size: 0.75rem; } }

body {
    background-color: #050505;
    color: #EDEDED;
    background-size: 40px 40px;
    background-image: linear-gradient(to right, #111 1px, transparent 1px),
        linear-gradient(to bottom, #111 1px, transparent 1px);
    font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.65;
    letter-spacing: 0.01em;
}

/* Prefer Grotesk for readable body copy (even if markup used font-mono) */
p, li {
    font-family: 'Space Grotesk', sans-serif;
}
p.font-mono, li.font-mono {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Body and long text: comfortable line height */
p, li, .leading-relaxed, article div, .font-mono.leading-relaxed {
    line-height: 1.65;
}
/* Small text: avoid cramped lines */
.text-xs {
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.text-sm {
    line-height: 1.55;
}
@media (min-width: 768px) {
    .text-sm { line-height: 1.6; }
}
/* Mono body copy: slight letter-spacing for readability */
.text-xs.font-mono, .text-sm.font-mono {
    letter-spacing: 0.02em;
}

/* Minimum readable size for body-like content (avoid tiny text) */
.readable, .readable p, .readable li {
    font-size: clamp(0.8125rem, 2vw, 0.9375rem);
    line-height: 1.6;
}

/* Blog article: easier reading, match site style */
.blog-article .blog-body {
    font-family: 'Space Grotesk', sans-serif;
}
.blog-article .blog-body p {
    max-width: 65ch;
}
@media (min-width: 768px) {
    .blog-article .blog-body p {
        letter-spacing: 0.02em;
    }
}

/* Blog post title: more presence, accent strip */
.blog-article h1 {
    border-left: 4px solid #EAB308;
    padding-left: 1rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

/* ========== HERO VIDEO (mobile framing) ========== */
@media (max-width: 767px) {
    /* Move hero content up so video sits behind H1 */
    #hero {
        justify-content: flex-start;
    }

    /* Keep the video in the upper half on mobile */
    #hero .hero-video-bg {
        top: 0;
        bottom: auto;
        height: 58vh;
    }

    /* Show the TOP of the video (not the center crop) */
    #hero .hero-video {
        height: 100%;
        object-position: 50% 0%;
        opacity: 0.45 !important;
    }

    /* Stronger fade to black below video for readability */
    #hero .hero-video-gradient {
        background: linear-gradient(
            to bottom,
            rgba(5, 5, 5, 0.35) 0%,
            rgba(5, 5, 5, 0.55) 55%,
            rgba(5, 5, 5, 1) 100%
        ) !important;
    }
}
.blog-article h1 .text-tech-accent {
    border: none;
    padding: 0;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}
.optimize-render {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}
/* Reduce CLS: fixed/sticky elements isolated from layout */
nav.fixed, .fixed.inset-0, [id="mobile-menu"], [id="floating-ui-group"], .crt-overlay {
    contain: layout;
}
.glitch-constant {
    animation: glitch-anim 4s ease-in-out infinite;
}
.glitch-constant:hover {
    animation-play-state: paused;
    color: #EAB308;
    cursor: crosshair;
}
.group\/hero:hover .glitch-constant {
    animation-play-state: paused;
}
@keyframes glitch-anim {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(0.5px, -0.5px); }
    50% { transform: translate(-0.5px, 0.5px); }
    75% { transform: translate(0.5px, 0.5px); }
}
.tech-border-corner {
    position: relative;
    border: 1px solid #222;
}
.tech-border-corner::before,
.tech-border-corner::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    transition: all 0.3s;
    pointer-events: none;
}
.tech-border-corner::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid #444;
    border-left: 2px solid #444;
}
.tech-border-corner::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid #444;
    border-right: 2px solid #444;
}
.tech-border-corner:hover::before,
.tech-border-corner:hover::after {
    border-color: #EAB308;
    width: 100%;
    height: 100%;
}
details[open] summary ~ * {
    animation: sweep 0.3s ease-in-out;
}
@keyframes sweep {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}
details summary {
    list-style: none;
}
details summary::-webkit-details-marker {
    display: none;
}

/* Mobile/tablet widths: enable horizontal card scrollers */
@media (max-width: 1023px) {
    .card-scroll-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 1rem;
        padding-bottom: 0.5rem;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .card-scroll-mobile::-webkit-scrollbar {
        display: none;
    }
    .card-scroll-mobile .card-scroll-item {
        scroll-snap-align: start;
        flex-shrink: 0;
        min-width: 70vw;
        width: 70vw;
        max-width: 70vw;
    }
    /* Kits: side-by-side + scroll, but proper width (not squeezed) */
    .card-scroll-mobile .card-scroll-item-narrow {
        scroll-snap-align: start;
        flex-shrink: 0;
        min-width: 280px;
        width: 280px;
        max-width: 280px;
    }
    /* Reviews: same idea, slightly wider for review text */
    .card-scroll-mobile .card-scroll-item-review {
        scroll-snap-align: start;
        flex-shrink: 0;
        min-width: 300px;
        width: 300px;
        max-width: 300px;
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #EAB308;
}
.scroll-link:focus,
button:focus,
a:focus,
input:focus {
    outline: 2px solid #EAB308;
    outline-offset: 2px;
}
.roi-bar-container {
    position: relative;
    height: 30px;
    background: #111;
    border-radius: 2px;
    overflow: hidden;
}
.roi-bar {
    height: 100%;
    transition: width 0.3s ease-out;
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #EAB308;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #333;
    border-radius: 2px;
}
input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.8);
}
.video-screen-placement {
    position: absolute;
    top: 34.5%;
    left: 50.1%;
    width: 80.5%;
    height: 58.5%;
    transform: translate(-50%, -50%);
    border-radius: 0.25rem;
}
/* MOBILE FIXES */
* {
    -webkit-tap-highlight-color: transparent;
}
button:focus,
a:focus,
input:focus {
    outline: none !important;
}
/* Keyboard focus: show outline for accessibility */
.scroll-link:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #EAB308;
    outline-offset: 2px;
}
@media (hover: none) {
    .group:hover .group-hover\:opacity-100 {
        opacity: 0;
    }
}
/* Composited animations: promote layers, use transform instead of width/visibility where possible */
.animate-compile {
    transform-origin: left;
    width: 100%;
    transform: translateZ(0);
    will-change: transform;
}
.animate-pulse-glow,
.animate-super-glow {
    will-change: transform;
    transform: translateZ(0);
}
.animate-finish {
    will-change: transform, opacity;
    transform: translateZ(0);
}

body {
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Common FPS Pitfalls: equal height for all open panels (content length independent) */
#pain details[open] .pitfalls-detail-content {
    min-height: 13rem;
    height: 13rem;
    overflow-y: auto;
}
@media (min-width: 768px) {
    #pain details[open] .pitfalls-detail-content {
        min-height: 14rem;
        height: 14rem;
    }
}