/* ============================================
   Animations — Keyframes and transitions
   ============================================ */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

@keyframes glow-pulse {
    0%, 100% { border-color: var(--border); }
    50% { border-color: var(--border-bright); }
}

/* Subtle color shimmer for clickable elements: cyan/white → orange → back */
@keyframes clickable-shimmer {
    0%, 100% { color: var(--cyan); }
    50% { color: var(--amber); }
}

@keyframes clickable-shimmer-dim {
    0%, 100% { color: var(--text-dim); }
    50% { color: var(--amber); }
}

@keyframes border-shimmer {
    0%, 100% { border-color: var(--cyan-dim); }
    50% { border-color: var(--amber); }
}

@keyframes border-shimmer-dim {
    0%, 100% { border-color: var(--border); }
    50% { border-color: rgba(255, 184, 0, 0.3); }
}

/* Utility classes */
.animate-pulse {
    animation: pulse 4s ease-in-out infinite;
}

.animate-fade-in {
    animation: fade-in-up 0.6s ease-out both;
}

.animate-glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* Staggered delays for grid children */
.animate-fade-in:nth-child(2) { animation-delay: 0.1s; }
.animate-fade-in:nth-child(3) { animation-delay: 0.2s; }
.animate-fade-in:nth-child(4) { animation-delay: 0.3s; }
.animate-fade-in:nth-child(5) { animation-delay: 0.4s; }
.animate-fade-in:nth-child(6) { animation-delay: 0.5s; }

/* Stagger clickable shimmer so elements don't pulse in sync */
.site-nav__link:nth-child(2) { animation-delay: -0.8s; }
.site-nav__link:nth-child(3) { animation-delay: -1.6s; }
.site-nav__link:nth-child(4) { animation-delay: -2.4s; }
.site-nav__link:nth-child(5) { animation-delay: -3.2s; }

.site-footer__nav a:nth-child(2) { animation-delay: -0.7s; }
.site-footer__nav a:nth-child(3) { animation-delay: -1.4s; }
.site-footer__nav a:nth-child(4) { animation-delay: -2.1s; }
.site-footer__nav a:nth-child(5) { animation-delay: -2.8s; }

.btn--secondary { animation-delay: -1.5s; }

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

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

/* Staggered children inside revealed sections */
.reveal--visible > .reveal-child:nth-child(1) { transition-delay: 0ms; }
.reveal--visible > .reveal-child:nth-child(2) { transition-delay: 100ms; }
.reveal--visible > .reveal-child:nth-child(3) { transition-delay: 200ms; }
.reveal--visible > .reveal-child:nth-child(4) { transition-delay: 300ms; }
.reveal--visible > .reveal-child:nth-child(5) { transition-delay: 400ms; }
.reveal--visible > .reveal-child:nth-child(6) { transition-delay: 500ms; }
.reveal--visible > .reveal-child:nth-child(7) { transition-delay: 600ms; }
.reveal--visible > .reveal-child:nth-child(8) { transition-delay: 700ms; }

.reveal-child {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.reveal--visible > .reveal-child {
    opacity: 1;
    transform: translateY(0);
}

/* Onboarding — First-visit loading sequence */
.onboarding-active .site-header,
.onboarding-active .site-nav,
.onboarding-active .page-content,
.onboarding-active .site-footer {
    opacity: 0;
    transition: opacity 800ms ease-out;
}

.onboarding-active .site-header__logo {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.onboarding-logo .site-header__logo {
    opacity: 1;
}

/* Grid 3D fade-in during onboarding */
.onboarding-active #webgl-canvas,
.onboarding-active .grid-bg {
    opacity: 0;
    transition: opacity 1000ms ease-out;
}

.onboarding-grid #webgl-canvas,
.onboarding-grid .grid-bg {
    opacity: 1;
}

/* Restore default .grid-bg opacity after onboarding */
.onboarding-done .grid-bg {
    opacity: 0.05;
}

.onboarding-content .site-header,
.onboarding-content .site-nav,
.onboarding-content .page-content,
.onboarding-content .site-footer {
    opacity: 1;
}

/* Reduced motion — disable everything */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}