/* 
 * ANIMATIONS CSS - Enterprise Animation System
 * Core Principles: Performance (60fps), Utility-First, Accessibility.
 * Uses CSS custom properties from design-system.css
 */

/* ==========================================================================
   1. CORE UTILITIES (IntersectionObserver Hooks)
   ========================================================================== */

/* Base hidden state */
.anim-init {
    opacity: 0;
    will-change: opacity, transform;
}

/* Visibility triggers applied by JS */
.anim-active {
    opacity: 1 !important;
    transform: none !important;
}

/* 1.1 Fade Utility */
.anim-fade {
    transition: opacity var(--anim-duration-base) var(--anim-ease-apple);
}

/* 1.2 Slide/Translate Utilities */
.anim-slide-up {
    transform: translateY(30px);
    transition: opacity var(--anim-duration-base) var(--anim-ease-apple),
        transform var(--anim-duration-base) var(--anim-ease-apple);
}

.anim-slide-down {
    transform: translateY(-30px);
    transition: opacity var(--anim-duration-base) var(--anim-ease-apple),
        transform var(--anim-duration-base) var(--anim-ease-apple);
}

.anim-slide-left {
    transform: translateX(30px);
    transition: opacity var(--anim-duration-base) var(--anim-ease-apple),
        transform var(--anim-duration-base) var(--anim-ease-apple);
}

.anim-slide-right {
    transform: translateX(-30px);
    transition: opacity var(--anim-duration-base) var(--anim-ease-apple),
        transform var(--anim-duration-base) var(--anim-ease-apple);
}

/* 1.3 Scale Utility */
.anim-scale {
    transform: scale(0.95);
    transition: opacity var(--anim-duration-base) var(--anim-ease-apple),
        transform var(--anim-duration-base) var(--anim-ease-apple);
}

/* 1.4 Stagger & Timing Modifiers */
.anim-delay-100 {
    transition-delay: 0.1s;
}

.anim-delay-200 {
    transition-delay: 0.2s;
}

.anim-delay-300 {
    transition-delay: 0.3s;
}

.anim-delay-400 {
    transition-delay: 0.4s;
}

.anim-delay-500 {
    transition-delay: 0.5s;
}

.anim-duration-slow {
    transition-duration: var(--anim-duration-slow);
}

.anim-duration-fast {
    transition-duration: var(--anim-duration-fast);
}


/* ==========================================================================
   2. INTERACTIVE COMPONENTS (Hover & Click)
   ========================================================================== */

/* 2.1 Standard Card Hover (Lift + Shadow) */
.anim-hover-lift {
    transition: transform var(--anim-duration-fast) var(--anim-ease-out-expo),
        box-shadow var(--anim-duration-fast) var(--anim-ease-out-expo);
}

.anim-hover-lift:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-lg);
}

/* 2.2 Button Press State */
.btn-press {
    transition: transform 0.15s var(--anim-ease-apple);
}

.btn-press:active {
    transform: scale(0.97);
}


/* ==========================================================================
   3. SPECIFIC SECTION ENHANCEMENTS
   ========================================================================== */

/* 3.1 Hero Background Visuals (Ambient Loops) */
@keyframes heroFloatAmbience {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(15px, -10px);
    }

    66% {
        transform: translate(-10px, 15px);
    }
}

.anim-loop-float {
    animation: heroFloatAmbience 20s ease-in-out infinite;
    will-change: transform;
}

/* 3.2 Navbar Transition */
.navbar {
    transition: background-color var(--anim-duration-base) var(--anim-ease-apple),
        box-shadow var(--anim-duration-base) var(--anim-ease-apple),
        backdrop-filter var(--anim-duration-base) var(--anim-ease-apple),
        height var(--anim-duration-base) var(--anim-ease-apple);
}

.navbar--transparent {
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.navbar--scrolled {
    background-color: var(--bg-glass) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: var(--blur-glass) !important;
    height: 70px;
    /* Slight height reduction on scroll */
}


/* ==========================================================================
   4. SYSTEM-LEVEL COMPONENTS (Cursor & Forms)
   ========================================================================== */

/* Custom Cursor (Fine pointer only) */
@media (pointer: fine) {
    .cursor-active {
        cursor: none !important;
    }

    .cursor-active a,
    .cursor-active button {
        cursor: none !important;
    }

    .custom-cursor {
        position: fixed;
        width: 40px;
        height: 40px;
        border: 2px solid var(--color-primary);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99999;
        mix-blend-mode: difference;
        opacity: 0;
        transition: opacity 0.3s ease, width 0.3s var(--anim-ease-out-expo), height 0.3s var(--anim-ease-out-expo);
        transform: translate(-50%, -50%);
    }

    .custom-cursor.visible {
        opacity: 1;
    }

    .custom-cursor.hover {
        width: 60px;
        height: 60px;
        background-color: rgba(0, 114, 255, 0.1);
    }
}

/* Form Validation Interactions */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.form-error {
    animation: shake 0.4s var(--anim-ease-in-out);
    border-color: var(--color-error) !important;
}


/* ==========================================================================
   5. ACCESSIBILITY (Reduced Motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }

    .anim-init {
        opacity: 1 !important;
        transform: none !important;
    }

    .custom-cursor {
        display: none !important;
    }
}