/* ========================================
   TurnFile 360 - M3 Animations & Motion
   Expressive Spring-Based Animations
   ======================================== */

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

/* Fade In */
@keyframes m3-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade In Up - Subtle entrance */
@keyframes m3-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes m3-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale In - For modals and cards */
@keyframes m3-scale-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

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

/* Scale Out */
@keyframes m3-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.92);
    }
}

/* Spring Pop - For success states */
@keyframes m3-spring-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.08);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Gentle Float - For hero elements */
@keyframes m3-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Pulse Glow - For processing states */
@keyframes m3-pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(69, 83, 160, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(69, 83, 160, 0);
    }
}

/* Shimmer - For loading states */
@keyframes m3-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Progress - For progress bars */
@keyframes m3-progress {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* Indeterminate Progress */
@keyframes m3-progress-indeterminate {
    0% {
        transform: translateX(-100%) scaleX(0.25);
    }

    50% {
        transform: translateX(0%) scaleX(0.5);
    }

    100% {
        transform: translateX(100%) scaleX(0.25);
    }
}

/* Rotate - For loading spinners */
@keyframes m3-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Bounce - Subtle attention */
@keyframes m3-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-3px);
    }
}

/* Ripple - For button clicks */
@keyframes m3-ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Slide In Right */
@keyframes m3-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Left */
@keyframes m3-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Shake - For errors */
@keyframes m3-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

/* Check Mark Draw */
@keyframes m3-check-draw {
    0% {
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* ========================================
   ANIMATION UTILITY CLASSES
   ======================================== */

.m3-animate-fade-in {
    animation: m3-fade-in var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate) forwards;
}

.m3-animate-fade-in-up {
    animation: m3-fade-in-up var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate) forwards;
}

.m3-animate-fade-in-down {
    animation: m3-fade-in-down var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate) forwards;
}

.m3-animate-scale-in {
    animation: m3-scale-in var(--m3-duration-normal) var(--m3-ease-spring-soft) forwards;
}

.m3-animate-spring-pop {
    animation: m3-spring-pop var(--m3-duration-slow) var(--m3-ease-spring) forwards;
}

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

.m3-animate-pulse-glow {
    animation: m3-pulse-glow 2s var(--m3-ease-standard) infinite;
}

.m3-animate-shimmer {
    background: linear-gradient(90deg,
            var(--m3-surface-container-low) 0%,
            var(--m3-surface-container-high) 50%,
            var(--m3-surface-container-low) 100%);
    background-size: 200% 100%;
    animation: m3-shimmer 1.5s linear infinite;
}

.m3-animate-rotate {
    animation: m3-rotate 1s linear infinite;
}

.m3-animate-bounce {
    animation: m3-bounce 1s var(--m3-ease-spring) infinite;
}

.m3-animate-slide-in-right {
    animation: m3-slide-in-right var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate) forwards;
}

.m3-animate-slide-in-left {
    animation: m3-slide-in-left var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate) forwards;
}

.m3-animate-shake {
    animation: m3-shake 0.5s var(--m3-ease-standard);
}

/* ========================================
   STAGGERED ANIMATION DELAYS
   ======================================== */

.m3-stagger-1 {
    animation-delay: 50ms;
}

.m3-stagger-2 {
    animation-delay: 100ms;
}

.m3-stagger-3 {
    animation-delay: 150ms;
}

.m3-stagger-4 {
    animation-delay: 200ms;
}

.m3-stagger-5 {
    animation-delay: 250ms;
}

.m3-stagger-6 {
    animation-delay: 300ms;
}

.m3-stagger-7 {
    animation-delay: 350ms;
}

.m3-stagger-8 {
    animation-delay: 400ms;
}

/* ========================================
   TRANSITION UTILITY CLASSES
   ======================================== */

.m3-transition-all {
    transition: all var(--m3-duration-normal) var(--m3-ease-standard);
}

.m3-transition-colors {
    transition:
        color var(--m3-duration-fast) var(--m3-ease-standard),
        background-color var(--m3-duration-fast) var(--m3-ease-standard),
        border-color var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-transition-opacity {
    transition: opacity var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-transition-transform {
    transition: transform var(--m3-duration-normal) var(--m3-ease-spring-soft);
}

.m3-transition-shadow {
    transition: box-shadow var(--m3-duration-normal) var(--m3-ease-standard);
}

/* ========================================
   HOVER/ACTIVE STATE TRANSFORMS
   ======================================== */

.m3-hover-lift {
    transition: transform var(--m3-duration-fast) var(--m3-ease-spring-soft),
        box-shadow var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-hover-lift:hover {
    transform: translateY(-4px);
}

.m3-hover-scale {
    transition: transform var(--m3-duration-fast) var(--m3-ease-spring-soft);
}

.m3-hover-scale:hover {
    transform: scale(1.02);
}

.m3-active-press:active {
    transform: scale(0.98);
    transition: transform var(--m3-duration-instant) var(--m3-ease-standard);
}

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

/* Spinner */
.m3-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--m3-outline-variant);
    border-top-color: var(--m3-primary);
    border-radius: 50%;
    animation: m3-rotate 0.8s linear infinite;
}

.m3-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

/* Linear Progress */
.m3-linear-progress {
    width: 100%;
    height: 4px;
    background: var(--m3-surface-container);
    border-radius: var(--m3-shape-full);
    overflow: hidden;
}

.m3-linear-progress__bar {
    height: 100%;
    background: var(--m3-primary);
    border-radius: var(--m3-shape-full);
    transition: width var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate);
}

.m3-linear-progress--indeterminate .m3-linear-progress__bar {
    width: 100%;
    animation: m3-progress-indeterminate 1.5s var(--m3-ease-standard) infinite;
}

/* Skeleton Loading */
.m3-skeleton {
    background: linear-gradient(90deg,
            var(--m3-surface-container) 0%,
            var(--m3-surface-container-high) 50%,
            var(--m3-surface-container) 100%);
    background-size: 200% 100%;
    animation: m3-shimmer 1.5s linear infinite;
    border-radius: var(--m3-shape-sm);
}

.m3-skeleton--text {
    height: 16px;
    border-radius: var(--m3-shape-xs);
}

.m3-skeleton--circle {
    border-radius: 50%;
}

/* ========================================
   PAGE TRANSITIONS
   ======================================== */

.m3-page-enter {
    opacity: 0;
    transform: translateY(8px);
}

.m3-page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate),
        transform var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate);
}

.m3-page-exit {
    opacity: 1;
}

.m3-page-exit-active {
    opacity: 0;
    transition: opacity var(--m3-duration-fast) var(--m3-ease-exit);
}

/* ========================================
   RIPPLE EFFECT (Button feedback)
   ======================================== */

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

.m3-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1;
    background: currentColor;
    opacity: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}

.m3-ripple:active::after {
    animation: m3-ripple var(--m3-duration-slow) var(--m3-ease-standard);
}

/* ========================================
   VISIBILITY UTILITIES
   ======================================== */

.m3-hide {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--m3-duration-fast) var(--m3-ease-exit),
        visibility 0s linear var(--m3-duration-fast);
}

.m3-show {
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate),
        visibility 0s linear 0s;
}

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

.m3-scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--m3-duration-slow) var(--m3-ease-emphasized-decelerate),
        transform var(--m3-duration-slow) var(--m3-ease-emphasized-decelerate);
}

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

/* ========================================
   REDUCED MOTION OVERRIDES
   Already handled in m3-tokens.css but ensuring
   animation classes also respect the preference
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    .m3-animate-float,
    .m3-animate-bounce,
    .m3-animate-pulse-glow {
        animation: none;
    }

    .m3-animate-shimmer,
    .m3-skeleton {
        animation: none;
        background: var(--m3-surface-container);
    }

    .m3-hover-lift:hover,
    .m3-hover-scale:hover {
        transform: none;
    }

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