/* ==========================================================================
   TOLS.SITE - MODERN MOTION & MICRO-ANIMATION DESIGN SYSTEM
   High-performance GPU-accelerated CSS animations (60+ FPS)
   Clean, tactile, fluid micro-interactions with zero emojis.
   ========================================================================== */

:root {
  --anim-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --anim-duration-fast: 0.18s;
  --anim-duration-base: 0.28s;
  --anim-duration-slow: 0.45s;
}

/* ==========================================================================
   1. KEYFRAME LIBRARIES
   ========================================================================== */

/* Staggered Fade In & Elevation */
@keyframes tolsFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale Pop Entrance */
@keyframes tolsScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Smooth Slide Down & Reveal */
@keyframes tolsSlideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Recalculation Pulse Feedback (Fires smoothly when values update) */
@keyframes tolsRecalcPulse {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(1.02);
    box-shadow: 0 0 0 4px var(--accent-glow, rgba(37, 99, 235, 0.2)), 0 8px 24px -4px var(--accent-glow, rgba(37, 99, 235, 0.15));
  }
  100% {
    transform: scale(1);
  }
}

/* Soft Glow Flash for Numbers */
@keyframes tolsNumberGlow {
  0% {
    color: var(--accent, #2563eb);
    text-shadow: 0 0 10px var(--accent-glow, rgba(37, 99, 235, 0.4));
    transform: scale(1.02);
  }
  100% {
    color: inherit;
    text-shadow: none;
    transform: scale(1);
  }
}

/* Breathing Pulse for Dropzones & Ready States */
@keyframes tolsDropzonePulse {
  0%, 100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow, rgba(37, 99, 235, 0.15));
  }
}

/* Floating Ambient Motion */
@keyframes tolsFloatSoft {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Success Checkmark Bounce */
@keyframes tolsCheckPop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================================================
   2. HOMEPAGE & TOOL CARD ENTRANCES
   ========================================================================== */

.tool-grid .tool-card {
  animation: tolsFadeInUp var(--anim-duration-slow) var(--anim-ease-spring) both;
  animation-delay: calc(var(--order, 0) * 45ms);
}

/* Card Hover Elevation */
.tool-card,
.panel,
.card,
.answer-card,
.board,
.fretboard-card,
.table-card,
.flight-card,
.config-card,
.human-banner,
.calc-card,
.interactive-box,
.stat-card,
.butter-result-tile,
.yeast-tile,
.rec-card {
  transition: transform 0.28s var(--anim-ease-spring), 
              box-shadow 0.28s var(--anim-ease-spring), 
              border-color 0.28s ease !important;
}

.tool-card:hover,
.butter-result-tile:hover,
.yeast-tile:hover,
.rec-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* ==========================================================================
   3. TACTILE CONTROLS & BUTTONS
   ========================================================================== */

button,
.btn,
.btn-act,
.btn-hub,
.btn-copy,
.btn-copy-code,
.btn-copy-calc,
.theme-btn,
.btn-icon,
.btn-secondary,
.btn-primary,
.preset-btn,
.preset-chip,
.unit-pill,
.term-btn,
.day-btn,
.format-btn,
.tank-btn,
.freq-btn,
.preset-color-pill {
  transition: transform 0.2s var(--anim-ease-spring), 
              background-color 0.2s ease, 
              color 0.2s ease, 
              border-color 0.2s ease, 
              box-shadow 0.2s ease !important;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled),
.btn-act:hover:not(:disabled),
.preset-chip:hover,
.preset-color-pill:hover {
  transform: translateY(-1.5px);
}

button:active:not(:disabled),
.btn:active:not(:disabled),
.btn-act:active:not(:disabled),
.preset-btn:active,
.unit-pill:active {
  transform: scale(0.97);
}

/* Smooth Input Focus & Transitions */
input[type="text"],
input[type="number"],
input[type="color"],
select,
textarea {
  transition: border-color 0.22s ease, 
              box-shadow 0.22s var(--anim-ease-spring), 
              background-color 0.22s ease !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* Smooth Range Slider Thumb */
input[type="range"] {
  transition: opacity 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb {
  transition: transform 0.16s var(--anim-ease-spring), box-shadow 0.16s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.22);
  box-shadow: 0 0 0 5px var(--accent-glow);
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.28);
  box-shadow: 0 0 0 7px var(--accent-glow);
}

/* Active Recalculation Pulse Class */
.tols-recalc-active,
.recalc-flash {
  animation: tolsRecalcPulse 0.35s var(--anim-ease-spring) !important;
}

.tols-number-update {
  animation: tolsNumberGlow 0.4s var(--anim-ease-out) !important;
}

/* Theme Switching Smoothness */
body, nav, .panel, .card, footer, header {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}