html.splash-active,
html.splash-active body{
  height:100%;
  overflow:hidden;
}

.splash-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--purple-ink);
}

.splash-panel{
  position:absolute;
  inset:0;
  width:50%;
  height:100%;
  transition:transform .95s cubic-bezier(.22,.68,0,1);
  will-change:transform;
}
.splash-panel--left{
  left:0;
  background:linear-gradient(150deg, var(--purple-ink) 0%, var(--purple-600) 120%);
}
.splash-panel--right{
  left:auto;
  right:0;
  background:linear-gradient(150deg, var(--purple-ink) 0%, var(--turquoise-600) 130%);
}

.splash-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.35;
  pointer-events:none;
  animation:splashDrift 7s ease-in-out infinite;
}
.splash-glow--a{
  width:340px; height:340px;
  background:var(--turquoise);
  top:-90px; left:8%;
}
.splash-glow--b{
  width:380px; height:380px;
  background:var(--purple);
  bottom:-120px; right:6%;
  animation-delay:-3.2s;
}
@keyframes splashDrift{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(18px,-22px) scale(1.06); }
}

.splash-logo-wrap{
  position:relative;
  z-index:2;
  width:min(70vw, 420px);
  height:min(46vw, 240px);
  --logo-w:clamp(108px, 24vw, 180px);
}

.splash-logo-slot{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--logo-w);
  height:var(--logo-w);
  opacity:0;
  transform-origin:center center;
  animation-duration:2.6s;
  animation-timing-function:cubic-bezier(.16,.72,.2,1);
  animation-fill-mode:forwards;
}
.splash-logo-slot--a{
  animation-name:splashLogoRTLToStackTop;
}
.splash-logo-slot--b{
  animation-name:splashLogoRTLToStackBottom;
  animation-delay:.08s;
}

.splash-logo{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  z-index:1;
  filter:drop-shadow(0 22px 40px rgba(10,6,20,.45));
}


.splash-logo-glow{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle, var(--turquoise, #2dd4bf) 0%, rgba(45,212,191,.35) 55%, rgba(45,212,191,0) 78%);
  filter:blur(26px);
  opacity:.65;
  mix-blend-mode:screen;
  pointer-events:none;
}
.splash-logo-glow--a{
  width:calc(var(--logo-w) * .82);
  height:calc(var(--logo-w) * .13);
}
.splash-logo-glow--b{
  width:calc(var(--logo-w) * .95);
  height:calc(var(--logo-w) * .565);
}

@keyframes splashLogoRTLToStackTop{
  0%   { opacity:0;   transform:translate(-50%,-50%) translate(-190%, 8%) scale(.78); }
  34%  { opacity:1;   transform:translate(-50%,-50%) translate(60%, 0)    scale(1); }
  100% { opacity:1;   transform:translate(-50%,-50%) translate(0, -16%)  scale(1); }
}
@keyframes splashLogoRTLToStackBottom{
  0%   { opacity:0;   transform:translate(-50%,-50%) translate(-190%, -8%) scale(.78); }
  34%  { opacity:1;   transform:translate(-50%,-50%) translate(-58%, 0)    scale(1); }
  100% { opacity:1;   transform:translate(-50%,-50%) translate(0, 16%)    scale(1); }
}



.splash-screen.is-leaving .splash-panel--left{ transform:translateX(-101%); }
.splash-screen.is-leaving .splash-panel--right{ transform:translateX(101%); }
.splash-screen.is-leaving .splash-logo-wrap{
  transition:opacity .45s ease, transform .45s ease;
  opacity:0;
  transform:scale(1.7);
}
.splash-screen.is-hidden{ display:none; }

.splash-screen.reduced,
.splash-screen.reduced *{
  animation:none !important;
  transition:opacity .25s ease !important;
}
.splash-screen.reduced .splash-logo-wrap{ opacity:1; }
.splash-screen.reduced .splash-logo-slot--a{
  opacity:1;
  transform:translate(-50%,-50%) translate(0, -46%);
}
.splash-screen.reduced .splash-logo-slot--b{
  opacity:1;
  transform:translate(-50%,-50%) translate(0, 46%);
}
.splash-screen.reduced.is-leaving{ opacity:0; }

@media (max-width:640px){
  .splash-logo-wrap{
    width:min(84vw, 300px);
    height:min(56vw, 220px);
    --logo-w:clamp(96px, 30vw, 150px);
  }
}