/* Modern Minimalist & Mystery Styles */

:root {
    --navy: #0a192f;
    --light-navy: #112240;
    --lightest-navy: #233554;
    --slate: #8892b0;
    --light-slate: #a8b2d1;
    --white: #e6f1ff;
    --green: #64ffda;
}

body {
    background-color: var(--navy);
    cursor: default;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* Spotlight Effect */
#spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    /* Behind intro overlay but above everything else */
    background: radial-gradient(var(--spotlight-size, 300px) at var(--x, 50%) var(--y, 50%), rgba(29, 78, 216, 0.15), transparent 80%);
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: background;
}

body:hover #spotlight {
    opacity: 1;
}

/* Intro Overlay */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--navy);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    /* Hide cursor initially to enhance mystery */
}

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

::-webkit-scrollbar-track {
    background: var(--navy);
}

::-webkit-scrollbar-thumb {
    background-color: var(--lightest-navy);
    border: 3px solid var(--navy);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--light-slate);
}

/* Utility */
.text-green {
    color: var(--green);
}

.bg-navy {
    background-color: var(--navy);
}

.bg-lightNavy {
    background-color: var(--light-navy);
}

/* Fade Up Animation Class */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}