/* ============================================================
   Animations & Motion
   PRD §7 — CSS-only, no heavy libs
   ============================================================ */

/* ---------- star field (PRD §9 verbatim) ---------- */
.star-field {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 42%  7%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 33%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 55%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 70%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 50%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 80%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 88%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 92%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 42%, rgba(255,255,255,0.16) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 60%, rgba(255,255,255,0.12) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: star-breathe 8s ease-in-out infinite alternate;
}
@keyframes star-breathe {
  from { opacity: 0.6; }
  to   { opacity: 1.0; }
}

/* ---------- hero entrance ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up 0.7s ease-out 0.1s forwards;
}
.fade-up--d1 { animation-delay: 0.25s; }
.fade-up--d2 { animation-delay: 0.4s; }
.fade-up--d3 { animation-delay: 0.55s; }
.fade-up--d4 { animation-delay: 0.7s; }
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--stagger-1 { transition-delay: 0.08s; }
.reveal--stagger-2 { transition-delay: 0.16s; }
.reveal--stagger-3 { transition-delay: 0.24s; }

/* ---------- scroll cue bounce ---------- */
.scroll-cue-bounce {
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 0.85; }
}

/* ---------- form submit (button) ---------- */
.btn--loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn--loading::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  top: 50%; left: 50%;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(10, 6, 20, 0.3);
  border-top-color: var(--bg-deep);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- success checkmark ---------- */
.checkmark-anim {
  display: inline-block;
  animation: pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pop-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .star-field { animation: none; }
  .fade-up, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .scroll-cue-bounce { animation: none; }
  * { scroll-behavior: auto !important; }
}