:root {
    color-scheme: dark;
}

html,
body {
    background: #060A15;
}

body {
    font-family: 'Inter', sans-serif;
    color: #EAF0FA;
    overflow-x: hidden;
}

::selection {
    background: #E6B84D;
    color: #0B1E42;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: #0A1121;
}

::-webkit-scrollbar-thumb {
    background: #1c2b4d;
    border-radius: 20px;
    border: 2px solid #0A1121;
}

::-webkit-scrollbar-thumb:hover {
    background: #E6B84D;
}

.font-display {
    font-family: 'Space Grotesk', sans-serif;
}

/* Gold gradient text */
.text-gradient-gold {
    background: linear-gradient(120deg, #F2CE6B 0%, #E6B84D 45%, #b98a2b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-gradient-sky {
    background: linear-gradient(120deg, #8fc0ff 0%, #3E8BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Glass */
.glass {
    background: rgba(14, 26, 51, .55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(159, 176, 204, .14);
}

.glass-strong {
    background: rgba(10, 17, 33, .82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(159, 176, 204, .16);
}

/* Hairline hover cards */
.card-hover {
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, border-color .5s, background .5s;
}

.card-hover:hover {
    transform: translateY(-8px);
}

/* Shine sweep */
.shine {
    position: relative;
    overflow: hidden;
}

.shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: skewX(-18deg);
    transition: left .8s ease;
}

.shine:hover::after {
    left: 140%;
}

/* Glow button */
.btn-gold {
    background: linear-gradient(120deg, #F2CE6B, #E6B84D);
    color: #0B1E42;
}

.btn-gold:hover {
    box-shadow: 0 0 34px -6px rgba(230, 184, 77, .75);
    transform: translateY(-2px);
}

/* Animated grid background */
.bg-grid {
    background-image:
        linear-gradient(rgba(62, 139, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(62, 139, 255, .07) 1px, transparent 1px);
    background-size: 54px 54px;
}

.bg-dots {
    background-image: radial-gradient(rgba(159, 176, 204, .18) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* Reveal defaults (GSAP will animate; fallback shows content) */
.reveal {
    opacity: 0;
    transform: translateY(34px);
}

.no-anim .reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* Marquee */
@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.marquee-track {
    animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

/* Pulse node */
@keyframes pulse-ring {
    0% {
        transform: scale(.6);
        opacity: .9
    }

    70% {
        opacity: 0
    }

    100% {
        transform: scale(2.6);
        opacity: 0
    }
}

.node-ring {
    animation: pulse-ring 2.6s ease-out infinite;
}

/* Scanline for map screen */
@keyframes scan {
    0% {
        top: -10%
    }

    100% {
        top: 110%
    }
}

.scanline {
    animation: scan 5.5s linear infinite;
}

/* Floating */
@keyframes floaty {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.floaty {
    animation: floaty 6s ease-in-out infinite;
}

/* Route dash draw */
.route-line {
    stroke-dasharray: 6 8;
    animation: dash 22s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -400;
    }
}

/* Nav underline */
.navlink {
    position: relative;
}

.navlink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #E6B84D, #F2CE6B);
    transition: width .35s ease;
}

.navlink:hover::after {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::after,
    *::before {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}