/* ============================================================================
   Reel playback bar polish, loads AFTER site.css and overrides its
   #reel-controls block (same specificity, later wins). The bar scrolls inside
   #app so it must stay faux glass: layered gradients only, NO backdrop-filter.
============================================================================ */
#reel-controls{
  left:12px;right:12px;bottom:12px;
  gap:12px;padding:9px 12px;
  border-radius:19px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,0) 42%),
    linear-gradient(320deg,rgba(90,110,255,.05),rgba(0,0,0,0) 55%),
    linear-gradient(0deg,rgba(9,10,15,.94),rgba(14,15,22,.90));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 34px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.5);
  transform:translateY(12px);
  filter:blur(5px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),filter .5s var(--ease),visibility 0s linear .5s;
}
#reel-controls.show{
  transform:translateY(0);filter:blur(0);
  transition:opacity .4s var(--ease),transform .5s var(--ease),filter .5s var(--ease);
}
/* keyboard backstop mirrors site.css: focus keeps the bar visible AND settled */
#reel-controls:focus-within{transform:translateY(0);filter:blur(0)}

/* ------------------------------------------------- buttons: sweep + tracking */
#reel-controls button{
  position:relative;z-index:0;overflow:hidden;
  padding:8px 14px;border-radius:999px;
  color:#fff;opacity:.92;
  transition:color .3s var(--ease),letter-spacing .4s var(--ease),opacity .25s,transform .2s var(--ease);
}
#reel-controls button::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(115deg,#fff 60%,#dfe6ff);
  transform:translateX(-103%);
  transition:transform .38s var(--ease);
}
#reel-controls button:hover{opacity:1;color:#0b0c11;letter-spacing:.38em}
#reel-controls button:hover::before{transform:translateX(0)}
#reel-controls button:active{transform:translateY(1px)}
#reel-controls button:focus-visible{outline:1px solid rgba(255,255,255,.65);outline-offset:2px}

/* ------------------------------------------- time readouts (added by reel.js) */
#reel-ctl-cur,#reel-ctl-dur{
  flex:none;min-width:36px;text-align:center;user-select:none;
  color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
#reel-ctl-cur{opacity:.62}
#reel-ctl-dur{opacity:.36}

/* ------------------------------------- scrubber: thickening rail + soft knob */
#reel-ctl-track{height:24px}
#reel-ctl-rail{
  height:3px;border-radius:999px;background:rgba(255,255,255,.20);
  transition:height .3s var(--ease),background .3s var(--ease);
}
#reel-ctl-track:hover #reel-ctl-rail,
#reel-ctl-track:focus-visible #reel-ctl-rail{height:6px;background:rgba(255,255,255,.28)}
#reel-ctl-fill{
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.82),#fff);
}
#reel-ctl-fill::after{
  content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.13),0 2px 8px rgba(0,0,0,.5);
  transform:translateY(-50%) scale(0);
  transition:transform .3s var(--ease);
}
#reel-ctl-track:hover #reel-ctl-fill::after,
#reel-ctl-track:focus-visible #reel-ctl-fill::after{transform:translateY(-50%) scale(1)}

/* ------------------------------------------ hover time tooltip (mm:ss, mono) */
#reel-ctl-tip{
  position:absolute;left:0;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  padding:4px 9px;border-radius:9px;
  pointer-events:none;white-space:nowrap;user-select:none;
  color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;font-variant-numeric:tabular-nums;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 45%),
    rgba(11,12,18,.96);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
#reel-ctl-tip.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  #reel-ctl-cur,#reel-ctl-dur{display:none}
  #reel-controls{gap:10px;padding:8px 10px}
}