/* ==========================================================================
   animations.css — Max Digital Services v2
   Restrained motion (Claude M3 timings), default-visible reveals
   ========================================================================== */

/* ====================================================================
   REVEAL — content visible by default (no fragile IO)
   ==================================================================== */

[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* Optional: progressive enhancement with IntersectionObserver
   The animations.js adds .is-revealing only if IO is supported.
   This way, content is visible by default and animation is a bonus. */
html.js-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
}

html.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@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;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ====================================================================
   SCROLL PROGRESS — taste-skill signature
   ==================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: var(--z-modal);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* ====================================================================
   HERO PRODUCT — subtle float (kept very gentle)
   ==================================================================== */

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.hero-product-card {
  animation: float-soft 9s var(--ease-in-out) infinite;
}

/* ====================================================================
   TYPING DOTS — chatbot typing indicator
   ==================================================================== */

@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-muted);
  margin: 0 2px;
  animation: typing-dot 1.4s var(--ease-in-out) infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* ====================================================================
   ORB PULSE — for hero AI visual
   ==================================================================== */

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.orb {
  animation: orb-pulse 3.5s var(--ease-in-out) infinite;
}

/* ====================================================================
   AURORA — subtle background glow
   ==================================================================== */

@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2%, -1%) scale(1.05); }
  66%      { transform: translate(-1%, 2%) scale(0.98); }
}

.aurora {
  animation: aurora-drift 24s var(--ease-in-out) infinite;
}

/* ====================================================================
   BAR CHART — for analytics mockup
   ==================================================================== */

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.bar {
  display: inline-block;
  width: 8px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: bar-grow 0.8s var(--ease-out) backwards;
}

/* ====================================================================
   WAVE — for voice call visual
   ==================================================================== */

@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

.wave span {
  display: inline-block;
  width: 3px;
  background: var(--accent);
  border-radius: 1px;
  margin: 0 1.5px;
  transform-origin: center;
  animation: wave-bar 1.2s var(--ease-in-out) infinite;
}

.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }
.wave span:nth-child(5) { animation-delay: 0.4s; }
.wave span:nth-child(6) { animation-delay: 0.5s; }
.wave span:nth-child(7) { animation-delay: 0.6s; }

/* ====================================================================
   COUNTER — number animation (handled by JS, this is the style)
   ==================================================================== */

.counter {
  font-variant-numeric: tabular-nums;
}

/* ====================================================================
   SCROLL HINT — hero scroll indicator
   ==================================================================== */

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-faint);
  animation: scroll-bounce 2.4s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint {
    animation: none;
  }
}