html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
body.intro-screen {
  overscroll-behavior: none;
  touch-action: none;
}
.intro-shell {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: radial-gradient(circle at 20% 25%, rgba(255,255,255,0.92) 0%, rgba(240,245,250,0.96) 35%, rgba(228,235,242,1) 100%);
  opacity: 1;
  transition: opacity .8s ease;
}
.intro-shell.is-leaving { opacity: 0; }
.intro-bg {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 25% 80%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(135deg, rgba(215,224,232,0.95) 0%, rgba(239,242,246,0.92) 50%, rgba(220,227,235,0.96) 100%);
  transform: scale(1.06);
  animation: introBgMove 2.1s ease forwards;
}
.intro-bg::before, .intro-bg::after { content:""; position:absolute; inset:0; pointer-events:none; }
.intro-bg::before {
  background:
    radial-gradient(ellipse at 82% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 35%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0) 72%);
  mix-blend-mode: screen; opacity: .8;
}
.intro-bg::after {
  background:
    radial-gradient(circle at 84% 52%, rgba(255,255,255,0.9) 0 2px, rgba(255,255,255,0) 10px),
    repeating-radial-gradient(circle at 66% 58%, rgba(255,255,255,0.22) 0 1px, rgba(255,255,255,0) 10px 16px);
  opacity:.42; filter: blur(.2px);
}
.intro-sheen { position:absolute; border-radius:999px; filter: blur(40px); opacity:.34; animation:introGlowPulse 2s ease-in-out forwards; }
.intro-sheen-a { width:44vw; height:44vw; right:-8vw; top:-10vw; background: rgba(255,255,255,.55); }
.intro-sheen-b { width:38vw; height:38vw; left:-10vw; bottom:-12vw; background: rgba(210,220,230,.55); }
.intro-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; z-index:2; text-align:center; padding:24px; }
.intro-logo { width:min(42vw,340px); max-width:340px; min-width:180px; opacity:0; transform:translateY(18px) scale(.985); animation:introLogoIn .7s cubic-bezier(.22,1,.36,1) .18s forwards; }
.intro-tagline { margin:0; color:#142E4D; font-family:'Aquawax Pro','HallymGothic',sans-serif; font-size:clamp(15px,1.2vw,22px); font-weight:500; letter-spacing:-0.02em; opacity:0; transform:translateY(14px); animation:introTextIn .7s cubic-bezier(.22,1,.36,1) .42s forwards; }
@keyframes introBgMove { 0% { transform:scale(1.08) translateY(10px); filter:brightness(.98);} 100% { transform:scale(1) translateY(0); filter:brightness(1);} }
@keyframes introGlowPulse { 0% { transform:scale(.9); opacity:.18;} 50% { transform:scale(1.02); opacity:.32;} 100% { transform:scale(1); opacity:.24;} }
@keyframes introLogoIn { to { opacity:1; transform:translateY(0) scale(1);} }
@keyframes introTextIn { to { opacity:1; transform:translateY(0);} }
@media (max-width:768px) {
  .intro-center { gap:14px; padding-top:4vh; }
  .intro-logo { width:min(58vw,280px); min-width:170px; }
  .intro-tagline { font-size:14px; }
  .intro-sheen-a, .intro-sheen-b { filter: blur(28px); }
}