/*
 * es-motion.css — Execution Space motion tokens + keyframe library
 * ─────────────────────────────────────────────────────────────────
 * The motion layer of the design system. Import AFTER es-tokens.css:
 *   <link rel="stylesheet" href="../_components/es-tokens.css">
 *   <link rel="stylesheet" href="../design/es-motion.css">
 *
 * Principles (see design/DESIGN-GUIDE.md):
 *   1. Enter with purpose — motion always travels toward its resting place.
 *   2. Settle fast — long tails, short attacks (use --eout / --espring).
 *   3. Never decorate without meaning — ambient motion stays sub-perceptual.
 *   4. Respect the visitor — everything here collapses under
 *      prefers-reduced-motion.
 */

:root {
  /* ── Duration scale ── */
  --t-instant: 90ms;    /* state flips: hover fills, toggles           */
  --t-quick:   180ms;   /* micro-interactions: buttons, links          */
  --t-move:    320ms;   /* element travel: cards, panels               */
  --t-reveal:  700ms;   /* scroll reveals, section entrances           */
  --t-build:   1100ms;  /* hero builds, mark assembly                  */
  --t-ambient: 6s;      /* loops that live in the background           */

  /* ── Easing (extends es-tokens: --ease / --eout / --espring) ── */
  --e-in:      cubic-bezier(0.55, 0, 1, 0.45);      /* exits            */
  --e-flat:    cubic-bezier(0.4, 0, 0.6, 1);        /* ambient loops    */

  /* ── Travel distances ── */
  --d-micro:  4px;      /* hover lifts */
  --d-step:   20px;     /* reveals     */
  --d-leap:   48px;     /* entrances   */
}

/* ── Reveal primitives (match the .r/.in convention used on /web/) ── */
.m-rise    { opacity: 0; transform: translateY(var(--d-step)); }
.m-drop    { opacity: 0; transform: translateY(calc(-1 * var(--d-step))); }
.m-grow    { opacity: 0; transform: scale(.92); }
.m-rise.m-in, .m-drop.m-in, .m-grow.m-in { opacity: 1; transform: none; }
.m-rise, .m-drop  { transition: opacity var(--t-reveal) var(--eout), transform var(--t-reveal) var(--eout); }
.m-grow           { transition: opacity var(--t-reveal) var(--eout), transform var(--t-reveal) var(--espring); }
.m-d1 { transition-delay: 90ms }  .m-d2 { transition-delay: 180ms }
.m-d3 { transition-delay: 270ms } .m-d4 { transition-delay: 360ms }

/* ── Keyframe library ── */

/* entrance: rise into place (hero copy) */
@keyframes m-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ambient: star twinkle (matches es-stars.js) */
@keyframes m-twinkle {
  0%, 100% { opacity: .1;  transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.5); }
}

/* ambient: soft float for badges / marks */
@keyframes m-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ambient: breathing pulse (never below .4 opacity — sub-perceptual) */
@keyframes m-breathe {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* build: diamond pops in with spring overshoot */
@keyframes m-pop {
  0%   { opacity: 0; transform: scale(0) rotate(45deg); }
  70%  { opacity: 1; transform: scale(1.18) rotate(45deg); }
  100% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* accent: caret blink (block cursor, terminal idiom) */
@keyframes m-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* accent: scanline sweep (easter-egg + loading idiom) */
@keyframes m-scan {
  from { transform: translateX(-101%); }
  to   { transform: translateX(101%); }
}

/* accent: constellation line draw */
@keyframes m-draw {
  from { stroke-dashoffset: var(--len, 100); }
  to   { stroke-dashoffset: 0; }
}

/* egg: hyperspace streak */
@keyframes m-warp {
  from { transform: translateX(0) scaleX(.05); opacity: 0; }
  15%  { opacity: 1; }
  to   { transform: translateX(120vw) scaleX(1); opacity: 0; }
}

/* egg: rocket arc (paired with a rotate on the inner group) */
@keyframes m-launch {
  from { transform: translate(-12vw, 108vh); }
  to   { transform: translate(112vw, -18vh); }
}

/* ── Reduced motion: collapse everything to its resting state ── */
@media (prefers-reduced-motion: reduce) {
  .m-rise, .m-drop, .m-grow { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}