/* Hero motion: wordless looping line-art (video -> shared map -> card). Shared component:
   markup in hero-motion.js, no dependency on the landing page. */
.hero-motion { display: block; width: 100%; color: hsl(var(--foreground, 222 45% 20%)); --hm-olive: #778d2c; --hm-blue: #1d4ed8; }
@media (prefers-color-scheme: dark) { .hero-motion { --hm-olive: #a3bf4a; --hm-blue: #8aa8f0; } }
.hero-motion svg { display: block; width: 100%; height: auto; overflow: visible; }

.hero-motion .hm-ink    { stroke: hsl(var(--foreground, 222 45% 20%)); }
.hero-motion .hm-inkF   { fill: hsl(var(--foreground, 222 45% 20%)); }
.hero-motion .hm-card   { fill: hsl(var(--card, 42 32% 98%)); }
.hero-motion .hm-muted  { fill: hsl(var(--muted, 42 29% 87%)); }
.hero-motion .hm-oliveF { fill: var(--hm-olive); }
.hero-motion .hm-oliveS { stroke: var(--hm-olive); }
.hero-motion .hm-blueS  { stroke: var(--hm-blue); }
.hero-motion .hm-soft   { fill: hsl(var(--foreground, 222 45% 20%) / .22); }

/* every element shares one 8s clock */
.hero-motion * { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.3,.7,.3,1); }
.hero-motion .hm-a { transform-box: fill-box; transform-origin: center; }

/* 1) two people in different places, linked by video */
.hm-a-tileL { animation-name: hm-tileL; }
.hm-a-tileR { animation-name: hm-tileR; }
@keyframes hm-tileL {
  0% { opacity: 0; transform: translateY(8px); } 6% { opacity: 1; transform: none; }
  32% { transform: none; } 40%,56% { opacity: 1; transform: scale(.5); }
  62% { opacity: 0; transform: translateX(104px) scale(.3); } 100% { opacity: 0; }
}
@keyframes hm-tileR {
  0% { opacity: 0; transform: translateY(8px); } 9% { opacity: 1; transform: none; }
  32% { transform: none; } 40%,56% { opacity: 1; transform: scale(.5); }
  62% { opacity: 0; transform: translateX(-104px) scale(.3); } 100% { opacity: 0; }
}
.hm-a-signal { animation-name: hm-signal; }
@keyframes hm-signal { 0%,8% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 20% { transform: translateX(136px); opacity: 1; } 23% { opacity: 0; } 26% { opacity: 1; transform: translateX(136px); } 34% { transform: translateX(0); opacity: 1; } 38%,100% { opacity: 0; } }
.hm-a-link { animation-name: hm-link; stroke-dasharray: 3 6; }
@keyframes hm-link { 0%,6% { opacity: 0; } 12% { opacity: 1; } 32% { opacity: 1; } 38%,100% { opacity: 0; } }
.hm-a-bob { animation-name: hm-bob; }
@keyframes hm-bob { 0%,100% { transform: translateY(0); } 14% { transform: translateY(-1.5px); } 20% { transform: translateY(0); } 26% { transform: translateY(-1.5px); } 32% { transform: translateY(0); } }
.hm-a-steam { animation-name: hm-steam; }
@keyframes hm-steam { 0%,100% { opacity: .2; transform: translateY(2px); } 20% { opacity: .9; transform: translateY(-2px); } 40% { opacity: .2; transform: translateY(-5px); } }
.hm-a-sun { animation-name: hm-sun; }
@keyframes hm-sun { 0%,100% { transform: scale(1); } 25% { transform: scale(1.18); } 50% { transform: scale(1); } }

/* 2) each pin lands on one map and they meet */
.hm-a-map { animation-name: hm-map; }
@keyframes hm-map {
  0%,32% { opacity: 0; transform: scale(.92); } 40% { opacity: 1; transform: none; } 56% { opacity: 1; transform: none; }
  62% { opacity: 0; transform: scale(.8); } 100% { opacity: 0; }
}
.hm-a-road { animation-name: hm-road; stroke-dasharray: 1; stroke-dashoffset: 1; }
@keyframes hm-road { 0%,34% { stroke-dashoffset: 1; } 46%,100% { stroke-dashoffset: 0; } }
.hm-a-pinL { animation-name: hm-pinL; }
.hm-a-pinR { animation-name: hm-pinR; }
@keyframes hm-pinL {
  0%,40% { opacity: 0; transform: translate(0,-14px); } 45% { opacity: 1; transform: translate(0,0); }
  49% { transform: translate(0,0); } 58% { opacity: 1; transform: translate(26px,0); } 62%,100% { opacity: 0; transform: translate(26px,0) scale(.6); }
}
@keyframes hm-pinR {
  0%,42% { opacity: 0; transform: translate(0,-14px); } 47% { opacity: 1; transform: translate(0,0); }
  51% { transform: translate(0,0); } 58% { opacity: 1; transform: translate(-22px,-10px); } 62%,100% { opacity: 0; transform: translate(-22px,-10px) scale(.6); }
}
.hm-a-tether { animation-name: hm-tether; stroke-dasharray: 1; }
@keyframes hm-tether { 0%,40% { opacity: 0; stroke-dashoffset: 1; } 46% { opacity: .9; stroke-dashoffset: 0; } 56% { opacity: .9; } 61%,100% { opacity: 0; } }
.hm-a-route { animation-name: hm-route; stroke-dasharray: 1; }
@keyframes hm-route { 0%,48% { opacity: 0; stroke-dashoffset: 1; } 51% { opacity: 1; } 58% { opacity: 1; stroke-dashoffset: 0; } 63%,100% { opacity: 0; stroke-dashoffset: 0; } }
.hm-a-shutter { animation-name: hm-shutter; }
@keyframes hm-shutter { 0%,58% { opacity: 0; transform: scale(.2); } 60% { opacity: .9; } 72%,100% { opacity: 0; transform: scale(6); } }

/* 3) the moment is kept as one card */
.hm-a-card { animation-name: hm-card; }
@keyframes hm-card {
  0%,60% { opacity: 0; transform: translateY(8px) scale(.85) rotate(0deg); } 68% { opacity: 1; transform: translateY(0) scale(1.03) rotate(-3deg); }
  72% { transform: scale(1) rotate(-3deg); } 92% { opacity: 1; transform: scale(1) rotate(-3deg); } 98%,100% { opacity: 0; transform: scale(1) rotate(-3deg) translateY(-4px); }
}
.hm-a-stamp { animation-name: hm-stamp; }
@keyframes hm-stamp { 0%,72% { opacity: 0; transform: scale(1.8) rotate(-18deg); } 77% { opacity: 1; transform: scale(1) rotate(-10deg); } 92% { opacity: 1; } 98%,100% { opacity: 0; } }
.hm-a-line1 { animation-name: hm-line1; transform-origin: left center !important; }
.hm-a-line2 { animation-name: hm-line2; transform-origin: left center !important; }
@keyframes hm-line1 { 0%,70% { transform: scaleX(0); } 78%,100% { transform: scaleX(1); } }
@keyframes hm-line2 { 0%,74% { transform: scaleX(0); } 82%,100% { transform: scaleX(1); } }

/* Still frame (data-still, and reduced motion): only the finished card. */
.hero-motion[data-still] * { animation: none !important; }
.hero-motion[data-still] :is(.hm-a-tileL, .hm-a-tileR, .hm-a-map, .hm-a-link, .hm-a-signal, .hm-a-pinL, .hm-a-pinR, .hm-a-route, .hm-a-tether, .hm-a-shutter) { opacity: 0; }
.hero-motion[data-still] .hm-a-card { opacity: 1; transform: rotate(-3deg); }
.hero-motion[data-still] .hm-a-stamp { opacity: 1; transform: rotate(-10deg); }
@media (prefers-reduced-motion: reduce) {
  .hero-motion * { animation: none !important; }
  .hero-motion :is(.hm-a-tileL, .hm-a-tileR, .hm-a-map, .hm-a-link, .hm-a-signal, .hm-a-pinL, .hm-a-pinR, .hm-a-route, .hm-a-tether, .hm-a-shutter) { opacity: 0; }
  .hero-motion .hm-a-card { opacity: 1; transform: rotate(-3deg); }
  .hero-motion .hm-a-stamp { opacity: 1; transform: rotate(-10deg); }
}