/* ==========================================================================
   Trecker Treck — Animations
   Keyframes, animation classes, and reduced-motion preferences
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/* --- Fade In (opacity 0 -> 1) --- */
@keyframes TreckerFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --- Fade Out (opacity 1 -> 0) --- */
@keyframes TreckerFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* --- Slide Up (translateY(20px) -> 0) --- */
@keyframes TreckerSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Slide Down (translateY(-20px) -> 0) --- */
@keyframes TreckerSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Slide In Right (translateX(100%) -> 0) --- */
@keyframes TreckerSlideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Slide Out Right (translateX(0) -> 100%) --- */
@keyframes TreckerSlideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* --- Scale In (scale(0.95) -> 1) --- */
@keyframes TreckerScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Pulse (opacity cycling for skeleton loading) --- */
@keyframes TreckerPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* --- Spin (360deg rotation) --- */
@keyframes TreckerSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- Bounce (subtle bounce) --- */
@keyframes TreckerBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-6px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-3px);
    }
}

/* --- Full Pull Celebration (golden glow pulsing + scale) --- */
@keyframes TreckerFullPullCelebration {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
        transform: scale(1);
    }
    25% {
        box-shadow: 0 0 24px rgba(255, 215, 0, 0.6);
        transform: scale(1.03);
    }
    50% {
        box-shadow: 0 0 36px rgba(255, 215, 0, 0.5);
        transform: scale(1.01);
    }
    75% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
        transform: scale(1.04);
    }
}

/* --- Shimmer (gradient slide for loading) --- */
@keyframes TreckerShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* --- Countdown Pulse (scale pulse for countdown) --- */
@keyframes TreckerCountdownPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* --- Sponsor Scroll (horizontal infinite scroll for sponsor logos) --- */
@keyframes TreckerSponsorScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* --- Slide In Left --- */
@keyframes TreckerSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Slide Out Left --- */
@keyframes TreckerSlideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* --- Scale Out --- */
@keyframes TreckerScaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* --- Shake (error/attention) --- */
@keyframes TreckerShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-4px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(4px);
    }
}

/* --- Ping (notification dot) --- */
@keyframes TreckerPing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ==========================================================================
   ANIMATION CLASSES
   ========================================================================== */

.TreckerAnimateFadeIn {
    animation: TreckerFadeIn var(--trecker-transition-normal) forwards;
}

.TreckerAnimateFadeOut {
    animation: TreckerFadeOut var(--trecker-transition-normal) forwards;
}

.TreckerAnimateSlideUp {
    animation: TreckerSlideUp var(--trecker-transition-normal) forwards;
}

.TreckerAnimateSlideDown {
    animation: TreckerSlideDown var(--trecker-transition-normal) forwards;
}

.TreckerAnimateSlideInRight {
    animation: TreckerSlideInRight var(--trecker-transition-normal) forwards;
}

.TreckerAnimateSlideOutRight {
    animation: TreckerSlideOutRight var(--trecker-transition-normal) forwards;
}

.TreckerAnimateSlideInLeft {
    animation: TreckerSlideInLeft var(--trecker-transition-normal) forwards;
}

.TreckerAnimateSlideOutLeft {
    animation: TreckerSlideOutLeft var(--trecker-transition-normal) forwards;
}

.TreckerAnimateScaleIn {
    animation: TreckerScaleIn var(--trecker-transition-normal) forwards;
}

.TreckerAnimateScaleOut {
    animation: TreckerScaleOut var(--trecker-transition-normal) forwards;
}

.TreckerAnimatePulse {
    animation: TreckerPulse 1.5s ease-in-out infinite;
}

.TreckerAnimateSpin {
    animation: TreckerSpin 0.8s linear infinite;
}

.TreckerAnimateBounce {
    animation: TreckerBounce 1s ease infinite;
}

.TreckerAnimateFullPullCelebration {
    animation: TreckerFullPullCelebration 2s ease-in-out infinite;
}

.TreckerAnimateShimmer {
    background: linear-gradient(
        90deg,
        var(--trecker-bg-secondary) 25%,
        var(--trecker-bg-tertiary) 50%,
        var(--trecker-bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: TreckerShimmer 1.5s ease-in-out infinite;
}

.TreckerAnimateCountdownPulse {
    animation: TreckerCountdownPulse 1s ease-in-out infinite;
}

.TreckerAnimateSponsorScroll {
    animation: TreckerSponsorScroll 30s linear infinite;
}

.TreckerAnimateShake {
    animation: TreckerShake 0.5s ease-in-out;
}

.TreckerAnimatePing {
    animation: TreckerPing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ==========================================================================
   DURATION MODIFIERS
   ========================================================================== */

.TreckerAnimateFast {
    animation-duration: 150ms !important;
}

.TreckerAnimateSlow {
    animation-duration: 400ms !important;
}

.TreckerAnimateVerySlow {
    animation-duration: 800ms !important;
}

/* ==========================================================================
   DELAY MODIFIERS
   ========================================================================== */

.TreckerAnimateDelay100 {
    animation-delay: 100ms;
}

.TreckerAnimateDelay200 {
    animation-delay: 200ms;
}

.TreckerAnimateDelay300 {
    animation-delay: 300ms;
}

.TreckerAnimateDelay500 {
    animation-delay: 500ms;
}

.TreckerAnimateDelay1000 {
    animation-delay: 1000ms;
}

/* Pre-animation state for delayed animations (start invisible) */
.TreckerAnimateDelay100,
.TreckerAnimateDelay200,
.TreckerAnimateDelay300,
.TreckerAnimateDelay500,
.TreckerAnimateDelay1000 {
    animation-fill-mode: both;
}

/* ==========================================================================
   STAGGER UTILITIES (for lists)
   ========================================================================== */

.TreckerStagger > *:nth-child(1) { animation-delay: 0ms; }
.TreckerStagger > *:nth-child(2) { animation-delay: 50ms; }
.TreckerStagger > *:nth-child(3) { animation-delay: 100ms; }
.TreckerStagger > *:nth-child(4) { animation-delay: 150ms; }
.TreckerStagger > *:nth-child(5) { animation-delay: 200ms; }
.TreckerStagger > *:nth-child(6) { animation-delay: 250ms; }
.TreckerStagger > *:nth-child(7) { animation-delay: 300ms; }
.TreckerStagger > *:nth-child(8) { animation-delay: 350ms; }
.TreckerStagger > *:nth-child(9) { animation-delay: 400ms; }
.TreckerStagger > *:nth-child(10) { animation-delay: 450ms; }

.TreckerStagger > * {
    animation-fill-mode: both;
}

/* ==========================================================================
   TRANSITION UTILITIES
   ========================================================================== */

.TreckerTransitionAll {
    transition: all var(--trecker-transition-normal);
}

.TreckerTransitionFast {
    transition: all var(--trecker-transition-fast);
}

.TreckerTransitionSlow {
    transition: all var(--trecker-transition-slow);
}

.TreckerTransitionSpring {
    transition: all var(--trecker-transition-spring);
}

.TreckerTransitionNone {
    transition: none !important;
}

/* ==========================================================================
   HOVER EFFECTS
   ========================================================================== */

.TreckerHoverLift {
    transition: transform var(--trecker-transition-normal),
                box-shadow var(--trecker-transition-normal);
}

.TreckerHoverLift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.TreckerHoverScale {
    transition: transform var(--trecker-transition-normal);
}

.TreckerHoverScale:hover {
    transform: scale(1.03);
}

.TreckerHoverGlow {
    transition: box-shadow var(--trecker-transition-normal);
}

.TreckerHoverGlow:hover {
    box-shadow: 0 0 20px rgba(255, 138, 61, 0.3);
}

/* Accent glow hover */
.TreckerHoverGlowAccent {
    transition: box-shadow var(--trecker-transition-normal);
}

.TreckerHoverGlowAccent:hover {
    box-shadow: 0 0 30px rgba(255, 138, 61, 0.4);
}

/* ==========================================================================
   REDUCED MOTION — Accessibility
   ========================================================================== */

@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;
    }

    .TreckerAnimateFadeIn,
    .TreckerAnimateFadeOut,
    .TreckerAnimateSlideUp,
    .TreckerAnimateSlideDown,
    .TreckerAnimateSlideInRight,
    .TreckerAnimateSlideOutRight,
    .TreckerAnimateSlideInLeft,
    .TreckerAnimateSlideOutLeft,
    .TreckerAnimateScaleIn,
    .TreckerAnimateScaleOut,
    .TreckerAnimatePulse,
    .TreckerAnimateSpin,
    .TreckerAnimateBounce,
    .TreckerAnimateFullPullCelebration,
    .TreckerAnimateShimmer,
    .TreckerAnimateCountdownPulse,
    .TreckerAnimateSponsorScroll,
    .TreckerAnimateShake,
    .TreckerAnimatePing {
        animation: none !important;
    }

    .TreckerHoverLift:hover,
    .TreckerHoverScale:hover {
        transform: none !important;
    }

    .TreckerSponsorTrack {
        animation: none !important;
    }

    .TreckerBadgeFullPull {
        animation: none !important;
    }

    .TreckerLoadingSpinner {
        animation: TreckerSpin 2s linear infinite !important;
    }
}