/* ============================================
   ASHBORN - Animations & Scroll Reveals
   Massive Animation Upgrade
   ============================================ */

/* ============================================
   PERFORMANCE HINTS
   ============================================ */
[data-reveal] {
    will-change: transform, opacity;
}

[data-reveal].revealed {
    will-change: auto;
}

/* ============================================
   SCROLL REVEAL SYSTEM
   Elements start hidden, get .revealed class
   from IntersectionObserver in main.js
   ============================================ */

[data-reveal] {
    opacity: 0;
    transition: opacity var(--transition-reveal),
                transform var(--transition-reveal);
}

[data-reveal="fade-up"] {
    transform: translateY(40px);
}

[data-reveal="fade-right"] {
    transform: translateX(-40px);
}

[data-reveal="fade-left"] {
    transform: translateX(40px);
}

[data-reveal="scale-up"] {
    transform: scale(0.92);
}

/* New: Clip reveal - content slides out from behind a mask */
[data-reveal="clip-up"] {
    clip-path: inset(100% 0 0 0);
    opacity: 1;
    transition: clip-path var(--transition-reveal);
}

[data-reveal="clip-up"].revealed {
    clip-path: inset(0 0 0 0);
}

/* New: Blur-in reveal */
[data-reveal="blur-in"] {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
    transition: opacity var(--transition-reveal),
                filter var(--transition-reveal),
                transform var(--transition-reveal);
}

[data-reveal="blur-in"].revealed {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* New: Rise-and-rotate (slight 3D perspective) */
[data-reveal="rise-rotate"] {
    opacity: 0;
    transform: translateY(60px) rotateX(8deg);
    transform-origin: bottom center;
    transition: opacity var(--transition-reveal),
                transform var(--transition-reveal);
}

[data-reveal="rise-rotate"].revealed {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* New: Emerge from left */
[data-reveal="emerge-left"] {
    opacity: 0;
    transform: translateX(-60px) scale(0.95);
    transition: opacity var(--transition-reveal),
                transform var(--transition-reveal);
}

[data-reveal="emerge-left"].revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* New: Emerge from right */
[data-reveal="emerge-right"] {
    opacity: 0;
    transform: translateX(60px) scale(0.95);
    transition: opacity var(--transition-reveal),
                transform var(--transition-reveal);
}

[data-reveal="emerge-right"].revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Base revealed state */
[data-reveal].revealed {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Override for clip-up (no transform needed) */
[data-reveal="clip-up"].revealed {
    transform: none;
}

/* Stagger children */
[data-reveal-stagger] > [data-reveal]:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(2)  { transition-delay: 100ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(3)  { transition-delay: 200ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(4)  { transition-delay: 300ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(5)  { transition-delay: 400ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(6)  { transition-delay: 500ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(7)  { transition-delay: 600ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(8)  { transition-delay: 700ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(9)  { transition-delay: 800ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(10) { transition-delay: 900ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(11) { transition-delay: 1000ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(12) { transition-delay: 1100ms; }

/* Fast stagger variant */
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(2)  { transition-delay: 60ms; }
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(3)  { transition-delay: 120ms; }
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(4)  { transition-delay: 180ms; }
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(5)  { transition-delay: 240ms; }
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(6)  { transition-delay: 300ms; }
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(7)  { transition-delay: 360ms; }
[data-reveal-stagger="fast"] > [data-reveal]:nth-child(8)  { transition-delay: 420ms; }

/* ============================================
   SPLASH SCREEN - CINEMATIC ENTRANCE
   ============================================ */
.splash__fog {
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(212, 165, 67, 0.04), transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(139, 37, 0, 0.06), transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(212, 165, 67, 0.03), transparent 40%);
    animation: splashFogDrift 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes splashFogDrift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -20px) scale(1.05); }
}

/* Letter-by-letter stagger reveal */
.splash__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    filter: blur(8px);
    animation: splashLetterIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Studio letters stagger (P-E-R space A-E-V-U-M) */
.splash__studio .splash__letter:nth-child(1) { animation-delay: 0.3s; }
.splash__studio .splash__letter:nth-child(2) { animation-delay: 0.38s; }
.splash__studio .splash__letter:nth-child(3) { animation-delay: 0.46s; }
.splash__studio .splash__letter:nth-child(4) { animation-delay: 0.52s; }
.splash__studio .splash__letter:nth-child(5) { animation-delay: 0.58s; }
.splash__studio .splash__letter:nth-child(6) { animation-delay: 0.66s; }
.splash__studio .splash__letter:nth-child(7) { animation-delay: 0.74s; }
.splash__studio .splash__letter:nth-child(8) { animation-delay: 0.82s; }
.splash__studio .splash__letter:nth-child(9) { animation-delay: 0.90s; }

/* Title letters stagger (A-S-H-B-O-R-N) */
.splash__title .splash__letter:nth-child(1) { animation-delay: 1.2s; }
.splash__title .splash__letter:nth-child(2) { animation-delay: 1.3s; }
.splash__title .splash__letter:nth-child(3) { animation-delay: 1.4s; }
.splash__title .splash__letter:nth-child(4) { animation-delay: 1.5s; }
.splash__title .splash__letter:nth-child(5) { animation-delay: 1.6s; }
.splash__title .splash__letter:nth-child(6) { animation-delay: 1.7s; }
.splash__title .splash__letter:nth-child(7) { animation-delay: 1.8s; }

@keyframes splashLetterIn {
    0%   { opacity: 0; transform: translateY(40px) scale(0.8); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Ornamental lines expand from center */
.splash__ornament-line:first-of-type {
    animation: splashOrnamentIn 1s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards;
}

.splash__ornament-line:last-of-type {
    animation: splashOrnamentIn 1s cubic-bezier(0.16, 1, 0.3, 1) 2.0s forwards;
}

@keyframes splashOrnamentIn {
    0%   { opacity: 0; width: 0; }
    100% { opacity: 0.7; width: 280px; }
}

/* Subtitle fades in after lower ornament */
.splash .splash__subtitle {
    opacity: 0;
    transform: translateY(15px);
    animation: splashSubIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.3s forwards;
}

@keyframes splashSubIn {
    0%   { opacity: 0; transform: translateY(15px); }
    100% { opacity: 0.6; transform: translateY(0); }
}

/* Emblem fades in with subtle scale */
.splash .splash__emblem {
    animation: splashEmblemIn 1s cubic-bezier(0.16, 1, 0.3, 1) 2.6s forwards;
}

@keyframes splashEmblemIn {
    0%   { opacity: 0; transform: scale(0.5) rotate(-30deg); }
    100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
}

/* Enter button fades in last */
.splash .splash__enter {
    opacity: 0;
    transform: translateY(20px);
    animation: splashBtnIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 3.0s forwards;
}

@keyframes splashBtnIn {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Hint text */
.splash .splash__hint {
    opacity: 0;
    animation: fadeIn 0.6s ease 3.4s forwards;
}

/* ---- Splash EXIT Transition ---- */
.splash--exiting {
    pointer-events: none;
}

/* Letters scatter upward on exit */
.splash--exiting .splash__letter {
    animation: splashLetterOut 0.6s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.splash--exiting .splash__title .splash__letter:nth-child(1) { animation-delay: 0s; }
.splash--exiting .splash__title .splash__letter:nth-child(2) { animation-delay: 0.04s; }
.splash--exiting .splash__title .splash__letter:nth-child(3) { animation-delay: 0.08s; }
.splash--exiting .splash__title .splash__letter:nth-child(4) { animation-delay: 0.12s; }
.splash--exiting .splash__title .splash__letter:nth-child(5) { animation-delay: 0.08s; }
.splash--exiting .splash__title .splash__letter:nth-child(6) { animation-delay: 0.04s; }
.splash--exiting .splash__title .splash__letter:nth-child(7) { animation-delay: 0s; }

.splash--exiting .splash__studio .splash__letter {
    animation: splashLetterOut 0.5s cubic-bezier(0.55, 0, 1, 0.45) forwards;
    animation-delay: 0.1s;
}

@keyframes splashLetterOut {
    0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-60px) scale(1.3); filter: blur(12px); }
}

.splash--exiting .splash__ornament-line {
    animation: splashOrnamentOut 0.4s ease-out forwards;
}

@keyframes splashOrnamentOut {
    0%   { opacity: 0.7; width: 280px; }
    100% { opacity: 0; width: 500px; }
}

.splash--exiting .splash__emblem {
    animation: splashEmblemOut 0.3s ease-out forwards;
}

@keyframes splashEmblemOut {
    0%   { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5) rotate(30deg); }
}

.splash--exiting .splash__arc {
    animation: splashArcOut 0.5s ease-out forwards;
}

@keyframes splashArcOut {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-40px); }
}

.splash--exiting .splash__subtitle,
.splash--exiting .splash__enter,
.splash--exiting .splash__hint {
    animation: splashBtnOut 0.3s ease-out forwards;
}

@keyframes splashBtnOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* Background fades after letters scatter */
.splash--hidden {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   HERO ENTRANCE ANIMATIONS
   (Gated behind .hero-animate on body)
   ============================================ */

/* When splash is active, suppress hero animations */
.splash-active .hero__studio,
.splash-active .hero__title,
.splash-active .hero__subtitle,
.splash-active .hero__tagline,
.splash-active .hero__actions,
.splash-active .hero__scroll-indicator {
    animation: none;
    opacity: 0;
}

/* When splash exits, hero animates in */
.hero-animate .hero__studio   { animation: fadeInDown 1s  0.1s both; }
.hero-animate .hero__title    { animation: heroTitleIn 1.4s 0.3s both, heroShimmer 6s 3s ease-in-out infinite; }
.hero-animate .hero__subtitle { animation: fadeInDown 1s  0.7s both; }
.hero-animate .hero__tagline  { animation: fadeIn 1s     1.0s both; }
.hero-animate .hero__actions  { animation: fadeInUp 1s   1.3s both; }
.hero-animate .hero__scroll-indicator { animation: fadeIn 1s 2.0s both; }

/* Fallback: if no splash, use original hero animations */
body:not(.splash-active):not(.hero-animate) .hero__studio   { animation: fadeInDown 1s  0.2s both; }
body:not(.splash-active):not(.hero-animate) .hero__title    { animation: heroTitleIn 1.4s 0.5s both, heroShimmer 6s 3s ease-in-out infinite; }
body:not(.splash-active):not(.hero-animate) .hero__subtitle { animation: fadeInDown 1s  0.9s both; }
body:not(.splash-active):not(.hero-animate) .hero__tagline  { animation: fadeIn 1s     1.2s both; }
body:not(.splash-active):not(.hero-animate) .hero__actions  { animation: fadeInUp 1s   1.5s both; }
body:not(.splash-active):not(.hero-animate) .hero__scroll-indicator { animation: fadeIn 1s 2.5s both; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero title - dramatic entrance with overshoot */
@keyframes heroTitleIn {
    0%   { opacity: 0; transform: scale(0.7); filter: blur(10px); }
    60%  { opacity: 1; transform: scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Hero title gold shimmer */
@keyframes heroShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ============================================
   SCROLL INDICATOR BOUNCE
   ============================================ */
.hero__scroll-indicator {
    display: none;
}

.scroll-arrow {
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--color-amber);
    border-bottom: 2px solid var(--color-amber);
    transform: rotate(45deg);
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: rotate(45deg) translateY(0);
    }
    40% {
        transform: rotate(45deg) translateY(10px);
    }
    60% {
        transform: rotate(45deg) translateY(5px);
    }
}

/* ============================================
   AMBIENT GLOW PULSE (CTA buttons)
   ============================================ */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 15px var(--color-amber-glow);
    }
    50% {
        box-shadow:
            0 0 30px var(--color-amber-glow),
            0 0 60px rgba(212, 165, 67, 0.08);
    }
}

.hero__actions .btn--primary {
    animation: glowPulse 4s ease-in-out infinite;
}

/* ============================================
   SECTION TITLE GOLD SWEEP
   ============================================ */
.section__title {
    position: relative;
    overflow: hidden;
}

.section__title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 165, 67, 0.15),
        transparent
    );
    pointer-events: none;
}

[data-reveal].revealed .section__title::after {
    animation: titleSweep 1.2s 0.4s ease-out forwards;
}

@keyframes titleSweep {
    0%   { left: -100%; }
    100% { left: 200%; }
}

/* ============================================
   ANIMATED SECTION DIVIDERS
   ============================================ */
.section + .section {
    position: relative;
}

.section + .section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-border) 20%,
        var(--color-amber-dark) 50%,
        var(--color-border) 80%,
        transparent
    );
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.section.revealed-divider::before {
    width: 80%;
}

/* ============================================
   3D TILT-READY CARDS
   Transition only on leave (reset); mousemove
   sets transform directly with no transition
   for crisp, jank-free tracking.
   ============================================ */
.feature-card,
.species-card,
.stat-card,
.biome-panel,
.pillar-card,
.server-card,
.community-link,
.progress-bar {
    transition: box-shadow var(--transition-normal),
                border-color var(--transition-normal);
}

/* ============================================
   CARD HIGHLIGHT SWEEP ON HOVER
   ============================================ */
.feature-card,
.biome-panel,
.stat-card,
.pillar-card,
.server-card {
    position: relative;
    overflow: hidden;
}

.feature-card::before,
.biome-panel::before,
.stat-card::before,
.pillar-card::before,
.server-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(212, 165, 67, 0.06) 45%,
        rgba(212, 165, 67, 0.03) 55%,
        transparent 60%
    );
    z-index: 10;
    pointer-events: none;
    transition: left 0.6s ease;
}

.feature-card:hover::before,
.biome-panel:hover::before,
.stat-card:hover::before,
.pillar-card:hover::before,
.server-card:hover::before {
    left: 150%;
}

/* ============================================
   BIOME PANEL CURTAIN REVEAL
   ============================================ */
.biome-panel__visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.biome-panel__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-bg-secondary);
    z-index: 1;
    transform-origin: top;
    transform: scaleY(1);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed .biome-panel__visual::after {
    transform: scaleY(0);
}

/* ============================================
   PROGRESS SECTION AMBIENT GLOW
   ============================================ */
.progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 165, 67, 0.04) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    animation: sectionAmbientFloat 8s ease-in-out infinite alternate;
}

@keyframes sectionAmbientFloat {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    100% { transform: translate(-45%, -55%) scale(1.2); opacity: 1; }
}

/* ============================================
   PROGRESS BAR EFFECTS
   - Glow dot at bar tip (pulses)
   - Shimmer sweep along bar
   - Ambient glow underneath bar
   ============================================ */
.progress-bar__fill {
    position: relative;
}

/* Glow dot at the leading edge of the bar */
.progress-bar__fill::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: inherit;
    filter: blur(6px);
    opacity: 0;
    transition: opacity 0.6s 1.2s ease;
}

.progress-bar__fill.animate::after {
    opacity: 0.8;
    animation: glowDotPulse 2s 2.5s ease-in-out infinite;
}

@keyframes glowDotPulse {
    0%, 100% { opacity: 0.8; transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.4; transform: translateY(-50%) scale(0.7); }
}

/* Shimmer sweep that travels along the bar */
@keyframes progressShimmer {
    0%   { left: -40%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 140%; opacity: 0; }
}

.progress-bar__fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), rgba(255,255,255,0.08), transparent);
    border-radius: inherit;
    opacity: 0;
}

.progress-bar__fill.animate::before {
    animation: progressShimmer 2.5s 1.8s ease-in-out forwards,
               progressShimmerLoop 4s 4.3s ease-in-out infinite;
}

@keyframes progressShimmerLoop {
    0%   { left: -40%; opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { left: 140%; opacity: 0; }
}

/* Ambient glow under the track (JS adds .bar-glowing to parent .progress-bar) */
.progress-bar__track {
    position: relative;
}

.progress-bar__track::after {
    content: '';
    position: absolute;
    inset: -3px 0;
    border-radius: 8px;
    background: var(--color-amber);
    filter: blur(10px);
    opacity: 0;
    z-index: -1;
    transition: opacity 1s 1.8s ease;
}

.progress-bar.bar-glowing .progress-bar__track::after {
    opacity: 0.1;
}

/* Bar fill transition — only active after .animate is added */
.progress-bar__fill.animate {
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   COMMUNITY LINK PLATFORM GLOWS
   ============================================ */
.community-link--discord:hover {
    border-color: #5865F2;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(88, 101, 242, 0.15);
}

.community-link--patreon:hover {
    border-color: #FF424D;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 66, 77, 0.15);
}

.community-link--youtube:hover {
    border-color: #FF0000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 0, 0, 0.12);
}

.community-link--twitter:hover {
    border-color: #e8e0d0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(232, 224, 208, 0.1);
}

/* ============================================
   FOOTER LOGO GLOW
   ============================================ */
.site-footer.revealed .footer__logo {
    animation: footerLogoGlow 3s ease-in-out 0.5s both;
}

@keyframes footerLogoGlow {
    0%   { text-shadow: none; }
    50%  { text-shadow: 0 0 20px var(--color-amber-glow), 0 0 40px rgba(212, 165, 67, 0.08); }
    100% { text-shadow: 0 0 10px var(--color-amber-glow); }
}

/* ============================================
   NAVIGATION ANIMATIONS
   ============================================ */

/* Slide-down entrance */
.site-header {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease,
                background-color var(--transition-normal),
                backdrop-filter var(--transition-normal);
}

.site-header.nav-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Smart hide on scroll down */
.site-header.header-hidden {
    transform: translateY(-100%);
}

/* Mobile menu staggered link entrance */
@media (max-width: 768px) {
    .nav-menu.open .nav-link,
    .nav-menu.open .nav-cta {
        opacity: 0;
        transform: translateX(30px);
        animation: navLinkSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .nav-menu.open li:nth-child(1) .nav-link { animation-delay: 0.1s; }
    .nav-menu.open li:nth-child(2) .nav-link { animation-delay: 0.15s; }
    .nav-menu.open li:nth-child(3) .nav-link { animation-delay: 0.2s; }
    .nav-menu.open li:nth-child(4) .nav-link { animation-delay: 0.25s; }
    .nav-menu.open li:nth-child(5) .nav-link { animation-delay: 0.3s; }
    .nav-menu.open li:nth-child(6) .nav-link { animation-delay: 0.35s; }
    .nav-menu.open li:nth-child(7) .nav-link { animation-delay: 0.4s; }
    .nav-menu.open li:nth-child(8) .nav-link { animation-delay: 0.45s; }
    .nav-menu.open li:nth-child(9) .nav-cta  { animation-delay: 0.5s; }

    @keyframes navLinkSlideIn {
        0%   { opacity: 0; transform: translateX(30px); }
        100% { opacity: 1; transform: translateX(0); }
    }
}

/* ============================================
   SITE-WIDE CURSOR GLOW
   Fixed-position circle that follows the mouse.
   JS sets left/top; CSS transitions smooth it.
   ============================================ */
.cursor-glow {
    position: fixed;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 67, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: left 0.15s ease-out, top 0.15s ease-out, opacity 0.4s ease;
    opacity: 0;
    top: 0;
    left: 0;
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        will-change: auto;
    }

    .splash {
        display: none;
    }

    .hero__title {
        -webkit-text-fill-color: var(--color-text-primary);
        background: none !important;
    }

    .hero__overlay::before {
        display: none;
    }

    .site-header {
        transform: none;
        opacity: 1;
    }

    .server-card__indicator::after {
        animation: none !important;
    }

    .section + .section::before {
        width: 80%;
    }

    .biome-panel__visual::after {
        display: none;
    }

    .section__title::after {
        display: none;
    }

    .cursor-glow {
        display: none;
    }
}