/* Hero-only presentation. Motion is exclusively driven by the shared ticker. */
.hero-scene {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 90% 0%, rgba(79,182,240,.1), transparent 55%),
    linear-gradient(145deg, #17212c, #101317 60%);
  border-color: #35495d;
  box-shadow: 0 28px 72px rgba(0,0,0,.45), 0 0 48px rgba(79,182,240,.05),
    inset 0 1px 0 rgba(242,244,247,.07);
}

/* Static aurora and depth: no independent background animation. */
.hero-scene::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 48px;
  background: radial-gradient(ellipse at 85% 15%, rgba(79,182,240,.22), transparent 60%),
    radial-gradient(ellipse at 15% 80%, rgba(55,201,119,.09), transparent 55%);
  pointer-events: none;
}
.hero-scene .hero-map-stage { position: relative; }
.hero-scene [data-member-id] > circle:not(.hero-pulse-ring) {
  paint-order: stroke fill;
  stroke-width: 6px;
  stroke: #101317;
}
.hero-scene [data-member-id="minh"] > circle:not(.hero-pulse-ring) { stroke: #37c977; }
.hero-scene [data-member-id="lan"] > circle:not(.hero-pulse-ring) { stroke: #f2903d; }
.hero-scene [data-member-id="an"] > circle:not(.hero-pulse-ring) { stroke: #f0b93d; }

@media (min-width: 768px) {
  .hero-scene .demo-alerts {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: min(340px, calc(100% - 24px));
    pointer-events: none;
  }
  .hero-scene .demo-alert { background-color: rgba(20,29,39,.96); }
}
@media (min-width: 1024px) {
  .hero-scene {
    transform: perspective(1400px) rotateX(var(--tilt-x, 1deg)) rotateY(var(--tilt-y, -3deg));
    transition: transform 0.2s cubic-bezier(.2, .7, .2, 1);
  }
  .hero-scene::before { inset: -24px; }
}

/* Hero ambient background layer */
.hero-section { position: relative; overflow: clip; }
.hero-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-ambient-svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.hero-aurora { filter: blur(52px); }
.hero-aurora--1 {
  animation: hero-pulse-1 12s ease-in-out infinite alternate paused;
  transform-origin: 920px 180px;
}
.hero-aurora--2 {
  animation: hero-pulse-2 16s ease-in-out infinite alternate paused;
  transform-origin: 360px 380px;
}
@keyframes hero-pulse-1 {
  0% { transform: scale(0.9) translate(-20px, 10px); opacity: 0.65; }
  100% { transform: scale(1.15) translate(30px, -20px); opacity: 1; }
}
@keyframes hero-pulse-2 {
  0% { transform: scale(1.1) translate(15px, -10px); opacity: 0.8; }
  100% { transform: scale(0.85) translate(-25px, 20px); opacity: 0.5; }
}
.hero-drift-line { animation: hero-drift 18s linear infinite alternate paused; }
.hero-drift-line--2 { animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes hero-drift {
  0% { stroke-dashoffset: 0; opacity: 0.14; }
  50% { opacity: 0.26; }
  100% { stroke-dashoffset: 120; opacity: 0.16; }
}

/* Ambient animations obey hero lifecycle: run only when playing, static when uninitialized/static */
[data-motion-state="playing"] .hero-aurora--1,
[data-motion-state="playing"] .hero-aurora--2,
[data-motion-state="playing"] .hero-drift-line,
[data-motion-state="playing"] .hero-drift-line--2,
[data-motion-state="playing"] .hero-chip--stops,
[data-motion-state="playing"] .hero-chip--members,
[data-motion-state="playing"] .hero-chip--chat {
  animation-play-state: running;
}

[data-motion-state="static"] .hero-aurora--1,
[data-motion-state="static"] .hero-aurora--2,
[data-motion-state="static"] .hero-drift-line,
[data-motion-state="static"] .hero-drift-line--2,
[data-motion-state="static"] .hero-chip--stops,
[data-motion-state="static"] .hero-chip--members,
[data-motion-state="static"] .hero-chip--chat,
[data-global-motion="static"] .hero-aurora--1,
[data-global-motion="static"] .hero-aurora--2,
[data-global-motion="static"] .hero-drift-line,
[data-global-motion="static"] .hero-drift-line--2,
[data-global-motion="static"] .hero-chip--stops,
[data-global-motion="static"] .hero-chip--members,
[data-global-motion="static"] .hero-chip--chat {
  animation: none !important;
}

[data-global-motion="paused"] .hero-aurora--1,
[data-global-motion="paused"] .hero-aurora--2,
[data-global-motion="paused"] .hero-drift-line,
[data-global-motion="paused"] .hero-drift-line--2,
[data-global-motion="paused"] .hero-chip--stops,
[data-global-motion="paused"] .hero-chip--members,
[data-global-motion="paused"] .hero-chip--chat {
  animation-play-state: paused !important;
}

.hero-headline-accent {
  background: linear-gradient(135deg, #ffffff 10%, #aee3fc 50%, #4fb6f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #4fb6f0;
  display: inline-block;
}

/* Floating glass chips */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  position: relative;
  z-index: 5;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: #dbeafe;
  background: rgba(16, 22, 32, 0.9);
  border: 1px solid rgba(79, 182, 240, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast);
}
.hero-chip .chip-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  color: var(--accent-blue);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .hero-chips { margin-top: 0; position: static; }
  .hero-chip { position: absolute; z-index: 10; }
  .hero-chip--stops {
    top: -16px; right: 28px;
    animation: hero-chip-float-1 6s ease-in-out infinite alternate paused;
  }
  .hero-chip--members {
    top: 120px; left: -16px;
    animation: hero-chip-float-2 7s ease-in-out infinite alternate paused;
  }
  .hero-chip--chat {
    top: 76px; left: 28px;
    animation: hero-chip-float-3 6.5s ease-in-out infinite alternate paused;
  }
  @keyframes hero-chip-float-1 { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } }
  @keyframes hero-chip-float-2 { 0% { transform: translateY(0); } 100% { transform: translateY(5px); } }
  @keyframes hero-chip-float-3 { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } }
}

.hero-scene .scene-heading { color: #d7e7f3; }
.hero-scene .hero-map {
  border: 1px solid #304052;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(79,182,240,.08), 0 12px 28px rgba(0,0,0,.2);
}
.hero-scene #hero-route-glow { stroke-linecap: round; }
.hero-scene #hero-off-route { stroke-linecap: round; }
.hero-scene [data-member-id] { font-family: var(--font-family); }
.hero-scene .hero-pulse-ring {
  fill: none;
  stroke-width: 2;
  transform-origin: 0 0;
  pointer-events: none;
}
.hero-scene [data-member-id="minh"] .hero-pulse-ring { stroke: var(--accent-green); }
.hero-scene [data-member-id="lan"] .hero-pulse-ring { stroke: var(--accent-orange); }
.hero-scene [data-member-id="an"] .hero-pulse-ring { stroke: var(--accent-yellow); }

/* Legends stay outside the SVG so long Vietnamese labels retain readable type. */
.hero-scene .stop-legend { margin-block: 18px 14px; }
.hero-scene .stop-legend li { min-width: 0; }
.hero-scene .member-legend {
  gap: 8px 12px;
  padding-block: 12px;
  border-block: 1px solid #2e3d4c;
  font-variant-numeric: tabular-nums;
}
.hero-scene .member-legend li {
  min-width: 0;
  flex: 1 1 145px;
  white-space: nowrap;
}
.hero-scene .member-dot {
  width: 9px;
  height: 9px;
  outline: 4px solid rgba(242,244,247,.035);
  margin-right: 7px;
}
.hero-scene [data-member-speed] { display: inline-block; min-width: 7ch; }

/* Opacity hides scripted notices without changing the panel's reserved height. */
.hero-scene .demo-alerts { gap: 9px; }
.hero-scene .demo-alert {
  min-width: 0;
  color: var(--text-primary);
  background: linear-gradient(115deg, rgba(242,144,61,.1), transparent), #19212b;
  box-shadow: 0 6px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(242,244,247,.03);
}
.hero-scene [data-demo-alert="off-route"] { border-color: #b9743c; }
.hero-scene [data-demo-alert="separated"] {
  border-color: #be5948;
  background: linear-gradient(115deg, rgba(240,86,61,.09), transparent), #19212b;
}
.hero-scene [data-demo-alert="stale"] {
  border-color: #a88a39;
  background: linear-gradient(115deg, rgba(240,185,61,.08), transparent), #19212b;
}
.hero-scene [data-demo-alert="off-route"] span { color: var(--accent-orange); }
.hero-scene [data-demo-alert="separated"] span { color: #ff9e8d; }
.hero-scene [data-demo-alert="stale"] span { color: var(--accent-yellow); }
.hero-scene .simulation-caption { margin-top: 16px; }
.hero-scene .scene-footer { min-height: 44px; }

@media (max-width: 479px) {
  .hero-scene { padding: 16px; border-radius: 22px; }
  .hero-scene .scene-heading { gap: 8px; margin-bottom: 16px; }
  .hero-chips { gap: 6px; margin-top: 10px; }
  .hero-chip { height: 36px; padding: 0 10px; font-size: 0.78125rem; }
  .hero-scene .stop-legend { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .hero-scene .member-legend { flex-direction: column; gap: 10px; }
  .hero-scene .member-legend li { flex: none; }
  .hero-scene [data-motion-toggle] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene { transform: none !important; transition: none !important; }
  .hero-scene .hero-pulse-ring { opacity: 0 !important; }
  .hero-scene .hero-route-light { opacity: 0 !important; }
  .hero-aurora--1, .hero-aurora--2, .hero-drift-line, .hero-drift-line--2 { animation: none !important; }
  .hero-chip--stops, .hero-chip--members, .hero-chip--chat { animation: none !important; transform: none !important; }
}