/* Resonance Court — kiosk shell (1920×1080, scaled to fit) */
:root{
  --ivory:#F7F2E8; --ink:#191919; --ink2:rgba(25,25,25,.55); --rule:rgba(25,25,25,.16);
  --red:#E63B30; --cobalt:#2448B2; --yellow:#F5C542; --pink:#EE92AC; --umber:#63594E;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Instrument Sans',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --panel:rgba(43,38,34,.92);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#F7F2E8;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#viewport{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;background:var(--ivory);overflow:hidden;transform-origin:0 0;color:var(--ink);font-family:var(--sans)}

/* ---------- canvas ---------- */
.canvas{position:absolute;left:0;top:0;right:0;bottom:72px;overflow:hidden}
#paint{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .9s ease}
#paint.fading{opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.upnext{position:absolute;left:40px;bottom:36px;font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(247,242,232,.88);padding:10px 16px;border-radius:999px;display:flex;gap:18px;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.upnext.on{opacity:1;transform:none}

/* ---------- intro ---------- */
.intro{position:absolute;left:0;top:0;right:0;bottom:72px;transition:opacity .9s ease .35s}
#stage:not([data-state="intro"]) .intro{opacity:0;pointer-events:none}
.court-lines i{position:absolute;display:block;border-color:rgba(230,59,48,.55);border-style:solid;border-width:0;transition:opacity .8s ease}
.cl-h{left:0;right:0;top:calc(50% - 156px);border-top-width:2px!important}
.cl-box{top:calc(50% - 156px);width:391px;height:393px;border-width:2px!important}
.cl-l{left:-2px;border-left-width:0!important}
.cl-r{right:-2px;border-right-width:0!important}
.cl-v{left:calc(50% - 1px);border-left-width:2px!important}
.cl-v1{top:calc(50% - 156px);height:165px}
.cl-v2{top:calc(50% + 220px);bottom:0}

.ball-wrap{position:absolute;left:50%;top:calc(50% - 157px);width:0;height:0}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(25,25,25,.16);transform:translate(-50%,-50%)}
.r1{width:247px;height:247px}.r2{width:313px;height:313px;border-color:rgba(25,25,25,.12)}.r3{width:396px;height:396px;border-color:rgba(25,25,25,.08)}
/* resonance — red rounds pushed out by the ball */
.wave{position:absolute;left:50%;top:50%;width:194px;height:194px;margin:-97px 0 0 -97px;border-radius:50%;border:1.5px solid var(--red);opacity:0;
  animation:resonate 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.wave:nth-of-type(2){animation-delay:1.2s}
.wave:nth-of-type(3){animation-delay:2.4s}
@keyframes resonate{0%{transform:scale(1);opacity:.75;border-width:2px}70%{opacity:.18}100%{transform:scale(2.15);opacity:0;border-width:.6px}}

.ball{position:absolute;left:-97px;top:-97px;width:194px;height:194px;border-radius:50%;
  background:url(../assets/squash-ball.svg) center/100% 100% no-repeat;transition:transform .25s ease;animation:breathe 3.6s ease-in-out infinite}
.ball:hover{transform:scale(1.04)}
.ball:focus-visible{outline:2px solid var(--cobalt);outline-offset:6px}
@keyframes breathe{0%,100%{scale:1}8%{scale:1.025}20%{scale:1}}
.core{position:absolute;left:65px;top:65px;width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.core svg{margin-left:4px}

.intro-text{position:absolute;left:0;right:0;top:calc(50% + 8px);display:flex;flex-direction:column;align-items:center;text-align:center}
.quiet{position:relative;font-family:var(--serif);font-weight:400;font-size:64px;line-height:83px;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;padding:0 18px}
.intro-text p{font-size:18px;line-height:25px;color:var(--umber);margin-top:8px;padding:0 12px}
.intro-text p b{font-weight:600}
.begin{display:flex;align-items:center;gap:8px;margin-top:24px;font-family:var(--mono);font-size:18px;line-height:25px;letter-spacing:.08em;color:var(--umber);padding-right:6px}
.begin kbd{font-family:inherit;background:rgba(99,89,78,.1);border:1px solid rgba(99,89,78,.28);padding:1px 16px;border-radius:2px;color:var(--umber)}
.begin span{opacity:.6}
#stage[data-state="loading"] .begin span::after{content:' · LISTENING…'}

/* ---------- live ---------- */
.live{position:absolute;right:32px;top:32px;height:36px;display:flex;align-items:center;gap:16px;padding:0 18px 0 16px;border-radius:999px;background:rgba(247,242,232,.62);font-family:var(--mono);z-index:5}
.live-tag{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:500;color:var(--ink)}
.live-tag i{width:8px;height:8px;border-radius:50%;background:currentColor}
.live-tag b{font-weight:500}
.live-time{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;color:#000;display:flex;gap:8px;align-items:baseline}
.live-time b{font-weight:500}
#stage[data-state="play"] .live-tag{color:var(--red)}
#stage[data-state="play"] .live-tag i{width:12px;height:12px;background:radial-gradient(circle,var(--red) 0 4px,rgba(230,59,48,.45) 4.5px 6px);animation:livepulse 1.2s ease-in-out infinite}
@keyframes livepulse{50%{box-shadow:0 0 0 5px rgba(230,59,48,0)}0%,100%{box-shadow:0 0 0 0 rgba(230,59,48,.45)}}
#stage[data-state="paused"] .live-tag i{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- video panel ---------- */
.vp{position:absolute;right:40px;bottom:112px;width:480px;height:270px;border-radius:10px;overflow:hidden;background:#222;
  box-shadow:0 18px 40px rgba(25,20,14,.28);z-index:6;
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
#stage[data-state="intro"] .vp,#stage[data-state="loading"] .vp,#stage[data-hidden="true"] .vp{opacity:0;transform:translateY(24px) scale(.97);pointer-events:none}
.vp-media{position:absolute;inset:0}
.vp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#111;opacity:0;transition:opacity .3s}
.vp-media.has-video video{opacity:1}
.vp-media.has-video img{opacity:0}
.vp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}
.vp-bar{position:absolute;left:0;right:0;top:0;height:56px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:var(--panel);color:#fff}
.vp-ttl{display:flex;align-items:center;gap:13px;font-size:16px;font-weight:600;letter-spacing:-.06em;min-width:0}
.vp-ttl b,.pill-ttl b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}
.vp-toggle{display:flex;align-items:center;gap:8px;font-size:16px;color:#fff;letter-spacing:-.03em;height:44px;opacity:.92}
.vp-toggle:hover{opacity:1}
.vp-ctrl{position:absolute;left:0;right:0;bottom:0;height:56px;padding:0 20px;display:flex;align-items:center;gap:12px;color:#fff;font-size:14px;font-variant-numeric:tabular-nums;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
.vp-ctrl button{width:24px;height:44px;display:grid;place-items:center}
.vp-track{flex:1;height:8px;border-radius:8px;background:rgba(217,217,217,.6);position:relative;cursor:pointer}
.vp-track i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:#fff;width:0}

/* ---------- hidden pill ---------- */
.pill{position:absolute;right:40px;bottom:112px;width:332px;height:56px;border-radius:28px;background:var(--panel);color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:6;box-shadow:0 12px 28px rgba(25,20,14,.25);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s ease .1s,transform .5s cubic-bezier(.2,.8,.2,1) .1s}
#stage[data-hidden="true"]:not([data-state="intro"]):not([data-state="loading"]) .pill{opacity:1;transform:none;pointer-events:auto}
.pill-ttl{display:flex;align-items:center;gap:13px;font-size:16px;min-width:0}
.eq{width:24px;height:24px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:4px 0}
.eq i{width:4px;border-radius:2px;background:var(--red);height:40%;animation:eqb 1s ease-in-out infinite}
.eq i:nth-child(1){animation-duration:.9s}
.eq i:nth-child(2){animation-duration:.7s;animation-delay:-.35s}
.eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
@keyframes eqb{0%,100%{height:30%}50%{height:100%}}
#stage[data-state="paused"] .eq i,#stage[data-state="hold"] .eq i{animation-play-state:paused}

/* ---------- footer ---------- */
.foot{position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--ivory);border-top:1px solid var(--rule);display:flex;align-items:center;gap:16px;padding:0 20px;z-index:7}
.foot h1{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.foot span{font-size:16px;color:var(--umber);margin-top:8px}

/* ---------- volume popover (no mute — sound drives the painting) ---------- */
.vol-pop{position:absolute;right:12px;bottom:60px;width:40px;height:132px;border-radius:20px;background:rgba(43,38,34,.86);
  display:grid;place-items:center;z-index:2;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);touch-action:none;cursor:pointer}
.vp.vol-open .vol-pop{opacity:1;transform:none;pointer-events:auto}
.vol-pop:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.vol-track{position:relative;width:4px;height:100px;border-radius:2px;background:rgba(255,255,255,.3)}
.vol-fill{position:absolute;left:0;right:0;bottom:0;border-radius:2px;background:#fff}
.vol-thumb{position:absolute;left:50%;width:16px;height:16px;margin:0 0 -8px -8px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
#muteBtn{border-radius:50%;width:36px!important;height:36px!important;margin-right:-6px;transition:background .15s,box-shadow .15s}
.vp.vol-open #muteBtn{background:rgba(255,255,255,.14);box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.upnext em{font-style:normal;color:var(--ink2)}
#stage[data-state="hold"] .live-tag,#stage[data-state="fade"] .live-tag{color:var(--ink)}
#stage[data-state="hold"] .live-tag i,#stage[data-state="fade"] .live-tag i{border-radius:1px}
#stage[data-state="fade"] .eq i{animation-play-state:paused}

/* ---------- hover states (video panel) ---------- */
.vp-ctrl button,.vp-toggle{position:relative;border-radius:999px;transition:background .18s ease,transform .18s ease}
.vp-ctrl button::before{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:rgba(255,255,255,.18);transform:scale(.6);opacity:0;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.vp-ctrl button:hover::before,.vp-ctrl button:focus-visible::before{opacity:1;transform:scale(1)}
.vp-ctrl button svg{position:relative}
.vp-ctrl button:active svg{transform:scale(.9)}
.vp-toggle{padding:0 10px 0 14px;margin-right:-10px}
.vp-toggle:hover{background:rgba(255,255,255,.14)}
.vp-toggle svg{transition:transform .2s ease}
.vp-toggle:hover svg{transform:translateY(2px)}
#showBtn:hover svg{transform:translateY(-2px)}
.vp-track{transition:height .15s ease}
.vp-track::after{content:'';position:absolute;top:50%;left:var(--p,0%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);transform:scale(.75);transition:transform .15s ease}
.vp-track:hover{height:10px}
.vp-track:hover::after{transform:scale(1)}
.pill{transition:opacity .4s ease .1s,transform .5s cubic-bezier(.2,.8,.2,1) .1s,background .18s ease}
.ball:active{transform:scale(.97)}

/* sand title: the real text stays for layout/accessibility; the canvas draws it */
.quiet.sand-on{color:transparent}
.quiet .sand{position:absolute;pointer-events:none}

/* finished painting: step the video out of the way so the artwork is seen whole; returns with the next rally */
#stage.is-done .vp{opacity:0!important;transform:translateY(24px) scale(.97)!important;pointer-events:none!important}
#stage.is-done .pill{opacity:0!important;transform:translateY(16px)!important;pointer-events:none!important}