/**
 * EuroSoccer Motion System
 * Choreographed animations and micro-interactions
 *
 * Design Philosophy:
 * - Purposeful motion that guides attention
 * - Staggered reveals for visual hierarchy
 * - Smooth, natural easing curves
 * - Respects prefers-reduced-motion
 */

/* ==============================
   CSS CUSTOM PROPERTIES - Motion
   ============================== */
:root {
    /* Timing Functions - Natural, organic feel */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Durations */
    --duration-instant: 100ms;
    --duration-fast: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
    --duration-dramatic: 1000ms;

    /* Stagger delays for choreography */
    --stagger-1: 0ms;
    --stagger-2: 50ms;
    --stagger-3: 100ms;
    --stagger-4: 150ms;
    --stagger-5: 200ms;
    --stagger-6: 250ms;
    --stagger-7: 300ms;
    --stagger-8: 350ms;
}

/* ==============================
   BASE ANIMATION KEYFRAMES
   ============================== */

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

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Scale In Bounce */
@keyframes scaleInBounce {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    60% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide In Up */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Pop In */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(21, 101, 192, 0);
    }
}

/* Shimmer */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

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

/* Pulse Scale */
@keyframes pulseScale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Ripple */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Number Count Up Effect */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Draw Line */
@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

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

/* Base animated element - initially hidden */
.animate-on-load,
.animate-on-scroll {
    opacity: 0;
}

/* Triggered state */
.animate-on-load.animated,
.animate-on-scroll.animated {
    opacity: 1;
}

/* Fade In */
.anim-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out-quart) forwards;
}

/* Fade In Up */
.anim-fade-in-up {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Fade In Down */
.anim-fade-in-down {
    animation: fadeInDown var(--duration-normal) var(--ease-out-quart) forwards;
}

/* Fade In Left */
.anim-fade-in-left {
    animation: fadeInLeft var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Fade In Right */
.anim-fade-in-right {
    animation: fadeInRight var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Scale In */
.anim-scale-in {
    animation: scaleIn var(--duration-normal) var(--ease-out-back) forwards;
}

/* Scale In Bounce */
.anim-scale-in-bounce {
    animation: scaleInBounce var(--duration-slow) var(--ease-out-quart) forwards;
}

/* Pop In */
.anim-pop-in {
    animation: popIn var(--duration-slow) var(--ease-spring) forwards;
}

/* Slide In Up */
.anim-slide-in-up {
    animation: slideInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

/* ==============================
   STAGGER DELAY CLASSES
   ============================== */
.stagger-1 { animation-delay: var(--stagger-1); }
.stagger-2 { animation-delay: var(--stagger-2); }
.stagger-3 { animation-delay: var(--stagger-3); }
.stagger-4 { animation-delay: var(--stagger-4); }
.stagger-5 { animation-delay: var(--stagger-5); }
.stagger-6 { animation-delay: var(--stagger-6); }
.stagger-7 { animation-delay: var(--stagger-7); }
.stagger-8 { animation-delay: var(--stagger-8); }

/* Extended staggers for larger lists */
.stagger-9 { animation-delay: 400ms; }
.stagger-10 { animation-delay: 450ms; }
.stagger-11 { animation-delay: 500ms; }
.stagger-12 { animation-delay: 550ms; }

/* ==============================
   HOVER MICRO-INTERACTIONS
   ============================== */

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

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Scale Effect */
.hover-scale {
    transition: transform var(--duration-fast) var(--ease-out-back);
}

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

/* Glow Effect */
.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-out-quart);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(21, 101, 192, 0.3);
}

/* Shine Effect */
.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transform: rotate(30deg) translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out-quart);
}

.hover-shine:hover::after {
    transform: rotate(30deg) translateX(100%);
}

/* Icon Bounce */
.hover-icon-bounce i,
.hover-icon-bounce .fa {
    transition: transform var(--duration-fast) var(--ease-out-back);
}

.hover-icon-bounce:hover i,
.hover-icon-bounce:hover .fa {
    transform: scale(1.2);
}

/* Icon Rotate */
.hover-icon-rotate i,
.hover-icon-rotate .fa {
    transition: transform var(--duration-normal) var(--ease-out-quart);
}

.hover-icon-rotate:hover i,
.hover-icon-rotate:hover .fa {
    transform: rotate(15deg);
}

/* Arrow Slide */
.hover-arrow-slide {
    position: relative;
}

.hover-arrow-slide .fa-arrow-right {
    transition: transform var(--duration-fast) var(--ease-out-quart);
}

.hover-arrow-slide:hover .fa-arrow-right {
    transform: translateX(5px);
}

/* ==============================
   BUTTON EFFECTS
   ============================== */

/* Ripple Effect Container */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple .ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    animation: ripple var(--duration-slow) linear;
    pointer-events: none;
}

/* Button Press Effect */
.btn-press {
    transition: transform var(--duration-instant) ease-out;
}

.btn-press:active {
    transform: scale(0.97);
}

/* Button Shine */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left var(--duration-slow) var(--ease-out-quart);
}

.btn-shine:hover::before {
    left: 100%;
}

/* ==============================
   CARD EFFECTS
   ============================== */

/* Card Tilt (3D effect) */
.card-tilt {
    transform-style: preserve-3d;
    transition: transform var(--duration-fast) var(--ease-out-quart);
}

/* Card Border Glow */
.card-border-glow {
    position: relative;
}

.card-border-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary-blue), var(--gold));
    opacity: 0;
    z-index: -1;
    transition: opacity var(--duration-normal) var(--ease-out-quart);
}

.card-border-glow:hover::before {
    opacity: 1;
}

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

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        #2D3748 25%,
        #4A5568 50%,
        #2D3748 75%
    );
    background-size: 200% 100%;
}

/* Pulse Loading */
.loading-pulse {
    animation: pulseScale 1.5s var(--ease-in-out-quart) infinite;
}

/* Spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(21, 101, 192, 0.2);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

/* Page Enter */
.page-enter {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Content Reveal */
.content-reveal {
    clip-path: inset(0 0 100% 0);
    animation: revealUp var(--duration-slower) var(--ease-out-expo) forwards;
}

@keyframes revealUp {
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ==============================
   SPECIAL EFFECTS
   ============================== */

/* Floating Element */
.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Attention Pulse */
.attention-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Success Checkmark */
.success-checkmark {
    animation: scaleInBounce var(--duration-slow) var(--ease-spring) forwards;
}

/* Error Shake */
.error-shake {
    animation: shake var(--duration-slow) ease-in-out;
}

/* Number Counter Animation */
.number-animate {
    animation: countUp var(--duration-slow) var(--ease-out-expo) forwards;
}

/* ==============================
   DASHBOARD SPECIFIC ANIMATIONS
   ============================== */

/* Welcome Banner */
.dashboard-welcome.animated {
    animation: fadeInDown var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Stat Cards Choreography */
.stat-card-hero.animated {
    animation: fadeInLeft var(--duration-slower) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-1);
}

.stat-card-secondary.animated {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-2);
}

.stat-card-tertiary.animated {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-3);
}

.stat-card-alert.animated {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-4);
}

/* Stat Number Count Effect */
.stat-hero-number,
.stat-secondary-content h3,
.stat-tertiary-content h3,
.stat-alert-data h3 {
    animation: countUp var(--duration-slow) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-3);
}

/* Quick Actions Choreography */
.quick-action-featured.animated:nth-child(1) {
    animation: fadeInLeft var(--duration-slow) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-5);
}

.quick-action-featured.animated:nth-child(2) {
    animation: fadeInLeft var(--duration-slow) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-6);
}

.quick-actions-secondary.animated {
    animation: fadeInRight var(--duration-slow) var(--ease-out-expo) forwards;
    animation-delay: var(--stagger-5);
}

/* Panel Reveal */
.panel-modern.animated {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Table Row Stagger */
.table-modern tbody tr.animated {
    animation: fadeIn var(--duration-fast) var(--ease-out-quart) forwards;
}

.table-modern tbody tr.animated:nth-child(1) { animation-delay: 0ms; }
.table-modern tbody tr.animated:nth-child(2) { animation-delay: 30ms; }
.table-modern tbody tr.animated:nth-child(3) { animation-delay: 60ms; }
.table-modern tbody tr.animated:nth-child(4) { animation-delay: 90ms; }
.table-modern tbody tr.animated:nth-child(5) { animation-delay: 120ms; }

/* ==============================
   SIDEBAR ANIMATIONS
   ============================== */

/* Menu Item Hover */
.sidebar-menu-link {
    transition: all var(--duration-fast) var(--ease-out-quart);
}

.sidebar-menu-link:hover {
    transform: translateX(4px);
}

[dir="rtl"] .sidebar-menu-link:hover {
    transform: translateX(-4px);
}

/* Submenu Expand */
.sidebar-submenu {
    transition: max-height var(--duration-normal) var(--ease-out-quart),
                opacity var(--duration-fast) var(--ease-out-quart);
}

/* Active Indicator Animation */
.sidebar-menu-link.active::before {
    animation: scaleIn var(--duration-fast) var(--ease-out-back) forwards;
}

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

/* Modal Backdrop */
.modal-backdrop-animated {
    animation: fadeIn var(--duration-fast) var(--ease-out-quart) forwards;
}

/* Modal Content */
.modal-content-animated {
    animation: scaleInBounce var(--duration-normal) var(--ease-spring) forwards;
}

/* Modal Close */
.modal-closing .modal-content-animated {
    animation: fadeOut var(--duration-fast) var(--ease-out-quart) forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* ==============================
   NOTIFICATION ANIMATIONS
   ============================== */

/* Toast Enter */
.toast-enter {
    animation: slideInUp var(--duration-normal) var(--ease-out-back) forwards;
}

/* Toast Exit */
.toast-exit {
    animation: fadeInRight var(--duration-fast) var(--ease-out-quart) reverse forwards;
}

/* Alert Attention */
.alert-attention {
    animation: shake var(--duration-slow) ease-in-out;
}

/* ==============================
   FORM ANIMATIONS
   ============================== */

/* Input Focus */
.form-control-animated {
    transition: border-color var(--duration-fast) var(--ease-out-quart),
                box-shadow var(--duration-fast) var(--ease-out-quart),
                transform var(--duration-fast) var(--ease-out-quart);
}

.form-control-animated:focus {
    transform: scale(1.01);
}

/* Label Float */
.label-float {
    transition: all var(--duration-fast) var(--ease-out-quart);
}

/* Validation States */
.has-success .form-control {
    animation: none;
}

.has-error .form-control {
    animation: shake var(--duration-slow) ease-in-out;
}

/* ==============================
   CHART ANIMATIONS
   ============================== */

/* Chart Container */
.chart-animated {
    animation: fadeIn var(--duration-slower) var(--ease-out-quart) forwards;
    animation-delay: var(--stagger-6);
}

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

    .animate-on-load,
    .animate-on-scroll {
        opacity: 1;
    }

    .float-animation,
    .attention-pulse,
    .loading-pulse {
        animation: none;
    }
}

/* ==============================
   PERFORMANCE OPTIMIZATIONS
   ============================== */

/* GPU acceleration for animated elements */
.animate-on-load,
.animate-on-scroll,
.hover-lift,
.hover-scale,
.card-tilt,
[class*="anim-"] {
    will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.animated {
    will-change: auto;
}