.brand-intro { display: none; }
.intro-pending .brand-intro, .intro-running .brand-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  /* CSS also releases the page if the JS cleanup ever fails. */
  animation: royal-intro-exit .65s 1.65s ease-in-out both;
}
.intro-pending .brand-intro { animation: royal-pending-exit .01s 8s ease-in-out both; }
.intro-pending .brand-intro-lockup, .intro-pending .brand-intro-light { visibility: hidden; }
.brand-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #050d09;
}
.intro-docking .brand-intro {
  animation: royal-intro-release .01s 1.05s both;
}
.intro-docking .brand-intro::before {
  animation: royal-reveal-page .75s ease-in-out both;
}
.intro-docking .site-header .brand { opacity: 0; }
.brand-intro-mark, .brand-intro-name, .brand-intro-detail { transform-origin: 0 0; }
.brand-intro-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-18px);
}
.brand-intro-mark {
  width: clamp(86px, 20vw, 116px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 16px #5be18d35);
}
.intro-shield-line { stroke-dasharray: 1; }
.intro-running .intro-shield-line { animation: royal-draw .8s .1s ease-out both; }
.intro-running .intro-shield-fill { animation: royal-glow .9s .25s ease-out both; }
.intro-running .intro-monogram { animation: royal-glow .65s .35s ease-out both; }
.brand-intro-name {
  margin-top: 20px;
  font-size: clamp(27px, 7vw, 34px);
}
.intro-running .brand-intro-name { animation: royal-wordmark .7s .45s ease-out both; }
.brand-intro-detail {
  margin-top: 13px;
  font-size: 11px;
}
.intro-running .brand-intro-detail { animation: royal-wordmark .7s .6s ease-out both; }
.brand-intro-light {
  position: absolute;
  top: calc(50% + 120px);
  width: min(76vw, 680px);
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #94d6a5 24%, #eefff0 50%, #94d6a5 76%, transparent);
  box-shadow: 0 0 16px 2px #7ce79d3b;
}
.intro-running .brand-intro-light { animation: royal-light 1.15s .7s cubic-bezier(.2,.7,.3,1) both; }
@keyframes royal-draw { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes royal-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes royal-wordmark { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes royal-light {
  0% { opacity: 0; transform: scaleX(.02); }
  35% { opacity: 1; }
  75% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.2); }
}
@keyframes royal-intro-exit {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes royal-pending-exit { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes royal-reveal-page { from { opacity: 1; } to { opacity: 0; } }
@keyframes royal-intro-release { from { visibility: visible; } to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .intro-pending .brand-intro, .intro-running .brand-intro { display: none; animation: none; }
  .brand-intro * { animation: none; }
}