/* =============================================
 * HERO WELCOME ANIMATION — Styles
 * Google Doodle-inspired football entrance
 * ============================================= */

/* ── Animation overlay (lives inside .hero) ── */
.hero-anim-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

/* ── Canvas for golden particles ── */
#hero-anim-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ── Player SVG ── */
.anim-player {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 168px;
    z-index: 2;
    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 12px rgba(0, 200, 83, 0.15));
    will-change: transform, opacity;
}

/* Energy ring pulse on the player SVG */
.player-energy-ring {
    animation: energyRingPulse 1.2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes energyRingPulse {
    0%, 100% { opacity: 0; stroke-width: 2; }
    50%      { opacity: 0.12; stroke-width: 5; }
}

/* ── Ball SVG ── */
.anim-ball {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    z-index: 3;
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.3));
    will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════
 *  LETTER-BY-LETTER TITLE REVEAL
 * ═══════════════════════════════════════════════ */

/* Hide title text until JS reveals it (prevents flash) */
#hero-anim-layer ~ .hero-content h1 .green {
    opacity: 0;
    animation: heroTextFallback 0s 7s forwards;
}

/* Fallback: if JS never runs, show text after 7s */
@keyframes heroTextFallback {
    to { opacity: 1; }
}

/* Individual letter spans created by JS */
.hero-letter {
    display: inline-block;
    will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════
 *  LOGO EFFECTS
 * ═══════════════════════════════════════════════ */

/* Breathing animation (post-animation, infinite) */
.hero-logo-breathing {
    animation: heroLogoBreath 4s ease-in-out infinite !important;
    will-change: transform;
}

@keyframes heroLogoBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* Screen flash overlay */
.hero-flash {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 215, 0, 0.25) 0%,
        rgba(255, 215, 0, 0.08) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════
 *  RESPONSIVE
 * ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    .anim-player {
        width: 88px;
        height: 123px;
    }
    .anim-ball {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .anim-player {
        width: 66px;
        height: 92px;
    }
    .anim-ball {
        width: 16px;
        height: 16px;
    }
}