/* ================================
   BOOT — "press START" -> dive through the towers -> title
   ================================ */

#ps{
  display:none;
  position:absolute; inset:0; z-index:950;
  background:#05060b;
  overflow:hidden;
}
html.ps-boot #ps{ display:block; }
#ps.out{ opacity:0; transition:opacity .3s steps(3,end); pointer-events:none; }

#psCube{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
}
#psFlash{
  position:absolute; inset:0; background:#fff;
  opacity:0; pointer-events:none;
}

/* press START (the button) */
#psStart{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--sw) * .06);
  --sw:clamp(200px, 44vw, 500px);
  margin:0; padding:24px 32px; border:0; background:none;
  font:inherit; color:#fff;
  -webkit-appearance:none; appearance:none;
  filter:drop-shadow(0 0 14px rgba(8,12,40,.95)) drop-shadow(0 0 3px rgba(8,12,40,.9));
}
#psStart:focus{ outline:none; }
#psStart:focus-visible{ outline:3px dashed #fff; outline-offset:6px; }
#psStart img{ display:block; height:auto; pointer-events:none; -webkit-user-drag:none; }
#psStart .press{ width:calc(var(--sw) * .5); }
#psStart .start{ width:var(--sw); animation:psblink 1.1s steps(1,end) infinite; }
@keyframes psblink{ 0%,62%{ opacity:1; } 63%,100%{ opacity:.12; } }
#psStart.go{ animation:none; }
#psStart.go .start{ animation:none; opacity:1; }
#psStart.go .press{ opacity:0; }
#psStart.gone{ visibility:hidden; }
@media (hover:hover){ #psStart:hover .start{ filter:brightness(1.25); } }

/* title */
#psTitle{
  position:absolute; left:50%; top:50%;
  width:min(84vw, 820px); height:auto;
  transform:translate(-50%,-50%) scale(.965);
  opacity:0;
  filter:drop-shadow(0 0 22px rgba(150,180,255,.6)) drop-shadow(0 0 4px rgba(190,205,255,.8));
  pointer-events:none; -webkit-user-drag:none;
}
#psTitle.on{
  opacity:1; transform:translate(-50%,-50%) scale(1);
  transition:opacity .4s ease-out, transform 1.6s cubic-bezier(.2,.7,.2,1);
}

/* soft blue haze behind the title */
#ps.title::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(50,70,190,.38), rgba(5,6,11,0) 62%);
}