/* ==========================================================================
   B1 · VELVET DRAW — the curtain preloader
   The curtain hangs inside the app chrome: below the top bar and rulers
   (z 55–60), above the canvas. Gated like B's loader: .js:not(.reduced).
   ========================================================================== */
.curtain{ display:none; }
.js:not(.reduced) .curtain:not([hidden]){
  display:block; position:fixed; z-index:54;
  top:calc(var(--bar) + var(--rule)); left:var(--rule); right:0; bottom:0;
  overflow:hidden; cursor:pointer; touch-action:manipulation;
  --val-h:96px; --floor:80px;
}
.curtain__gl{ position:absolute; inset:0; width:100%; height:100%; }

/* Valance furniture: the scene label, live dims and the bone mark ride on it. */
.curtain__valance{ position:absolute; left:0; right:0; top:0; height:var(--val-h); pointer-events:none; will-change:transform; }
.curtain__label{
  position:absolute; left:16px; right:16px; top:12px; display:flex; justify-content:space-between; gap:16px;
  font:400 .7rem/1 var(--mono); color:var(--paper-0); opacity:.78; white-space:nowrap;
}
.curtain__label span:first-child::before{ content:'# '; opacity:.6; }
.curtain__dims{ font-variant-numeric:tabular-nums; opacity:.8; }
.curtain__mark{
  position:absolute; left:50%; top:calc(var(--val-h) * .56); width:calc(var(--val-h) * .62); height:auto; aspect-ratio:176.6 / 140.4;
  margin-left:calc(var(--val-h) * -.31); translate:0 -50%; fill:currentColor; color:var(--paper-0); pointer-events:none; overflow:visible;
}

/* The apron: B's mono status line and progress bar stand in front of the hem. */
.curtain__floor{
  position:absolute; left:0; right:0; bottom:0; height:var(--floor);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; pointer-events:none;
}
.curtain__status{
  display:flex; align-items:center; gap:10px; padding:5px 10px; border-radius:6px;
  background:var(--paper-0); box-shadow:var(--shadow-ui);
  font:500 .74rem/1 var(--mono); color:var(--ink-500); white-space:nowrap;
}
.curtain__status::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--red-500); animation:cue-blink 1s steps(2, jump-none) infinite; }
.curtain__file{ color:var(--ink-900); }
.curtain__cue{ color:var(--red-500); }
.curtain__pct{ min-width:4ch; text-align:right; font-variant-numeric:tabular-nums; }
.curtain__bar{ width:min(220px, 50vw); height:2px; border-radius:2px; background:var(--paper-200); overflow:hidden; }
.curtain__bar span{ display:block; height:100%; background:var(--red-500); transform-origin:0 50%; transform:scaleX(0); }
.curtain__hint{ font:400 .66rem/1 var(--mono); color:var(--ink-300); opacity:0; }
@keyframes cue-blink{ 0%{ opacity:1; } 100%{ opacity:.25; } }

/* CSS fallback halves (no WebGL): folds as a gradient, sheen as an overlay. */
.curtain__css{ display:none; }
.curtain.is-css .curtain__gl{ display:none; }
.curtain.is-css .curtain__css{ display:block; position:absolute; inset:0 0 var(--floor) 0; }
.cc{ position:absolute; top:0; bottom:0; width:50%; will-change:transform; }
.cc--l{ left:0; transform-origin:0 0; }
.cc--r{ right:0; transform-origin:100% 0; }
.cc--l, .cc--r{
  background:
    linear-gradient(180deg, rgb(20 16 15 / .45), transparent 18%, transparent 86%, rgb(20 16 15 / .35) 100%),
    radial-gradient(120% 90% at 50% 62%, transparent 40%, rgb(20 16 15 / .35)),
    repeating-linear-gradient(90deg, var(--red-700) 0, var(--red-600) 1.6%, var(--red-400) 3.4%, var(--red-500) 4.6%, var(--red-700) 7.6%);
}
.cc-val{ display:none; }
.curtain.is-css .cc-val{
  display:block; position:absolute; left:0; right:0; top:0; height:var(--val-h);
  background:linear-gradient(180deg, var(--red-700), var(--red-500) 70%, var(--red-600)); border-bottom:1px solid rgb(251 247 244 / .3);
}

/* While the curtain is in, the dock steps back (it returns with the house). */
.dock{ transition:opacity .4s, translate .5s var(--ease); }
.curtain-up .dock{ opacity:0; translate:-50% 16px; pointer-events:none; }
.curtain-up body{ overflow:hidden; }
.reduced [data-curtain], .no-js [data-curtain]{ display:none; }
.tool svg.tool__curtain{ fill:none; stroke-width:1.5; }