/* ============================================================
   PREMIUM ANTI-GRAVITY & MOTION DESIGN
   ============================================================ */

/* Advanced Easing Variables */
:root {
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-cinematic: 0.8s var(--ease-out-expo);
    --transition-float: 6s var(--ease-in-out-sine) infinite alternate;
}

/* Base Anti-Gravity Floating Animations */
@keyframes floatUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}

@keyframes floatDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(12px); }
}

@keyframes floatDiagonal {
    0% { transform: translate(0, 0); }
    100% { transform: translate(8px, -10px); }
}

/* Subtle Pulsing for Glows */
@keyframes softPulse {
    0% { box-shadow: 0 0 0 rgba(82,183,136,0); }
    100% { box-shadow: 0 10px 40px rgba(82,183,136,0.12); }
}

/* Parallax Data Attributes Handling via CSS Transform */
.parallax-element {
    transition: transform var(--transition-cinematic);
    will-change: transform;
}

/* Class Assignments for Floating Elements */
.float-up {
    animation: floatUp var(--transition-float);
    will-change: transform;
}

.float-down {
    animation: floatDown calc(var(--transition-float) * 1.2);
    will-change: transform;
}

.float-diagonal {
    animation: floatDiagonal calc(var(--transition-float) * 1.5);
    will-change: transform;
}

/* Hover Enhancements for Interactive Components */
.course-card, .membership-card, .testimonial-card, .btn-kig {
    transition: transform var(--transition-cinematic), 
                box-shadow var(--transition-cinematic), 
                background-color var(--transition-fast), 
                border-color var(--transition-fast) !important;
    will-change: transform, box-shadow;
}

.course-card:hover, .membership-card:not(.featured):hover, .testimonial-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 45px rgba(0,0,0,0.35), 0 0 20px rgba(82,183,136,0.08);
}

.membership-card.featured {
    animation: floatUp 8s var(--ease-in-out-sine) infinite alternate;
}
.membership-card.featured:hover {
    animation-play-state: paused;
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 30px rgba(82,183,136,0.12);
}

.btn-kig:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 0 15px rgba(82,183,136,0.12);
}

/* Scroll Reveal Classes (Handled by JS Intersection Observer) */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
    will-change: opacity, transform;
}

.reveal-up.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Apply staggered delays using JS data-delay or nth-child CSS if needed */

/* Add Floating Effect to Specific Existing UI Blocks */
.about-floating-card {
    animation: floatDiagonal 7s var(--ease-in-out-sine) infinite alternate;
}

/* Accessibility: Disable all motion if user prefers reduced motion 
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
*/