/* ==========================================================================
   NextRide Animation & Transition Utilities
   
   Provides reusable keyframes, transition helpers, and hover effects
   that match the Figma design language.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframe definitions
   -------------------------------------------------------------------------- */
@keyframes nr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@keyframes nr-slide-in-up {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes nr-slide-in-down {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@keyframes nr-slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes nr-slide-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes nr-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

@keyframes nr-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

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

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

/* --------------------------------------------------------------------------
   Animation utility classes
   -------------------------------------------------------------------------- */
.nr-animate-fade-in       { animation: nr-fade-in       var(--nr-transition-slow) both; }
.nr-animate-slide-in-up   { animation: nr-slide-in-up   var(--nr-transition-slow) both; }
.nr-animate-slide-in-down { animation: nr-slide-in-down var(--nr-transition-slow) both; }
.nr-animate-slide-in-right{ animation: nr-slide-in-right var(--nr-transition-slow) both; }
.nr-animate-scale-in      { animation: nr-scale-in      var(--nr-transition-slow) both; }
.nr-animate-pulse         { animation: nr-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.nr-animate-spin          { animation: nr-spin  1s linear infinite; }

/* --------------------------------------------------------------------------
   Transition utility classes
   -------------------------------------------------------------------------- */
.nr-transition-all {
    transition-property: all;
    transition-duration: var(--nr-transition-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nr-transition-colors {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-duration: var(--nr-transition-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nr-transition-transform {
    transition-property: transform;
    transition-duration: var(--nr-transition-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nr-transition-opacity {
    transition-property: opacity;
    transition-duration: var(--nr-transition-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nr-transition-shadow {
    transition-property: box-shadow;
    transition-duration: var(--nr-transition-fast);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Hover effect compositions
   -------------------------------------------------------------------------- */

/* Lift: card lifts and gains shadow on hover */
.nr-hover-lift {
    transition: transform var(--nr-transition-fast), box-shadow var(--nr-transition-fast);
}
.nr-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--nr-shadow-lg);
}

/* Glow: subtle coloured glow on hover */
.nr-hover-glow {
    transition: box-shadow var(--nr-transition-fast);
}
.nr-hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);  /* indigo glow */
}

/* Scale: slight scale-up on hover */
.nr-hover-scale {
    transition: transform var(--nr-transition-fast);
}
.nr-hover-scale:hover {
    transform: scale(1.02);
}

/* Brighten: increases brightness on hover (for dark backgrounds) */
.nr-hover-brighten {
    transition: filter var(--nr-transition-fast);
}
.nr-hover-brighten:hover {
    filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   Skeleton loading effect
   -------------------------------------------------------------------------- */
.nr-skeleton {
    background: linear-gradient(
        90deg,
        var(--nr-muted) 25%,
        var(--nr-accent) 50%,
        var(--nr-muted) 75%
    );
    background-size: 200% 100%;
    animation: nr-shimmer 1.5s infinite;
    border-radius: var(--nr-radius-md);
}

/* --------------------------------------------------------------------------
   Jackpot shimmer – used for the animated gold-gradient "Jackpot!" border.
   Uses the existing nr-shimmer keyframe but with ease-in-out timing.
   -------------------------------------------------------------------------- */
.nr-animate-jackpot-shimmer {
    animation: nr-shimmer 3s ease-in-out infinite;
    background-size: 200% 100%;
}

/* --------------------------------------------------------------------------
   Reduced-motion: respect user preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nr-animate-fade-in,
    .nr-animate-slide-in-up,
    .nr-animate-slide-in-down,
    .nr-animate-slide-in-right,
    .nr-animate-scale-in,
    .nr-animate-pulse,
    .nr-animate-jackpot-shimmer,
    .nr-animate-spin {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .nr-transition-all,
    .nr-transition-colors,
    .nr-transition-transform,
    .nr-transition-opacity,
    .nr-transition-shadow,
    .nr-hover-lift,
    .nr-hover-glow,
    .nr-hover-scale,
    .nr-hover-brighten {
        transition-duration: 0.01ms !important;
    }

    .nr-skeleton {
        animation: none !important;
    }

    /* Freeze jackpot wrapper gradient in place */
    .hero-ride-card--jackpot,
    .compact-card-wrapper--jackpot {
        animation: none !important;
        background-position: 0 center !important;
    }
}