/* ============================================================
   MOTION SELL — animations.css
   Keyframes, loader, reveal states, motion utilities
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 31, .6); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 90, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0); }
}

@keyframes scrollDot {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes gradientDrift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 8px 26px rgba(255,90,31,.35); }
  50%      { box-shadow: 0 8px 42px rgba(255,90,31,.65), 0 0 30px rgba(255,90,31,.35); }
}

@keyframes loaderSheen {
  to { transform: translateX(220%); }
}

/* ---------- Motion utilities ---------- */
.float-slow { animation: floatY 6.5s ease-in-out infinite; }
.pulse-glow { animation: pulseGlow 2.6s ease-in-out infinite; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 2000;
  display: none; place-items: center;
  background: var(--black);
}
html.js .loader { display: grid; } /* never blocks content if JS fails */
.loader__inner { display: grid; justify-items: center; gap: 1.4rem; }
.loader__logo {
  display: flex; gap: .6rem; overflow: hidden;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: .08em;
}
.loader__logo-word { display: inline-block; transform: translateY(110%); }
.loader__logo-word--accent { color: var(--orange); }
.loader__bar {
  position: relative; width: min(320px, 64vw); height: 3px;
  background: rgba(246, 241, 231, .12); border-radius: 999px; overflow: hidden;
}
.loader__bar-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  border-radius: inherit;
}
.loader__count { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .3em; color: var(--gray); }

/* ---------- JS-driven initial states ----------
   Applied only when JS is running (html.js) so content is
   never hidden if scripts fail to load. GSAP animates these in. */
html.js [data-reveal]     { opacity: 0; transform: translateY(46px); }
html.js [data-split]      { visibility: hidden; }
html.js .hero__title-line > span { transform: translateY(115%); }
html.js .hero__eyebrow,
html.js .hero__desc,
html.js .hero__actions,
html.js .hero__stats      { opacity: 0; transform: translateY(30px); }
html.js .hero__visual     { opacity: 0; transform: scale(.86); }
html.js .hero__scroll     { opacity: 0; }

/* Split-text chars (created by gsap.js) */
.char { display: inline-block; will-change: transform, opacity; }

/* Word wrapper keeps spaces intact when splitting */
.word { display: inline-block; white-space: pre; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal],
  html.js [data-split],
  html.js .hero__title-line > span,
  html.js .hero__eyebrow,
  html.js .hero__desc,
  html.js .hero__actions,
  html.js .hero__stats,
  html.js .hero__visual,
  html.js .hero__scroll {
    opacity: 1 !important; transform: none !important; visibility: visible !important;
  }
  .cursor, .cursor-ring { display: none !important; }
}