/* --- CORE VARIABLES --- */
:root {
    --bg: #020617; 
    --c1: #ff000d; --c2: #00EAFF; --c3: #C83EDC; --c4: #F74B00;
    --holo: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
    --border: rgba(255, 255, 255, 0.08);
    --text-muted: #94a3b8;
    --spotlight: rgba(0, 234, 255, 0.12);
}


* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
    outline: none; }
html { scrollbar-gutter: stable; overflow-x: hidden; }
body { background-color: var(--bg); color: #fff; font-family: 'Inter', sans-serif; overflow-x: hidden; letter-spacing: -0.01em; min-height: 100vh; }

/* --- BACKGROUND --- */
#spotlight { position: fixed; inset: 0; pointer-events: none; z-index: 10; background: radial-gradient(circle 500px at var(--x, 50%) var(--y, 50%), var(--spotlight), transparent 80%); transition: background 0.3s ease; }
.universe { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, #0f172a 0%, var(--bg) 100%); }
#stars-canvas { position: absolute; inset: 0; z-index: 2; opacity: 0.8; }
.orb { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.25; z-index: 1; pointer-events: none; animation: floatOrb infinite alternate ease-in-out; }
.orb-1 { width: 450px; height: 450px; background: var(--c1); top: -10%; left: -10%; animation-duration: 12s; }
.orb-2 { width: 450px; height: 450px; background: var(--c2); bottom: -10%; right: -10%; animation-duration: 15s; animation-delay: -2s; }
.orb-3 { width: 450px; height: 450px; background: var(--c3); top: 30%; right: 40%; animation-duration: 10s; animation-delay: -5s; }
.orb-4 { width: 450px; height: 450px; background: var(--c4); bottom: 20%; left: 15%; animation-duration: 20s; animation-delay: -7s; }
@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 50px) scale(1.1); } }

/* --- HEADER / NAV --- */
.header-main { position: fixed; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 8%; z-index: 1000; background: rgba(2, 6, 23, 0.6); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav-logo { font-weight: 800; text-decoration: none; color: #fff; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.nav-logo img { height: 28px; width: 28px; border-radius: 4px; }
.nav-pill { display: flex; gap: 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 999px; padding: 10px 24px; backdrop-filter: blur(10px); }
.nav-pill a { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: 0.2s; }
.nav-pill a:hover, .nav-pill a.active { color: #fff; }

/* --- FOOTER --- */
footer { padding: 80px 10%; display: flex; justify-content: space-between; color: var(--text-muted); border-top: 1px solid var(--border); font-size: 13px; z-index: 20; position: relative; }
footer a { color: var(--text-muted); text-decoration: none; margin-left: 24px; transition: 0.3s; }
footer a:hover { color: #fff; }

@media (max-width: 768px) {
    .header-main { padding: 15px 4%; }
    .nav-pill { gap: 10px; padding: 8px 14px; border-radius: 20px; display: flex; }
    .nav-pill a { font-size: 11px; }
    .nav-support-text { display: none; }
    .nav-logo span { display: none; }
}
.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for static HTML elements */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }


/* --- FLOATING MASCOT --- */
.floating-mascot {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 120px; /* Desktop size */
    z-index: 1000; /* Above content, below modals */
    pointer-events: none; /* Allows you to click things "through" the GIF */
    transition: all 0.3s ease;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    animation: mascotBob 3s infinite ease-in-out;
}

.floating-mascot img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hover effect: If you want to make it interactive, change pointer-events to 'auto' */
.floating-mascot:hover {
    transform: scale(1.1);
}

/* Gentle bobbing animation */
@keyframes mascotBob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

/* Mobile responsive scaling */
@media (max-width: 768px) {
    .floating-mascot {
        width: 80px; /* Smaller on mobile */
        bottom: 20px;
        right: 15px;
        opacity: 0.8; /* Slightly transparent so it doesn't block cards */
    }
}