/* motion.css — every keyframe and every tier rule in one sheet (R4).

   Gating vocabulary (motion.js sets the attribute):
     body[data-motion="off"]                  nothing moves, ever
     body[data-motion="light"]                phone-safe motion
     body[data-motion="full"]                 the desk: everything
   A rule that should run on both moving tiers is written as
   body:not([data-motion="off"]); one that belongs only to the desk is
   written as body[data-motion="full"]. Text that must be read never
   animates (DESIGN §1); numbers count up and settle within 900 ms.

   Geometry never comes from an inline style attribute (CSP style-src
   'self'): everything here is a class, a keyframe or an SVG attribute. */

/* ── tier "off": one rule pair, same as Calm Mode always did ─────── */
body[data-motion="off"] *,
body[data-motion="off"] *::before,
body[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}
body[data-motion="off"] .royal-sky,
body[data-motion="off"] .fx-scanlines::before,
body[data-motion="off"] .fx-flicker::after { display: none; }

/* Desk-only ambience: the CRT layers and the living sky. */
body:not([data-motion="full"]) .royal-sky,
body:not([data-motion="full"]) .fx-scanlines::before,
body:not([data-motion="full"]) .fx-flicker::after { display: none; }

/* ── the living sky (canvas, full tier only; drawn by sky.js) ────── */
.royal-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
body[data-motion="full"] .grid-bg {
  transition: transform var(--dur-slow) var(--ease-royal);
  will-change: transform;
}

/* ── radars: sweep, draw-in, glow, pulse ─────────────────────────── */
.radar { position: relative; }
.radar svg { overflow: visible; }
.radar .radar-shape {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  fill: currentColor; fill-opacity: .10;
}
.radar .radar-vertex { fill: currentColor; opacity: .95; }
.radar .radar-sweep {
  /* fill is the figure's own gradient, set as an attribute in radar.js */
  opacity: .55;
  transform-origin: 80px 80px;
  animation: radar-sweep 4.2s linear infinite;
}
.radar .radar-sweep-line {
  stroke: currentColor; stroke-width: 1.2; stroke-linecap: round;
  transform-origin: 80px 80px; opacity: .9;
  animation: radar-sweep 4.2s linear infinite;
}
.radar .radar-ring-pulse {
  fill: none; stroke: currentColor; stroke-width: 1; opacity: 0;
  transform-origin: 80px 80px;
}
body:not([data-motion="off"]) .radar.drawing .radar-shape {
  animation: radar-draw var(--dur-ceremony) var(--ease-royal) both;
}
body:not([data-motion="off"]) .radar.drawing .radar-vertex {
  animation: radar-vertex-in var(--dur-ceremony) var(--ease-royal) both;
}
body:not([data-motion="off"]) .radar.updated .radar-shape {
  animation: radar-pulse 700ms var(--ease) 1;
}
body:not([data-motion="off"]) .radar.updated .radar-ring-pulse {
  animation: radar-ring 900ms var(--ease-royal) 1;
}
body[data-motion="off"] .radar .radar-sweep,
body[data-motion="off"] .radar .radar-sweep-line { display: none; }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes radar-draw {
  from { stroke-dashoffset: 1; fill-opacity: 0; }
  60%  { fill-opacity: 0; }
  to   { stroke-dashoffset: 0; fill-opacity: .10; }
}
@keyframes radar-vertex-in {
  from { opacity: 0; r: 0; } to { opacity: .95; r: 2.4; }
}
@keyframes radar-pulse {
  0%   { fill-opacity: .10; filter: drop-shadow(0 0 0 currentColor); }
  40%  { fill-opacity: .32; filter: drop-shadow(0 0 6px currentColor); }
  100% { fill-opacity: .10; filter: drop-shadow(0 0 0 currentColor); }
}
@keyframes radar-ring {
  from { opacity: .8; transform: scale(.3); }
  to   { opacity: 0;  transform: scale(1.15); }
}

/* ── arc gauges fill from zero; quota bars grow ──────────────────── */
body:not([data-motion="off"]) .gauge svg circle[stroke="currentColor"] {
  transition: stroke-dasharray var(--dur-ceremony) var(--ease-royal);
}
body:not([data-motion="off"]) .gauge.filling svg circle[stroke="currentColor"] {
  stroke-dasharray: 0 999;
}
body:not([data-motion="off"]) .quota-track rect[fill="currentColor"] {
  transition: width var(--dur-ceremony) var(--ease-royal);
}
body:not([data-motion="off"]) .spend-line polyline {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: line-draw 1.4s var(--ease-royal) forwards;
}
@keyframes line-draw { to { stroke-dashoffset: 0; } }

/* ── chips, rows, cards, tabs ────────────────────────────────────── */
body:not([data-motion="off"]) .chip-waiting {
  animation: chip-royal 1.8s ease-in-out infinite;
}
@keyframes chip-royal {
  0%, 100% { opacity: 1; text-shadow: 0 0 0 transparent; }
  50%      { opacity: .7; text-shadow: 0 0 8px var(--glow-gold); }
}
body:not([data-motion="off"]) .field-card,
body:not([data-motion="off"]) .win-body > * {
  animation: surface-in var(--dur-slow) var(--ease-royal) both;
}
body:not([data-motion="off"]) .session-row,
body:not([data-motion="off"]) .ministry-row,
body:not([data-motion="off"]) .transcript .msg,
body:not([data-motion="off"]) .ministry-chat .msg {
  animation: row-rise var(--dur-slow) var(--ease-royal) both;
}
@keyframes surface-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes row-rise {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
body:not([data-motion="off"]) .field-tabbar .tab { transition: color var(--dur-base) var(--ease); }
body:not([data-motion="off"]) .field-tabbar .tab[aria-selected="true"] .glyph {
  animation: tab-pop var(--dur-slow) var(--ease-royal);
}
@keyframes tab-pop { 50% { transform: translateY(-3px) scale(1.12); } }

/* ── modals and sheets ───────────────────────────────────────────── */
body:not([data-motion="off"]) .modal-scrim,
body:not([data-motion="off"]) .bottom-sheet-scrim {
  animation: scrim-in var(--dur-base) var(--ease) both;
}
body:not([data-motion="off"]) .modal {
  animation: modal-in var(--dur-slow) var(--ease-royal) both;
}
body:not([data-motion="off"]) .bottom-sheet {
  animation: sheet-up var(--dur-slow) var(--ease-royal) both;
}
@keyframes scrim-in { from { opacity: 0; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ── windows: ceremony on enter, fold on leave, halo on focus ────── */
body[data-motion="full"] .win.entering {
  animation: win-enter var(--dur-ceremony) var(--ease-royal) both;
}
body[data-motion="full"] .win.leaving {
  animation: win-leave var(--dur-slow) var(--ease) both;
  pointer-events: none;
}
body[data-motion="full"] .win {
  transition: box-shadow var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease),
              opacity var(--dur-base) var(--ease);
}
body[data-motion="full"] .win.entering .corner {
  animation: corner-draw var(--dur-ceremony) var(--ease-royal) both;
}
@keyframes win-enter {
  0%   { opacity: 0; transform: scale(.94) translateY(10px); filter: blur(4px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes win-leave {
  to { opacity: 0; transform: scale(.96) translateY(6px); }
}
@keyframes corner-draw {
  from { width: 0; height: 0; opacity: 0; }
  to   { width: 12px; height: 12px; opacity: 1; }
}

/* ── ornament: gold tile rule on title bars, shimmer on the crown ── */
.win-title, .desk-topbar, .field-header, .modal-heading {
  position: relative;
}
.win-title::after, .field-header::after, .desk-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background:
    repeating-linear-gradient(90deg,
      var(--gold-a60) 0 6px, transparent 6px 10px,
      var(--gold-a18) 10px 12px, transparent 12px 18px);
  opacity: .9; pointer-events: none;
}
.crown-mark {
  font-family: var(--font-royal); letter-spacing: .22em;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hot) 40%,
                              var(--gold) 60%, var(--gold-hot) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
body:not([data-motion="off"]) .crown-mark {
  animation: gold-shimmer 6s linear infinite;
}
@keyframes gold-shimmer { to { background-position: 220% 0; } }
.win-title .lbl > span:first-child,
.field-card .card-title,
.modal-heading { font-family: var(--font-royal); letter-spacing: .14em; }
.win-title .lbl .fa, .ministry-names .fa, .field-card .card-title .fa {
  font-family: var(--font-royal-fa); letter-spacing: 0;
}
body[data-motion="full"] .dock-btn {
  transition: box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-royal);
}
body[data-motion="full"] .dock-btn:hover,
body[data-motion="full"] .dock-btn:focus-visible {
  box-shadow: 0 0 18px var(--glow-accent), 0 0 0 1px var(--gold-a35) inset;
  transform: translateX(-2px);
}
body[data-motion="full"] .win.focused {
  box-shadow: 0 22px 60px var(--shadow-70),
              0 0 0 1px var(--gold-a35) inset,
              0 0 34px var(--glow-accent), 0 0 4px var(--glow-gold);
}

/* ── login ceremony ──────────────────────────────────────────────── */
.login-shell .crown-mark {
  display: block; font-size: var(--fs-3xl); text-align: center;
  font-family: var(--font-royal);
}
.login-shell .crown-sigil { width: 96px; height: 96px; margin: 0 auto var(--sp-3); display: block; }
.login-shell .crown-sigil path { fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-linejoin: round; stroke-dasharray: 1; }
.login-shell .crown-sigil .gem { fill: var(--accent); stroke: none; }
body:not([data-motion="off"]) .login-shell .crown-sigil path {
  animation: sigil-draw 1.6s var(--ease-royal) both;
}
body:not([data-motion="off"]) .login-shell .crown-sigil .gem {
  animation: gem-glow 2.6s ease-in-out infinite 1.2s;
  transform-origin: center;
}
body:not([data-motion="off"]) .login-shell h1 {
  animation: title-reveal var(--dur-ceremony) var(--ease-royal) both .5s;
}
body:not([data-motion="off"]) .login-shell .login-form {
  animation: surface-in var(--dur-ceremony) var(--ease-royal) both .9s;
}
body:not([data-motion="off"]) .login-shell input:focus {
  box-shadow: 0 0 0 1px var(--accent), 0 0 22px var(--glow-accent);
  transition: box-shadow var(--dur-base) var(--ease);
}
body:not([data-motion="off"]) .login-shell.departing {
  animation: curtain 700ms var(--ease-royal) forwards;
}
@keyframes sigil-draw { from { stroke-dashoffset: 1; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes gem-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 8px var(--accent)); transform: scale(1.12); }
}
@keyframes title-reveal {
  from { opacity: 0; letter-spacing: .5em; filter: blur(3px); }
  to   { opacity: 1; letter-spacing: .22em; filter: blur(0); }
}
@keyframes curtain { to { opacity: 0; transform: scale(1.02); filter: blur(6px); } }

/* ── numbers that count carry a soft gold trail while moving ─────── */
body:not([data-motion="off"]) .display-num.counting {
  text-shadow: 0 0 10px var(--glow-gold);
  transition: text-shadow var(--dur-slow) var(--ease);
}