/* ==========================================================================
   Motion: page intros, toasts, small keyframes, and the reduced-motion switch.
   Everything here is decoration. The page works the same with it removed.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes slip-in {
  from { opacity: 0; transform: translateX(110%) rotate(4deg); }
  to { opacity: 1; transform: none; }
}
@keyframes slip-out {
  to { opacity: 0; transform: translateX(110%) rotate(4deg); }
}
@keyframes flip-in {
  from { transform: rotateX(-90deg); }
  to { transform: rotateX(0); }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 91, 31, .55); }
  100% { box-shadow: 0 0 0 10px rgba(255, 91, 31, 0); }
}

/* Page intro: header pieces, then content, staggered. */
.js .page-head > *,
.js .track-head > * { animation: rise .7s var(--ease-out) both; }
.js .page-head > :nth-child(2) { animation-delay: .05s; }
.js .page-head > :nth-child(3) { animation-delay: .12s; }
.js .page-head > :nth-child(4) { animation-delay: .2s; }
.js .track-head > :nth-child(2) { animation-delay: .06s; }
.js .track-head > :nth-child(3) { animation-delay: .12s; }
.js .track-head > :nth-child(4) { animation-delay: .18s; }
.js .slips > *, .js .jobs > *, .js .ledger > *, .js .kpis > *, .js .desks > * {
  animation: rise .7s var(--ease-out) both;
  animation-delay: calc(.18s + var(--i, 0) * 55ms);
}
.js .page-head__num { animation: rise 1.1s var(--ease-out) both; }

.toast { animation: slip-in .55s var(--ease-out) both; }
.toast:nth-child(2) { animation-delay: .1s; }
.toast.is-leaving { animation: slip-out .35s var(--ease-snap) forwards; }

.role-chip.is-new .role-chip__face { animation: flip-in .5s var(--ease-out) both; }
.dot { animation: pulse-ring 1.6s ease-out infinite; }

/* Landing: hidden for a moment until GSAP takes over (an inline timer un-hides it regardless). */
.hero-wait .hero__title, .hero-wait .hero__foot, .hero-wait .hero__tag { opacity: 0; }
.js .fate__stamp.is-waiting { opacity: 0; transform: scale(2.2) rotate(-18deg); }

/* Screen shake used by the stamp moments */
.is-shaking { animation: shake .2s linear; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 4px); }
}

/* ---------- prefers-reduced-motion: calm, static equivalents ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .slip { transform: none !important; }
  .flap { display: none; }
  .cursor-dot, .cursor-ring { display: none; }
  .is-shaking { animation: none; }
  .hero-wait .hero__title, .hero-wait .hero__foot, .hero-wait .hero__tag { opacity: 1; }
  .js .fate__stamp.is-waiting { opacity: 1; transform: rotate(-7deg); }
  .scroll-cue i { animation: none; }
}