/* ============================================================
   CHRONLY — Animations
   All keyframes and animation utilities
   ============================================================ */

/* ── Keyframes ── */
@keyframes slowRotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(4px) scale(0.96); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.04); opacity: 0.85; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes settleIn {
  0%   { transform: scale(0.94); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Scroll reveal utilities ── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for groups */
.stagger-1 { transition-delay: 40ms; }
.stagger-2 { transition-delay: 80ms; }
.stagger-3 { transition-delay: 120ms; }
.stagger-4 { transition-delay: 160ms; }
.stagger-5 { transition-delay: 200ms; }
.stagger-6 { transition-delay: 240ms; }

/* ── Hero content entrance ── */
.hero-animate-1 {
  animation: slideUp 600ms var(--ease-out) 100ms both;
}

.hero-animate-2 {
  animation: slideUp 600ms var(--ease-out) 200ms both;
}

.hero-animate-3 {
  animation: slideUp 600ms var(--ease-out) 300ms both;
}

.hero-animate-4 {
  animation: slideUp 600ms var(--ease-out) 400ms both;
}

/* ── Number count-up ── */
.count-up-wrap {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Loading spinner ── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  display: inline-block;
}

/* ── Shimmer skeleton ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-surface-2) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ── Scale bounce on result appear ── */
.result-appear {
  animation: settleIn 500ms var(--ease-out) both;
}

/* ── Hover micro-animations ── */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

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

/* ── Gradient border animation ── */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes borderSpin {
  to { --border-angle: 360deg; }
}

/* ── Pulse glow for active results ── */
.glow-pulse {
  animation: pulse 2.5s ease-in-out infinite;
}

/* ── Category grid cross-fade ── */
.tool-grid {
  transition: opacity 200ms var(--ease-out);
}

.tool-grid.fading { opacity: 0.4; pointer-events: none; }