/* One authored mobile brand sequence; the document remains the default fallback. */
/* Reserve only an existing desktop-style scrollbar, never space on touch browsers. */
html.intro-scrollbar { scrollbar-gutter: stable; }
.intro-playing,
.intro-playing body { overflow: hidden; }
.mobile-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: #07182d;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  animation: intro-reveal 12s both;
}
.mobile-intro::backdrop { background: transparent; }
.intro-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.intro-stage { position: absolute; inset: 0; overflow: hidden; }
.intro-brand {
  position: absolute;
  top: max(36px, env(safe-area-inset-top));
  left: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 20px/1 var(--display);
  letter-spacing: 0.01em;
  animation: intro-brand 12s both;
}
.intro-brand svg { width: 28px; height: 28px; color: var(--gold); }
.intro-brand b { color: var(--gold); }
.intro-opening {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
  animation: intro-opening 12s both;
}
.intro-opening svg { width: 78px; height: 78px; color: var(--gold); margin-bottom: 28px; animation: intro-star 1.6s cubic-bezier(.16,1,.3,1) both; }
.intro-opening p { color: #fff; font: 700 clamp(25px, 7.5vw, 38px)/1.2 var(--display); letter-spacing: 0.015em; animation: intro-wordmark 1s .25s both; }
.intro-opening p span { color: var(--gold); }
.intro-opening small { margin-top: 20px; color: #c4cfdd; font-size: 8px; letter-spacing: .12em; }
.intro-world { position: absolute; inset: 0; animation: intro-world 12s both; }
.intro-globe { position: absolute; width: min(120vw, 580px, 62svh); max-width: none; height: auto; left: 50%; top: 17%; transform: translateX(-50%); transform-origin: 28% 34%; animation: intro-camera 12s both; }
.intro-route { stroke: #dbb86e; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 2; animation: intro-route 2.9s 3.1s ease-in-out both; }
.intro-route-china { animation-delay: 3.5s; }
.intro-packet { fill: #fff1cd; opacity: 0; offset-distance: 0%; animation: intro-packet 2.9s 3.1s ease-in-out both; }
.intro-packet-china { animation-delay: 3.5s; }
.intro-halo { fill: none; stroke: #dbb86e; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-halo 1.4s 2.7s both; }
.intro-halo-china { animation-delay: 3.1s; }
.intro-halo-canada { animation-delay: 6.1s; }
.intro-country { fill: #e2e9f1; font: 500 13px var(--body); animation: intro-label .6s 1.12s both; }
.intro-country-canada { animation-delay: 5.2s; }
.intro-connection { position: absolute; bottom: 20%; left: 24px; right: 24px; text-align: center; animation: intro-label 1.1s 4.4s both; }
.intro-connection p { color: #e6edf5; font: 500 26px/1.3 var(--display); letter-spacing: -.035em; }
.intro-connection em { font-family: Georgia, serif; font-weight: 400; color: #d9b76c; }
.intro-connection small { display: block; margin-top: 15px; color: #adbed1; font-size: 11px; letter-spacing: .02em; }
.intro-controls { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 20px; right: 20px; display: flex; justify-content: center; }
.intro-skip { min-width: 80px; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: #9eacbd; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.intro-skip:hover { color: #d5deea; }
.intro-skip:focus-visible { outline: 1px solid #d5deea; outline-offset: 2px; }
.intro-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--gold); transform-origin: left; animation: intro-progress 12s linear both; }
.intro-replay { display: none; }
#hero-title[tabindex="-1"]:focus { outline: none; }
@keyframes intro-star { from { transform: rotate(-75deg) scale(.65); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes intro-wordmark { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes intro-opening { 0%, 19% { opacity: 1; transform: scale(1); } 28%, 100% { opacity: 0; transform: scale(.92); } }
@keyframes intro-brand { 0%, 22% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes intro-world { 0%, 16% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes intro-packet { 0% { offset-distance: 0%; opacity: 0; } 5%, 95% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes intro-halo { 0% { transform: scale(1); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
/* A deliberate camera move after arrival: accelerate, pan toward Canada, settle. */
@keyframes intro-camera {
  0%, 60% { transform: translateX(-50%) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  80%, 100% { transform: translate(-42%, 2%) scale(1.30); }
}
@keyframes intro-route { to { stroke-dashoffset: 0; } }
@keyframes intro-label { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-connection { 0%, 29% { opacity: 0; transform: translateY(14px); } 40%, 61% { opacity: 1; transform: translateY(0); } 69%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The final beat is the actual hero, held unchanged before the dialog closes. */
@keyframes intro-reveal { 0%, 86% { opacity: 1; animation-timing-function: ease-in-out; } 94%, 100% { opacity: 0; } }

/* Both halves of the desktop hero share one canvas on mobile, even without JS. */
@media (max-width: 700px) {
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-height: calc(100svh - 75px);
    justify-content: center;
    padding: 40px 24px 96px;
    margin-bottom: 0;
    background: #07182d;
    color: #fff;
  }
  .hero-copy { position: relative; z-index: 1; }
  .intro-replay:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; position: absolute; z-index: 2; bottom: calc(20px + env(safe-area-inset-bottom)); left: calc(20px + env(safe-area-inset-left)); width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #8999af; }
  .intro-replay:hover { color: #fff; }
  .intro-replay:focus-visible { outline: 1px solid #d5deea; outline-offset: 4px; }
  .hero .eyebrow { color: #d5deea; font-size: 8px; }
  .hero .eyebrow .status-dot { color: var(--gold); }
  .hero h1 { font-size: clamp(48px, 13.5vw, 78px); letter-spacing: -.04em; margin: 30px 0 26px; }
  .hero h1 .serif { color: #d9b76c; letter-spacing: -.04em; }
  .hero h1 .serif::after { display: none; }
  .hero-description { color: #d0dbe8; font-size: 14px; max-width: 420px; }
  .hero-actions { gap: 20px; }
  .hero-actions .button { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .hero-actions .button:hover { background: #d9b76c; }
  .hero-actions .text-link { color: #fff; }
  .hero-note { color: #c4cfdd; flex-wrap: wrap; line-height: 1.6; }
  .hero .network { position: absolute; inset: 0; min-height: 0; border-radius: 0; background: none; opacity: .28; z-index: 0; pointer-events: none; }
  .hero .network::after,
  .hero .network-top,
  .hero .network-bottom,
  .hero .location { display: none; }
  .hero .network-globe { width: 510px; height: auto; left: auto; right: -210px; top: 20px; }
}
/* Compact portrait phones keep the headline, actions and replay in one screen. */
@media (max-width: 700px) and (max-height: 740px) {
  .hero { padding-top: 24px; padding-bottom: 80px; }
  .hero h1 { font-size: clamp(42px, 12.8vw, 52px); margin: 16px 0; }
  .hero-description { font-size: 12.5px; line-height: 1.65; }
  .hero-actions { gap: 10px; margin-top: 16px; }
  .hero-actions .button { padding: 12px 10px; min-height: 44px; font-size: 11px; gap: 8px; }
  .hero-actions .button .icon { width: 16px; height: 16px; }
  .hero-actions .text-link { font-size: 10px; }
  .hero-note { font-size: 8px; margin-top: 12px; gap: 5px; }
}
@media (max-width: 700px) and (max-height: 600px) {
  .hero { padding-top: 16px; }
  .hero h1 { margin: 10px 0; }
}
@media (max-height: 550px) {
  .intro-globe { width: min(83vw, 390px); top: 12%; }
  .intro-brand { top: 20px; }
  .intro-opening svg { width: 50px; height: 50px; margin-bottom: 16px; }
  .intro-connection { bottom: 15%; }
  .intro-connection p { font-size: 21px; }
}
@media (max-height: 550px) and (min-width: 500px) {
  .intro-globe { width: min(55vw, 360px); left: 28%; top: 4%; }
  .intro-connection { left: 53%; right: 24px; bottom: auto; top: 38%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-intro { display: none; }
  .mobile-intro * { animation: none !important; }
  .intro-replay:not([hidden]) { display: none; }
}