/* OneQode Design System - Motion CSS bundle (splash + loader only) */
/* Standalone bundle for consumers who only want the splash/loader motion recipes, */
/* without the full recipes.css (which also ships the un-namespaced button recipe and others). */

/* OneQode Design System - Splash recipe
 *
 * Full-screen brand intro: the Gordian-knot mark draws itself, then an optional
 * wordmark fades in. Shown/hidden via <html> state classes set by the OQMotion
 * controller (build/js/oq-motion.js). Reads DS tokens with hex fallbacks so it
 * renders even before tokens.css loads. See patterns/splash docs.
 */
@keyframes oq-draw { to { stroke-dashoffset: 0; } }
@keyframes oq-fill { from { fill-opacity: 0; } to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes oq-word { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes oq-grow { 0% { transform: scale(.60); opacity: 0; } 24% { opacity: 1; } 72% { transform: scale(1.035); } 100% { transform: scale(1); } }

.oq-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  background: var(--color-dark, #0d0f10);
  transition: opacity .5s ease;
}
html.oq-splash-play { overflow: hidden; }
html.oq-splash-play .oq-splash { display: flex; }
html.oq-splash-done .oq-splash { display: none !important; }
.oq-splash.oq-leaving { opacity: 0; }

.oq-splash__knot {
  width: 104px; height: 104px; overflow: visible;
  transform: scale(.60); transform-origin: center;
  animation: oq-grow 1.7s cubic-bezier(.22,.68,.24,1) forwards;
}
.oq-splash__knot path {
  fill: var(--color-foreground, #f5f6f7); fill-opacity: 0;
  stroke: var(--color-foreground, #f5f6f7); stroke-width: .9;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: oq-draw 1.5s cubic-bezier(.55,.08,.24,.98) forwards,
             oq-fill .7s ease 1.28s forwards;
}
.oq-splash__word {
  font-family: var(--font-display, sans-serif); font-weight: 600;
  font-size: 1.4rem; letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase; color: var(--color-foreground, #f5f6f7);
  opacity: 0; animation: oq-word .7s ease 1.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .oq-splash__knot { animation: none; transform: scale(1); }
  .oq-splash__knot path { animation: none; fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; }
  .oq-splash__word { animation: none; opacity: 1; }
}

/* OneQode Design System - Loader recipe
 *
 * Two looping knot marks: an in-page block loader (.oq-loader--block) for
 * content that streams in, and a fixed global nav loader (.oq-navloader) for
 * server round-trips (toggled by html.oq-navloading via the OQMotion
 * navLoader controller). Reads DS tokens with hex fallbacks.
 */
@keyframes oq-spin { to { transform: rotate(360deg); } }
@keyframes oq-trace { 0% { stroke-dashoffset: 1; } 48% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }

.oq-loader { display: inline-flex; align-items: center; justify-content: center; }
.oq-loader svg { width: 34px; height: 34px; overflow: visible; animation: oq-spin 2s linear infinite; }
.oq-loader svg path {
  fill: none; stroke: var(--color-foreground, #f5f6f7); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: oq-trace 1.7s ease-in-out infinite;
}
.oq-loader--block { flex-direction: column; gap: 14px; padding: 56px 0; }
.oq-loader--block svg { width: 46px; height: 46px; }
.oq-loader__label {
  font-family: var(--font-display, sans-serif); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted, rgba(255,255,255,.7));
}

.oq-navloader {
  position: fixed; z-index: 9998; right: 22px; bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 15px 8px 11px;
  background: var(--color-surface-elevated, rgb(15,17,18)); border: 1px solid var(--color-line, rgba(255,255,255,.1));
  border-radius: 999px; box-shadow: 0 6px 22px rgba(0,0,0,.10);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
html.oq-navloading .oq-navloader { opacity: 1; transform: translateY(0); }
.oq-navloader svg { width: 22px; height: 22px; overflow: visible; animation: oq-spin 2s linear infinite; }
.oq-navloader svg path {
  fill: none; stroke: var(--color-foreground, #f5f6f7); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: oq-trace 1.7s ease-in-out infinite;
}
.oq-navloader__label {
  font-family: var(--font-display, sans-serif); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted, rgba(255,255,255,.7));
}

@media (prefers-reduced-motion: reduce) {
  .oq-loader svg, .oq-navloader svg { animation: none; }
  .oq-loader svg path, .oq-navloader svg path { animation: oq-trace 2.4s ease-in-out infinite; }
}