/* MOTION_VIS_01 · 2026-07-31
 * VISUAL #14 — rich motion (Msg+Voice) when OS allows · nuclear reduce-motion.
 * Unifies data-motion + data-vy-reduce-motion mirrors. Cascade-LAST over swarm a11y/graphic.
 * Cache: ?v=20260731-mv01
 */
:root {
  --mv01-cobalt: #1d4ed8;
  --mv01-sky: #38bdf8;
  --mv01-mint: #2ccf9b;
  --mv01-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mv01-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes mv01-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes mv01-sheen {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes mv01-eq {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}
@keyframes mv01-presence {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(29, 78, 216, 0.16); }
}
@keyframes mv01-liquid {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes mv01-mesh {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(1.2%, -0.8%, 0) scale(1.02); }
}

/* ── Rich motion — OS allows + JS mirror rich ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="rich"] body[data-page="messenger"] .toast,
  html[data-motion="rich"] body[data-page="messenger"] .toast-host > *,
  html[data-motion="rich"] body[data-page="messenger"] .net-banner,
  html[data-motion="rich"] body[data-page="messenger"] .vy-nis-sheet,
  html[data-motion="rich"] body[data-page="messenger"] .tg-sheet,
  html[data-motion="rich"] body[data-page="messenger"] .vd-drawer.open,
  html[data-motion="rich"] body[data-page="voice"] .toast,
  html[data-motion="rich"] body[data-page="voice"] .banner,
  html[data-motion="rich"] body[data-page="voice"] .modal.open,
  html[data-motion="rich"] body[data-page="voice"] .sheet.open {
    animation: mv01-rise 340ms var(--mv01-ease) both;
  }

  /* Messenger — soft parallel presence on active thread + send press */
  html[data-motion="rich"] body[data-page="messenger"] .conv.active .av,
  html[data-motion="rich"] body[data-page="messenger"] .th-head .av,
  html[data-motion="rich"] body[data-page="messenger"] .tg-av {
    animation: mv01-presence 2.8s var(--mv01-ease) infinite;
  }
  html[data-motion="rich"] body[data-page="messenger"] .tg-comp .send:active,
  html[data-motion="rich"] body[data-page="messenger"] .composer .cbtns .send:active,
  html[data-motion="rich"] body[data-page="messenger"] #tgSend:active {
    transform: scale(0.9);
    transition: transform 140ms var(--mv01-spring);
  }
  html[data-motion="rich"] body[data-page="messenger"] .btn.icon:hover,
  html[data-motion="rich"] body[data-page="messenger"] .vy-msg-newchat:hover,
  html[data-motion="rich"] body[data-page="messenger"] .vy-product-launcher:hover {
    transform: translateY(-1px);
    transition: transform 160ms var(--mv01-spring), background 160ms ease;
  }

  /* Liquid brand sheen — only when motion OK (overrides always-on graphic loops) */
  html[data-motion="rich"] body[data-page="messenger"] .cl-head h2,
  html[data-motion="rich"] body[data-page="messenger"] .cl-head h2.vy-top-brand,
  html[data-motion="rich"] body[data-page="messenger"] .vy-msg-chrome h2 {
    animation: mv01-liquid 6.4s var(--mv01-ease) infinite !important;
    background-size: 240% 100% !important;
  }
  html[data-motion="rich"] body[data-page="messenger"]::after {
    animation: mv01-mesh 22s var(--mv01-ease) infinite !important;
  }

  /* Voice — EQ bars + control press + join CTA sheen */
  html[data-motion="rich"] body[data-page="voice"] .eq-bar,
  html[data-motion="rich"] body[data-page="voice"] .vxg-eq span,
  html[data-motion="rich"] body[data-page="voice"] .vnd-eq span,
  html[data-motion="rich"] body[data-page="voice"] [data-eq] span {
    transform-origin: bottom center;
    animation: mv01-eq 1.1s var(--mv01-ease) infinite;
  }
  html[data-motion="rich"] body[data-page="voice"] .eq-bar:nth-child(2),
  html[data-motion="rich"] body[data-page="voice"] .vxg-eq span:nth-child(2),
  html[data-motion="rich"] body[data-page="voice"] .vnd-eq span:nth-child(2) {
    animation-delay: 120ms;
  }
  html[data-motion="rich"] body[data-page="voice"] .eq-bar:nth-child(3),
  html[data-motion="rich"] body[data-page="voice"] .vxg-eq span:nth-child(3),
  html[data-motion="rich"] body[data-page="voice"] .vnd-eq span:nth-child(3) {
    animation-delay: 240ms;
  }
  html[data-motion="rich"] body[data-page="voice"] .ctrl button:active,
  html[data-motion="rich"] body[data-page="voice"] .controls button:active,
  html[data-motion="rich"] body[data-page="voice"] .vc-btn:active {
    transform: scale(0.92);
    transition: transform 140ms var(--mv01-spring);
  }
  html[data-motion="rich"] body[data-page="join"] .vij-cta,
  html[data-motion="rich"] body[data-page="join"] .btn.primary,
  html[data-motion="rich"] body[data-page="voice"] .btn.primary {
    background-size: 220% 100%;
    animation: mv01-sheen 4.8s var(--mv01-ease) infinite;
  }
}

/* When JS says rich but MQ missing — still allow soft transitions only on chrome */
html[data-motion="rich"]:not([data-vy-reduce-motion="1"]) body[data-page="messenger"] .msg,
html[data-motion="rich"]:not([data-vy-reduce-motion="1"]) body[data-page="voice"] .pcard {
  transition: transform 180ms var(--mv01-spring), box-shadow 200ms var(--mv01-ease);
}

/* ── NUCLEAR reduce — MQ + both attr mirrors ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html body[data-page="messenger"] *,
  html body[data-page="messenger"] *::before,
  html body[data-page="messenger"] *::after,
  html body[data-page="voice"] *,
  html body[data-page="voice"] *::before,
  html body[data-page="voice"] *::after,
  html body[data-page="join"] *,
  html body[data-page="join"] *::before,
  html body[data-page="join"] *::after,
  html body[data-page="invite"] *,
  html body[data-page="invite"] *::before,
  html body[data-page="invite"] *::after,
  html body[data-page="remote"] *,
  html body[data-page="remote"] *::before,
  html body[data-page="remote"] *::after {
    animation: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Freeze graphic atmosphere — keep static wash, no loops */
  html body[data-page="messenger"]::before,
  html body[data-page="messenger"]::after,
  html body[data-page="voice"]::before,
  html body[data-page="voice"]::after {
    animation: none !important;
    transform: none !important;
  }
  html body[data-page="messenger"]::before { opacity: 0.22 !important; }
  html body[data-page="messenger"]::after { opacity: 0.4 !important; }
  html body[data-page="voice"] .vxg-atmos,
  html body[data-page="join"] .vij-aurora {
    display: none !important;
  }

  /* Static speaking / live — visible, no pulse */
  html body[data-page="voice"] .pcard.speaking {
    box-shadow: 0 0 0 2px var(--mv01-cobalt) !important;
  }
  html body[data-page="voice"] .pcard.speaking .ring::before,
  html body[data-page="voice"] .pcard.speaking .ring::after {
    display: none !important;
    animation: none !important;
  }

  html body[data-page="messenger"] .btn.icon:hover,
  html body[data-page="messenger"] .vy-msg-newchat:hover,
  html body[data-page="messenger"] .tg-comp .send:active,
  html body[data-page="voice"] .ctrl button:active,
  html body[data-page="voice"] .vc-btn:active {
    transform: none !important;
  }
}

/* Attr mirrors (JS) — same nuclear kill without relying on MQ alone */
html[data-motion="reduce"] body[data-page="messenger"] *,
html[data-motion="reduce"] body[data-page="messenger"] *::before,
html[data-motion="reduce"] body[data-page="messenger"] *::after,
html[data-motion="reduce"] body[data-page="voice"] *,
html[data-motion="reduce"] body[data-page="voice"] *::before,
html[data-motion="reduce"] body[data-page="voice"] *::after,
html[data-motion="reduce"] body[data-page="join"] *,
html[data-motion="reduce"] body[data-page="join"] *::before,
html[data-motion="reduce"] body[data-page="join"] *::after,
html[data-vy-reduce-motion="1"] body[data-page="messenger"] *,
html[data-vy-reduce-motion="1"] body[data-page="messenger"] *::before,
html[data-vy-reduce-motion="1"] body[data-page="messenger"] *::after,
html[data-vy-reduce-motion="1"] body[data-page="voice"] *,
html[data-vy-reduce-motion="1"] body[data-page="voice"] *::before,
html[data-vy-reduce-motion="1"] body[data-page="voice"] *::after {
  animation: none !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html[data-motion="reduce"] body[data-page="voice"] .vxg-atmos,
html[data-vy-reduce-motion="1"] body[data-page="voice"] .vxg-atmos,
html[data-motion="reduce"] body[data-page="join"] .vij-aurora,
html[data-vy-reduce-motion="1"] body[data-page="join"] .vij-aurora {
  display: none !important;
}

/* Keep cobalt focus without motion */
html body[data-page="messenger"] :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
html body[data-page="voice"] :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--mv01-cobalt);
  outline-offset: 2px;
}