/* Home motion piece: hero (DESIGN 6.11.3). Tokens only; transform and opacity only.
   The plain rules are the designed end state; the start pose lives under [data-motion-state="armed"]
   and the keyframes under [data-motion-state="play"]. */

/* Hero intro. Storyboard (about 4 s, once per visit, click or Esc skips):
   0.0  ten tool clocks DEAL in, each hand at its own time; "Ten tools. Ten logins. Ten bills."
   0.4  hands TICK out of step
   1.3  every hand SNAPS to twelve at once (the master clock pulse)
   1.6  the clocks COLLAPSE into one dial
   2.0  the Pace dial SWEEPS in, the baton DROPS, the signal disc LANDS (the one accent)
   2.8  the wordmark SLIDES out of the mark, the line RISES, twelve app glyphs SET in a row
   The plain rules below are the end frame (also no JS and reduced motion). */
.hero-plate {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  background: var(--pace-video-ground); border: 1px solid var(--pace-video-control-border); border-radius: var(--pace-radius-overlay);
}
.hero-intro { container-type: inline-size; color: var(--pace-video-control-ink); }
.hero-intro .hi-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hi-dials, .hi-claim { display: none; }
.hi-mark { fill: var(--pace-video-control-ink); }
.hi-signal { fill: var(--pace-signal); }
.hi-word { fill: var(--pace-video-control-ink); }
.hi-glyph { color: var(--pace-video-ink-2); }
.hi-face { fill: none; stroke: var(--pace-video-control-border); stroke-width: 3; }
.hi-ticks { stroke: var(--pace-video-ink-2); stroke-width: 4; }
.hi-hand { stroke: var(--pace-video-control-ink); stroke-width: 5; stroke-linecap: round; }
.hi-hub { fill: var(--pace-video-control-ink); }
.hi-label { fill: var(--pace-video-ink-2); font: 500 22px var(--pace-font-mono); text-anchor: middle; letter-spacing: 0.02em; }
.hi-line {
  position: absolute; left: 6%; right: 6%; top: 58%; margin: 0; text-align: center;
  font: 500 clamp(14px, 2.6cqw, 30px)/1.3 var(--pace-font); color: var(--pace-video-ink-2);
}
.hi-claim {
  position: absolute; left: 4%; right: 4%; top: 7%; margin: 0; text-align: center;
  font-family: var(--pace-font-display); font-stretch: calc(var(--pace-display-wdth) * 1%); font-weight: 620;
  font-size: clamp(16px, 4cqw, 46px); line-height: 1.1; letter-spacing: var(--pace-display-tracking);
}
.hi-claim span { display: inline-block; }
.hi-skip {
  position: absolute; right: 16px; bottom: 16px; display: none; align-items: center; min-height: 44px; padding: 0 18px;
  color: var(--pace-video-control-ink); background: var(--pace-video-control-bg);
  border: 1px solid var(--pace-video-control-border); border-radius: var(--pace-radius-full);
  font: 500 14px/20px var(--pace-font); cursor: pointer;
}
@container (max-width: 520px) {
  .hi-label, .hi-glyphs { display: none; }
  .hi-skip { right: 8px; bottom: 8px; min-height: 36px; padding: 0 12px; font-size: 13px; }
}

/* SVG parts turn about their own box. */
.hi-dial, .hi-hand, .hi-dialarc, .hi-baton, .hi-signal, .hi-word, .hi-glyph { transform-box: fill-box; transform-origin: 50% 50%; }
.hi-hand { transform-origin: 50% 88%; transform: rotate(var(--a)); }
.hi-glyph { transform-origin: 50% 100%; }

/* First paint while motion.js loads (inline script in index.html), then the armed start pose. */
.hi-pending .hero-intro:not([data-motion-state]) > * { opacity: 0; }
.hero-intro[data-motion-state="armed"] :is(.hi-dialarc, .hi-baton, .hi-signal, .hi-word, .hi-glyph, .hi-line) { opacity: 0; }

/* Play */
.hero-intro[data-motion-state="play"] .hi-dials { display: block; }
.hero-intro[data-motion-state="play"] .hi-skip { display: inline-flex; }
.hero-intro[data-motion-state="play"] .hi-claim { display: block; animation: hi-out var(--pace-dur-quick) var(--pace-ease-exit) 1.55s both; }
.hero-intro[data-motion-state="play"] .hi-claim span { animation: hi-rise var(--pace-dur-base) var(--pace-ease) both; animation-delay: calc(0.08s + var(--i) * 0.14s); }
.hero-intro[data-motion-state="play"] .hi-dial { animation: hi-dial 2.2s both; animation-delay: calc(var(--i) * 0.045s); }
.hero-intro[data-motion-state="play"] .hi-va .hi-hand { animation: hi-hand-a 1.6s steps(1, end) both; }
.hero-intro[data-motion-state="play"] .hi-vb .hi-hand { animation: hi-hand-b 1.6s steps(1, end) both; }
.hero-intro[data-motion-state="play"] .hi-vc .hi-hand { animation: hi-hand-c 1.6s steps(1, end) both; }
.hero-intro[data-motion-state="play"] .hi-dialarc { animation: hi-sweep 0.42s var(--pace-ease) 2.0s both; }
.hero-intro[data-motion-state="play"] .hi-baton { animation: hi-drop var(--pace-dur-base) var(--pace-ease) 2.28s both; }
.hero-intro[data-motion-state="play"] .hi-signal { animation: hi-land var(--pace-dur-slow) var(--pace-ease) 2.52s both; }
.hero-intro[data-motion-state="play"] .hi-word { animation: hi-slide var(--pace-dur-slow) var(--pace-ease) 2.8s both; }
.hero-intro[data-motion-state="play"] .hi-line { animation: hi-rise var(--pace-dur-slow) var(--pace-ease) 3.08s both; }
.hero-intro[data-motion-state="play"] .hi-glyph { animation: hi-set var(--pace-dur-base) var(--pace-ease) both; animation-delay: calc(3.3s + var(--i) * 0.04s); }
.hero-intro[data-motion-state="play"] .hi-skip { animation: hi-in var(--pace-dur-base) var(--pace-ease) 0.6s both; }

@keyframes hi-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hi-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes hi-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hi-set { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hi-dial {
  0% { opacity: 0; transform: translateY(26px) scale(0.9); animation-timing-function: var(--pace-ease); }
  16% { opacity: 1; transform: none; }
  74% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1); }
  95%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.16); }
}
/* Hands tick out of step, then all jump to twelve together at 1.3 s (81%). */
@keyframes hi-hand-a { 0% { transform: rotate(var(--a)); } 28% { transform: rotate(calc(var(--a) + 30deg)); } 58% { transform: rotate(calc(var(--a) + 60deg)); } 81%, 100% { transform: rotate(360deg); } }
@keyframes hi-hand-b { 0% { transform: rotate(var(--a)); } 44% { transform: rotate(calc(var(--a) + 30deg)); } 81%, 100% { transform: rotate(360deg); } }
@keyframes hi-hand-c { 0% { transform: rotate(var(--a)); } 18% { transform: rotate(calc(var(--a) + 30deg)); } 40% { transform: rotate(calc(var(--a) + 60deg)); } 64% { transform: rotate(calc(var(--a) + 90deg)); } 81%, 100% { transform: rotate(360deg); } }
@keyframes hi-sweep { from { opacity: 0; transform: rotate(-150deg) scale(0.45); } to { opacity: 1; transform: none; } }
@keyframes hi-drop { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
@keyframes hi-land { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: none; } }
@keyframes hi-slide { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }