body.intro-active{overflow:hidden}

.intro-overlay{
  position:fixed;inset:0;z-index:9999;
  background:
    radial-gradient(600px 600px at 50% 50%, rgba(0,210,190,.14), transparent 60%),
    var(--bg);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:opacity .6s ease;
}
.intro-overlay.hide{opacity:0;pointer-events:none}
.intro-overlay.intro-instant-hide{display:none!important}

.intro-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.ring1{width:220px;height:220px;border:1px dashed rgba(0,210,190,.55);animation:spin 6s linear infinite}
.ring2{width:340px;height:340px;border:1px solid rgba(245,198,192,.35);animation:spin 9s linear infinite reverse}
.ring3{width:460px;height:460px;border:1px dotted rgba(227,179,78,.35);animation:spin 13s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ringWarp{to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
.intro-rings.warp .ring{animation:ringWarp .6s cubic-bezier(.25,.7,.3,1) forwards}

.intro-grid{position:absolute;inset:0;pointer-events:none;perspective:600px}
.tile{
  position:absolute;border-radius:50%;
  opacity:0;transform:translate(-50%,-50%);
  animation:tileFlicker 1.7s ease-in-out infinite;
}
@keyframes tileFlicker{0%,100%{opacity:0}50%{opacity:.9}}
@keyframes tileWarp{
  0%{opacity:.85}
  100%{
    transform:translate(calc(-50% + var(--dx) * 65vmax), calc(-50% + var(--dy) * 65vmax)) scale(5);
    opacity:0;
  }
}
.intro-grid.warp .tile{animation:tileWarp .65s cubic-bezier(.2,.6,.25,1) forwards}

.intro-flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(0,210,190,.55) 35%, transparent 70%);
  opacity:0;transform:scale(.2);
}
.intro-flash.pulse{animation:flashPulse .6s ease-out forwards}
@keyframes flashPulse{
  0%{opacity:0;transform:scale(.2)}
  30%{opacity:1;transform:scale(1.3)}
  100%{opacity:0;transform:scale(2.4)}
}

.intro-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
@keyframes coreWarp{to{transform:scale(.5);opacity:0;filter:blur(6px)}}
.intro-core.warp{animation:coreWarp .5s ease-in forwards}
.intro-core.warp .intro-logo{animation:none}
.intro-logo{
  width:60px;height:60px;border-radius:16px;
  background:linear-gradient(135deg,var(--teal),#0a7c72);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:20px;color:#04211e;
  box-shadow:0 0 30px rgba(0,210,190,.55);
  animation:pulseLogo 1.6s ease-in-out infinite;
}
@keyframes pulseLogo{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.intro-status{
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:3px;color:var(--muted);
  text-transform:uppercase;min-height:14px;
}
.intro-bar{width:220px;height:3px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden}
.intro-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),#7ee8dd);box-shadow:0 0 12px rgba(0,210,190,.6)}
.intro-pct{font-family:'Space Grotesk',sans-serif;font-size:12.5px;color:var(--teal);font-weight:700;letter-spacing:1px}

.intro-title{
  position:absolute;z-index:3;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:44px;letter-spacing:.5px;
  color:var(--ink);opacity:0;transform:scale(.85);
  text-shadow:0 0 40px rgba(0,210,190,.55);
}
.intro-title span{color:var(--teal)}
.intro-title.flash{animation:titleFlash .9s ease forwards}
@keyframes titleFlash{
  0%{opacity:0;transform:scale(.85)}
  40%{opacity:1;transform:scale(1.06)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.1)}
}

.intro-skip{
  position:absolute;bottom:26px;right:26px;z-index:3;
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:1.5px;color:var(--hint);
  background:transparent;border:1px solid var(--input-border);border-radius:100px;
  padding:8px 16px;cursor:pointer;transition:color .2s,border-color .2s;
}
.intro-skip:hover{color:var(--ink);border-color:var(--teal)}

@media (max-width:560px){
  .ring1{width:150px;height:150px}
  .ring2{width:230px;height:230px}
  .ring3{width:310px;height:310px}
  .intro-title{font-size:30px}
}

@media (prefers-reduced-motion: reduce){
  .intro-overlay{display:none!important}
}