/* css/styles.css */
body {
    background-color: #0A0A0A;
    color: #e1e3e4;
    font-family: 'Geist', 'Geist Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Base utilities */
.glass-card {
    background: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 200ms ease-out;
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(26, 26, 26, 0.9);
}

.hero-gradient {
    background: radial-gradient(circle at 50% -20%, rgba(173, 198, 255, 0.15) 0%, transparent 50%);
}

.hero-gradient-center {
    background: radial-gradient(circle at 50% 50%, rgba(173, 198, 255, 0.05) 0%, transparent 70%);
}

.button-primary {
    background: linear-gradient(135deg, #adc6ff 0%, #d0bcff 100%);
    transition: all 200ms ease-out;
}

.button-primary:hover {
    box-shadow: 0 0 24px rgba(173, 198, 255, 0.3);
    opacity: 0.9;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hairline-border {
    border-image: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) 1;
}

/* ============================================================
   SCROLL ANIMATIONS  —  add data-animate="<variant>" to any el
   ============================================================ */

/* --- base hidden state --- */
[data-animate] {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-duration: 0.75s;
    will-change: opacity, transform;
}

/* --- variants (before visible) --- */
[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(-50px); }
[data-animate="fade-right"] { transform: translateX(50px); }
[data-animate="zoom-in"]    { transform: scale(0.88); filter: blur(4px); }
[data-animate="zoom-out"]   { transform: scale(1.12); filter: blur(4px); }
[data-animate="flip-up"]    { transform: perspective(600px) rotateX(20deg) translateY(30px); }

/* --- visible state (JS adds this class) --- */
[data-animate].animate-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* --- stagger delays (data-delay="N") --- */
[data-delay="1"] { transition-delay: 80ms;  }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }
[data-delay="6"] { transition-delay: 480ms; }
[data-delay="7"] { transition-delay: 560ms; }
[data-delay="8"] { transition-delay: 640ms; }

/* --- Legacy .fade-up support (backward compat) --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible  { opacity: 1; transform: translateY(0); }
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }

/* --- Navbar scroll-shrink --- */
nav.scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
nav { transition: box-shadow 0.3s ease, padding 0.3s ease; }

/* --- Active nav-link (scroll spy drives this) --- */
.nav-link {
    position: relative;
    padding-bottom: 2px;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link.active {
    color: var(--color-primary, #adc6ff) !important;
    font-weight: 700;
}
.nav-link.active::after {
    width: 100%;
}