/* A short brand reveal using the studio's original glass monogram. */
.site-intro { display: none; }
html[data-site-intro] .site-intro {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
  overflow: hidden; isolation: isolate; perspective: 1100px;
  animation: intro-safety 1ms 2.8s forwards;
}
.site-intro-bg { position: absolute; inset: 0; background: #070b15; }
.site-intro-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 47%, #1748b340, transparent 58%);
  animation: intro-atmosphere 1.8s ease-out both;
}
.site-intro-mark { position: relative; width: min(76vw, 430px); text-align: center; transform-style: preserve-3d; }
.site-intro-emblem { position: relative; aspect-ratio: 1; animation: intro-materialize 1050ms cubic-bezier(.16,1,.3,1) both; }
.site-intro-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-intro-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 36%, #dbf5ff 48%, #ffffff 50%, transparent 63%);
  background-size: 350% 100%;
  mask: url('/assets/identity/monogram-glass.webp') center / contain no-repeat;
  -webkit-mask: url('/assets/identity/monogram-glass.webp') center / contain no-repeat;
  mix-blend-mode: screen; animation: intro-light 850ms 550ms ease-in-out both;
}
.site-intro-wordmark { display: block; margin-top: -12px; color: #f0f5ff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 7vw, 52px); font-weight: 500; letter-spacing: -.065em; line-height: 1.1; animation: intro-name 650ms 450ms cubic-bezier(.16,1,.3,1) both; }
.site-intro-wordmark span { color: #79aaff; }
.site-intro.is-leaving { pointer-events: none; animation: intro-open var(--intro-exit, 650ms) cubic-bezier(.76,0,.24,1) forwards; }
.site-intro.is-leaving .site-intro-mark { animation: intro-lift var(--intro-exit, 650ms) cubic-bezier(.76,0,.24,1) forwards; }
html[data-site-intro]:not([data-site-intro-leaving]) .hero * { animation-play-state: paused !important; }
@keyframes intro-materialize {
  from { transform: translate3d(0,45px,-280px) rotateX(16deg) rotateY(-28deg) rotateZ(-6deg); opacity: 0; filter: blur(14px) brightness(.4); }
  45% { opacity: 1; filter: blur(0) brightness(1.25); }
  to { transform: translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0); opacity: 1; filter: blur(0) brightness(1); }
}
@keyframes intro-light { from { background-position: 100% 0; opacity: 0; } 15%,65% { opacity: .75; } to { background-position: 0% 0; opacity: 0; } }
@keyframes intro-name { from { opacity: 0; transform: translateY(18px); filter: blur(8px); letter-spacing: .08em; } to { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: -.065em; } }
@keyframes intro-atmosphere { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; } to { opacity: .7; transform: scale(1.15); } }
@keyframes intro-open { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes intro-lift { to { transform: translateY(-65px) scale(.94); opacity: 0; filter: blur(5px); } }
@keyframes intro-safety { to { visibility: hidden; pointer-events: none; opacity: 0; } }
@media (max-width:600px) { .site-intro-mark { width: min(82vw, 350px); } }
@media (prefers-reduced-motion:reduce) { html[data-site-intro] .site-intro { display:none; } }