/* =========================================
   Optical Glass Reveal Animations
   "The Autofocus Effect"
   ========================================= */

/* Base Entrance State - Apply this to elements that should animate in */
.animate-enter {
    opacity: 0;
    /* Start slightly blurred and scaled down for depth */
    filter: blur(12px);
    transform: scale(0.96) translateY(20px);
    /* Hardware acceleration hint */
    will-change: opacity, filter, transform;
}

/* The Animation Keyframes */
@keyframes glass-reveal {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: scale(0.96) translateY(20px);
    }

    /* Quick snap to visibility but still refining focus */
    60% {
        opacity: 0.8;
        filter: blur(4px);
        transform: scale(1.005) translateY(-2px);
        /* Slight overshoot for organic feel */
    }

    /* Final settlement */
    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1) translateY(0);
    }
}

/* Application Class */
.animate-enter {
    animation: glass-reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Staggered Delays - Creating the "Wave" effect */
.delay-0 {
    animation-delay: 0ms;
}

.delay-1 {
    animation-delay: 100ms;
}

.delay-2 {
    animation-delay: 200ms;
}

.delay-3 {
    animation-delay: 300ms;
}

.delay-4 {
    animation-delay: 400ms;
}

.delay-5 {
    animation-delay: 500ms;
}

/* Exit Animation - For leaving pages (e.g. Index) */
@keyframes glass-exit {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(16px);
        transform: scale(1.05);
        /* Expand slightly as it dissipates */
    }
}

.animate-exit {
    animation: glass-exit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    /* Prevent clicks during exit */
}

/* Utility to ensure clean initial state */
/* Utility to ensure clean initial state */
/* .auth-layout, .container rules removed to avoid empty block lint error. 
   Styles are handled by animation classes. */

/* In-Place Refocus Animation (Login Capsule) */
.anim-refocus {
    filter: blur(8px) !important;
    transform: scale(0.98) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure the button supports these transitions normally */
.auth-google-btn {
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================
   Premium Non-Linear Slide Animations
   "The Inertia Effect" (New 2026 Upgrade)
   ========================================= */

@keyframes premium-slide-up {
    0% {
        opacity: 0;
        /* Optical Focus: Start blurry */
        filter: blur(12px);
        /* Enhanced depth: Start lower and slightly smaller */
        transform: translateY(40px) scale(0.94);
    }

    100% {
        opacity: 1;
        /* Focus complete */
        filter: blur(0);
        /* Land precisely */
        transform: translateY(0) scale(1);
    }
}

/* Standalone usage of the premium inertia animation */
.animate-premium {
    opacity: 0;
    /* Ensure hidden */
    will-change: transform, opacity, filter;
    animation: premium-slide-up 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* 
 * Utility: Stagger Animation Container 
 * Apply this to a parent container. Its direct children will automatically animate.
 */
.animate-stagger>* {
    opacity: 0;
    /* Ensure hidden before animation starts */

    /* Using the enhanced keyframes now */
    animation: premium-slide-up 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;

    /* Dynamic delay based on --delay-index variable.
       Fallback logic: 0 if variable not set.
       Base stagger: 0.08s (80ms) for snappy but noticeable rhythm. */
    animation-delay: calc(var(--delay-index, 0) * 0.08s);

    /* Optimize Janky frames */
    will-change: transform, opacity, filter;
}

/* 
 * LITE Version: High Performance (No Blur, No Scale Override) 
 * Best for lists/grids where multiple items animate simultaneously
 */
@keyframes premium-slide-lite {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(var(--scale-from, 1));
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(var(--scale-to, 1));
    }
}

.animate-stagger-lite>* {
    opacity: 0;
    /* Uses the same Golden Bezier for consistent feel, but cheaper properties */
    animation: premium-slide-lite 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) both;
    animation-delay: calc(var(--delay-index, 0) * 0.08s);
    will-change: transform, opacity;
}