/* ============================================
   MICRO ANIMATIONS - Tennis Together
   Scroll-triggered reveals, hover enhancements,
   and page load transitions
   ============================================ */

/* ---------- BASE TRANSITION SETUP ---------- */
[data-animate] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

[data-animate].is-visible {
    opacity: 1;
    transform: none !important;
}

/* ---------- ANIMATION VARIANTS ---------- */
[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-down"] {
    transform: translateY(-30px);
}

[data-animate="fade-left"] {
    transform: translateX(-30px);
}

[data-animate="fade-right"] {
    transform: translateX(30px);
}

[data-animate="fade-in"] {
    transform: none;
}

[data-animate="scale-in"] {
    transform: scale(0.92);
}

[data-animate="zoom-in"] {
    transform: scale(0.85);
}

/* ---------- STAGGER DELAYS ---------- */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }

/* ---------- HERO TEXT ANIMATION ---------- */
@keyframes heroSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroBadgePop {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.hero-animate-title {
    animation: heroSlideUp 0.8s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.hero-animate-subtitle {
    animation: heroSlideUp 0.8s ease forwards;
    animation-delay: 0.45s;
    opacity: 0;
}

.hero-animate-badge {
    animation: heroBadgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

.hero-animate-cta {
    animation: heroSlideUp 0.8s ease forwards;
    animation-delay: 0.65s;
    opacity: 0;
}

/* ---------- BUTTON HOVER ENHANCEMENTS ---------- */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.btn-primary:hover::after {
    opacity: 1;
}

/* ---------- NAV LINK UNDERLINE GROW ---------- */
.nav-links a::after,
.sidebar-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
    left: 0;
}

/* ---------- CARD HOVER GLOW ---------- */
.event-card,
.program-card,
.product-card,
.clinic-card,
.lesson-card,
.mission-card,
.apparel-card,
.affiliate-card,
.update-card,
.league-level-card {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

/* ---------- IMAGE REVEAL ---------- */
[data-animate="img-reveal"] {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.8s ease, clip-path 0.8s ease;
    transform: none;
}

[data-animate="img-reveal"].is-visible {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
}

/* ---------- STAT COUNTER PULSE ---------- */
@keyframes statPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.stat-pulse {
    animation: statPulse 0.4s ease;
}

/* ---------- ANNOUNCEMENT SLIDE DOWN ---------- */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.announce-animate {
    animation: slideDown 0.5s ease forwards;
}

/* ---------- FILTER TAB INK SPREAD ---------- */
.filter-tab {
    position: relative;
    overflow: hidden;
}

.filter-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(45, 90, 74, 0.08);
    border-radius: inherit;
    transform: scale(0);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.filter-tab:hover::before {
    transform: scale(1);
}

/* ---------- FORM INPUT FOCUS GLOW ---------- */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    box-shadow: 0 0 0 3px rgba(45, 90, 74, 0.12), 0 2px 8px rgba(45, 90, 74, 0.08);
}

/* ---------- FAQ EXPAND ANIMATION ---------- */
.faq-item {
    transition: background-color 0.3s ease;
}

.faq-item:hover {
    background-color: rgba(45, 90, 74, 0.03);
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2d5a4a, #c9a87c);
    z-index: 9999;
    transition: width 0.1s linear;
    width: 0%;
}

/* ---------- SMOOTH PAGE LOAD ---------- */
@keyframes pageLoad {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    animation: pageLoad 0.4s ease;
}

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

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}