/* Lightweight Premium Animations - CSS Only
   Optimized for performance: uses transform and opacity only.
*/

:root {
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Reduced Motion Support */
@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;
    }
}

/* =========================================
   Base Reveal Classes
   ========================================= */

/* Default State (Hidden) */
.reveal,
.reveal-left,
.reveal-right,
.reveal-up {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.8s var(--ease-out-quint),
        transform 0.8s var(--ease-out-quint);
}

/* Initial positions */
.reveal {
    transform: translateY(30px);
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

/* Active State (Triggered by JS) */
.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-up.active {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* =========================================
   Stagger Delays (for Lists/Grids)
   ========================================= */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

/* =========================================
   Feature Card Animations
   ========================================= */
.anim-card {
    transition: transform 0.4s var(--ease-out-quint),
        box-shadow 0.4s var(--ease-out-quint),
        background-color 0.3s ease;
    will-change: transform, box-shadow;
}

.anim-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1),
        0 10px 20px -5px rgba(0, 0, 0, 0.04);
}

/* Icon Animations inside Cards */
.anim-card .anim-icon {
    transition: transform 0.5s var(--ease-out-expo);
}

.anim-card:hover .anim-icon {
    transform: scale(1.1) rotate(5deg);
}

/* =========================================
   Button Animations
   ========================================= */
.anim-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s var(--ease-out-quint),
        filter 0.2s ease,
        box-shadow 0.3s ease;
}

.anim-btn:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb, 13, 110, 253), 0.3);
}

.anim-btn:active {
    transform: scale(0.98);
}

/* Pulse Effect for CTA */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 13, 110, 253), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--accent-rgb, 13, 110, 253), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 13, 110, 253), 0);
    }
}

.anim-pulse {
    animation: pulse-glow 2s infinite;
}

/* =========================================
   Keyframe Utilities (if needed for standalone)
   ========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================
   About Page Specific Animations
   ========================================= */

/* Hero Floating Background */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.float-bg {
    animation: float 15s ease-in-out infinite;
    will-change: transform;
}

/* Timeline Drawing Animation */
.timeline-line {
    position: absolute;
    left: 20px;
    /* Adjust based on design */
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
    /* Default color (border-border) */
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1.5s linear;
}

.timeline-line.active {
    transform: scaleY(1);
}

/* Testimonial Slider Transitions */
.testimonial-slide {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.testimonial-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

/* Certification Glow */
.cert-card {
    transition: all 0.3s ease;
}

.cert-card:hover {
    box-shadow: 0 0 15px rgba(var(--accent-rgb, 13, 110, 253), 0.3);
    border-color: rgba(var(--accent-rgb, 13, 110, 253), 0.5);
}