/* ===================================
   Fanli OEM Partnership Homepage
   Animations CSS - Motion & Transitions
   =================================== */

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

/* Fade In Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale Animations */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleInBounce {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Rotation Animations */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Gradient Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Glow Effect */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px var(--fanli-primary);
    }
    50% {
        box-shadow: 0 0 20px var(--fanli-primary), 0 0 30px var(--fanli-primary);
    }
    100% {
        box-shadow: 0 0 5px var(--fanli-primary);
    }
}

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

/* Base Animation Classes */
.animate-fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fadeInDown {
    animation: fadeInDown 0.8s ease-out forwards;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fadeInRight {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
}

.animate-scaleInBounce {
    animation: scaleInBounce 0.8s ease-out forwards;
}

.animate-slideInLeft {
    animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slideInRight {
    animation: slideInRight 0.6s ease-out forwards;
}

.animate-slideInUp {
    animation: slideInUp 0.6s ease-out forwards;
}

.animate-slideInDown {
    animation: slideInDown 0.6s ease-out forwards;
}

.animate-rotateIn {
    animation: rotateIn 0.8s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

.animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

/* ===== NAVIGATION ANIMATIONS ===== */

/* Mobile Menu Slide Animation */
.fanli-nav__mobile {
    transition: transform var(--fanli-duration-300) var(--fanli-ease-out);
}

.fanli-nav__mobile.slide-in {
    animation: slideInLeft 0.3s ease-out forwards;
}

.fanli-nav__mobile.slide-out {
    animation: slideInRight 0.3s ease-out forwards reverse;
}

/* Navigation Link Hover Effects */
.fanli-nav__link {
    position: relative;
    overflow: hidden;
}

.fanli-nav__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
    transition: left var(--fanli-duration-500) ease;
}

.fanli-nav__link:hover::before {
    left: 100%;
}

/* CTA Button Animations */
.fanli-nav__link--cta {
    position: relative;
    background-size: 200% 100%;
    background-image: linear-gradient(135deg, var(--fanli-primary) 0%, var(--fanli-secondary) 50%, var(--fanli-primary) 100%);
    animation: gradientShift 3s ease infinite;
}

.fanli-nav__link--cta:hover {
    animation-duration: 1s;
    transform: translateY(-2px);
}

/* Mobile Menu Item Stagger Animation */
.fanli-nav__mobile-link {
    opacity: 0;
    transform: translateX(-20px);
    transition: all var(--fanli-duration-200) ease-out;
}

.fanli-nav__mobile.active .fanli-nav__mobile-link {
    opacity: 1;
    transform: translateX(0);
}

.fanli-nav__mobile.active .fanli-nav__mobile-link:nth-child(1) { transition-delay: 0.1s; }
.fanli-nav__mobile.active .fanli-nav__mobile-link:nth-child(2) { transition-delay: 0.2s; }
.fanli-nav__mobile.active .fanli-nav__mobile-link:nth-child(3) { transition-delay: 0.3s; }
.fanli-nav__mobile.active .fanli-nav__mobile-link:nth-child(4) { transition-delay: 0.4s; }
.fanli-nav__mobile.active .fanli-nav__mobile-link:nth-child(5) { transition-delay: 0.5s; }

/* ===== LOADING ANIMATIONS ===== */

/* Page Loading Spinner */
.fanli-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--fanli-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--fanli-z-toast);
    opacity: 1;
    transition: opacity var(--fanli-duration-500) ease-out;
}

.fanli-loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

.fanli-loading__spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--fanli-gray-200);
    border-top: 4px solid var(--fanli-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--fanli-space-4);
}

.fanli-loading__text {
    font-size: var(--fanli-font-size-sm);
    color: var(--fanli-text-secondary);
    font-weight: var(--fanli-font-weight-medium);
}

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

/* Elements hidden by default for scroll animations */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--fanli-duration-700) ease-out;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for multiple elements */
[data-animate][data-delay="100"] { transition-delay: 0.1s; }
[data-animate][data-delay="200"] { transition-delay: 0.2s; }
[data-animate][data-delay="300"] { transition-delay: 0.3s; }
[data-animate][data-delay="400"] { transition-delay: 0.4s; }
[data-animate][data-delay="500"] { transition-delay: 0.5s; }
[data-animate][data-delay="600"] { transition-delay: 0.6s; }

/* ===== BUTTON ANIMATIONS ===== */

/* Button Hover Effects */
.fanli-btn {
    position: relative;
    overflow: hidden;
    transition: all var(--fanli-duration-200) ease;
}

.fanli-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width var(--fanli-duration-300) ease, height var(--fanli-duration-300) ease;
}

.fanli-btn:hover::before {
    width: 300px;
    height: 300px;
}

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

/* ===== CARD ANIMATIONS ===== */

/* Card Hover Effects */
.fanli-card {
    transition: all var(--fanli-duration-300) ease;
}

.fanli-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--fanli-shadow-xl);
}

/* ===== MODAL ANIMATIONS ===== */

/* Modal Entrance/Exit */
.fanli-modal {
    opacity: 0;
    visibility: hidden;
    transition: all var(--fanli-duration-300) ease;
}

.fanli-modal.active {
    opacity: 1;
    visibility: visible;
}

.fanli-modal__container {
    transform: scale(0.8) translateY(50px);
    transition: transform var(--fanli-duration-300) ease;
}

.fanli-modal.active .fanli-modal__container {
    transform: scale(1) translateY(0);
}

/* ===== RESPONSIVE ANIMATIONS ===== */

/* Disable animations on mobile for performance */
@media (max-width: 768px) {
    .animate-fadeInUp,
    .animate-fadeInDown,
    .animate-fadeInLeft,
    .animate-fadeInRight,
    .animate-scaleIn,
    .animate-rotateIn {
        animation: fadeIn 0.3s ease-out forwards;
    }
}

/* Respect user's motion preferences */
@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;
    }
    
    .fanli-nav__link::before {
        display: none;
    }
    
    .fanli-nav__link--cta {
        animation: none;
    }
    
    [data-animate] {
        opacity: 1;
        transform: none;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .fanli-nav__link::before {
        background: currentColor;
        opacity: 0.1;
    }
    
    .fanli-loading__spinner {
        border-color: currentColor;
        border-top-color: transparent;
    }
}

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

/* Animation States */
.animate-none { animation: none !important; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: pulse 1s infinite; }

/* Transition Utilities */
.transition-none { transition: none !important; }
.transition-all { transition: all var(--fanli-duration-150) ease; }
.transition-colors { transition: color var(--fanli-duration-150) ease, background-color var(--fanli-duration-150) ease, border-color var(--fanli-duration-150) ease; }
.transition-opacity { transition: opacity var(--fanli-duration-150) ease; }
.transition-shadow { transition: box-shadow var(--fanli-duration-150) ease; }
.transition-transform { transition: transform var(--fanli-duration-150) ease; }

/* Duration Utilities */
.duration-75 { transition-duration: var(--fanli-duration-75); }
.duration-100 { transition-duration: var(--fanli-duration-100); }
.duration-150 { transition-duration: var(--fanli-duration-150); }
.duration-200 { transition-duration: var(--fanli-duration-200); }
.duration-300 { transition-duration: var(--fanli-duration-300); }
.duration-500 { transition-duration: var(--fanli-duration-500); }
.duration-700 { transition-duration: var(--fanli-duration-700); }
.duration-1000 { transition-duration: var(--fanli-duration-1000); }

/* Delay Utilities */
.delay-75 { transition-delay: 75ms; }
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }
.delay-700 { transition-delay: 700ms; }
.delay-1000 { transition-delay: 1000ms; }