/* css/motion.css */
:root {
  --step-fast: steps(4);
  --step-medium: steps(6);
  --step-slow: steps(8);
  --duration-fast: 0.12s;
  --duration-medium: 0.2s;
  --duration-slow: 0.3s;
}

.pixel-tab {
  transition: all var(--duration-fast) var(--step-fast);
  will-change: transform;
}

.pixel-tab:hover {
  transform: translate(-2px, -2px);
  border-color: var(--accent-gold);
  box-shadow: 3px 3px 0px rgba(255, 215, 0, 0.3);
}

.pixel-tab:active {
  transform: translate(1px, 1px);
  box-shadow: none;
  transition: all 0.05s steps(2);
}

.pixel-tab.active {
  animation: pixel-select 0.3s var(--step-medium) forwards;
}

@keyframes pixel-select {
  0% { transform: scale(1); border-color: var(--border-hollow); }
  40% { transform: scale(1.06); border-color: var(--accent-gold); }
  100% { transform: scale(1); border-color: var(--accent-gold); }
}

.pixel-hero-icon {
  animation: hero-float 4s var(--step-slow) infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  60% { transform: translateY(-2px); }
}

.card-enter {
  animation: pixel-enter 0.25s var(--step-medium) forwards;
}

@keyframes pixel-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pixel-search:focus {
  animation: search-glow 0.2s var(--step-fast) forwards;
}

@keyframes search-glow {
  to { border-color: var(--accent-gold); box-shadow: 0 0 16px rgba(255, 215, 0, 0.15); }
}

.search-results {
  animation: dropdown-pop 0.15s var(--step-fast) forwards;
  transform-origin: top;
}

@keyframes dropdown-pop {
  from { opacity: 0; transform: scaleY(0.8); }
  to { opacity: 1; transform: scaleY(1); }
}

.pixel-shell {
  transition: width var(--duration-slow) var(--step-medium), 
              max-width var(--duration-slow) var(--step-medium);
}

.hero-temp {
  animation: temp-pulse 2s var(--step-slow) infinite;
}

@keyframes temp-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
  50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
}