/**
 * Muathemewpgiare About Experience - Animation Engine & Keyframes
 * Version: 1.3.0
 *
 * Scope: Strictly within .mtwg-about and prefixed with .mtwg-
 */

/* ==========================================================================
   01. Top Scroll Progress Bar
   ========================================================================== */
.mtwg-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99999;
    background: transparent;
    pointer-events: none;
}

.mtwg-scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed 0%, #2563eb 50%, #06b6d4 100%);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
    transition: width 0.1s linear;
}

/* ==========================================================================
   02. Reveal Animation (IntersectionObserver / GSAP Fallback)
   ========================================================================== */
.mtwg-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.mtwg-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay classes for fallback */
.mtwg-reveal-delay-1 { transition-delay: 0.1s; }
.mtwg-reveal-delay-2 { transition-delay: 0.2s; }
.mtwg-reveal-delay-3 { transition-delay: 0.3s; }
.mtwg-reveal-delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   03. Keyframe Animations
   ========================================================================== */
@keyframes mtwgMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes mtwgScrollBounce {
    0%, 100% {
        transform: translate(-50%, 0);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, 10px);
        opacity: 0.2;
    }
}

@keyframes mtwgPulseGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.85;
    }
}

@keyframes mtwgFloatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

/* Utility Animation Classes */
.mtwg-pulse {
    animation: mtwgPulseGlow 6s ease-in-out infinite;
}

.mtwg-float {
    animation: mtwgFloatSlow 8s ease-in-out infinite;
}

/* ==========================================================================
   04. Accessibility: Prefers-Reduced-Motion Override
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mtwg-about *,
    .mtwg-about *::before,
    .mtwg-about *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .mtwg-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mtwg-marquee-track {
        animation: none !important;
        transform: none !important;
    }

    .mtwg-scroll-wheel {
        animation: none !important;
    }

    .mtwg-cursor-glow,
    .mtwg-scroll-progress {
        display: none !important;
    }
}