/* ============================================================================
   animations.css — aurora L→R wave + sway, film grain motion, scroll-cue
   float, and the scroll-entrance utility (.fade-up) via IntersectionObserver.
   ============================================================================ */

/* Lava-lamp drift: each blob (an ellipse) wanders widely in 2D while rotating
   and swelling — under the heavy blur the rotating ellipse reads as the two
   colours morphing and waving into each other. 0%==100% → seamless; 4 uneven
   stops + different paths/durations (base.css) keep it organic and never static.
   Transform-only → stays on the compositor (smooth). */
@keyframes lava1 {
  0%,100% { transform: translate(0, 0)        rotate(0deg)   scale(1);    }
  20%     { transform: translate(22vw, -22vh) rotate(46deg)  scale(1.32); }
  45%     { transform: translate(-20vw, 16vh) rotate(-36deg) scale(0.74); }
  70%     { transform: translate(17vw, 20vh)  rotate(28deg)  scale(1.24); }
}
@keyframes lava2 {
  0%,100% { transform: translate(0, 0)        rotate(0deg)   scale(1.1);  }
  25%     { transform: translate(-24vw, 18vh) rotate(-44deg) scale(0.72); }
  55%     { transform: translate(20vw, -20vh) rotate(50deg)  scale(1.4);  }
  80%     { transform: translate(-12vw, -15vh)rotate(-22deg) scale(1.08); }
}
@keyframes lava3 {
  0%,100% { transform: translate(0, 0)        rotate(0deg)   scale(0.92); }
  30%     { transform: translate(23vw, 19vh)  rotate(40deg)  scale(1.3);  }
  60%     { transform: translate(-20vw, -16vh)rotate(-42deg) scale(1.12); }
  85%     { transform: translate(13vw, -22vh) rotate(24deg)  scale(0.84); }
}

/* Whole-layer gentle SWAY (not a full spin) → adds a liquid tilt to the band. */
@keyframes auroraspin { 0%,100% { transform: rotate(-3deg) scale(1.06); }
                        50%     { transform: rotate( 3deg) scale(1.06); } }

/* Scroll cue — slow liquid float instead of a hard blink (keeps the mood) */
@keyframes cuefloat { 0%,100% { transform: translateY(0);   opacity: 0.45; }
                      50%     { transform: translateY(5px); opacity: 0.85; } }

/* Scroll entrance — subtle: small rise + de-blur, on the house curve */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(3px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              filter var(--dur) var(--ease);
  will-change: transform, opacity;
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Stagger helper: set --i on children */
.stagger > .fade-up { transition-delay: calc(var(--i, 0) * 0.07s); }

/* Hero load intro — slow & with a clearly visible de-blur, wider stagger,
   so the page "arrives" softly and the blur resolve is easy to appreciate. */
.hero .fade-up { filter: blur(12px); transform: translateY(24px);
                 transition-duration: 1.9s; }
/* higher specificity than the base `.fade-up.in` so the de-blur actually wins */
.hero .fade-up.in { filter: blur(0); transform: translateY(0); }
.hero .stagger > .fade-up { transition-delay: calc(var(--i, 0) * 0.18s); }

@media (prefers-reduced-motion: reduce) {
  .aurora, .aurora__blob { animation: none !important; }
  .scrollcue span { animation: none !important; }
  .nav { transition: none; opacity: 1; transform: none; filter: none; }
  .fade-up { transition: none; opacity: 1; transform: none; filter: none; }
}