/* Particle opening and infinity signature share one canvas, behind the copy. */
.hero { isolation: isolate; }
.hero > .sky { opacity: .42; }
.hero > .container { position: relative; z-index: 2; }
.hero-morph-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero-signature { position: relative; width: min(740px, 100%); height: 264px; margin: 0 auto 24px; display: grid; place-items: center; }
.hero-signature-fallback { display: block; width: 84%; height: 100%; overflow: visible; filter: drop-shadow(0 0 12px #9bb9ff35); }
.hero-signature > span { position: absolute; bottom: 0; left: 0; right: 0; color: #b8c9ed; font-size: .57rem; font-weight: 650; letter-spacing: .5em; padding-left: .5em; line-height: 1; }
.hero-morph-ready .hero-signature-fallback { opacity: 0; }
.hero-morph-ready .hero-signature > span { opacity: 0; transition: opacity 1s ease; }
.hero-morph-settled .hero-signature > span { opacity: 1; }
@media (max-width: 850px) {
  .hero-signature { width: min(640px, 100%); height: 224px; margin-bottom: 24px; }
}
@media (max-width: 680px) {
  .hero-signature { width: calc(100% + 24px); max-width: 420px; height: 168px; margin: 0 0 23px; left: 50%; translate: -50% 0; }
  .hero-signature > span { font-size: .49rem; letter-spacing: .48em; }
}
@media (max-width: 360px) { .hero-signature { height: 148px; margin-bottom: 22px; } }
body.motion-off .hero-signature > span { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .hero-signature > span { opacity: 1; transition: none; } }