/* ==========================================================================
   Artha Systems — Animations
   All motion animates transform/opacity only, and is fully disabled under
   prefers-reduced-motion (see the guard block at the foot of this file).
   ========================================================================== */

/* ==========================================================================
   1. Keyframes
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

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

@keyframes fadeRight {
  from { opacity: 0; transform: translate3d(-34px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translate3d(34px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes drawerIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.8%, 0) scale(1.05); }
  100% { transform: translate3d(2%, -2.2%, 0) scale(1.02); }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.32); opacity: .62; }
}

@keyframes pulseRing {
  0%   { transform: scale(.75); opacity: .85; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

@keyframes veilOut {
  0%   { transform: scaleY(0); transform-origin: bottom; }
  45%  { transform: scaleY(1); transform-origin: bottom; }
  46%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

/* Floating elements — offset durations so nothing syncs up */
@keyframes float1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -16px, 0) rotate(-1deg); }
}
@keyframes float2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, 14px, 0) rotate(1.2deg); }
}
@keyframes float3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-10px, -11px, 0); }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   2. Scroll-triggered reveal
   JS adds .in-view via IntersectionObserver, then unobserves.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-reveal="up"]    { transform: translate3d(0, 28px, 0) scale(.985); }
[data-reveal="right"] { transform: translate3d(-34px, 0, 0); }
[data-reveal="left"]  { transform: translate3d(34px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* Stagger children 70–90ms */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  will-change: transform, opacity;
}
[data-stagger].in-view > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
[data-stagger].in-view > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 400ms; }
[data-stagger].in-view > *:nth-child(7) { transition-delay: 480ms; }
[data-stagger].in-view > *:nth-child(8) { transition-delay: 560ms; }

/* Word-by-word headline reveal — JS splits into .word > .word__in */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word__in {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  transition: transform .82s var(--ease);
}
.is-revealed .word__in { transform: translate3d(0, 0, 0); }

/* SVG stroke draw-on */
.draw path, .draw line, .draw circle, .draw polyline {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.draw.in-view path,
.draw.in-view line,
.draw.in-view circle,
.draw.in-view polyline {
  animation: drawLine 1.6s var(--ease) forwards;
}
.draw.in-view :nth-child(2) { animation-delay: .14s; }
.draw.in-view :nth-child(3) { animation-delay: .28s; }
.draw.in-view :nth-child(4) { animation-delay: .42s; }
.draw.in-view :nth-child(5) { animation-delay: .56s; }

/* Entrance animation for above-the-fold hero (no observer needed) */
.hero__copy > *      { animation: fadeUp .85s var(--ease) backwards; }
.hero__copy > *:nth-child(1) { animation-delay: .10s; }
.hero__copy > *:nth-child(2) { animation-delay: .20s; }
.hero__copy > *:nth-child(3) { animation-delay: .30s; }
.hero__copy > *:nth-child(4) { animation-delay: .40s; }
.hero__copy > *:nth-child(5) { animation-delay: .50s; }
.hero__visual        { animation: zoomIn 1.2s var(--ease) .28s backwards; }
.hero__chip--1       { animation-delay: 0s,   .85s; }

.dash__bar-col:nth-child(1) { animation-delay: .70s; }
.dash__bar-col:nth-child(2) { animation-delay: .80s; }
.dash__bar-col:nth-child(3) { animation-delay: .90s; }
.dash__bar-col:nth-child(4) { animation-delay: 1.00s; }
.dash__bar-col:nth-child(5) { animation-delay: 1.10s; }
.dash__bar-col:nth-child(6) { animation-delay: 1.20s; }
.dash__bar-col:nth-child(7) { animation-delay: 1.30s; }

/* Review grid stagger on tab change */
.reviews__grid > *:nth-child(1) { animation-delay: 0ms; }
.reviews__grid > *:nth-child(2) { animation-delay: 80ms; }
.reviews__grid > *:nth-child(3) { animation-delay: 160ms; }
.reviews__grid > *:nth-child(4) { animation-delay: 240ms; }
.reviews__grid > *:nth-child(5) { animation-delay: 320ms; }
.reviews__grid > *:nth-child(6) { animation-delay: 400ms; }

/* ==========================================================================
   3. No-JS fallback
   Reveal targets start at opacity:0 and are un-hidden by IntersectionObserver.
   Without JS that observer never runs, so every below-fold section would stay
   invisible. `.js` is set on <html> by an inline script in the document head;
   when it is absent, everything renders in its final state immediately.
   ========================================================================== */

html:not(.js) [data-reveal],
html:not(.js) [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .word__in { transform: none !important; }
html:not(.js) .draw path,
html:not(.js) .draw line,
html:not(.js) .draw circle,
html:not(.js) .draw polyline { stroke-dashoffset: 0 !important; }
html:not(.js) .timeline::before { transform: scaleY(1) !important; }

/* ==========================================================================
   4. Reduced motion — hard override
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal targets must land in their final visible state */
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .word__in { transform: none !important; }
  .draw path, .draw line, .draw circle, .draw polyline { stroke-dashoffset: 0 !important; }

  /* Kill ambient + floating motion outright */
  body::before,
  .hero__chip--1, .hero__chip--2, .hero__chip--3,
  .pill__dot, .mobile-action__pulse::after { animation: none !important; }

  /* Neutralise 3D so nothing renders skewed without its motion context */
  .dash, .why__img { transform: none !important; }
  .tilt { transform: none !important; }
  .cursor-dot { display: none !important; }
}