/* motion.css — OneModus intro (login one-shot) + slow-load page loader.
   Uses only existing :root tokens. All animation is opacity/transform/clip-path/stroke. */

:root{
  --om-intro-bar: 900ms;    /* loading-bar sweep L->R */
}

/* ============ Slow-load page loader (unchanged) ============
   transition.js shows this ONLY when an in-app nav is actually slow (next page
   not arrived within ~170ms); fast loads show nothing. The cloud-O mark drawing
   in a loop — a plain "loading", no fly-to-corner. */
#om-loader{
  position: fixed; inset: 0; z-index: 8500; display: grid; place-items: center;
  background: var(--bg); opacity: 0; transition: opacity .18s ease;
}
#om-loader.is-on{ opacity: 1; }
.om-loader-mark{ width: clamp(88px, 11vw, 132px); aspect-ratio: 474 / 387; color: var(--primary);
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--primary) 45%, transparent)); }
.om-loader-mark path, .om-loader-mark circle{ stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: om-loader-draw 1.15s ease-in-out infinite; }
@keyframes om-loader-draw{ 0%{ stroke-dashoffset: 1 } 55%{ stroke-dashoffset: 0 } 100%{ stroke-dashoffset: 0; opacity: .3 } }

/* ============ Intro (minimal: mark + wordmark + loading bar) ============ */
#om-intro{
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg); display: grid; place-items: center;
}
.om-intro-lockup{ display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.om-intro-mark{
  width: clamp(96px, 14vw, 150px); aspect-ratio: 474 / 387; color: var(--primary);
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--primary) 55%, transparent));
  opacity: 0; animation: om-mark-in 420ms ease-out forwards;
}
@keyframes om-mark-in{ to{ opacity: 1; } }
/* the cloud-O draws itself in (stroke sweep) alongside the loading bar — needs
   pathLength='1' set on each path/circle in transition.js (mirrors the loader). */
.om-intro-mark path, .om-intro-mark circle{ stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: om-mark-draw 900ms ease-in-out forwards; }
@keyframes om-mark-draw{ to{ stroke-dashoffset: 0; } }
.om-intro-word{ font-family: var(--font-display); font-weight: var(--w-bold);
  letter-spacing: var(--ls-tight); font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1; color: var(--fg); }
.om-bar{ position: relative; height: 3px; width: min(52%, 300px);
  background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.om-bar-fill{ position: absolute; inset: 0 100% 0 0; background: var(--primary); border-radius: inherit;
  animation: om-bar-fill var(--om-intro-bar) cubic-bezier(.4,0,.2,1) forwards; }
@keyframes om-bar-fill{ to{ inset: 0 0 0 0; } }
#om-intro.is-done{ transition: opacity 260ms ease; opacity: 0; }

/* hide the landing content until the intro overlay covers it (pre-paint) */
html.om-intro-pending .cockpit{ visibility: hidden; }

/* ============ Welcome note (post-login, on the landing) — unchanged ============ */
#om-welcome{ position: fixed; inset: 0; z-index: 7000; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity 500ms ease; }
#om-welcome.is-show{ opacity: 1; }
#om-welcome .w{ font-family: var(--font-display); font-weight: var(--w-bold);
  letter-spacing: var(--ls-tight); font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--fg);
  text-shadow: 0 2px 24px rgba(0,0,0,.5); }
#om-welcome .w b{ color: var(--primary); }

/* ============ Reduced motion ============
   Product decision (internal tool): the brand motion ALWAYS plays. Override the
   app-wide reduce-motion clamp in style.css for THESE elements only (higher
   specificity + !important), so every OTHER app animation keeps honoring
   reduce-motion. html[data-no-motion] is the way to fully disable this motion. */
@media (prefers-reduced-motion: reduce){
  #om-loader .om-loader-mark path,
  #om-loader .om-loader-mark circle{ animation-duration: 1.15s !important; }
  #om-intro .om-intro-mark{ animation-duration: 420ms !important; }
  #om-intro .om-intro-mark path,
  #om-intro .om-intro-mark circle{ animation-duration: 900ms !important; }
  #om-intro .om-bar-fill{ animation-duration: var(--om-intro-bar) !important; }
  #om-intro.is-done{ transition-duration: 260ms !important; }
  #om-welcome{ transition-duration: 500ms !important; }
}

/* ============ Dev kill switch (the only full-off) ============ */
html[data-no-motion] #om-loader,
html[data-no-motion] #om-intro,
html[data-no-motion] #om-welcome{ display: none !important; }
html[data-no-motion].om-intro-pending .cockpit{ visibility: visible !important; }