/* ═══════════════════════════════════════════════════════════════════════════
   SSPL — ANIMATION LIBRARY
   All keyframe animations and motion utilities
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Entry Animations ────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes zoomInBounce {
    0%   { opacity: 0; transform: scale(0.7); }
    70%  { opacity: 1; transform: scale(1.06); }
    100% { transform: scale(1); }
}
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes slideInUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Attention Animations ────────────────────────────────────────────────── */
@keyframes pulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    10%,30%,50%,70%,90% { transform: translateX(-4px); }
    20%,40%,60%,80% { transform: translateX(4px); }
}
@keyframes bounce {
    0%,100% { transform: translateY(0); animation-timing-function: ease-in; }
    50%      { transform: translateY(-12px); animation-timing-function: ease-out; }
}
@keyframes heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.12); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.12); }
    70%  { transform: scale(1); }
}
@keyframes wobble {
    0%,100% { transform: rotate(0deg); }
    15%     { transform: rotate(-6deg); }
    30%     { transform: rotate(5deg); }
    45%     { transform: rotate(-4deg); }
    60%     { transform: rotate(3deg); }
    75%     { transform: rotate(-2deg); }
}

/* ── Glow / Light Effects ────────────────────────────────────────────────── */
@keyframes glow {
    0%,100% { box-shadow: 0 0 20px rgba(107,63,160,0.3); }
    50%      { box-shadow: 0 0 50px rgba(107,63,160,0.7), 0 0 100px rgba(233,30,140,0.3); }
}
@keyframes goldGlow {
    0%,100% { box-shadow: 0 0 20px rgba(255,215,0,0.3); }
    50%      { box-shadow: 0 0 60px rgba(255,215,0,0.8), 0 0 120px rgba(255,140,0,0.4); }
}
@keyframes greenGlow {
    0%,100% { box-shadow: 0 0 20px rgba(0,245,160,0.3); }
    50%      { box-shadow: 0 0 50px rgba(0,245,160,0.7); }
}
@keyframes textGlow {
    0%,100% { text-shadow: 0 0 20px rgba(107,63,160,0.5); }
    50%      { text-shadow: 0 0 50px rgba(107,63,160,0.9), 0 0 80px rgba(233,30,140,0.5); }
}
@keyframes goldTextGlow {
    0%,100% { text-shadow: 0 0 20px rgba(255,215,0,0.5); }
    50%      { text-shadow: 0 0 60px rgba(255,215,0,1), 0 0 100px rgba(255,140,0,0.6); }
}

/* ── Loaders ─────────────────────────────────────────────────────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes spinReverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}
@keyframes dash {
    0%   { stroke-dashoffset: 280; }
    50%  { stroke-dashoffset: 75; }
    100% { stroke-dashoffset: 280; stroke-dasharray: 280; }
}

/* ── LED Display Specific ────────────────────────────────────────────────── */
@keyframes playerEnter {
    0%   { opacity: 0; transform: scale(0.7) translateY(60px); filter: blur(20px); }
    60%  { filter: blur(0); }
    80%  { transform: scale(1.04) translateY(-8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes soldBanner {
    0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); }
    50%  { transform: scale(1.1) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes hammerSlam {
    0%   { transform: rotate(-60deg) translateY(-40px); opacity: 0; }
    60%  { transform: rotate(15deg) translateY(5px); }
    80%  { transform: rotate(-5deg) translateY(-2px); }
    100% { transform: rotate(0deg) translateY(0); opacity: 1; }
}

/* ── Neon Border Animation ───────────────────────────────────────────────── */
@keyframes neonBorder {
    0%   { border-color: rgba(107,63,160,0.4); box-shadow: 0 0 10px rgba(107,63,160,0.3); }
    50%  { border-color: rgba(233,30,140,0.7); box-shadow: 0 0 30px rgba(233,30,140,0.5), inset 0 0 20px rgba(233,30,140,0.1); }
    100% { border-color: rgba(107,63,160,0.4); box-shadow: 0 0 10px rgba(107,63,160,0.3); }
}
@keyframes neonBorderGold {
    0%   { border-color: rgba(255,215,0,0.3); box-shadow: 0 0 10px rgba(255,215,0,0.2); }
    50%  { border-color: rgba(255,215,0,0.9); box-shadow: 0 0 40px rgba(255,215,0,0.6), 0 0 80px rgba(255,140,0,0.3); }
    100% { border-color: rgba(255,215,0,0.3); box-shadow: 0 0 10px rgba(255,215,0,0.2); }
}

/* ── Particle / Float ────────────────────────────────────────────────────── */
@keyframes float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes floatRotate {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-15px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* ── Confetti ────────────────────────────────────────────────────────────── */
@keyframes confettiFall {
    0%   { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes confettiSway {
    0%,100% { margin-left: 0; }
    50%      { margin-left: 80px; }
}

/* ── Scan Line (broadcast overlay) ──────────────────────────────────────── */
@keyframes scanLine {
    0%   { top: -5%; }
    100% { top: 105%; }
}

/* ── Ticker (horizontal scroll) ─────────────────────────────────────────── */
@keyframes tickerScroll {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

/* ── Bid Flash ───────────────────────────────────────────────────────────── */
@keyframes bidFlash {
    0%   { background: rgba(0,245,160,0.4); }
    100% { background: transparent; }
}

/* ── Counter Roll ────────────────────────────────────────────────────────── */
@keyframes counterRoll {
    0%   { transform: translateY(0); }
    10%  { transform: translateY(-10px); opacity: 0; }
    11%  { transform: translateY(10px); opacity: 0; }
    20%  { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ── Utility Classes ─────────────────────────────────────────────────────── */
.animate-fadeIn         { animation: fadeIn 0.4s ease both; }
.animate-fadeInUp       { animation: fadeInUp 0.5s var(--ease-out, ease) both; }
.animate-fadeInDown     { animation: fadeInDown 0.5s ease both; }
.animate-fadeInLeft     { animation: fadeInLeft 0.5s ease both; }
.animate-fadeInRight    { animation: fadeInRight 0.5s ease both; }
.animate-zoomIn         { animation: zoomIn 0.4s ease both; }
.animate-zoomInBounce   { animation: zoomInBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-pulse          { animation: pulse 2s ease-in-out infinite; }
.animate-bounce         { animation: bounce 1s ease-in-out infinite; }
.animate-spin           { animation: spin 1s linear infinite; }
.animate-float          { animation: float 3s ease-in-out infinite; }
.animate-glow           { animation: glow 3s ease-in-out infinite; }
.animate-goldGlow       { animation: goldGlow 2s ease-in-out infinite; }
.animate-greenGlow      { animation: greenGlow 2s ease-in-out infinite; }
.animate-textGlow       { animation: textGlow 3s ease-in-out infinite; }
.animate-goldTextGlow   { animation: goldTextGlow 2s ease-in-out infinite; }
.animate-neonBorder     { animation: neonBorder 3s ease-in-out infinite; }
.animate-neonBorderGold { animation: neonBorderGold 2s ease-in-out infinite; }

/* Stagger helpers */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }

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