/* ============================================================
   The house curtain — dials and fallback.
   curtain.js simulates and draws the velvet; this file carries the
   committed value of every number it reads, so the look lives here and
   the ?curtaintune panel only overrides it. Loaded after map.css.
   ============================================================ */
:root{
  /* the cloth */
  --velvet-colour:#5e0e1a;       /* deep crimson; the shader lights it, so this is darker than it reads */
  --velvet-sheen:1.33;            /* the glow on fold flanks that makes velvet velvet */
  --velvet-sheen-tight:4.45;        /* higher = the glow hugs the very edge of each fold */
  --velvet-shadow:0.47;          /* how dark the valleys between folds go */
  --velvet-trim:#b38a3e;         /* gold galloon at the hem, gold fringe on the pelmet */
  --velvet-trim-w:2.8;           /* galloon height, % of the curtain */
  /* the folds */
  --velvet-pleat:145;             /* px between carriers when closed */
  --velvet-fullness:2.15;         /* cloth per opening: 1 = flat, 2 = a rich drape */
  /* the physics */
  --velvet-weight:9.8;             /* gravity, in screen heights per second²: lower = slower, heavier swing */
  --velvet-damp:0.023;           /* how quickly the swing dies */
  --velvet-bend:0.38;            /* how much the cloth resists being bunched */
  --velvet-open:2.3;             /* seconds for the leading edge to reach the wings */
  /* the light */
  --velvet-key:1.2;              /* warm spot from the front left */
  --velvet-foot:1.42;             /* amber footlights from below */
  /* the frame */
  --velvet-slim:7.9;             /* vw of gathered curtain left in view at each side */
  --velvet-pelmet:6;           /* vh, the valance across the top */
}

.velvet{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;display:block;
  opacity:0;transition:opacity .3s ease}

/* Once the cloth is drawn it IS the curtain, the pelmet and the masking legs. It fades
   in over the CSS drape (the shaders can finish a beat after first paint), and the
   drape only goes once the fade is done, so the hand-over never shows a gap. */
.velvet-on .velvet{opacity:1}
.velvet-on .drape,.velvet-on .pelmet{visibility:hidden;transition:visibility 0s .3s}
.velvet-on .theatre::before,.velvet-on .theatre::after{display:none}
/* The seven act ticks were registration marks on paper; on velvet they read as
   scratches across the valance (Dave, 9 Oct). */
.velvet-on .road-ticks{display:none}

/* The fallback: no WebGL, or the moment before curtain.js has drawn its first
   frame. Folds in CSS gradients, so even this reads as hanging cloth rather than
   a red rectangle. */
.drape{
  background:
    linear-gradient(rgba(20,4,8,.55), rgba(20,4,8,0) 22%, rgba(20,4,8,0) 70%, rgba(240,132,51,.16)),
    repeating-linear-gradient(90deg,
      #2a060c 0, #5a0f1b 1.1vw, #8c2a38 2vw, #6a1321 2.6vw, #3a0911 3.6vw, #2a060c 4.4vw);
}