/* Service page splashes, Stage 01 (Website Development) and Stage 02 (AI Automation): src/splash.mjs
   pageSplash. They share splash.css (show/hide, skip, TV switch-off, scanlines, keyframes); this file
   holds their look and timing (seconds from start): 0 STAGE card · 1.1 flash + stage · 1.3 headline ·
   1.5 bot runs in · 2.1 web page / chain builds · 3.4 READY? GO! · 4.4 TV off. */
#splash.ps{--pc:#8f9bff;--pc2:#5b67e8;--phi:#c3c9ff;--pbg:#2a2f7a;--pst:rgba(143,155,255,.2);--pang:135deg}
#splash.ps-ai{--pc:#5ee38f;--pc2:#2fb565;--phi:#b8f7cf;--pbg:#0f4a2c;--pst:rgba(94,227,143,.18);--pang:45deg}
#splash.ps .sp-crt{animation:sp-crt .8s cubic-bezier(.6,0,.9,.4) 4.4s forwards}
#splash.ps.skipped .sp-crt{animation:sp-crt .6s cubic-bezier(.6,0,.9,.4) forwards}
#splash.ps .sp-skip{top:16px;bottom:auto}
#splash .ps-fl{animation:sp-flash .35s ease-out 1.1s}

/* the STAGE card */
#splash .ps-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;animation:sp-off .01s 1.1s forwards}
#splash .ps-player{font:clamp(12px,1.2vw,14px)/1 var(--pp);color:var(--yellow);animation:sp-blink .4s steps(1) infinite}
#splash .ps-stage{font:clamp(34px,6vw,72px)/1 var(--pp);text-shadow:.08em .08em 0 var(--pc2),.16em .16em 0 #000;animation:sp-slam .45s .15s both}
#splash .ps-game{font:clamp(11px,1.2vw,14px)/1 var(--pp);color:var(--pc);opacity:0;animation:sp-on .01s .55s forwards}

/* the stage: ready line, headline, then the bot with its web page or chain, and READY? GO! */
#splash .ps-main{position:absolute;inset:0;opacity:0;animation:sp-on .01s 1.1s forwards;background-color:var(--pbg);background-image:repeating-linear-gradient(var(--pang),var(--pst) 0 26px,transparent 26px 52px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"ready ready" "text text" "go act";gap:24px 40px;padding:min(8vh,60px) 6vw min(10vh,80px);overflow:hidden}
#splash .ps-ready{grid-area:ready;font:13px/1 var(--pp);color:var(--yellow)}
#splash .ps-text{grid-area:text;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
#splash .ps-name{background:var(--ink);padding:10px 12px;font:11px/1 var(--pp);color:var(--pc);opacity:0;animation:sp-on .01s 1.25s forwards}
#splash .ps-l1,#splash .ps-l2{font:clamp(30px,6vw,78px)/1.15 var(--pp);text-shadow:.08em .08em 0 var(--ink)}
#splash .ps-l1{margin-top:22px;animation:ps-inL .35s cubic-bezier(.2,1.2,.4,1) 1.3s both}
#splash .ps-l2{color:var(--phi);animation:ps-inR .35s cubic-bezier(.2,1.2,.4,1) 1.45s both}
#splash.ps-ai .ps-l1,#splash.ps-ai .ps-l2{font-size:clamp(22px,5vw,64px);line-height:1.2}
#splash .ps-move{margin-top:24px;font-size:clamp(24px,2.5vw,32px);line-height:1.1;color:#e8eaff;opacity:0;animation:sp-on .3s 1.9s forwards}
#splash .ps-act{grid-area:act;display:flex;align-items:flex-end;gap:36px}
#splash .ps-bot{--k:2.6;display:block;flex:none;width:calc(60px * var(--k));height:calc(70px * var(--k));animation:ps-run .45s 1.5s both}
#splash .ps-bot>span{display:block;width:60px;height:70px;transform:scale(var(--k));transform-origin:0 0}
#splash .ps-bot .bot{animation:sp-idle .45s 2s 4}
#splash .ps-go{grid-area:go;align-self:end;white-space:nowrap;font:clamp(22px,2.6vw,40px)/1 var(--pp);text-shadow:.12em .12em 0 #c2416b,.18em .18em 0 var(--ink);animation:sp-slam .4s 3.4s both}

/* Website Development: a pixel web page builds itself */
#splash .ps-page{display:block;width:clamp(240px,27vw,340px);background:var(--ink);border:5px solid var(--ink);box-shadow:0 0 0 4px var(--pc);transform-origin:50% 100%;animation:sp-pop .3s 2.1s both}
#splash .ps-bar{display:flex;gap:6px;padding:8px;background:var(--cab)}
#splash .ps-bar i{width:10px;height:10px;background:var(--red)}
#splash .ps-bar i:nth-child(2){background:var(--yellow)}
#splash .ps-bar i:nth-child(3){background:var(--green)}
#splash .ps-body{display:flex;flex-direction:column;gap:10px;padding:16px}
#splash .ps-body>i{display:block;transform-origin:0 50%;animation:ps-grow .3s both}
#splash .ps-body .g1{height:22px;width:70%;background:var(--pc);animation-delay:2.35s}
#splash .ps-body .g2{height:12px;width:100%;background:var(--line);animation-delay:2.5s}
#splash .ps-body .g3{height:12px;width:85%;background:var(--line);animation-delay:2.65s}
#splash .ps-body .g4{height:28px;width:45%;background:var(--yellow);animation-delay:3.1s}
#splash .ps-blocks{display:flex;gap:8px}
#splash .ps-blocks i{flex:1;height:44px;background:var(--cyan);animation:sp-pop .25s 2.8s both}
#splash .ps-blocks i:nth-child(2){background:var(--green);animation-delay:2.9s}
#splash .ps-blocks i:nth-child(3){background:var(--pink);animation-delay:3s}

/* AI Automation: Form → AI → Reply lights up, a packet zips along each wire */
#splash .ps-chain{display:flex;align-items:center;margin-bottom:8px}
#splash .ps-node{padding:16px 14px;border:4px solid var(--pc);background:var(--ink);font:11px/1 var(--pp);animation:sp-pop .3s 2.1s both}
#splash .ps-node.n2{border-color:var(--yellow);color:var(--yellow);animation-delay:2.5s}
#splash .ps-node.n3{animation-delay:2.9s}
#splash .ps-wire{--zip:42px;position:relative;display:block;width:56px;height:6px}
#splash .ps-wire::before{content:"";position:absolute;inset:0;background:var(--pc);transform-origin:0 50%;animation:ps-grow .2s 2.35s both}
#splash .ps-wire.w2::before{animation-delay:2.75s}
#splash .ps-wire i{position:absolute;left:0;top:-4px;width:14px;height:14px;background:var(--yellow);box-shadow:0 0 0 3px var(--ink);opacity:0;animation:ps-zip .35s 2.55s both,sp-off .01s 2.9s forwards}
#splash .ps-wire.w2 i{animation-delay:2.95s,3.3s}
#splash .ps-ok{margin-left:14px;font:20px/1 var(--pp);color:var(--pc);animation:sp-pop .3s 3.2s both}

@media (max-height:620px){#splash .ps-bot{--k:1.8}#splash .ps-main{gap:14px 30px}}

/* Phones: everything stacks; the bot stands above its web page or chain */
@media (max-width:640px){
  #splash .ps-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"ready" "text" "act" "go";gap:16px;padding:72px 20px max(28px,env(safe-area-inset-bottom))}
  #splash .ps-ready{font-size:9px}
  #splash .ps-name{padding:8px 10px;font-size:9px}
  #splash .ps-l1{margin-top:16px;font-size:40px;line-height:1.2}
  #splash .ps-l2{font-size:29px;line-height:1.3}
  #splash.ps-ai .ps-l1{font-size:23px;line-height:1.4}
  #splash.ps-ai .ps-l2{font-size:25px;line-height:1.4}
  #splash .ps-move{margin-top:14px;font-size:24px}
  #splash .ps-act{flex-direction:column;align-items:center;justify-content:center;gap:16px}
  #splash .ps-bot{--k:1.8}
  #splash .ps-page{width:100%;box-sizing:border-box}
  #splash .ps-body{padding:14px;gap:9px}
  #splash .ps-blocks i{height:38px}
  #splash .ps-node{padding:13px 10px;font-size:10px}
  #splash .ps-wire{--zip:18px;width:30px;height:5px}
  #splash .ps-wire i{width:12px;height:12px}
  #splash .ps-ok{margin-left:10px;font-size:16px}
  #splash .ps-go{justify-self:center;font-size:24px}
  #splash.ps .sp-skip{right:12px;top:12px}
}
@media (max-width:640px) and (max-height:700px){
  #splash .ps-main{gap:10px;padding-top:62px}
  #splash .ps-bot{--k:1.3}
  #splash .ps-l1{font-size:32px}
  #splash .ps-l2{font-size:24px}
  #splash .ps-move{font-size:21px}
  #splash .ps-body{padding:10px;gap:6px}
  #splash .ps-blocks i{height:24px}
}

@keyframes ps-inL{from{transform:translateX(-130vw)}to{transform:none}}
@keyframes ps-inR{from{transform:translateX(130vw)}to{transform:none}}
@keyframes ps-run{from{transform:translateX(100vw)}to{transform:none}}
@keyframes ps-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ps-zip{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(var(--zip))}}