/* animations.css — RateTheWork micro-interaction & animation foundation */

/* ============================================
   Custom Easing Variables
   ============================================ */
:root {
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.4, 0.25, 1);
}

/* ============================================
   Button Spring Bounce
   ============================================ */
.btn-spring {
    transition: transform 0.3s var(--ease-spring), filter 0.2s ease;
}

.btn-spring:active {
    transform: scale(0.95);
}

/* ============================================
   Like Pop Animation
   ============================================ */
@keyframes like-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.like-active {
    animation: like-pop 0.4s var(--ease-spring);
}

/* ============================================
   Star Rating Ripple
   ============================================ */
@keyframes star-ripple {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.4; }
    100% { box-shadow: 0 0 0 10px transparent; opacity: 0; }
}

.star-click-ripple {
    animation: star-ripple 0.3s ease-out;
}

/* ============================================
   Shimmer Wave (Skeleton)
   ============================================ */
@keyframes shimmer-wave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        hsl(var(--muted)) 25%,
        hsl(var(--muted-foreground) / 0.08) 50%,
        hsl(var(--muted)) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-wave 1.8s ease-in-out infinite;
}

/* ============================================
   Blockchain Hash Reveal
   ============================================ */
@keyframes char-glow {
    0% { color: hsl(var(--primary)); text-shadow: 0 0 8px hsl(var(--primary) / 0.6); }
    100% { color: inherit; text-shadow: none; }
}

.char-glow-flash {
    animation: char-glow 0.4s ease-out forwards;
}

@keyframes badge-spring-in {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.badge-spring-in {
    animation: badge-spring-in 0.5s var(--ease-spring) forwards;
}

@keyframes pulse-glow-ring {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.3); }
    50% { box-shadow: 0 0 0 8px hsl(var(--primary) / 0); }
}

.pulse-glow-ring {
    animation: pulse-glow-ring 2s ease-in-out infinite;
}

/* ============================================
   Page Transition
   ============================================ */
@keyframes page-enter {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.page-enter {
    animation: page-enter 0.3s var(--ease-out-expo) forwards;
}

/* ============================================
   Word Fade-Up (Typography Stagger)
   ============================================ */
@keyframes word-fade-up {
    0% { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.word-fade-up {
    display: inline-block;
    opacity: 0;
    animation: word-fade-up 0.5s var(--ease-out-expo) forwards;
}

/* ============================================
   Toast Animations
   ============================================ */
@keyframes toast-enter {
    0% { opacity: 0; transform: translateX(100%); }
    60% { transform: translateX(-4px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes toast-exit {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100%); }
}

@keyframes toast-progress {
    0% { width: 100%; }
    100% { width: 0%; }
}

.toast-animate-enter {
    animation: toast-enter 0.4s var(--ease-spring) forwards;
}

.toast-animate-exit {
    animation: toast-exit 0.3s ease-in forwards;
}

.toast-progress-bar {
    animation: toast-progress linear forwards;
}

/* ============================================
   Cursor-Following Card Glow
   ============================================ */
.cursor-glow-card {
    position: relative;
    overflow: hidden;
}

.cursor-glow-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        hsl(var(--primary) / 0.08),
        transparent 60%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.cursor-glow-card:hover::after {
    opacity: 1;
}

/* ============================================
   Card 3D Tilt
   ============================================ */
.card-tilt {
    transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* ============================================
   Navigation Progress Bar
   ============================================ */
@keyframes nav-progress-indeterminate {
    0% { left: -30%; width: 30%; }
    50% { left: 50%; width: 30%; }
    100% { left: 100%; width: 0%; }
}

.nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    z-index: 99;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.6));
    transition: width 0.2s ease, opacity 0.3s ease;
}

/* ============================================
   Reduced Motion — Disable ALL animations
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .btn-spring,
    .like-active,
    .star-click-ripple,
    .shimmer,
    .char-glow-flash,
    .badge-spring-in,
    .pulse-glow-ring,
    .page-enter,
    .word-fade-up,
    .toast-animate-enter,
    .toast-animate-exit,
    .toast-progress-bar,
    .card-tilt,
    .nav-progress-bar {
        animation: none !important;
        transition: none !important;
    }

    .cursor-glow-card::after {
        display: none;
    }

    .word-fade-up {
        opacity: 1;
    }
}