/* ==========================================================================
   Animations & Transitions
   ========================================================================== */

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

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

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

/* ---------- Slide In Left ---------- */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------- Slide In Right ---------- */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------- Ornament Pulse ---------- */
@keyframes ornamentPulse {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.1; }
}

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

/* ---------- Reveal classes (triggered by JS) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--left.reveal--visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal--right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--right.reveal--visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal--scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--scale.reveal--visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered delays */
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }

/* ---------- Hero Animations ---------- */
.hero__content {
    animation: fadeInUp 1s ease 0.3s backwards;
}

.hero__ornament-left {
    animation: ornamentPulse 4s ease-in-out infinite;
}

.hero__ornament-right {
    animation: ornamentPulse 4s ease-in-out infinite 2s;
}

/* ---------- Counter Animation ---------- */
.stat-item__number {
    transition: all 0.3s ease;
}

/* ---------- Smooth hover effects ---------- */
.sport-card,
.event-card,
.news-card,
.value-card,
.gallery-item,
.ticker-card,
.contact-info__item {
    will-change: transform;
}

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

    .reveal {
        opacity: 1;
        transform: none;
    }

    .reveal--left,
    .reveal--right,
    .reveal--scale {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ── 60fps GPU optimisations ── */

/* Smooth native scrolling */
html { scroll-behavior: smooth; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Ticker: always running — own compositing layer */
.ticker-track { will-change: transform; }
.sports-ticker-section { contain: layout; }

/* Header: promote to own layer so page scroll doesn't repaint it */
.header { transform: translateZ(0); backface-visibility: hidden; }

/* Hero: opacity/filter animation — GPU composited */
.hero-photo, .hero-panel { backface-visibility: hidden; }

/* Cards: create layer only on hover, not always (saves GPU memory) */
.sport-card:hover,
.ticker-card:hover,
.event-card:hover,
.news-card:hover,
.gallery-item:hover,
.livestream-mini-card:hover { backface-visibility: hidden; }

/* Images: crisp scaling */
img { image-rendering: auto; }

/* Smooth font rendering on colored backgrounds */
.header, .footer, .hero-panel { -webkit-font-smoothing: subpixel-antialiased; }

/* Prevent scroll jank on mobile */
.ticker-wrap, .gallery-grid, .events-grid { -webkit-overflow-scrolling: touch; }