html[data-site-intro="pending"],
html[data-site-intro="loading"] { background: #070f29; overflow: hidden; }
.site-intro {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-content: center; justify-items: center;
  background: #070f29; color: #a1caff;
  transition: opacity 320ms ease, visibility 320ms;
}
.site-intro-mark { width: min(58vw, 300px); }
.site-intro-mark img { display: block; width: 100%; height: auto; }
.site-intro-line {
  display: block; height: 1px; margin: 28px auto 0; width: 42%;
  background: linear-gradient(90deg, transparent, #a1caff, transparent);
  animation: intro-breathe 1.1s ease-in-out infinite alternate;
}
.site-intro-error { font: 14px/1.6 sans-serif; text-align: center; margin-top: 28px; }
.site-intro-error button { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
html[data-site-intro="pending"] #root,
html[data-site-intro="loading"] #root { opacity: 0; }
html[data-site-intro="revealing"] #root { animation: intro-reveal 420ms ease-out both; }
html[data-site-intro="revealing"] .site-intro,
html[data-site-intro="complete"] .site-intro { opacity: 0; visibility: hidden; pointer-events: none; }
html[data-site-intro="revealing"] .site-intro-mark { transform: scale(0.96); transition: transform 320ms ease; }
@keyframes intro-breathe { from { opacity: 0.25; transform: scaleX(0.65); } to { opacity: 1; transform: scaleX(1); } }
@keyframes intro-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .site-intro, .site-intro-mark { transition: none !important; }
  .site-intro-line, html[data-site-intro="revealing"] #root { animation: none; }
}