/* ====================
   ANIMATIONS & KEYFRAMES
   ==================== */

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

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

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

/* ====================
   ANIMATION UTILITIES
   ==================== */

.animate-slide-in-down { animation: slideInDown 0.6s ease-out; }
.animate-slide-in-up   { animation: slideInUp 0.6s ease-out; }
.animate-fade-in       { animation: fadeIn 0.6s ease-out; }

/* ====================
   MOBILE MENU
   ==================== */

@media (max-width: 768px) {
    .navbar-menu {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background-color: #ffffff;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid var(--border);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .navbar-menu.mobile-open {
        max-height: 500px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }

    .nav-link {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    .nav-link.active { background-color: var(--light-bg); }
    .nav-link.active::after { display: none; }

    .navbar-menu .nav-cta {
        display: block;
        margin: 16px 20px !important;
        width: calc(100% - 40px);
        text-align: center;
        border-radius: 0 !important;
        padding: 14px 20px !important;
        font-size: 11px !important;
    }

    .menu-toggle { display: flex; }

    .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ====================
   HERO ANIMATIONS
   ==================== */

.hero-eyebrow  { animation: slideInDown 0.6s ease-out; }
.hero-headline { animation: slideInDown 0.7s ease-out; }
.hero-subtext  { animation: slideInUp 0.7s ease-out; }
.hero-cta      { animation: fadeIn 0.9s ease-out; }

/* ====================
   SCROLL ANIMATIONS
   ==================== */

.section-header h2 { animation: slideInDown 0.8s ease-out; }
.section-header p  { animation: slideInUp 0.8s ease-out; }

/* ====================
   FORM ANIMATIONS
   ==================== */

.form-group { animation: slideInUp 0.6s ease-out; }

.form-group input,
.form-group select,
.form-group textarea { transition: var(--transition); }

.alert { animation: slideInDown 0.4s ease-out; }

/* ====================
   BUTTON SHIMMER
   ==================== */

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    transition: left 0.3s ease;
}

.btn:hover::before { left: 100%; }

/* ====================
   HOVER UTILITIES
   ==================== */

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* ====================
   LOADING STATES
   ==================== */

.btn:active     { transform: scale(0.98); }
.nav-link:active { opacity: 0.8; }

/* ====================
   PRINT STYLES
   ==================== */

@media print {
    .navbar, .footer, .menu-toggle, .cta-buttons { display: none; }
    body { background-color: white; }
    .container { max-width: 100%; }
}

/* ====================
   ACCESSIBILITY
   ==================== */

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ====================
   FOCUS VISIBLE
   ==================== */

.btn:focus-visible,
.nav-link:focus-visible,
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ====================
   RESPONSIVE TYPOGRAPHY
   ==================== */

@media (max-width: 768px) {
    html { font-size: 15px; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
}