/* cørt. play app — the premium layer (1 Oct). Sits on top of style.css and changes how it
   feels, not what it does: glass header, a pill that slides between tabs, views that glide,
   buttons that dip when pressed, softer surfaces. Nothing here touches the TV screen. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.45,.64,1);--radius:18px;
  --fill:rgba(255,255,255,.05);--fill2:rgba(255,255,255,.09);--a-ring:rgba(255,230,0,.28);
  --sh1:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2);--sh2:0 2px 6px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.4)}

@view-transition{navigation:auto}
::view-transition-old(root){animation:apOut .28s var(--ease) both}
::view-transition-new(root){animation:apIn .5s var(--ease) both}
@keyframes apOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes apIn{from{opacity:0;transform:translateY(16px)}}

html{scroll-behavior:smooth}
body{letter-spacing:-.003em;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}

/* glass header that stays with you */
header.top{position:sticky;top:0;z-index:20;margin:0 calc(var(--pad) * -1);padding:12px var(--pad) 14px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
body.ap-scrolled header.top{border-bottom-color:var(--line)}
.pill{border-color:transparent;background:var(--fill);transition:background .25s,transform .22s var(--spring)}
.pill:hover{background:var(--fill2)}

/* tabs: one track, one pill that springs to the tab you chose */
nav.tabs{position:relative;gap:2px;padding:4px;background:var(--fill);border-radius:999px;width:max-content;max-width:100%;margin-bottom:18px}
nav.tabs button{position:relative;z-index:1;border:0;padding:9px 16px;color:var(--dim);transition:color .25s var(--ease)}
nav.tabs button:hover{color:var(--ink);border-color:transparent}
nav.tabs button.on{background:transparent;color:#000}
nav.tabs .ap-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--accent);
  box-shadow:0 6px 18px -8px rgba(255,230,0,.6);transition:transform .5s var(--spring),width .5s var(--spring)}
nav.tabs .lock svg{display:inline-block;width:.95em;height:.95em;vertical-align:-.1em}
@media(max-width:700px){nav.tabs{width:auto;margin-left:0;margin-right:0;padding:4px}}

/* views glide in from the side you're heading */
#views.ap-in>*{animation:apView .5s var(--ease) both}
#views.ap-in.ap-left>*{animation-name:apViewL}
#views.ap-in>*:nth-child(2){animation-delay:.04s}#views.ap-in>*:nth-child(3){animation-delay:.08s}#views.ap-in>*:nth-child(n+4){animation-delay:.12s}
@keyframes apView{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes apViewL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* surfaces */
.card{border-radius:var(--radius);box-shadow:var(--sh1);border-color:rgba(255,255,255,.07)}
input,select,textarea{transition:border-color .2s,box-shadow .25s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--a-ring)}

/* every press answers */
.btn{border-radius:14px;transition:transform .22s var(--spring),filter .2s,box-shadow .25s var(--ease),background .25s,border-color .25s}
.btn:not(.ghost):not(.danger){box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px -8px rgba(255,230,0,.55)}
.btn:not(.ghost):not(.danger):hover{filter:none;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 26px -8px rgba(255,230,0,.65)}
.btn.ghost{border-color:transparent;background:var(--fill)}
.btn.ghost:hover{background:var(--fill2);border-color:transparent}
.ap-pressed{transform:scale(.965)!important;transition-duration:.08s!important}

/* the bottom action bar floats in on glass */
footer.bar:not(.hide){backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);animation:apBar .55s var(--spring) both}
@keyframes apBar{from{transform:translateY(100%)}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  #views.ap-in>*,footer.bar:not(.hide){animation:none}
  nav.tabs .ap-pill,.btn{transition:none}
}