/* "Insert Coin · Co-op" splash (home page, every visit; src/splash.mjs). Hidden unless the <head>
   script adds html.splash. The whole commercial is timed here with animation delays (seconds from start):
   0 coin · .9 PRESENCE intro · 2.9 co-op select (1P 2.95, 2P 4.4, CO-OP 5.85, TEAM UP 6.2) · 7.4 TV off. */
#splash{display:none}
html.splash body{overflow:hidden}
html.splash body:not(:has(> #splash))>*{visibility:hidden}
html.splash #splash{display:block;position:fixed;inset:0;z-index:200;overflow:hidden;background:#000;color:#fff;font-family:var(--vt)}
#splash .sp-crt{position:absolute;inset:0;overflow:hidden;background:var(--ink);transform-origin:50% 50%;animation:sp-crt .8s cubic-bezier(.6,0,.9,.4) 7.4s forwards}
#splash.skipped .sp-crt{animation:sp-crt .6s cubic-bezier(.6,0,.9,.4) forwards}
#splash .sp-skip{position:absolute;right:16px;bottom:16px;z-index:3;min-height:44px;padding:0 14px;font:9px/1 var(--pp);color:#c9cfe8;background:#0b0d10cc;border:3px solid var(--line);cursor:pointer}
#splash .sp-skip:hover{color:#fff;border-color:#fff}
#splash .sp-s0,#splash .sp-s1,#splash .sp-s2{position:absolute;inset:0}

/* 1 · insert coin */
#splash .sp-s0{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;animation:sp-off .01s .9s forwards}
#splash .sp-coin{width:44px;height:44px;border-radius:50%;background:var(--yellow);border:5px solid var(--ink);box-shadow:inset -8px 0 0 #e0a92e,0 0 0 4px var(--yellow);animation:sp-coin .5s ease-out both}
#splash .sp-insert{font:16px/1 var(--pp);color:var(--pink);animation:sp-blink .5s steps(1) infinite}
#splash .sp-credit{font:10px/1 var(--pp);color:var(--green);opacity:0;animation:sp-on .01s .5s forwards}

/* 2 · PRESENCE. intro */
#splash .sp-s1{opacity:0;background:var(--room);animation:sp-on .01s .9s forwards,sp-off .01s 2.9s forwards}
#splash .sp-rays{position:absolute;left:50%;top:50%;width:2400px;height:2400px;margin:-1200px 0 0 -1200px;background:repeating-conic-gradient(from 0deg,rgba(255,209,102,.16) 0 10deg,transparent 10deg 20deg);animation:sp-spin 8s linear infinite}
#splash .sp-s1-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px;animation:sp-shake .3s 1.35s both}
#splash .sp-now{font:clamp(9px,1vw,12px)/1 var(--pp);letter-spacing:.2em;color:var(--cyan);opacity:0;animation:sp-on .2s 1.05s forwards}
#splash .sp-logo{margin-top:26px;font:clamp(36px,7.5vw,96px)/1 var(--pp);text-shadow:.06em .06em 0 #c2416b,.12em .12em 0 var(--ink);animation:sp-zoom .55s cubic-bezier(.2,.9,.3,1) .95s both}
#splash .sp-logo i{font-style:normal;color:var(--pink)}
#splash .sp-web{margin-top:clamp(20px,3vw,34px);font:clamp(17px,2.4vw,30px)/1 var(--pp);color:var(--yellow);text-shadow:4px 4px 0 var(--ink);animation:sp-type .6s steps(14) 1.5s both}
#splash .sp-host{display:block;margin-top:30px;width:60px;height:70px;transform:scale(1.5);transform-origin:50% 0}
#splash .sp-host>span{display:block;animation:sp-pop .35s 1.9s both}
#splash .sp-presents{margin-top:52px;font:clamp(10px,1vw,12px)/1 var(--pp);letter-spacing:.4em;color:var(--dim);opacity:0;animation:sp-on .2s 2.2s forwards}

/* 3 · co-op select. Computers: purple panel from the left, green from the right, a gold seam between. */
#splash .sp-s2{opacity:0;animation:sp-on .01s 2.9s forwards}
#splash .sp-p{position:absolute;top:0;bottom:0;width:58vw}
#splash .sp-p1{left:0;clip-path:polygon(0 0,100% 0,82% 100%,0 100%);background-color:#2a2f7a;background-image:repeating-linear-gradient(135deg,rgba(143,155,255,.2) 0 26px,transparent 26px 52px);animation:sp-inL .45s cubic-bezier(.2,1.1,.4,1) 2.95s both}
#splash .sp-p2{right:0;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);background:var(--yellow);animation:sp-inR .45s cubic-bezier(.2,1.1,.4,1) 4.4s both}
#splash .sp-p2-in{position:absolute;inset:0;clip-path:polygon(calc(18% + 14px) 0,100% 0,100% 100%,14px 100%);background-color:#0f4a2c;background-image:repeating-linear-gradient(45deg,rgba(94,227,143,.18) 0 26px,transparent 26px 52px)}
#splash .sp-ready{position:absolute;top:min(8vh,56px);font:13px/1 var(--pp);color:var(--yellow)}
#splash .sp-p1 .sp-ready{left:56px}
#splash .sp-p2 .sp-ready{right:56px}
#splash .sp-pbot{position:absolute;top:20vh;width:60px;height:70px;transform:scale(var(--bs,3.4))}
#splash .sp-p1 .sp-pbot{left:120px;transform-origin:0 0}
#splash .sp-p2 .sp-pbot{right:120px;transform-origin:100% 0}
#splash .sp-pbot>span{display:block;animation:sp-idle .8s steps(2) infinite}
#splash .sp-ptxt{position:absolute;bottom:min(10vh,70px);display:flex;flex-direction:column}
#splash .sp-p1 .sp-ptxt{left:56px;width:44vw;align-items:flex-start}
#splash .sp-p2 .sp-ptxt{right:56px;width:44vw;align-items:flex-end;text-align:right}
#splash .sp-name{background:var(--ink);padding:10px 12px;font:11px/1 var(--pp)}
#splash .sp-p1 .sp-name{color:var(--peri)}
#splash .sp-p2 .sp-name{color:var(--green)}
#splash .sp-svc{margin-top:14px;font:clamp(22px,3vw,40px)/1.22 var(--pp);text-shadow:5px 5px 0 var(--ink)}
#splash .sp-move{margin-top:14px;font-size:clamp(22px,2.2vw,28px);line-height:1.1;color:#e8eaff;opacity:0}
#splash .sp-p1 .sp-move{animation:sp-on .3s 3.6s forwards}
#splash .sp-p2 .sp-move{animation:sp-on .3s 5.05s forwards}
#splash .sp-mid{position:absolute;left:50%;top:50%;width:0;height:0}
#splash .sp-badge{position:absolute;left:-110px;top:-150px;width:220px;height:220px;box-sizing:border-box;border-radius:50%;background:var(--ink);border:8px solid var(--yellow);box-shadow:0 0 0 6px var(--ink),0 0 40px rgba(255,209,102,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;font:34px/1 var(--pp);color:var(--yellow);text-shadow:3px 3px 0 #c2416b;animation:sp-pop .35s 5.85s both}
#splash .sp-badge small{margin-bottom:12px;font-size:12px;color:var(--dim);text-shadow:none}
#splash .sp-team{position:absolute;left:-300px;top:96px;width:600px;text-align:center;font:40px/1 var(--pp);text-shadow:5px 5px 0 #c2416b,8px 8px 0 var(--ink);animation:sp-slam .4s 6.2s both}
#splash .sp-start{position:absolute;left:-300px;top:170px;width:600px;text-align:center;font:14px/1 var(--pp);color:var(--yellow);opacity:0;animation:sp-on .01s 6.7s forwards,sp-blink .25s steps(1) 6.7s infinite}
@media (max-height:760px){#splash .sp-p{--bs:2.6}#splash .sp-pbot{top:16vh}}
@media (max-height:620px){#splash .sp-p{--bs:2}}

/* Phones: the panels stack, purple on top sliding in from the left, green below from the right */
@media (max-width:640px){
  #splash .sp-p{left:0;right:0;width:auto;top:auto;bottom:auto;height:58%}
  #splash .sp-p1{top:0;clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
  #splash .sp-p2{bottom:0;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}
  #splash .sp-p2-in{clip-path:polygon(0 calc(18% + 10px),100% 10px,100% 100%,0 100%)}
  #splash .sp-p{--bs:1.8}
  #splash .sp-p1 .sp-ready{left:20px;top:72px;font-size:9px}
  #splash .sp-p1 .sp-ptxt{left:20px;top:104px;bottom:auto;width:auto}
  #splash .sp-p1 .sp-pbot{left:auto;right:12px;top:auto;bottom:24%;transform-origin:100% 100%}
  #splash .sp-p2 .sp-ready{display:none}
  #splash .sp-p2 .sp-pbot{right:12px;top:24%}
  #splash .sp-p2 .sp-ptxt{left:20px;right:auto;bottom:max(24px,env(safe-area-inset-bottom));width:auto;align-items:flex-start;text-align:left}
  #splash .sp-name{padding:8px 10px;font-size:9px}
  #splash .sp-svc{margin-top:12px;font-size:24px;line-height:1.3;text-shadow:4px 4px 0 var(--ink)}
  #splash .sp-p2 .sp-svc{font-size:19px;line-height:1.45}
  #splash .sp-move{margin-top:8px;width:min(230px,60vw);font-size:22px}
  #splash .sp-p2 .sp-move{width:min(300px,80vw)}
  /* the badge sits a little above the seam so TEAM UP! and PRESS START clear Zappy below */
  #splash .sp-mid{top:40%}
  #splash .sp-badge{left:-60px;top:-60px;width:120px;height:120px;border-width:6px;font-size:18px;box-shadow:0 0 0 5px var(--ink),0 0 30px rgba(255,209,102,.6)}
  #splash .sp-badge small{margin-bottom:9px;font-size:7px}
  #splash .sp-team{left:-180px;top:74px;width:360px;font-size:26px;text-shadow:4px 4px 0 #c2416b,6px 6px 0 var(--ink)}
  #splash .sp-start{left:-180px;top:114px;width:360px;font-size:11px}
  #splash .sp-skip{right:12px;top:12px;bottom:auto;font-size:8px}
}
@media (max-width:640px) and (max-height:700px){
  #splash .sp-p{--bs:1.6}
  #splash .sp-svc{font-size:20px}
  #splash .sp-p2 .sp-svc{font-size:17px}
  #splash .sp-move{font-size:20px}
}

/* flashes between scenes, and the CRT scanlines over everything */
#splash .sp-fl{position:absolute;inset:0;z-index:2;background:#fff;opacity:0;pointer-events:none}
#splash .sp-fl1{animation:sp-flash .35s ease-out .9s}
#splash .sp-fl2{animation:sp-flash .35s ease-out 2.9s}
#splash .sp-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:repeating-linear-gradient(transparent 0 3px,rgba(255,255,255,.05) 3px 4px)}

@keyframes sp-on{from{opacity:0}to{opacity:1}}
@keyframes sp-off{to{opacity:0;visibility:hidden}}
@keyframes sp-coin{from{transform:translateY(-140px)}70%{transform:translateY(8px)}to{transform:translateY(0)}}
@keyframes sp-blink{50%{opacity:0}}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-shake{0%,100%{transform:translate(0)}20%{transform:translate(-8px,5px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,-5px)}80%{transform:translate(3px,3px)}}
@keyframes sp-zoom{from{transform:scale(3.2);opacity:0}55%{transform:scale(.94);opacity:1}75%{transform:scale(1.03)}to{transform:scale(1)}}
@keyframes sp-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sp-pop{from{transform:scale(0)}70%{transform:scale(1.22)}to{transform:scale(1)}}
@keyframes sp-slam{from{transform:scale(4);opacity:0}60%{transform:scale(.9);opacity:1}to{transform:scale(1)}}
@keyframes sp-inL{from{transform:translateX(-105%)}to{transform:none}}
@keyframes sp-inR{from{transform:translateX(105%)}to{transform:none}}
@keyframes sp-idle{50%{transform:translateY(-10px)}}
@keyframes sp-flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes sp-crt{0%{transform:scale(1,1);filter:brightness(1)}45%{transform:scale(1,.005);filter:brightness(4)}75%{transform:scale(.01,.005);filter:brightness(4)}100%{transform:scale(0,0);opacity:0;visibility:hidden}}