/* ============================================================================
   mm-motion.css  —  Site-wide subtle "cinematic" motion + polish layer
   Mission Metrics / Impact Trading Academy
   ----------------------------------------------------------------------------
   SAFETY CONTRACT (read before editing):
   1. Reveal "hidden" state (opacity:0) applies ONLY under html.mm-motion-ready,
      a class that mm-motion.js adds at runtime. If JS is disabled or throws,
      the class is never added and NOTHING is ever hidden.
   2. prefers-reduced-motion: reduce  -> the JS does nothing (never adds the
      class), AND these @media rules force everything visible as a second guard.
   3. All animation is opacity/transform only (GPU-cheap, no layout shift).
   4. Colours are theme-var aware; the sheen uses a translucent white sweep that
      reads correctly in both light and dark themes and never affects text.
   ========================================================================== */

/* ---- Scroll reveal ------------------------------------------------------- */
/* Hidden pre-state is gated behind html.mm-motion-ready => fail-safe.        */
html.mm-motion-ready .mm-reveal{
  opacity:0;
  transform:translateY(16px) scale(.985);
  will-change:opacity, transform;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),
             transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--mm-delay, 0ms);
}
html.mm-motion-ready .mm-reveal.mm-in{
  opacity:1;
  transform:none;
}

/* ---- Hero / title sheen -------------------------------------------------- */
/* Runs ONCE, ~6.5s after a short delay. Overlay is translucent + pointer-none */
/* so it can never hide or block the underlying text.                         */
html.mm-motion-ready .mm-sheen{position:relative; isolation:isolate;}
html.mm-motion-ready .mm-sheen::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
  z-index:1;
  background:linear-gradient(105deg,
              transparent 32%,
              rgba(255,255,255,.12) 48%,
              rgba(255,255,255,.04) 56%,
              transparent 68%);
  transform:translateX(-130%);
  animation:mm-sheen 6.5s cubic-bezier(.2,.7,.2,1) 1.1s 1 both;
}
@keyframes mm-sheen{
  0%   {transform:translateX(-130%);}
  55%  {transform:translateX(130%);}
  100% {transform:translateX(130%);}
}

/* ---- Button / interactive micro-interactions ---------------------------- */
/* Pure CSS, no layout shift (transform + shadow only). Honors reduced-motion */
/* by living entirely inside the no-preference media query.                   */
@media (prefers-reduced-motion: no-preference){
  .btn, .tool-link, .connector-btn, button.go, .go, .run,
  .wdbtn, .qbtn, .jump-link, .toggle-btn, .logout-btn, .explain-trigger,
  .nav-tool{
    transition:transform .18s cubic-bezier(.2,.7,.2,1),
               box-shadow .18s cubic-bezier(.2,.7,.2,1),
               filter .18s ease;
  }
  .btn:hover, .tool-link:hover, .connector-btn:hover, button.go:hover,
  .go:hover, .run:hover, .wdbtn:hover, .qbtn:hover, .jump-link:hover,
  .toggle-btn:hover, .logout-btn:hover, .explain-trigger:hover, .nav-tool:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,0,0,.12);
  }
  .btn:active, .tool-link:active, .connector-btn:active, button.go:active,
  .go:active, .run:active, .wdbtn:active, .qbtn:active, .jump-link:active,
  .toggle-btn:active, .logout-btn:active, .explain-trigger:active, .nav-tool:active{
    transform:translateY(1px) scale(.995);
    box-shadow:0 1px 4px rgba(0,0,0,.14);
    transition-duration:.06s;
  }
}

/* ---- Reduced-motion hard guard (second line of defense) ------------------ */
@media (prefers-reduced-motion: reduce){
  html.mm-motion-ready .mm-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  html.mm-motion-ready .mm-sheen::after{
    display:none !important;
    animation:none !important;
  }
}