/* ==========================================================================
   Anchor HQ - Stardew Valley Animations & Transitions
   Pixel-feel keyframes, retro motion, and utility classes
   ========================================================================== */

/* ─── Timing Tokens ─── */
:root {
  --anim-fast:     150ms;
  --anim-normal:   280ms;
  --anim-slow:     500ms;
  --anim-xslow:    800ms;

  --ease-pixel:    steps(4);
  --ease-pixel-sm: steps(2);
  --ease-pixel-lg: steps(8);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:     cubic-bezier(0.2, 0, 0, 1);
}


/* ==========================================================================
   PAGE TRANSITIONS
   ========================================================================== */

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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


/* ==========================================================================
   PIXEL-SPECIFIC ANIMATIONS
   ========================================================================== */

/* Subtle 2-frame bounce for character sprites */
@keyframes pixelBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Opacity flicker + scale pulse for gold/XP effects */
@keyframes pixelSparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    opacity: 0.6;
    transform: scale(1.15);
    filter: brightness(1.4);
  }
  50% {
    opacity: 1;
    transform: scale(0.95);
    filter: brightness(1);
  }
  75% {
    opacity: 0.7;
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

/* Scale pulse with golden glow for level-up */
@keyframes pixelPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 16px 4px rgba(255, 215, 0, 0.4);
  }
}

/* Tiny horizontal shake for errors/damage */
@keyframes pixelShake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-3px);
  }
  20% {
    transform: translateX(3px);
  }
  30% {
    transform: translateX(-2px);
  }
  40% {
    transform: translateX(2px);
  }
  50% {
    transform: translateX(-1px);
  }
  60% {
    transform: translateX(1px);
  }
}

/* Gentle up-down float for "+XP" text popups */
@keyframes pixelFloat {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

/* Burning away effect for task completion */
@keyframes pixelBurn {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(217, 83, 79, 0);
  }
  30% {
    transform: scale(1.03);
    opacity: 1;
    filter: brightness(1.3) saturate(1.5);
    box-shadow: 0 0 12px 2px rgba(217, 83, 79, 0.5);
  }
  60% {
    transform: scale(0.95);
    opacity: 0.6;
    filter: brightness(1.6) saturate(2);
    box-shadow: 0 0 20px 4px rgba(255, 100, 50, 0.6);
  }
  100% {
    transform: scale(0);
    opacity: 0;
    filter: brightness(2) saturate(0);
    box-shadow: 0 0 0 0 rgba(255, 100, 50, 0);
  }
}


/* ==========================================================================
   STATUS ANIMATIONS
   ========================================================================== */

/* Opacity + box-shadow glow cycle for status dots */
@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 0 3px rgba(92, 184, 92, 0.14),
      0 0 8px rgba(92, 184, 92, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow:
      0 0 0 5px rgba(92, 184, 92, 0.2),
      0 0 14px rgba(92, 184, 92, 0.6);
  }
}

/* Continuous 360deg rotation for automation gears */
@keyframes gearSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Opacity fade-up for workshop steam */
@keyframes steamPuff {
  0% {
    opacity: 0.6;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translateY(-12px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px) scale(1.5);
  }
}


/* ==========================================================================
   COUNT / NUMBER ANIMATIONS
   ========================================================================== */

/* Animated number counting using stepped timing */
@keyframes countUp {
  from {
    opacity: 0.4;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   LOADING ANIMATIONS
   ========================================================================== */

/* Linear gradient shimmer slide for skeleton loaders */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Three dots bouncing in sequence */
@keyframes pixelLoadDot1 {
  0%, 20%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  10% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes pixelLoadDot2 {
  0%, 30%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  20% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes pixelLoadDot3 {
  0%, 40%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Skeleton loader base style */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--parchment-dark, #e8d4a8) 25%,
    var(--parchment-light, #faf3e3) 50%,
    var(--parchment-dark, #e8d4a8) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: 2px;
}

/* Pixel loading dots component */
.pixel-loader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pixel-loader .dot {
  width: 6px;
  height: 6px;
  background: var(--wood, #8b6914);
  border-radius: 1px;
  image-rendering: pixelated;
}

.pixel-loader .dot:nth-child(1) {
  animation: pixelLoadDot1 1s var(--ease-pixel-sm) infinite;
}

.pixel-loader .dot:nth-child(2) {
  animation: pixelLoadDot2 1s var(--ease-pixel-sm) infinite;
}

.pixel-loader .dot:nth-child(3) {
  animation: pixelLoadDot3 1s var(--ease-pixel-sm) infinite;
}


/* ==========================================================================
   INTERACTIVE ANIMATIONS
   ========================================================================== */

/* Click ripple expanding circle */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Confetti for level-up celebrations */
@keyframes confettiPiece1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-40px, -60px) rotate(360deg) scale(0);
    opacity: 0;
  }
}

@keyframes confettiPiece2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(30px, -70px) rotate(-270deg) scale(0);
    opacity: 0;
  }
}

@keyframes confettiPiece3 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-20px, -80px) rotate(180deg) scale(0);
    opacity: 0;
  }
}

@keyframes confettiPiece4 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(50px, -50px) rotate(-360deg) scale(0);
    opacity: 0;
  }
}

@keyframes confettiPiece5 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(10px, -90px) rotate(270deg) scale(0);
    opacity: 0;
  }
}

/* Confetti container component */
.confetti-burst {
  position: relative;
  display: inline-block;
}

.confetti-burst::before,
.confetti-burst::after,
.confetti-burst .spark-1,
.confetti-burst .spark-2,
.confetti-burst .spark-3 {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  pointer-events: none;
  image-rendering: pixelated;
}

.confetti-burst::before {
  background: #ffd700;
  animation: confettiPiece1 var(--anim-slow) var(--ease-bounce) forwards;
}

.confetti-burst::after {
  background: #5cb85c;
  animation: confettiPiece2 var(--anim-slow) var(--ease-bounce) forwards;
}

.confetti-burst .spark-1 {
  background: #d9534f;
  animation: confettiPiece3 var(--anim-slow) var(--ease-bounce) forwards;
}

.confetti-burst .spark-2 {
  background: #5bc0de;
  animation: confettiPiece4 var(--anim-slow) var(--ease-bounce) forwards;
}

.confetti-burst .spark-3 {
  background: #f0ad4e;
  animation: confettiPiece5 var(--anim-slow) var(--ease-bounce) forwards;
}

/* Gold coins falling from top */
@keyframes coinRain {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Coin rain container */
.coin-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.coin-rain .coin {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, #ffe066, #c8a800);
  border: 2px solid #8a6100;
  border-radius: 50%;
  image-rendering: pixelated;
  animation: coinRain 2s linear forwards;
}

.coin-rain .coin:nth-child(1) { left: 10%; animation-delay: 0ms; animation-duration: 1.8s; }
.coin-rain .coin:nth-child(2) { left: 25%; animation-delay: 150ms; animation-duration: 2.1s; }
.coin-rain .coin:nth-child(3) { left: 40%; animation-delay: 300ms; animation-duration: 1.6s; }
.coin-rain .coin:nth-child(4) { left: 55%; animation-delay: 100ms; animation-duration: 2.3s; }
.coin-rain .coin:nth-child(5) { left: 70%; animation-delay: 400ms; animation-duration: 1.9s; }
.coin-rain .coin:nth-child(6) { left: 85%; animation-delay: 200ms; animation-duration: 2.0s; }
.coin-rain .coin:nth-child(7) { left: 15%; animation-delay: 350ms; animation-duration: 2.2s; }
.coin-rain .coin:nth-child(8) { left: 60%; animation-delay: 500ms; animation-duration: 1.7s; }


/* ==========================================================================
   UTILITY CLASSES - Apply Animations
   ========================================================================== */

/* Page transitions */
.animate-fade-in {
  animation: fadeIn var(--anim-normal) var(--ease-snap) both;
}

.animate-slide-left {
  animation: slideInLeft var(--anim-normal) var(--ease-snap) both;
}

.animate-slide-right {
  animation: slideInRight var(--anim-normal) var(--ease-snap) both;
}

.animate-slide-up {
  animation: slideInUp var(--anim-normal) var(--ease-snap) both;
}

/* Pixel-feel animations */
.animate-bounce {
  animation: pixelBounce 600ms var(--ease-pixel-sm) infinite;
}

.animate-sparkle {
  animation: pixelSparkle 1.2s var(--ease-pixel) infinite;
}

.animate-pulse {
  animation: pixelPulse 1.5s ease-in-out infinite;
}

.animate-shake {
  animation: pixelShake 400ms var(--ease-pixel) both;
}

.animate-float {
  animation: pixelFloat 1.5s var(--ease-snap) both;
}

.animate-burn {
  animation: pixelBurn 600ms var(--ease-snap) both;
}

/* Status */
.animate-gear {
  animation: gearSpin 3s linear infinite;
}

.animate-steam {
  animation: steamPuff 2s ease-out infinite;
}

/* Count up */
.animate-count {
  animation: countUp var(--anim-normal) steps(6) both;
}

/* Ripple - typically applied via JS on click */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.3);
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  pointer-events: none;
  animation: ripple 500ms ease-out forwards;
  opacity: 0;
}

.ripple-effect:active::after {
  opacity: 0.5;
}


/* ==========================================================================
   STAGGER DELAYS - for sequential entrance animations
   ========================================================================== */

.stagger-1 { animation-delay: 100ms; }
.stagger-2 { animation-delay: 200ms; }
.stagger-3 { animation-delay: 300ms; }
.stagger-4 { animation-delay: 400ms; }
.stagger-5 { animation-delay: 500ms; }


/* ==========================================================================
   REDUCED MOTION - respect user preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-bounce,
  .animate-sparkle,
  .animate-pulse,
  .animate-gear,
  .animate-steam {
    animation: none !important;
  }

  .stagger-1,
  .stagger-2,
  .stagger-3,
  .stagger-4,
  .stagger-5 {
    animation-delay: 0ms !important;
  }
}