/* Opening animation. Everything is scoped under #splash. Phases are classes added by splash.js (p-logo, p-drop, p-lean, p-boom, p-land, p-name, p-credit, out). */
#splash{display:none;position:fixed;inset:0;z-index:99999;background:#EAF1FF;overflow:hidden;cursor:pointer;font-family:var(--font);color:var(--ink);
  --W:min(26vh,52vw);--H:calc(var(--W) * 1.0833);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html.sp-on #splash{display:block;animation:sp-failsafe 0s 9s forwards}
@keyframes sp-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
#splash *{box-sizing:border-box}
#splash.out{animation:none;transform:translateY(-101%);transition:transform .65s cubic-bezier(.7,0,.2,1);pointer-events:none}

/* flat soft shapes in the corners */
#splash .sp-c{position:absolute;border-radius:50%;background:#DCE8FF;opacity:0;transition:opacity .8s}
#splash.p-logo .sp-c{opacity:1}
#splash .sp-c1{width:70vmin;height:70vmin;left:-22vmin;top:-26vmin}
#splash .sp-c2{width:56vmin;height:56vmin;right:-18vmin;bottom:-20vmin;background:#E2DCFF}
#splash .sp-c3{width:22vmin;height:22vmin;right:10vmin;top:12vmin;background:#D6F1FF}

/* the NOLAP mark */
#splash .sp-logo{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;opacity:0;transform:scale(.2)}
#splash.p-logo .sp-logo{animation:sp-pop .8s cubic-bezier(.3,1.7,.5,1) both}
#splash.p-drop .sp-logo{animation:sp-logo-up .7s cubic-bezier(.6,0,.2,1) both}
@keyframes sp-pop{0%{opacity:0;transform:scale(.2) rotate(-14deg)}55%{opacity:1;transform:scale(1.22) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sp-logo-up{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:1;transform:translateY(calc(-50vh + 52px)) scale(.5)}}

.sp-stage{position:absolute;left:0;right:0;top:50%;transform:translateY(-46%);display:flex;flex-direction:column;align-items:center;padding:0 16px}
#splash .sp-m{position:relative;width:var(--W);height:var(--H);margin-top:calc(var(--W) * .62);opacity:0;transform:translateY(-130vh)}
#splash .sp-m .mortoti{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#splash.p-drop .sp-m{opacity:1;animation:sp-drop .8s cubic-bezier(.3,1.35,.55,1) both}
#splash.p-lean .sp-m{opacity:1;transform:none;animation:sp-wobble .75s ease-in-out both}
#splash.p-boom .sp-m{animation:sp-shake .5s ease-in-out 2 both}
#splash.p-land .sp-m{animation:sp-hop .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes sp-drop{from{transform:translateY(-130vh)}to{transform:translateY(0)}}
@keyframes sp-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg) translateX(-8px)}60%{transform:rotate(6deg) translateX(8px)}85%{transform:rotate(-3deg)}}
@keyframes sp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-1.5deg)}75%{transform:translateX(5px) rotate(1.5deg)}}
@keyframes sp-hop{0%{transform:translateY(0)}40%{transform:translateY(-22px) scale(1.03,.98)}100%{transform:translateY(0)}}

/* the tower of slides on his head */
#splash .sp-tower{position:absolute;left:50%;top:calc(var(--H) * .04);width:0;height:0;z-index:2}
#splash .sl{position:absolute;display:block;width:calc(var(--W) * .42);height:calc(var(--W) * .28);left:calc(var(--W) * -.21);
  top:calc(var(--W) * -.06 * var(--i) - var(--W) * .28);background:#fff;border:2.5px solid #C4D7FF;border-radius:8px;box-shadow:0 4px 0 #C4D7FF;
  opacity:0;transform:scale(.4)}
#splash .sl::before{content:"";position:absolute;left:10%;right:10%;top:14%;height:14%;border-radius:4px;background:var(--c)}
#splash .sl::after{content:"";position:absolute;left:10%;top:48%;width:56%;height:8%;border-radius:3px;background:#CBD6EE;box-shadow:0 calc(var(--W) * .05) 0 #CBD6EE,0 calc(var(--W) * .1) 0 -0px #E2E9F7}
#splash.p-drop .sl{opacity:1;transform:none}
#splash.p-lean .sl{opacity:1;animation:sp-lean .75s ease-in-out both}
#splash.p-boom .sl{opacity:1;animation:sp-slide 1.25s cubic-bezier(.3,.6,.4,1) forwards;animation-delay:calc(var(--i) * 30ms)}
@keyframes sp-lean{0%{transform:translateX(0) rotate(0)}40%{transform:translateX(calc(var(--W) * .02 * var(--i))) rotate(calc(var(--i) * -1.5deg))}100%{transform:translateX(calc(var(--W) * .016 * var(--i))) rotate(calc(var(--i) * 1.6deg))}}
@keyframes sp-slide{
  0%{transform:translateX(calc(var(--W) * .016 * var(--i))) rotate(calc(var(--i) * 1.6deg))}
  35%{transform:translate(calc(var(--W) * var(--fx)),calc(var(--W) * var(--fy))) rotate(var(--fr))}
  65%{transform:translate(calc(var(--W) * var(--fx) * .9 + var(--W) * .2),calc(var(--W) * var(--fy) * .2)) rotate(calc(var(--fr) * -.5))}
  100%{transform:translate(calc(var(--W) * (.6 + var(--j))),calc(var(--H) * .86 + var(--W) * .04 * var(--i))) rotate(var(--r))}}

/* the cap that flies off and comes back (the wrapper is made by splash.js) */
#splash .capfly{transform-origin:120px 40px}
#splash.p-boom .capfly{animation:sp-cap 1s cubic-bezier(.4,0,.5,1) forwards}
@keyframes sp-cap{0%{transform:translate(0,0) rotate(0)}40%{transform:translate(-90px,-210px) rotate(-420deg)}75%{transform:translate(-20px,-60px) rotate(-640deg)}100%{transform:translate(0,0) rotate(-720deg)}}

/* comic bubble */
#splash .sp-say{position:absolute;left:62%;top:calc(var(--H) * -.02);z-index:4;background:#fff;border:2.5px solid #14213D;border-radius:16px;padding:6px 14px;font-weight:900;font-size:clamp(15px,3.6vw,20px);white-space:nowrap;
  opacity:0;transform:scale(.3) rotate(-8deg);transform-origin:20% 100%}
#splash .sp-say::after{content:"";position:absolute;left:14px;bottom:-11px;width:14px;height:14px;background:#fff;border-right:2.5px solid #14213D;border-bottom:2.5px solid #14213D;transform:rotate(45deg) skew(8deg,8deg)}
#splash .sp-say.on{animation:sp-bub .45s cubic-bezier(.3,1.7,.5,1) both}
@keyframes sp-bub{to{opacity:1;transform:scale(1) rotate(-3deg)}}

/* sparkle burst when the cap lands */
#splash .sp-burst{position:absolute;left:50%;top:calc(var(--H) * .1);width:0;height:0;z-index:3;pointer-events:none}
#splash .sp-burst i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:#FFB020;opacity:0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#splash .sp-burst i:nth-child(3n){background:#2F6BFF}#splash .sp-burst i:nth-child(3n+1){background:#FF5C7A;width:13px;height:13px}
#splash.p-land .sp-burst i{animation:sp-star .9s cubic-bezier(.2,.8,.3,1) both}
@keyframes sp-star{0%{opacity:1;transform:translate(0,0) scale(.3) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.2) rotate(180deg)}}

/* the name */
#splash .sp-name{margin:clamp(10px,2.4vh,22px) 0 0;display:flex;gap:.45em;font-weight:900;font-size:clamp(34px,min(10vw,8vh),68px);line-height:1;letter-spacing:.01em;color:#14213D;max-width:100%}
#splash .sp-name .w{display:flex}#splash .sp-name .p{color:#2F6BFF}
#splash .sp-name b{display:inline-block;font-weight:900;opacity:0;transform:translateY(34px) scale(.4)}
#splash.p-name .sp-name b{animation:sp-hop .6s cubic-bezier(.3,1.8,.5,1) both;animation-delay:calc(var(--k) * 55ms)}
@keyframes sp-hop{0%{opacity:0;transform:translateY(34px) scale(.4)}60%{opacity:1;transform:translateY(-10px) scale(1.1)}100%{opacity:1;transform:none}}
#splash .sp-tag{margin:10px 0 0;font-weight:800;font-size:clamp(15px,4vw,22px);color:#5B6785;opacity:0;transform:translateY(12px)}
#splash.p-name .sp-tag{animation:sp-up .6s ease-out .75s both}
@keyframes sp-up{to{opacity:1;transform:none}}

/* powered by */
#splash .sp-pw{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:13px;color:#5B6785;opacity:0}
#splash .sp-pw b{color:#14213D;letter-spacing:.04em;font-weight:900}
#splash.p-credit .sp-pw{animation:sp-up .6s ease-out both}

#splash .sp-skip{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));border:0;background:#ffffffb3;color:#5B6785;font:800 14px var(--font);padding:8px 14px;border-radius:99px;cursor:pointer;opacity:0;animation:sp-up .4s 1.2s both}

@media (prefers-reduced-motion:reduce){
  #splash .sp-m,#splash .sl,#splash .sp-burst,#splash .sp-say,#splash .capfly{animation:none!important}
  #splash .sp-m{opacity:1;transform:none;margin-top:0}
  #splash .sl,#splash .sp-say,#splash .sp-burst{display:none}
  #splash .sp-logo{opacity:1;transform:translateY(calc(-50vh + 52px)) scale(.5);animation:none!important}
  #splash .sp-name b,#splash .sp-tag,#splash .sp-pw{opacity:1;transform:none;animation:none!important}
}