/* Hero motion (Views/Shared/_HeroMotion.cshtml + Scripts/hero-motion.js).
   Every colour comes from landing.css's theme variables so the animation
   follows the dark/light toggle - SVG presentation attributes cannot use
   var(), so the SVG carries classes and the colours are set here. The few
   --hm-* tokens below are the animation-only shades landing.css has no
   equivalent for; see docs/coding-standards.md "Theming". */
.hm-section { padding: 64px 0 72px; }
.hm-section .section-header { margin-bottom: 32px; }
.hm-sub { max-width: 640px; margin: 0 auto; color: var(--text-secondary); }

.hm-stage {
    --hm-track:       #1E3A52;
    --hm-on-accent:   #080E1A;
    --hm-amber-text:  var(--amber);
    --hm-glow-cyan:   .34;
    --hm-glow-amber:  .22;
    --hm-grid-op:     .05;
    --hm-plate:       #F4F9FF;
    --hm-plate-line:  transparent;

    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-base);
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .hm-stage {
    --hm-track:       #B8C6D8;
    --hm-on-accent:   #FFFFFF;
    --hm-amber-text:  #B45309;
    --hm-glow-cyan:   .16;
    --hm-glow-amber:  .12;
    --hm-grid-op:     .07;
    --hm-plate-line:  #DCE3EC;
}
.hm-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hm-stage text { font-family: var(--font-display); }

/* gradients and background */
.hm-bg-top      { stop-color: var(--bg-alt); }
.hm-bg-bottom   { stop-color: var(--bg-base); }
.hm-glow-c      { stop-color: var(--cyan); stop-opacity: var(--hm-glow-cyan); }
.hm-glow-a      { stop-color: var(--amber); stop-opacity: var(--hm-glow-amber); }
.hm-glow-0      { stop-opacity: 0; }
.hm-title-from  { stop-color: var(--text-primary); }
.hm-title-to    { stop-color: var(--cyan-hover); }
.hm-grid-line   { stroke: var(--text-primary); stroke-opacity: var(--hm-grid-op); fill: none; }

/* text */
.hm-sub-text    { fill: var(--text-secondary); }
.hm-ink         { fill: var(--text-primary); }
.hm-lane-a      { fill: var(--cyan); }
.hm-lane-b      { fill: var(--hm-amber-text); }

/* tracks and fills */
.hm-track       { stroke: var(--hm-track); fill: none; }
.hm-fill-a      { stroke: var(--cyan); fill: none; }
.hm-fill-b      { stroke: var(--amber); fill: none; }

/* nodes */
.hm-node-ring   { fill: var(--bg-card); stroke: var(--hm-track); }
.hm-node-core-a { fill: var(--cyan); }
.hm-node-core-b { fill: var(--amber); }
.hm-halo-a      { stroke: var(--cyan-hover); fill: none; }
.hm-halo-b      { stroke: var(--amber); fill: none; }
.hm-tick        { stroke: var(--hm-on-accent); fill: none; }
.hm-node-label  { fill: var(--text-secondary); }
.hm-node-label.is-on { fill: var(--text-primary); }

/* truck and voucher packet */
.hm-truck-body  { fill: var(--cyan); }
.hm-truck-cab   { fill: var(--text-primary); }
.hm-truck-glass { fill: var(--bg-alt); }
.hm-truck-line  { fill: var(--hm-on-accent); fill-opacity: .55; }
.hm-wheel       { fill: var(--bg-base); stroke: var(--text-primary); }
.hm-packet      { fill: var(--amber); }
.hm-packet-line { fill: var(--hm-on-accent); fill-opacity: .55; }
.hm-packet-seal { fill: var(--hm-on-accent); fill-opacity: .75; }

/* UTR badge */
.hm-utr-base    { fill: var(--bg-card); stroke: var(--green); }
.hm-utr-pill    { fill: var(--green); fill-opacity: .16; }
.hm-utr-tick    { stroke: var(--green); fill: none; }
.hm-utr-text    { fill: var(--green); }

/* closing */
.hm-ring        { stroke: var(--cyan); fill: none; }
.hm-plate       { fill: var(--hm-plate); stroke: var(--hm-plate-line); stroke-width: 1.5; }
.hm-pill        { fill: var(--bg-card); stroke: var(--hm-track); }
.hm-dot-a       { fill: var(--cyan); }
.hm-dot-b       { fill: var(--amber); }

@media (max-width: 640px) {
    .hm-section { padding: 40px 0 48px; }
    .hm-stage { border-radius: var(--radius-md); }
}