/* ============================================================
   LUMARKEN — animations.css
   Scroll reveals + micro-interactions. All motion is disabled
   under prefers-reduced-motion (see base.css).
   ============================================================ */

/* Scroll-triggered reveal (class applied by js/main.js) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--raw-dur-slow) var(--raw-ease-out),
    transform var(--raw-dur-slow) var(--raw-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers — set on siblings */
.reveal[data-delay="1"] { --reveal-delay: 90ms; }
.reveal[data-delay="2"] { --reveal-delay: 180ms; }
.reveal[data-delay="3"] { --reveal-delay: 270ms; }
.reveal[data-delay="4"] { --reveal-delay: 360ms; }

/* No-JS / no-IntersectionObserver fallback */
.no-js .reveal,
.no-observer .reveal {
  opacity: 1;
  transform: none;
}

/* Hero entrance */
@keyframes hero-label-in {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes hero-cta-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes hero-media-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* Slow drift for decorative hero shapes */
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(1.5%, -2%) rotate(1.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Scroll cue */
@keyframes cue-drop {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(6px); opacity: 0.5; }
}

/* Timeline line draw */
@keyframes line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Orbit diagram (What we do) */
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes sat-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 7px)); }
}

/* Client marquee — track is two identical halves, so -50% loops
   seamlessly. Paused on hover/focus; static under reduced motion. */
@keyframes marquee {
  to { transform: translateX(-50%); }
}