/* ==========================================================================
   GadgetGhor — animations.css
   All keyframes, transitions, micro-interactions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */

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

@keyframes ggFadeDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ggFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ggFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ggScaleIn {
    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

    100% {
        background-position: -200% 0;
    }
}

@keyframes ggPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .65;
        transform: scale(1.06);
    }
}

@keyframes ggBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes ggShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

@keyframes ggToastIn {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes ggPriceFlash {
    0%, 100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(16,185,129,.25);
    }
}

@keyframes ggRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes ggGradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes ggWave {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes ggConfetti {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }

    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   UTILITY ANIMATION CLASSES
   -------------------------------------------------------------------------- */

.gg-anim-fade-in {
    animation: ggFadeIn .35s ease both;
}

.gg-anim-fade-up {
    animation: ggFadeUp .4s cubic-bezier(.2,.9,.3,1) both;
}

.gg-anim-fade-down {
    animation: ggFadeDown .3s ease both;
}

.gg-anim-scale-in {
    animation: ggScaleIn .3s cubic-bezier(.2,.9,.3,1) both;
}

.gg-anim-bounce {
    animation: ggBounce 1.2s ease-in-out infinite;
}

.gg-anim-pulse {
    animation: ggPulse 1.6s ease-in-out infinite;
}

.gg-anim-shake {
    animation: ggShake .35s ease;
}

.gg-delay-1 {
    animation-delay: .06s;
}

.gg-delay-2 {
    animation-delay: .12s;
}

.gg-delay-3 {
    animation-delay: .18s;
}

.gg-delay-4 {
    animation-delay: .24s;
}

.gg-delay-5 {
    animation-delay: .3s;
}

.gg-delay-6 {
    animation-delay: .36s;
}

/* --------------------------------------------------------------------------
   LOADER
   -------------------------------------------------------------------------- */
.gg-loader {
    position: fixed;
    inset: 0;
    background: var(--gg-bg, #f8fafc);
    display: grid;
    place-items: center;
    z-index: 9999;
    transition: opacity .35s ease, visibility .35s ease;
}

    .gg-loader.hide {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.gg-loader-ring {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(99,102,241,.2);
    border-top-color: var(--gg-primary, #6366f1);
    border-radius: 50%;
    animation: ggSpin 0.9s linear infinite;
}

.gg-loader-dots {
    display: inline-flex;
    gap: 6px;
    margin-top: 1rem;
}

    .gg-loader-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gg-primary, #6366f1);
        animation: ggPulse 1s ease-in-out infinite;
    }

        .gg-loader-dots span:nth-child(2) {
            animation-delay: .15s;
        }

        .gg-loader-dots span:nth-child(3) {
            animation-delay: .3s;
        }

/* --------------------------------------------------------------------------
   HOVER MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
.gg-hover-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}

    .gg-hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(15,23,42,.12);
    }

.gg-hover-scale {
    transition: transform .2s ease;
}

    .gg-hover-scale:hover {
        transform: scale(1.04);
    }

.gg-hover-glow {
    transition: box-shadow .25s ease;
}

    .gg-hover-glow:hover {
        box-shadow: 0 0 0 3px rgba(99,102,241,.25), 0 12px 32px rgba(99,102,241,.2);
    }

/* --------------------------------------------------------------------------
   LINK UNDERLINE SWEEP
   -------------------------------------------------------------------------- */
.gg-link-sweep {
    position: relative;
    text-decoration: none;
    color: var(--gg-primary);
}

    .gg-link-sweep::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 2px;
        background: var(--gg-primary);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .3s ease;
    }

    .gg-link-sweep:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

/* --------------------------------------------------------------------------
   RIPPLE BUTTON
   -------------------------------------------------------------------------- */
.gg-ripple {
    position: relative;
    overflow: hidden;
}

    .gg-ripple .gg-ripple-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,.6);
        width: 20px;
        height: 20px;
        transform: scale(0);
        pointer-events: none;
        animation: ggRipple .6s ease-out;
    }

/* --------------------------------------------------------------------------
   GRADIENT ANIMATED BUTTON
   -------------------------------------------------------------------------- */
.gg-btn-gradient {
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
    background-size: 300% 100%;
    animation: ggGradientShift 6s ease infinite;
    color: #fff;
}

    .gg-btn-gradient:hover {
        color: #fff;
    }

/* --------------------------------------------------------------------------
   PRICE FLASH (SignalR live updates)
   -------------------------------------------------------------------------- */
.gg-price-flash {
    animation: ggPriceFlash .9s ease;
    border-radius: 6px;
    padding: 0 .25rem;
}

/* --------------------------------------------------------------------------
   IMAGE FADE-IN ON LOAD
   -------------------------------------------------------------------------- */
.gg-img-fade {
    opacity: 0;
    transition: opacity .5s ease;
}

    .gg-img-fade.is-loaded {
        opacity: 1;
    }

/* --------------------------------------------------------------------------
   LAZY IMAGE BLUR-UP
   -------------------------------------------------------------------------- */
.gg-img-lazy {
    filter: blur(12px);
    transition: filter .5s ease;
    background: #e5e7eb;
}

    .gg-img-lazy.is-loaded {
        filter: blur(0);
    }

/* --------------------------------------------------------------------------
   PAGE TRANSITIONS
   -------------------------------------------------------------------------- */
.gg-page-enter {
    animation: ggFadeUp .35s ease both;
}

/* --------------------------------------------------------------------------
   WAVE HAND (greeting)
   -------------------------------------------------------------------------- */
.gg-wave {
    display: inline-block;
    animation: ggWave 1.4s ease-in-out;
    transform-origin: 70% 70%;
}

/* --------------------------------------------------------------------------
   CONFETTI (celebrate compare completion)
   -------------------------------------------------------------------------- */
.gg-confetti {
    position: fixed;
    top: -20px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    animation: ggConfetti 2.4s ease-out forwards;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — respect reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .gg-skel {
        animation: none;
        background: #e5e7eb;
    }
}