/* ============================================================
   VPEsports — Keyframe Animations
   Loaded before main.css via functions.php wp_enqueue_style
   ============================================================ */

/* ─── Sonar rings ────────────────────────────────────────── */
@keyframes sonar-expand {
    0%   { transform: scale(0.4); opacity: 0.6; }
    100% { transform: scale(2.8); opacity: 0; }
}

/* ─── Energy streaks ─────────────────────────────────────── */
@keyframes streak-slide {
    0%   { transform: translateX(-100%) scaleX(0.3); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 0.6; }
    100% { transform: translateX(120vw) scaleX(1); opacity: 0; }
}

/* ─── Hexagon rotation ───────────────────────────────────── */
@keyframes hex-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes hex-spin-reverse {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* ─── Diamond particles ──────────────────────────────────── */
@keyframes particle-float {
    0%   { transform: translateY(0) rotate(45deg) scale(1);        opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.3; }
    100% { transform: translateY(-80vh) rotate(225deg) scale(0.5); opacity: 0; }
}

/* ─── Dot grid drift ─────────────────────────────────────── */
@keyframes dot-drift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(4px, -6px); }
    66%  { transform: translate(-4px, 3px); }
    100% { transform: translate(0, 0); }
}

/* ─── Hero content reveal ────────────────────────────────── */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Agent image carousel ───────────────────────────────── */
@keyframes agent-enter {
    0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes agent-exit {
    0%   { opacity: 1; transform: scale(1);    filter: blur(0px);  }
    100% { opacity: 0; transform: scale(1.05); filter: blur(14px); }
}

/* ─── Glow pulse ─────────────────────────────────────────── */
@keyframes glow-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%       { opacity: 0.6;  transform: scale(1.08); }
}

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

/* ─── Hero bottom bar marquee ────────────────────────────── */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ─── Stat card pop-in ───────────────────────────────────── */
@keyframes stat-pop {
    0%   { transform: scale(0.85); opacity: 0; }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1);    opacity: 1; }
}

/* ─── Border shimmer ─────────────────────────────────────── */
@keyframes border-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ─── Eyebrow dot blink ──────────────────────────────────── */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ─── Scroll-triggered section reveal ───────────────────── */
@keyframes section-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Pulse dot (live badge, section labels) ─────────────── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.85); }
}

/* ─── Background scan sweep ──────────────────────────────── */
@keyframes scan-sweep {
    0%   { top: -2px;    opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 0.6; }
    100% { top: 100vh;   opacity: 0; }
}

/* ─── News item hover shimmer ────────────────────────────── */
@keyframes item-glow {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,70,85,0); }
    50%       { box-shadow: inset 0 0 0 1px rgba(255,70,85,0.3); }
}