/* ============================================================
   GoalPeek Interactions — Microinteractions & Animations
   ============================================================ */

/* ── Animation tokens ──────────────────────────────────── */
:root {
    --anim-duration-instant: 80ms;
    --anim-duration-fast:    150ms;
    --anim-duration-normal:  300ms;
    --anim-duration-slow:    600ms;
    --anim-ease-spring:      cubic-bezier(.34, 1.56, .64, 1);
    --anim-ease-out:         cubic-bezier(.25, .1, .25, 1);
}

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

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes slideInDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

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

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

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

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    transition: transform var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast),
                background-color var(--ds-transition-fast),
                border-color var(--ds-transition-fast);
    will-change: transform;
}
.btn:hover:not(:disabled) {
    transform:  translateY(-1px);
    box-shadow: var(--ds-shadow-md);
}
.btn:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: var(--ds-shadow-sm);
}

/* ── Cards ───────────────────────────────────────────────── */
.ds-card {
    transition: box-shadow var(--ds-transition-normal),
                transform  var(--ds-transition-normal);
    will-change: transform;
}
.ds-card:hover {
    box-shadow: var(--ds-shadow-lg);
}
.ds-card--elevated:hover {
    transform: translateY(-2px);
}

/* fadeInUp for stat-cards and ds-cards — staggered */
.ds-card,
.ds-stat-card {
    animation: fadeInUp var(--ds-transition-slow) both;
}
.ds-card:nth-child(1), .ds-stat-card:nth-child(1) { animation-delay: 0ms;   }
.ds-card:nth-child(2), .ds-stat-card:nth-child(2) { animation-delay: 60ms;  }
.ds-card:nth-child(3), .ds-stat-card:nth-child(3) { animation-delay: 120ms; }
.ds-card:nth-child(4), .ds-stat-card:nth-child(4) { animation-delay: 180ms; }

/* ── Form controls ───────────────────────────────────────── */
.form-control,
.form-select {
    transition: border-color var(--ds-transition-fast),
                box-shadow   var(--ds-transition-fast);
}
.form-control:focus,
.form-select:focus {
    outline:      2px solid var(--ds-color-primary);
    outline-offset: 2px;
    border-color: var(--ds-color-primary);
    box-shadow:   0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ── Alerts with slide-in animation ─────────────────────── */
.ds-alert-animated {
    animation: slideInDown var(--ds-transition-normal) both;
}

/* ── Skeleton loader ─────────────────────────────────────── */
.ds-skeleton {
    background: linear-gradient(
        90deg,
        var(--ds-color-surface-secondary) 25%,
        var(--ds-color-border) 50%,
        var(--ds-color-surface-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--ds-radius-md);
}
.ds-skeleton-line {
    height: 0.875rem;
    margin-bottom: var(--ds-space-2);
}
.ds-skeleton-line:last-child { width: 65%; }
.ds-skeleton-circle {
    border-radius: var(--ds-radius-full);
}

/* ── Notification badge pulse ────────────────────────────── */
.badge.ds-pulse {
    animation: pulseBadge 2s infinite;
    will-change: transform;
}

/* ── Favourite star ──────────────────────────────────────── */
.ds-fav-star {
    transition: color var(--ds-transition-fast), transform var(--ds-transition-fast);
}
.ds-fav-star:hover {
    transform: scale(1.2);
    color: var(--ds-color-gold) !important;
}

/* ── Nav links ───────────────────────────────────────────── */
.nav-link {
    transition: color var(--ds-transition-fast), background var(--ds-transition-fast);
}

/* ── Table rows ──────────────────────────────────────────── */
.table-hover tbody tr {
    transition: background-color var(--ds-transition-fast);
}

/* ── Dropdown items ──────────────────────────────────────── */
.dropdown-item {
    transition: background-color var(--ds-transition-fast);
}

/* ── Live badge pulse ─────────────────────────────────────  */
.badge.pulse {
    animation: pulseBadge 1.5s ease-in-out infinite;
}

/* ── live-match-controller animations ──────────────────────── */
.live-anim-ticker {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem;
    font-size: .68rem;
    font-weight: 700;
    color: #dc2626;
    background: linear-gradient(90deg, #fee2e2, #fecaca, #fee2e2);
    background-size: 200% 100%;
    animation: liveTickerScroll 3s linear infinite;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    white-space: nowrap;
}
[data-bs-theme="dark"] .live-anim-ticker {
    color: #fca5a5;
    background: linear-gradient(90deg, #450a0a, #7f1d1d, #450a0a);
    background-size: 200% 100%;
}
@keyframes liveTickerScroll {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.live-anim-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: liveAnimDot 1.2s ease-in-out infinite;
}
@keyframes liveAnimDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.7); }
}

.live-anim-glow {
    animation: liveAnimGlow 2.5s ease-in-out infinite;
}
@keyframes liveAnimGlow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(239,68,68,.12);
        border-color: #fca5a5 !important;
    }
    50% {
        box-shadow: 0 4px 24px rgba(239,68,68,.28);
        border-color: #ef4444 !important;
    }
}
[data-bs-theme="dark"] .live-anim-glow {
    animation: liveAnimGlowDark 2.5s ease-in-out infinite;
}
@keyframes liveAnimGlowDark {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(239,68,68,.15);
        border-color: #7f1d1d !important;
    }
    50% {
        box-shadow: 0 4px 28px rgba(239,68,68,.35);
        border-color: #ef4444 !important;
    }
}

.live-anim-score-flash {
    animation: liveScoreFlash .6s var(--anim-ease-out, ease) forwards;
}
@keyframes liveScoreFlash {
    0%   { background: rgba(234,179,8,.8); color: #000 !important; transform: scale(1.25); }
    40%  { background: rgba(234,179,8,.4); transform: scale(1.1); }
    100% { background: transparent; transform: scale(1); }
}

/* ── prediction-controller animations ──────────────────── */
.pred-anim-save {
    animation: predSavePulse var(--anim-duration-slow, 600ms) ease-out;
}
@keyframes predSavePulse {
    0%   { box-shadow: 0 0 0 0    rgba(34,197,94,.5); border-color: #22c55e !important; }
    50%  { box-shadow: 0 0 0 12px rgba(34,197,94,.1); }
    100% { box-shadow: 0 0 0 0    rgba(34,197,94,0); }
}

@keyframes predConfetti {
    0%   { transform: translate(0, 0) rotate(0deg);                            opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot));      opacity: 0; }
}

/* ── score input focus scale ── */
.score-zone .score-input:focus {
    transform: scale(1.1);
    transition: transform var(--anim-duration-fast, 150ms) var(--anim-ease-spring, ease),
                border-color var(--anim-duration-fast, 150ms) ease,
                box-shadow var(--anim-duration-fast, 150ms) ease;
}