html.saOpeningLock,html.saOpeningLock body{overflow:hidden!important}

/* Homepage is already rendered underneath. The opening is only a translucent cinematic veil. */
#saOpening{
  position:fixed;inset:0;z-index:2147483640;overflow:hidden;
  opacity:1;visibility:visible;
  transition:opacity .48s cubic-bezier(.4,0,.2,1),visibility .48s;
}
#saOpening.saOpeningExit{opacity:0;visibility:hidden;pointer-events:none}

.saOpeningVeil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(236,248,255,.94),rgba(255,255,255,.88)),
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.98),rgba(171,221,250,.58) 44%,rgba(83,170,230,.26) 100%);
  animation:saVeil 2.05s ease-out both;
}
.saOpeningLight{
  position:absolute;left:50%;top:48%;
  width:min(74vw,980px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(.34);
  background:radial-gradient(circle,rgba(255,255,255,.96) 0 3%,rgba(255,251,231,.34) 13%,rgba(255,255,255,.12) 30%,transparent 66%);
  opacity:.12;mix-blend-mode:screen;
  animation:saOpeningLight 1.55s ease-out both;
}
.saOpeningLogoWrap{
  position:absolute;left:50%;top:49%;
  width:clamp(150px,20vw,260px);
  transform:translate(-50%,-50%);
}
.saOpeningLogo{
  display:block;width:100%;height:auto;object-fit:contain;
  filter:none!important;
  opacity:0;
  transform:scale(.965) translateY(5px);
  animation:saOpeningLogo .72s .42s cubic-bezier(.16,.82,.2,1) forwards;
}
.saOpeningStarGlow{
  position:absolute;
  left:50%;top:4.8%;
  width:5px;height:5px;border-radius:50%;
  background:#fff;opacity:0;
  transform:translate(-50%,-50%) scale(0);
  box-shadow:0 0 6px 3px rgba(255,255,255,.95),0 0 16px 7px rgba(103,203,255,.42);
  animation:saOpeningStar .42s 1.28s ease-out forwards;
}

@keyframes saVeil{
  0%{opacity:1}
  72%{opacity:.98}
  100%{opacity:.88}
}
@keyframes saOpeningLight{
  0%{opacity:.08;transform:translate(-50%,-50%) scale(.34)}
  100%{opacity:.22;transform:translate(-50%,-50%) scale(.82)}
}
@keyframes saOpeningLogo{
  0%{opacity:0;transform:scale(.965) translateY(5px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes saOpeningStar{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  52%{opacity:.95;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:.42;transform:translate(-50%,-50%) scale(.72)}
}

@media(max-width:760px){
  .saOpeningLogoWrap{width:clamp(145px,43vw,205px);top:48%}
}
@media(prefers-reduced-motion:reduce){
  #saOpening{display:none!important}
}