/* ==========================================================================
   CAMDEMICS ULTRA-SMOOTH SCROLL REVEAL & MOTION SYSTEM
   High-performance, 60fps GPU-accelerated scroll reveals for landing pages,
   cards, sections, grids, metrics, headers and interactive widgets.
   ========================================================================== */

:root {
    --motion-fast: 180ms;
    --motion-standard: 340ms;
    --motion-smooth: 520ms;
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-behavior: smooth; }

/* ── 1. Scroll-Triggered Reveal Base States ────────────────────────────── */
/* Elements start in an enhanced pending state and smoothly transition when entering viewport */
.motion-ready .motion-pending {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity var(--motion-smooth) var(--motion-ease),
                transform var(--motion-smooth) var(--motion-ease);
    will-change: opacity, transform;
}

/* Fallback: if javascript doesn't run or is delayed, content is never hidden */
html:not(.motion-ready) .motion-pending {
    opacity: 1 !important;
    transform: none !important;
}

/* Triggered visible state when scrolled into view */
.motion-ready .motion-pending.motion-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto;
}

/* Staggered cascading delay for child cards and grid columns */
.motion-ready .motion-visible[data-motion-stagger="1"] { transition-delay: 40ms; }
.motion-ready .motion-visible[data-motion-stagger="2"] { transition-delay: 80ms; }
.motion-ready .motion-visible[data-motion-stagger="3"] { transition-delay: 120ms; }
.motion-ready .motion-visible[data-motion-stagger="4"] { transition-delay: 160ms; }
.motion-ready .motion-visible[data-motion-stagger="5"] { transition-delay: 200ms; }
.motion-ready .motion-visible[data-motion-stagger="6"] { transition-delay: 240ms; }
.motion-ready .motion-visible[data-motion-stagger="7"] { transition-delay: 280ms; }
.motion-ready .motion-visible[data-motion-stagger="8"] { transition-delay: 320ms; }

/* ── 2. Specialized Directional Motion Styles ─────────────────────────── */
/* Slide from Left */
.motion-ready .motion-pending.motion-slide-left {
    transform: translate3d(-30px, 0, 0);
}
/* Slide from Right */
.motion-ready .motion-pending.motion-slide-right {
    transform: translate3d(30px, 0, 0);
}
/* Subtle Scale Up (ideal for cards, badges, statistics counters) */
.motion-ready .motion-pending.motion-zoom {
    transform: scale(0.92) translate3d(0, 16px, 0);
}
.motion-ready .motion-pending.motion-zoom.motion-visible {
    transform: scale(1) translate3d(0, 0, 0) !important;
}

/* ── 3. High-Quality Card Elevation & Hover Physics ───────────────────── */
.motion-ready .card,
.motion-ready .feature-card-item,
.motion-ready .pillar-card,
.motion-ready .program-card-box,
.motion-ready .stat-counter-card,
.motion-ready .floating-metric-card,
.motion-ready .about-highlight-card,
.motion-ready .onboarding-pillar-card,
.motion-ready .event-card,
.motion-ready .course-card {
    transition: transform 0.28s var(--motion-ease),
                box-shadow 0.28s var(--motion-ease),
                border-color 0.25s ease,
                background-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .motion-ready .card:not(.modal-content):not(.dropdown-menu):hover,
    .motion-ready .feature-card-item:hover,
    .motion-ready .program-card-box:hover,
    .motion-ready .about-highlight-card:hover {
        transform: translate3d(0, -6px, 0);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(var(--primary-color-rgb, 0, 115, 59), 0.15) !important;
    }
    
    .motion-ready .btn:not(:disabled):not(.disabled):hover,
    .motion-ready a.btn:hover {
        transform: translate3d(0, -2px, 0);
    }
}

.motion-ready .btn:active:not(:disabled):not(.disabled),
.motion-ready button:active:not(:disabled) {
    transform: translate3d(0, 0, 0) scale(0.98);
}

.motion-ready :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--primary-color, #00733B);
    outline-offset: 2px;
}

/* ── 4. Dialog & Modal Spring Motion ──────────────────────────────────── */
.modal.motion-modal-active .modal-dialog {
    animation: motion-modal-in var(--motion-standard) var(--motion-ease) both;
}
.modal.motion-modal-closing .modal-dialog {
    animation: motion-modal-out var(--motion-fast) ease-in both;
}
@keyframes motion-modal-in {
    from { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes motion-modal-out {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(0, -6px, 0) scale(0.98); }
}

/* ── 5. Form Submission Indicator ─────────────────────────────────────── */
form.motion-submitting { position: relative; }
form.motion-submitting::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 2px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(100, 116, 139, 0.28);
    border-top-color: var(--primary-color, #00733B);
    border-radius: 50%;
    animation: motion-spin 650ms linear infinite;
    pointer-events: none;
}
.motion-submit-control { opacity: 0.78; }
@keyframes motion-spin { to { transform: rotate(360deg); } }

/* ── 6. Reduced Motion Accessibility Guard ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
    .motion-ready .motion-pending {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}