/* =========================================================
   ANIMATIONS.CSS — keyframes + IntersectionObserver-driven
   reveal classes. JS only toggles .in-view; all motion here.
   ========================================================= */

/* Generic scroll reveal: fade + rise */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].in-view { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].in-view { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].in-view { transform: scale(1); }

/* Stagger children automatically when parent has [data-reveal-group] */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal-group].in-view > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].in-view > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group].in-view > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal-group].in-view > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal-group].in-view > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal-group].in-view > *:nth-child(5) { transition-delay: 0.45s; }
[data-reveal-group].in-view > *:nth-child(6) { transition-delay: 0.55s; }

/* Hero load sequence */
.hero-content .eyebrow { animation: heroFade 0.8s var(--ease) 0.3s forwards; }
.hero-title .line span { animation: heroLine 1s var(--ease) forwards; }
.hero-title .line:nth-child(1) span { animation-delay: 0.5s; }
.hero-title .line:nth-child(2) span { animation-delay: 0.65s; }
.hero-desc { animation: heroFade 0.9s var(--ease) 1s forwards; }
.hero-actions { animation: heroFade 0.9s var(--ease) 1.2s forwards; }

@keyframes heroFade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroLine {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

/* Counter number pop */
@keyframes numberPop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat-num.counted { animation: numberPop 0.5s var(--ease); }

/* Loader */
.page-loader {
  position: fixed; inset: 0; z-index: 4000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.page-loader.loaded { opacity: 0; visibility: hidden; }
.loader-mark {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  position: relative;
}
.loader-mark::after {
  content: "";
  position: absolute; left: 0; bottom: -10px;
  height: 1px; width: 100%;
  background: var(--line-strong);
  overflow: hidden;
}

/* Gentle ambient float for configurator/hero UI chrome */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-ambient { animation: floatY 5s ease-in-out infinite; }

/* Marquee-style ticker (unused by default, available for services strip) */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}