/* Motion. Loaded last. One easing family, slow and deliberate: things arrive, they don't bounce.
   Only transform, opacity and clip-path move. No glows, no gradients, no shadows.
   Everything here is switched off for people who ask their device for reduced motion. */

:root {
  --ease: cubic-bezier(.16, 1, .3, 1);        /* expo out: fast start, long settle */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

@keyframes mv-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mv-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes mv-right { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes mv-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes mv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -5% 0 0); } }
@keyframes mv-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mv-col { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mv-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes mv-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
@keyframes mv-drift { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.09) translate(-1.6%, .9%); } }
@keyframes mv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes mv-marquee { to { transform: translateX(-50%); } }
@keyframes mv-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Staggered entrances. motion.js tags new content with .mv and an index --i. */
.mv { animation: mv-up .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms + var(--d, 0ms)); }
.mv-l { animation: mv-left .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }

/* ---------- Front door ---------- */
body.welcome #map { animation: mv-drift 60s var(--ease-io) infinite alternate; transform-origin: 62% 55%; }
.signin-card > * { animation: mv-up 1s var(--ease) both; }
.signin-card > .wordmark { animation-delay: .05s; }
.signin-card > .hero { animation: none; }
.signin-card > .lede { animation-delay: .9s; }
.signin-card > .cta, .signin-card > .hub-go { animation-delay: 1.05s; }
.signin-card > #email-toggle, .signin-card > .form-msg { animation-delay: 1.15s; }
.signin-card > .fine { animation-delay: 1.25s; }
.signin-card.is-hub > .hub-go { animation-delay: .5s; }
.hero-line { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-line .ch { display: inline-block; opacity: 1 !important; filter: none !important; animation: mv-rise 1.1s var(--ease) both !important; animation-delay: calc(.12s + var(--i) * 32ms) !important; }
.hero-2 { animation: mv-wipe 1.4s var(--ease) .55s both !important; }
.lede-rot { display: block; position: relative; overflow: hidden; height: 1.5em; }
.lede-rot span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .9s var(--ease), opacity .9s var(--ease); }
.lede-rot span.out { transform: translateY(-100%); opacity: 0; }
.lede-rot span.next { transform: translateY(100%); opacity: 0; }
.legal { animation: mv-fade 1s 1.4s both; }
.marquee { animation: mv-fade 1.2s 1s both; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important; }
.marquee-track { flex-wrap: nowrap !important; width: max-content !important; padding: 0 !important; animation: mv-marquee 90s linear infinite !important; }
.mq-logo { transition: opacity .4s; }
.marquee:hover .marquee-track { animation-play-state: paused !important; }
.marquee:hover .mq-logo:hover { opacity: .95; }

/* HQ: two fine rings breathing outward. Faces arrive from HQ outward. */
.hq i { display: block !important; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--teal); animation: mv-ring 4s var(--ease) infinite; pointer-events: none; }
.hq i + i { animation-delay: 2s; }
.hq img { position: relative; z-index: 2; }
.hq-big { animation: mv-pop 1.1s var(--ease) .3s both !important; }
.hq-big .hq-tag { animation: mv-up .9s var(--ease) .8s both !important; }
.wf { animation: mv-pop .9s var(--ease) both !important; }
.wf-name { animation: mv-fade .8s .35s both; }

/* ---------- Hub directory ---------- */
.hub-row { position: relative; transition: color .35s; }
.hub-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.hub-row:hover::after, .hub-row:focus-visible::after { transform: scaleX(1); }
.hub-row .hub-logo { transition: transform .7s var(--ease); }
.hub-row:hover .hub-logo { transform: translateY(-3px); }
.hub-row img { transition: opacity .5s; }
.hub-row:hover img { opacity: 1; }
.hub-row b { transition: color .35s; }
.hub-group h3 { position: relative; }

/* ---------- Chrome: panels, pages, cards, drawers ---------- */
.sections:not([hidden]) { animation: mv-fade .6s both; }
.sec-label.swap { animation: mv-up .55s var(--ease) both; }
#panel:not([hidden]), .ht-panel:not([hidden]) { animation: mv-left .7s var(--ease) both; }
.ht-card:not([hidden]) { animation: mv-right .6s var(--ease) both !important; }
.drawer:not([hidden]) { animation: mv-right .55s var(--ease) both; }
.card:not([hidden]) { animation: mv-up .55s var(--ease) both; }
.palette:not([hidden]) .palette-box { animation: mv-up .45s var(--ease) both !important; }
.toast { animation: mv-right .6s var(--ease) both !important; }

/* Interactive states ease rather than snap. */
.btn, .tab, .x-nav-i, .x-seg button, .ht-row, .row, .ht-table tbody tr, .ichip, .lb, .pal-row, .ht-chip, .bc-leg, .x-nav-i b, .link, a { transition: background-color .3s, color .3s, border-color .3s, opacity .3s; }
.x-nav-i span { transition: transform .5s var(--ease); }
.x-nav-i:hover span { transform: translateX(4px); }
.x-nav-i.is-on span { transform: translateX(4px); }
.doc-links a, .ht-links a, .x-links a, .x-list a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .55s var(--ease), color .3s; }
.doc-links a:hover, .ht-links a:hover, .x-links a:hover, .x-list a:hover { background-size: 100% 1px; }
.doc-links a, .ht-links a, .x-links a { background-size: 100% 1px; background-image: linear-gradient(rgba(26,175,169,.35), rgba(26,175,169,.35)); }
.doc-links a:hover, .ht-links a:hover, .x-links a:hover { background-image: linear-gradient(currentColor, currentColor); }

/* ---------- Data drawing in ---------- */
.ht-hbar-t i, .ht-inbar i { transform-origin: left center; animation: mv-bar 1.2s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
.ht-bar path, .ht-bar rect:not(.ht-hit) { transform-box: fill-box; transform-origin: 50% 100%; animation: mv-col 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms + 100ms); }
.ht-ramp i { transform-origin: left center; animation: mv-bar .9s var(--ease) both; }
.ht-ramp i:nth-child(2) { animation-delay: .06s; } .ht-ramp i:nth-child(3) { animation-delay: .12s; } .ht-ramp i:nth-child(4) { animation-delay: .18s; } .ht-ramp i:nth-child(5) { animation-delay: .24s; }
.x-head, .ht-page-head { position: relative; }
.x-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--teal); transform-origin: left; animation: mv-line 1.2s var(--ease) .1s both; opacity: .7; }
.ht-kpis { position: relative; }
.ht-kpi { animation: mv-up .8s var(--ease) both; }
.ht-kpi:nth-child(2) { animation-delay: .06s; } .ht-kpi:nth-child(3) { animation-delay: .12s; } .ht-kpi:nth-child(4) { animation-delay: .18s; }
.ht-kpi:nth-child(5) { animation-delay: .24s; } .ht-kpi:nth-child(6) { animation-delay: .3s; } .ht-kpi:nth-child(7) { animation-delay: .36s; }

/* Dossier sections reveal as they scroll into view. */
.doc section { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.doc section.in { opacity: 1; transform: none; }
.doc-head > * { animation: mv-up .9s var(--ease) both; }
.doc-head > div { animation-delay: .08s; }
.doc-note { animation: mv-up .9s var(--ease) .18s both; }

/* Company tabs: the panel settles in on each switch; accordions open softly. */
.dk-panel:not([hidden]) { animation: mv-up .6s var(--ease) both; }
.dk-panel:not([hidden]) .dk-tile, .dk-panel:not([hidden]) .dk-offer, .dk-panel:not([hidden]) .dk-person, .dk-panel:not([hidden]) .dk-flow li, .dk-panel:not([hidden]) .dk-card, .dk-panel:not([hidden]) .acc { animation: mv-up .7s var(--ease) both; }
.dk-tile:nth-child(2), .dk-offer:nth-child(2), .dk-person:nth-child(2), .dk-flow li:nth-child(2), .dk-card:nth-child(2), .acc:nth-of-type(2) { animation-delay: .04s !important; }
.dk-tile:nth-child(3), .dk-offer:nth-child(3), .dk-person:nth-child(3), .dk-flow li:nth-child(3), .acc:nth-of-type(3) { animation-delay: .08s !important; }
.dk-tile:nth-child(4), .dk-offer:nth-child(4), .dk-person:nth-child(4), .dk-flow li:nth-child(4), .acc:nth-of-type(4) { animation-delay: .12s !important; }
.dk-tile:nth-child(5), .dk-offer:nth-child(5), .dk-person:nth-child(5), .dk-flow li:nth-child(5), .acc:nth-of-type(5) { animation-delay: .16s !important; }
.dk-tile:nth-child(6), .dk-offer:nth-child(6), .dk-person:nth-child(6), .dk-flow li:nth-child(6), .acc:nth-of-type(6) { animation-delay: .2s !important; }
.dk-tile:nth-child(n+7), .dk-offer:nth-child(n+7), .dk-person:nth-child(n+7), .acc:nth-of-type(n+7) { animation-delay: .24s !important; }
.acc[open] p, .more[open] > div { animation: mv-up .5s var(--ease) both; }

/* Loading placeholders breathe. */
.skel-row, .ht-skel { animation: mv-pulse 1.6s var(--ease-io) infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .doc section { opacity: 1; transform: none; }
  .hq i { display: none !important; }
}

/* Rotating line wraps to two lines inside the card. */
.lede-rot { height: 3em; }
.lede-rot span { white-space: normal; right: 0; }
body.welcome .leaflet-control-zoom { display: none; }
.legal { position: static !important; margin: 14px 0 0; display: flex; gap: 16px; font-size: 12px; }
.doc section.dk-panel { opacity: 1; transform: none; transition: none; }