/* ============================================================
   ATONIX ENGINEERING — Animations
   Scroll-reveal, hero entry, and motion utilities.
   ============================================================ */

/* ---- Scroll reveal base ----
   Elements with .reveal start hidden and fade up when they enter viewport.
   Triggered by IntersectionObserver in animations.js, which adds .is-visible.
*/
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}

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

/* Stagger via data-delay attribute (set inline in HTML).
   We apply delay only on the initial reveal, not on subsequent state changes. */
.reveal[data-delay="100"]  { transition-delay: 100ms; }
.reveal[data-delay="200"]  { transition-delay: 200ms; }
.reveal[data-delay="300"]  { transition-delay: 300ms; }
.reveal[data-delay="400"]  { transition-delay: 400ms; }
.reveal[data-delay="500"]  { transition-delay: 500ms; }
.reveal[data-delay="650"]  { transition-delay: 650ms; }
.reveal[data-delay="800"]  { transition-delay: 800ms; }
.reveal[data-delay="80"]   { transition-delay: 80ms; }
.reveal[data-delay="160"]  { transition-delay: 160ms; }
.reveal[data-delay="240"]  { transition-delay: 240ms; }
.reveal[data-delay="320"]  { transition-delay: 320ms; }

/* ---- Hero entry animation ----
   The hero loads on page load (not scroll-triggered), so we use a class-based fade.
   These overrides keep the hero-specific reveal punchier than the standard scroll one. */
.hero .reveal {
  transform: translateY(40px);
}

.hero.is-loaded .reveal {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Subtle floating animation for the orange accent dot ---- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---- Sub-emphasis: title-line stagger via animation rather than transition ----
   Provides a slightly different feel than .reveal — used only for the hero headline.
   Disabled because we already handle stagger via data-delay on .reveal — kept here as a reference utility. */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Utility classes for ad-hoc animation ---- */
.fade-in        { animation: fade-in 600ms var(--ease-out) both; }
.slide-up       { animation: slide-up 700ms var(--ease-out) both; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Form status appearance ---- */
.form__status.is-success,
.form__status.is-error {
  animation: fade-in 300ms var(--ease-out) both;
}