/* ============================================
   JMS RESEARCH CENTER - ANIMATIONS
   Keyframes, Scroll Triggers, Transitions
   ============================================ */

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

@keyframes jms-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jms-fade-right {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes jms-fade-left {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes jms-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jms-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jms-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes jms-float-reverse {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(15px);
    }
}

@keyframes jms-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.85;
    }
}

@keyframes jms-pulse-soft {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(108, 99, 255, 0);
    }
}

@keyframes jms-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jms-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jms-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes jms-glow {
    from {
        box-shadow: 0 4px 14px rgba(108, 99, 255, 0.25);
    }
    to {
        box-shadow: 0 8px 30px rgba(108, 99, 255, 0.45);
    }
}

@keyframes jms-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes jms-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes jms-counter-slide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jms-check {
    from {
        stroke-dashoffset: 56;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes jms-confetti {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) rotate(720deg);
    }
}

@keyframes jms-bounce {
    0%, 20%, 53%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -20px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes jms-shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* === SCROLL-TRIGGERED ANIMATION CLASSES === */

.jms-animate {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.jms-animate--fade-up {
    transform: translateY(30px);
}

.jms-animate--fade-right {
    transform: translateX(-30px);
}

.jms-animate--fade-left {
    transform: translateX(30px);
}

.jms-animate--scale {
    transform: scale(0.9);
}

.jms-animate--visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for grid/list items */
.jms-animate--delay-1 { transition-delay: 0.1s; }
.jms-animate--delay-2 { transition-delay: 0.2s; }
.jms-animate--delay-3 { transition-delay: 0.3s; }
.jms-animate--delay-4 { transition-delay: 0.4s; }
.jms-animate--delay-5 { transition-delay: 0.5s; }
.jms-animate--delay-6 { transition-delay: 0.6s; }

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

.jms-hover-lift {
    transition: transform var(--jms-transition-base), box-shadow var(--jms-transition-base);
}

.jms-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.jms-hover-glow:hover {
    box-shadow: 0 0 30px rgba(108, 99, 255, 0.2);
}

.jms-hover-scale {
    transition: transform var(--jms-transition-fast);
}

.jms-hover-scale:hover {
    transform: scale(1.03);
}

/* === FLOATING / CONTINUOUS ANIMATIONS === */

.jms-float {
    animation: jms-float 6s ease-in-out infinite;
}

.jms-float--slow {
    animation: jms-float 8s ease-in-out infinite;
}

.jms-float--reverse {
    animation: jms-float-reverse 7s ease-in-out infinite;
}

.jms-pulse-ring {
    animation: jms-pulse-soft 2s ease-in-out infinite;
}

.jms-gradient-animate {
    background-size: 200% 200%;
    animation: jms-gradient-shift 4s ease infinite;
}

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

.jms-page-enter {
    animation: jms-fade-up 0.5s ease-out;
}

/* === COUNTER ANIMATION === */

.jms-counter--animated {
    animation: jms-counter-slide 0.6s ease-out;
}

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

@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;
    }

    .jms-animate {
        opacity: 1;
        transform: none;
    }

    .jms-float,
    .jms-float--slow,
    .jms-float--reverse {
        animation: none;
    }
}