.hero-glyph { display: block; width: 100%; height: auto; }

.glyph-drop { animation: hero-glyph-drop 2.6s ease-in-out infinite; }
.glyph-fill { transform-origin: 20px 35px; transform-box: view-box; animation: hero-glyph-fill 2.6s ease-in-out infinite; }
.glyph-pulse { transform-origin: center; transform-box: fill-box; animation: hero-glyph-pulse 2.6s ease-in-out infinite; }
.glyph-draw { stroke-dasharray: 90; stroke-dashoffset: 90; animation: hero-glyph-draw 2.6s ease-out infinite; }

@keyframes hero-glyph-drop {
  0% { transform: translateY(-16px); opacity: 0; }
  22%, 88% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes hero-glyph-fill {
  0% { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}
@keyframes hero-glyph-pulse {
  0%, 55%, 100% { transform: scale(1); }
  70% { transform: scale(1.18); }
}
@keyframes hero-glyph-draw {
  0% { stroke-dashoffset: 90; }
  60%, 100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glyph-drop, .glyph-fill, .glyph-pulse, .glyph-draw { animation: none; }
  .glyph-draw { stroke-dashoffset: 0; }
  .glyph-drop, .glyph-fill, .glyph-pulse { transform: none; opacity: 1; }
}

.hero-pano-teeth { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-pano-tint { opacity: 0; transition: opacity .2s ease-out; }
.hero-pano-tint.is-focused { opacity: .5; }
.hero-pano-label {
  font-family: var(--font-heading, var(--font, inherit));
  font-size: 30px; font-weight: 700;
  fill: #f8fafc; stroke: rgba(12, 30, 56, .78); stroke-width: 8px; stroke-linejoin: round;
  paint-order: stroke; text-anchor: middle; dominant-baseline: central;
  cursor: default; user-select: none; -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pano-tint { transition: none; }
}