/* assets/units/h1/hero.css — n4mu H1 in-place hero upgrades */

/* 1. Crossfade between poster and canvas */
.glow-stage canvas#sea {
  opacity: 0;
  transition: opacity var(--glow-slow) var(--glow-ease);
}
.glow-stage.sea-ready canvas#sea {
  opacity: 1;
}
.glow-stage picture.sea-poster {
  opacity: 1;
  transition: opacity var(--glow-slow) var(--glow-ease), visibility 0s linear var(--glow-slow);
}
.glow-stage.sea-ready picture.sea-poster {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .glow-stage canvas#sea,
  .glow-stage picture.sea-poster {
    transition: none;
  }
}

/* 2. Vignette */
.glow-stage picture.sea-poster,
.glow-stage canvas#sea {
  z-index: -2;
}
.glow-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 95% at 68% 42%, transparent 58%, color-mix(in srgb, var(--glow-stage) 50%, transparent) 100%);
}
@media (max-width: 719px) {
  .glow-stage::before {
    background: radial-gradient(130% 70% at 50% 28%, transparent 58%, color-mix(in srgb, var(--glow-stage) 50%, transparent) 100%);
  }
}

/* 3. Selected pill: 6px --glow dot before name */
.glow-map-legend a[data-hop][data-selected]::before,
.glow-map-legend a[data-hop][aria-current="true"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--glow-space-xs);
  border-radius: 50%;
  background: var(--glow);
  vertical-align: middle;
  transition: opacity var(--glow-fast) var(--glow-ease), transform var(--glow-fast) var(--glow-ease);
}

/* 4. Focus visible ring */
.glow-map-legend a[data-hop]:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

/* 5. Hint breathing between 0.8 and 0.5 opacity until stirred */
@keyframes glowHintBreathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.6; }
}
.glow-stage:not(.is-stirred) .glow-hint {
  animation: glowHintBreathe 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .glow-stage:not(.is-stirred) .glow-hint {
    animation: none;
  }
}

/* 6. Touch hover sticky reset */
@media (hover: none) {
  .glow-map-legend a:hover:not([data-selected]):not([aria-current="true"]) {
    color: var(--glow-muted);
    border-color: var(--glow-rule);
    box-shadow: none;
  }
}
#n4mu-bar{box-sizing:border-box;display:block;width:100%;height:64px;overflow:hidden;contain:layout}