/* ============================================================
   THE NAKED WIRE — ANIMATIONS
   Version: 1.0
   All keyframes and animation utilities
   ============================================================ */

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

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade Up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Left */
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Right */
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scale Up (Spring) */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Up */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Slide Down */
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Pulse */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

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

@keyframes shimmer-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Skeleton sweep */
@keyframes skeleton-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

/* Bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-12px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Gold glow pulse */
@keyframes goldGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(201, 168, 76, 0.15);
  }
}

/* Wire meter reaction burst */
@keyframes reactionBurst {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* Draw underline */
@keyframes drawUnderline {
  from { width: 0; }
  to   { width: 100%; }
}

/* Toast slide in */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Toast slide out */
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* Number count up */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero text reveal */
@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Progress bar fill */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}

/* Dot blink (loading indicator) */
@keyframes dotBlink {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 1; }
}

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

/* Base animation properties */
.animate-fadeIn    { animation: fadeIn    400ms var(--transition-base) both; }
.animate-fadeUp    { animation: fadeUp    500ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-fadeDown  { animation: fadeDown  400ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-fadeLeft  { animation: fadeLeft  400ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-fadeRight { animation: fadeRight 400ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-scaleIn   { animation: scaleIn   350ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-scaleUp   { animation: scaleUp   400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-slideUp   { animation: slideUp   400ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-spin      { animation: spin      800ms linear infinite; }
.animate-pulse     { animation: pulse     2s ease-in-out infinite; }
.animate-bounce    { animation: bounce    1.2s infinite; }
.animate-float     { animation: float     3s ease-in-out infinite; }
.animate-goldGlow  { animation: goldGlow  2s ease-in-out infinite; }
.animate-heroReveal{ animation: heroReveal 800ms cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ============================================================
   INTERSECTION OBSERVER ANIMATION CLASSES
   Elements animate when they scroll into view
   ============================================================ */

/* Before scroll — hidden state */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* After scroll — visible state */
.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
.stagger > *:nth-child(5) { transition-delay: 320ms; }
.stagger > *:nth-child(6) { transition-delay: 400ms; }
.stagger > *:nth-child(7) { transition-delay: 480ms; }
.stagger > *:nth-child(8) { transition-delay: 560ms; }

/* ============================================================
   HOVER MICRO-INTERACTIONS
   ============================================================ */

/* Card lift on hover */
.hover-lift {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Slight scale on hover */
.hover-scale {
  transition: transform var(--transition-fast);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Image zoom on hover */
.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-zoom:hover img {
  transform: scale(1.05);
}

/* Gold underline on hover */
.hover-gold {
  position: relative;
}

.hover-gold::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-gold);
  transition: width var(--transition-base);
  border-radius: var(--radius-full);
}

.hover-gold:hover::after {
  width: 100%;
}

/* ============================================================
   LOADING STATES
   ============================================================ */

/* Loading dots */
.loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gold);
  animation: dotBlink 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
.toast {
  animation: toastIn 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.toast.hiding {
  animation: toastOut 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ============================================================
   REDUCE MOTION SUPPORT
   Respects user preference for reduced motion
   ============================================================ */
@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;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}