.intro{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding-top:env(safe-area-inset-top,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  background:radial-gradient(ellipse at 50% 42%,#241430 0%,#170D1E 55%,#0D0713 100%);
  cursor:pointer;
}
.intro::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(6,3,10,.78));
}
.intro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,236,200,.03) 0 1px,transparent 1px 3px);
}
.intro-inner{text-align:center;padding:0 20px;}
.intro-logo{
  width:min(320px,58vw);height:auto;display:block;margin:0 auto 22px;
  filter:drop-shadow(0 0 28px rgba(255,180,84,.38)) drop-shadow(0 16px 34px rgba(0,0,0,.6));
  animation:introIn 1s cubic-bezier(.2,.7,.3,1) both,
            introFloat 4.5s 1.15s ease-in-out infinite alternate;
}
.intro-name{
  font-family:'Baloo 2',cursive;font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  letter-spacing:.35em;text-indent:.35em;color:var(--ink);
  text-shadow:0 0 18px rgba(255,180,84,.5),0 3px 10px rgba(0,0,0,.7);
  animation:introIn .9s .3s cubic-bezier(.2,.7,.3,1) both;
}
.intro-role{
  margin-top:8px;font-size:.72rem;font-weight:600;
  letter-spacing:.5em;text-indent:.5em;color:var(--accent);
  animation:introIn .9s .45s cubic-bezier(.2,.7,.3,1) both;
}
.intro-rule{
  width:120px;height:2px;margin:18px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent-strong),transparent);
  animation:introRule 1s .55s cubic-bezier(.2,.7,.3,1) both;
}
.intro-skip{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  font-size:.74rem;font-weight:600;letter-spacing:.24em;text-indent:.24em;
  color:var(--accent-pale);white-space:nowrap;border:0;background:transparent;
  font:inherit;cursor:pointer;
  animation:introIn .8s 1.8s ease both,
            introBlink 1.8s 2.6s ease-in-out infinite;
}
.intro-skip:focus-visible{outline:2px solid var(--accent-strong);outline-offset:6px;border-radius:2px;}
@keyframes introIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes introFloat{
  from{transform:translateY(0);}
  to{transform:translateY(-9px);}
}
@keyframes introBlink{
  0%,100%{opacity:.35;}
  50%{opacity:1;}
}
@keyframes introRule{
  from{opacity:0;width:0;}
  to{opacity:1;width:120px;}
}

.intro.is-out{
  opacity:0;visibility:hidden;
  transition:opacity .7s ease,visibility 0s linear .7s;
}
.intro.is-out .intro-inner{
  transform:scale(1.07);opacity:0;
  transition:transform .7s ease,opacity .7s ease;
}

@media (prefers-reduced-motion: reduce){
  .intro-logo,.intro-name,.intro-role,.intro-rule,.intro-skip{
    animation-duration:.01s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
  }
}