/* =========================================================================
   NATUAS LABS LLP — Animations
   Subtle, editorial, restrained. Respects prefers-reduced-motion globally
   (see base rule in style.css) — this file only defines the motion itself.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Scroll reveal (driven by IntersectionObserver in js/animations.js)
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > * { }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal[data-delay="5"] { transition-delay: 450ms; }
.reveal[data-delay="6"] { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   Hero load sequence
   ------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(36px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-copy .eyebrow    { opacity: 0; animation: fadeUp 700ms var(--ease-premium) 120ms forwards; }
.hero-copy h1           { opacity: 0; animation: fadeUp 800ms var(--ease-premium) 260ms forwards; }
.hero-copy .lede        { opacity: 0; animation: fadeUp 800ms var(--ease-premium) 420ms forwards; }
.hero-copy .hero-cta    { opacity: 0; animation: fadeUp 800ms var(--ease-premium) 560ms forwards; }
.hero-visual            { opacity: 0; animation: riseIn 1000ms var(--ease-premium) 400ms forwards; }

@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow, .hero-copy h1, .hero-copy .lede, .hero-copy .hero-cta, .hero-visual {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Ambient background drift — very slow, subtle, decorative only
   ------------------------------------------------------------------------- */
@keyframes driftSlow {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2%, 2%) scale(1.03); }
  100% { transform: translate(0, 0) scale(1); }
}
.hero::before { animation: driftSlow 22s ease-in-out infinite; }
.hero::after  { animation: driftSlow 26s ease-in-out infinite reverse; }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* -------------------------------------------------------------------------
   Floating particles (decorative, aria-hidden in markup)
   ------------------------------------------------------------------------- */
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.5; }
  50% { transform: translateY(-14px) translateX(6px); opacity: 0.9; }
}
.hero-particle { animation: floatParticle 6s ease-in-out infinite; }
.hero-particle:nth-child(2) { animation-duration: 7.5s; animation-delay: -2s; }
.hero-particle:nth-child(3) { animation-duration: 5.5s; animation-delay: -1s; }

@media (prefers-reduced-motion: reduce) {
  .hero-particle { animation: none; }
}

/* -------------------------------------------------------------------------
   Value / flow icon micro-interaction support
   ------------------------------------------------------------------------- */
.icon-badge svg { transition: transform 380ms var(--ease-premium); }

/* -------------------------------------------------------------------------
   Page transition fade-in (body-level, avoids blank flash)
   ------------------------------------------------------------------------- */
body.pt-ready main { animation: fadeIn 500ms var(--ease-premium); }
@media (prefers-reduced-motion: reduce) {
  body.pt-ready main { animation: none; }
}

/* -------------------------------------------------------------------------
   Mobile panel micro-motion for nav links
   ------------------------------------------------------------------------- */
.mobile-panel .nav-list a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-premium), transform 420ms var(--ease-premium);
}
.mobile-panel.is-open .nav-list a { opacity: 1; transform: translateY(0); }
.mobile-panel.is-open .nav-list a:nth-child(1) { transition-delay: 80ms; }
.mobile-panel.is-open .nav-list a:nth-child(2) { transition-delay: 130ms; }
.mobile-panel.is-open .nav-list a:nth-child(3) { transition-delay: 180ms; }
.mobile-panel.is-open .nav-list a:nth-child(4) { transition-delay: 230ms; }
.mobile-panel.is-open .nav-list a:nth-child(5) { transition-delay: 280ms; }
.mobile-panel.is-open .nav-list a:nth-child(6) { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  .mobile-panel .nav-list a { opacity: 1; transform: none; transition: none; }
}