/* ARIA Motion runtime v1.0 (2026-10-11): initial states, modes, X-ray, toggle.
 * Pair with motion.js. Re-token per brand by setting the --m-* vars from the
 * brand package, e.g. :root{--m-ease:var(--oa-ease);--m-accent:var(--oa-blue)}.
 * Nothing in here is a brand color: the X-ray chrome is deliberately neutral. */

:root {
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-dur-fast: 0.2s;
  --m-dur-base: 0.3s;
  --m-dur-slow: 0.5s;
  --m-accent: #0071bc;      /* glide highlight + focus; override per brand */
  --m-xray-code: #2f7cf6;   /* X-ray: drawn in code */
  --m-xray-footage: #f0a020;/* X-ray: generated or shot footage */
  --m-xray-graphic: #2fb36a;/* X-ray: the page's drawn piece (rule 8) */
  --m-xray-bad: #e23b3b;    /* X-ray: a moving bit with no job, footage with no credit */
}

/* Initial states only once JS is confirmed (html.m-js is added by motion.js
 * at parse time; put `<script>document.documentElement.classList.add('m-js')</script>`
 * in <head> when motion.js is deferred, so nothing flashes). No JS = nothing hidden. */
html.m-js:not([data-motion="off"]) [data-m="reveal"],
html.m-js:not([data-motion="off"]) [data-m="reveal-l"],
html.m-js:not([data-motion="off"]) [data-m="reveal-r"],
html.m-js:not([data-motion="off"]) [data-m="reveal-s"] { opacity: 0; }
html.m-js:not([data-motion="off"]) [data-m="stagger"] > * { opacity: 0; }

/* Off mode and reduced motion: final states, nothing moves. */
html[data-motion="off"] [data-m],
html[data-motion="off"] [data-m="stagger"] > * { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-m], [data-m="stagger"] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-m="buddy"] { display: none !important; }
  [data-m="marquee"] { overflow-x: auto; }
}

/* Marquee track spacing */
[data-m="marquee"] > * { flex: 0 0 auto; padding-right: 3rem; }

/* Bento glide highlight (the panel that slides between cells) */
.m-glide-highlight {
  border-radius: 12px;
  background: color-mix(in srgb, var(--m-accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-accent) 35%, transparent);
  z-index: 0;
}
[data-m="glide"] > *:not(.m-glide-highlight) { position: relative; z-index: 1; }

/* Buddy: the character sits above the page, never catches the pointer */
[data-m="buddy"] { pointer-events: none; will-change: transform; visibility: hidden; }
[data-m="buddy"].m-buddy-ready { visibility: visible; }
html[data-motion="off"] [data-m="buddy"] { display: none !important; }

/* X-ray overlay */
.m-xray-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; pointer-events: none; z-index: 9000; }
.m-xray-box { position: absolute; box-sizing: border-box; border: 2px dashed var(--m-xray-code); border-radius: 6px; }
.m-xray-box.m-xray-footage { border-color: var(--m-xray-footage); border-style: solid; }
.m-xray-box.m-xray-graphic { border-color: var(--m-xray-graphic); }
.m-xray-box.m-xray-bad { border-color: var(--m-xray-bad); }
.m-xray-tag {
  position: absolute; left: -2px; top: -2px; transform: translateY(-100%);
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em;
  color: #fff; background: var(--m-xray-code); padding: 2px 6px; border-radius: 4px 4px 4px 0; white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
}
.m-xray-footage .m-xray-tag { background: var(--m-xray-footage); color: #1a1a1a; }
.m-xray-graphic .m-xray-tag { background: var(--m-xray-graphic); color: #0f1a12; }
.m-xray-bad .m-xray-tag { background: var(--m-xray-bad); color: #fff; }
.m-xray-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 9001;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; background: #111; border: 1px solid #333;
  padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

/* Toggle pill (rendered only when <body data-m-toggle>) */
.m-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 9001; display: flex; align-items: center; gap: 4px;
  background: #111; color: #fff; border: 1px solid #333; border-radius: 999px; padding: 4px 6px 4px 12px;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, Inter, Arial, sans-serif; box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.m-toggle-label { opacity: 0.6; margin-right: 6px; }
.m-toggle button {
  appearance: none; border: 0; background: transparent; color: #fff; font: inherit; padding: 6px 10px; border-radius: 999px; cursor: pointer;
  transition: background var(--m-dur-fast) var(--m-ease), color var(--m-dur-fast) var(--m-ease);
}
.m-toggle button:hover { background: #2a2a2a; }
.m-toggle button[aria-pressed="true"] { background: #fff; color: #111; }
@media (max-width: 640px) { .m-xray-badge { left: 8px; right: 8px; bottom: 64px; font-size: 11px; } .m-toggle { right: 8px; bottom: 8px; } }
@media print { .m-toggle, .m-xray-layer, .m-xray-badge, [data-m="buddy"] { display: none !important; } }