/**
 * MaiMusic Animations
 * Motion design for sensory immersion
 */

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

/* Pulse beat - heartbeat effect */
@keyframes mai-pulse-beat {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Wave bar - audio visualizer bars */
@keyframes mai-wave-bar {
    0%, 100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

/* Gentle float - ambient movement */
@keyframes mai-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Breathing glow */
@keyframes mai-breathe {
    0%, 100% {
        opacity: 0.5;
        filter: blur(20px);
    }
    50% {
        opacity: 0.8;
        filter: blur(30px);
    }
}

/* Rotate slow - for orbs and particles */
@keyframes mai-rotate-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Shimmer - text highlight effect */
@keyframes mai-shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Fade in up */
@keyframes mai-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in down */
@keyframes mai-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in scale */
@keyframes mai-fade-in-scale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Ripple effect */
@keyframes mai-ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Glitch effect */
@keyframes mai-glitch {
    0%, 100% {
        transform: translate(0);
        filter: none;
    }
    20% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(2px, -2px);
        filter: hue-rotate(-90deg);
    }
    60% {
        transform: translate(-1px, -1px);
        filter: saturate(2);
    }
    80% {
        transform: translate(1px, 1px);
        filter: brightness(1.2);
    }
}

/* Scan line */
@keyframes mai-scan-line {
    0% {
        top: -100%;
    }
    100% {
        top: 100%;
    }
}

/* Particle drift */
@keyframes mai-drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--drift-x, 100px), var(--drift-y, -200px)) rotate(360deg);
        opacity: 0;
    }
}

/* Waveform animation */
@keyframes mai-waveform {
    0% {
        d: path("M0,50 Q25,30 50,50 T100,50");
    }
    50% {
        d: path("M0,50 Q25,70 50,50 T100,50");
    }
    100% {
        d: path("M0,50 Q25,30 50,50 T100,50");
    }
}

/* ========================================
   ANIMATION UTILITIES
   ======================================== */

/* Apply animations */
.mai-animate-pulse {
    animation: mai-pulse-beat 2s ease-in-out infinite;
}

.mai-animate-float {
    animation: mai-float 4s ease-in-out infinite;
}

.mai-animate-breathe {
    animation: mai-breathe 4s ease-in-out infinite;
}

.mai-animate-rotate {
    animation: mai-rotate-slow 20s linear infinite;
}

.mai-animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: mai-shimmer 3s linear infinite;
}

.mai-animate-glitch {
    animation: mai-glitch 0.3s ease-in-out;
}

/* Entrance animations (triggered by JS or scroll) */
.mai-enter-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--mai-duration-slow) var(--mai-ease-out),
                transform var(--mai-duration-slow) var(--mai-ease-out);
}

.mai-enter-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mai-enter-fade-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity var(--mai-duration-slow) var(--mai-ease-out),
                transform var(--mai-duration-slow) var(--mai-ease-out);
}

.mai-enter-fade-down.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mai-enter-fade-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--mai-duration-slow) var(--mai-ease-out),
                transform var(--mai-duration-slow) var(--mai-ease-out);
}

.mai-enter-fade-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

.mai-enter-fade-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--mai-duration-slow) var(--mai-ease-out),
                transform var(--mai-duration-slow) var(--mai-ease-out);
}

.mai-enter-fade-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.mai-enter-fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--mai-duration-slow) var(--mai-ease-out),
                transform var(--mai-duration-slow) var(--mai-ease-out);
}

.mai-enter-fade-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delays for groups */
.mai-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.mai-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.mai-stagger > *:nth-child(3) { transition-delay: 0.15s; }
.mai-stagger > *:nth-child(4) { transition-delay: 0.2s; }
.mai-stagger > *:nth-child(5) { transition-delay: 0.25s; }
.mai-stagger > *:nth-child(6) { transition-delay: 0.3s; }
.mai-stagger > *:nth-child(7) { transition-delay: 0.35s; }
.mai-stagger > *:nth-child(8) { transition-delay: 0.4s; }
.mai-stagger > *:nth-child(9) { transition-delay: 0.45s; }
.mai-stagger > *:nth-child(10) { transition-delay: 0.5s; }

/* ========================================
   HOVER EFFECTS
   ======================================== */

/* Magnetic hover - elements attracted to cursor */
.mai-hover-magnetic {
    transition: transform var(--mai-duration-fast) var(--mai-ease-out);
}

/* Glow on hover */
.mai-hover-glow {
    transition: box-shadow var(--mai-duration-fast);
}

.mai-hover-glow:hover {
    box-shadow: 0 0 20px var(--flavor-primary, var(--mai-pulse)), 0 0 40px var(--flavor-primary, var(--mai-pulse));
}

/* Scale on hover */
.mai-hover-scale {
    transition: transform var(--mai-duration-fast) var(--mai-ease-bounce);
}

.mai-hover-scale:hover {
    transform: scale(1.05);
}

/* Lift on hover */
.mai-hover-lift {
    transition: transform var(--mai-duration-fast) var(--mai-ease-out),
                box-shadow var(--mai-duration-fast);
}

.mai-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--mai-shadow-lg);
}

/* ========================================
   RIPPLE EFFECT COMPONENT
   ======================================== */

.mai-ripple {
    position: relative;
    overflow: hidden;
}

.mai-ripple__wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: mai-ripple 0.6s linear;
    pointer-events: none;
}

/* ========================================
   AUDIO REACTIVE CLASSES
   (Values set via CSS custom properties from JS)
   ======================================== */

.mai-audio-reactive {
    --audio-amplitude: 0;
    --audio-bass: 0;
    --audio-mid: 0;
    --audio-treble: 0;
}

.mai-audio-scale {
    transform: scale(calc(1 + var(--audio-amplitude) * 0.1));
}

.mai-audio-glow {
    filter: brightness(calc(1 + var(--audio-amplitude) * 0.3));
}

.mai-audio-pulse {
    opacity: calc(0.5 + var(--audio-amplitude) * 0.5);
}

/* ========================================
   SCROLL-TRIGGERED ANIMATIONS
   ======================================== */

.mai-scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s var(--mai-ease-out),
                transform 0.8s var(--mai-ease-out);
}

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

/* Parallax helper (depth set via JS) */
.mai-parallax {
    will-change: transform;
}

/* ========================================
   LOADING STATES
   ======================================== */

.mai-skeleton {
    background: linear-gradient(
        90deg,
        var(--mai-gray-800) 0%,
        var(--mai-gray-700) 50%,
        var(--mai-gray-800) 100%
    );
    background-size: 200% 100%;
    animation: mai-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--mai-radius-md);
}

.mai-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--mai-gray-700);
    border-top-color: var(--flavor-primary, var(--mai-pulse));
    border-radius: 50%;
    animation: mai-rotate-slow 0.8s linear infinite;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .mai-scroll-reveal {
        opacity: 1;
        transform: none;
    }
}