/* FRAMEZZ — FX layer. Boot, hero-scrub, hover preview, focus player,
   bespoke cursor, scene splice, film-strip scrubber. Stays in the
   Timeline-OS language: deep black, single accent, mono chrome. */

/* ============ BOOT ============ */
#bootfx{display:none}
html.booting #bootfx{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px}
html.booting{overflow:hidden}
#bootfx.done{transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.2,1)}
#bootfx .bwrap{width:min(560px,82vw);display:flex;flex-direction:column;gap:18px}
#bootfx .brow{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
#bootfx .bmk{font-family:var(--disp);font-weight:800;font-size:clamp(40px,7vw,72px);letter-spacing:-.02em;color:var(--ink);line-height:.9}
#bootfx .bmk b{color:var(--accent)}
#bootfx .btc{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
#bootfx .btc b{color:var(--accent);font-weight:400}
#bootfx .btrack{height:2px;background:var(--line2);position:relative;overflow:hidden}
#bootfx .bfill{position:absolute;top:0;left:0;bottom:0;right:100%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* ============ SPLICE ============ */
#splicefx{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:0}
#splicefx.fire{animation:splicefire .34s ease-out}
#splicefx .fl{position:absolute;inset:0;background:rgba(243,244,241,.045)}
#splicefx .sl{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px)}
@keyframes splicefire{0%{opacity:0}10%{opacity:1}100%{opacity:0}}

/* ============ BESPOKE CURSOR ============ */
#curfx{position:fixed;top:0;left:0;z-index:130;pointer-events:none;width:76px;height:76px;margin:-38px 0 0 -38px;
  border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity .25s;
  background:var(--accent);color:#0a0a0a;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;will-change:transform}
#curfx.on{opacity:1}
#curfx .cg{display:flex;align-items:center;gap:5px}
#curfx svg{width:11px;height:11px;fill:#0a0a0a}
@media(hover:none),(pointer:coarse){#curfx{display:none!important}}
.work .viewer.cursor-none,.work .viewer.cursor-none *{cursor:none}

/* ============ HOVER PREVIEW ============ */
.viewer .preview{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:6;background:#000;
  opacity:0;transition:opacity .55s;pointer-events:none}
.viewer.previewing .preview{opacity:1}
.viewer.previewing .poster{filter:brightness(.5) saturate(.9)}
.viewer.previewing .shade{opacity:.2}
.viewer.previewing .playbtn{opacity:0}
.viewer .livebadge{position:absolute;top:10px;left:10px;z-index:7;display:none;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  background:rgba(8,8,9,.62);padding:5px 8px}
.viewer.previewing .livebadge{display:flex}
.viewer .livebadge i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.4s infinite}
/* mask that hides the YouTube title + channel avatar (top strip) while playing */
.viewer .ytmask{position:absolute;top:0;left:0;right:0;height:58px;z-index:9;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(180deg,rgba(7,7,8,.97),rgba(7,7,8,.74) 44%,transparent)}
.viewer.previewing .ytmask,.viewer.playing .ytmask{opacity:1}
/* desktop: explicit fullscreen affordance (the big overlay is opt-in on desktop) */
.expandbtn{position:absolute;top:10px;right:10px;z-index:10;width:34px;height:34px;display:grid;place-items:center;
  background:rgba(8,8,9,.62);border:1px solid var(--line2);color:var(--ink);cursor:pointer;opacity:0;
  transition:opacity .25s,background .2s,border-color .2s}
.expandbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.proj:hover .expandbtn,.viewer.playing .expandbtn{opacity:1}
.expandbtn:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
@media(hover:none),(pointer:coarse){.expandbtn{display:none!important}}

/* ============ FOCUS PLAYER ============ */
#focusfx{position:fixed;inset:0;z-index:160;display:none;align-items:center;justify-content:center}
#focusfx.open{display:flex}
#focusfx .fx-bd{position:absolute;inset:0;background:rgba(4,4,5,.88);backdrop-filter:blur(9px);opacity:0;transition:opacity .4s}
#focusfx.in .fx-bd{opacity:1}
#focusfx .fx-bar{position:absolute;left:0;right:0;height:9%;min-height:58px;background:#000;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,4vw,46px);
  transition:transform .5s cubic-bezier(.7,0,.2,1)}
#focusfx .fx-bar.top{top:0;transform:translateY(-100%)}
#focusfx .fx-bar.bot{bottom:0;transform:translateY(100%)}
#focusfx.in .fx-bar{transform:none}
#focusfx .fx-meta{display:flex;align-items:baseline;gap:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft);min-width:0}
#focusfx .fx-meta .nm{font-family:var(--disp);font-weight:700;font-size:clamp(16px,2vw,25px);letter-spacing:-.01em;
  color:var(--ink);text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#focusfx .fx-tc{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--accent);font-variant-numeric:tabular-nums}
#focusfx .fx-x{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line2);padding:9px 14px;cursor:pointer;background:none;transition:.2s;white-space:nowrap}
#focusfx .fx-x:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
#focusfx .fx-stage{position:relative;z-index:1;background:#000;box-shadow:0 50px 130px rgba(0,0,0,.7);
  opacity:0;transform:scale(.94);transition:opacity .5s,transform .55s cubic-bezier(.16,1,.3,1)}
#focusfx.in .fx-stage{opacity:1;transform:none}
#focusfx .fx-stage.wide{width:min(84vw,1440px);aspect-ratio:16/9}
#focusfx .fx-stage.tall{height:min(78vh,860px);aspect-ratio:9/16}
#focusfx .fx-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#focusfx .fx-mask{position:absolute;top:0;left:0;right:0;height:74px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.64) 46%,transparent)}
#focusfx .fx-tick{position:absolute;width:14px;height:14px;border:1px solid var(--soft);z-index:2;opacity:.55}
#focusfx .fx-tick.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
#focusfx .fx-tick.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
#focusfx .fx-open{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);transition:.2s}
#focusfx .fx-open:hover{color:var(--accent)}
body.fxlock{overflow:hidden}

/* ============ FILM-STRIP SCRUBBER ============ */
.tl-clip .thumbstripe{background:rgba(255,255,255,.02);
  background-image:repeating-linear-gradient(90deg,transparent 0 16px,rgba(255,255,255,.045) 16px 17px)}
.tl-clip::before,.tl-clip::after{content:"";position:absolute;left:0;right:0;height:5px;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(243,244,241,.16) 0 3px,transparent 3px 9px)}
.tl-clip::before{top:0}
.tl-clip::after{bottom:0}
.tl-clip .ci,.tl-clip .cn{position:relative;z-index:1}
.tl-clip.active::before,.tl-clip.active::after{background:repeating-linear-gradient(90deg,rgba(255,67,38,.5) 0 3px,transparent 3px 9px)}

@media(prefers-reduced-motion:reduce){
  #curfx{display:none!important}
  .viewer .preview{display:none!important}
}