/* curtain.css - the velvet drape and the iris (hero-curtain.js), moved here from
   hero.css when a second surface took the show: the home hero's Spotlight, FotW
   and Random Liveset slides, and the directory side column's spotlights
   (listing-side.js). hero.css keeps what only a carousel slide needs: the
   curtain hidden on a slide that is not showing, and .hc-pre. */

/* ── The curtain: the changeover when a timed pick flips ──────────────────
   hero-curtain.js owns the show: it builds these nodes inside the slide's
   .hero-content, sizes them to the whole hero and moves them with
   element.animate(), reduced-motion branch included. This block is only how
   the pieces look. --hc-c is the scope colour the caller resolved (the
   artist scope on the Spotlight, the sash colour on the FotW, the liveset
   scope for the Random Liveset's iris rim); everything else is derived from
   it or literal. The velvet is a physical thing on a dark stage and looks the
   same in both themes, like the spotlight's beam and marquee. */
@property --hc-iris { syntax: '<number>'; inherits: false; initial-value: 40; }
.hero-curtain {
  --hc-base: color-mix(in oklab, var(--hc-c, #7c3aed) 56%, #0a0510);
  --hc-gold: linear-gradient(180deg, #6f5220, #f5d98b 42%, #b88c3c 72%, #6f5220);
  position: absolute;
  z-index: 11;            /* over everything in .hero-content ... */
  pointer-events: auto;   /* ... and nothing behind a closed curtain takes a click */
  overflow: hidden;
}
.hc-keep { position: relative; z-index: 12; }   /* the badge, in front of it */

/* the two halves: gathered in the wings at rest, 28px of overlap when shut */
.hc-half { position: absolute; top: 0; bottom: 0; width: calc(50% + 28px); }
.hc-l { left: 0;  transform-origin: 0 0;    transform: translateX(-100%) scaleX(.2); }
.hc-r { right: 0; transform-origin: 100% 0; transform: translateX(100%) scaleX(.2); z-index: 1; }
/* the right half hangs in front where they meet and shades the left */
.hc-r::before { content: ''; position: absolute; top: 0; bottom: 0; left: -26px; width: 26px; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.42)); }

/* The velvet, top layer first: the shade under the valance and at the floor
   (a touch of footlight warmth above the hem); the pile's fine vertical
   grain; the big folds - dark valley, slope, the lit crest velvet gets where
   the pile catches the light, slope, valley - and two more fold patterns at
   pitches that never line up with it, so the drape does not read as
   stripes; and the stage light falling off towards the wings. */
.hc-cloth {
  --hc-side: 90deg;
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  background-color: var(--hc-base);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.72) 0, rgba(0,0,0,.28) 8%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 76%, rgba(255,200,130,.07) 91%, rgba(0,0,0,.3) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.68) 0, rgba(0,0,0,.34) 16px, rgba(0,0,0,.05) 38px, rgba(255,255,255,.16) 55px, rgba(255,255,255,.05) 66px, rgba(0,0,0,.12) 86px, rgba(0,0,0,.48) 108px, rgba(0,0,0,.68) 124px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0, rgba(0,0,0,0) 20px, rgba(255,255,255,.05) 32px, rgba(0,0,0,0) 45px, rgba(0,0,0,.18) 77px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0, rgba(0,0,0,0) 60px, rgba(255,255,255,.04) 100px, rgba(0,0,0,0) 140px, rgba(0,0,0,.16) 193px),
    linear-gradient(var(--hc-side), rgba(0,0,0,.42), rgba(0,0,0,0) 65%);
}
.hc-r .hc-cloth { --hc-side: 270deg; }
/* the leading edge, where the cloth turns back on itself */
.hc-cloth::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,255,255,.1) 40%, rgba(0,0,0,.5));
}
.hc-r .hc-cloth::before { right: auto; left: 0; transform: scaleX(-1); }
/* the hem: a twisted gold braid over a fringe that thins out at its tips */
.hc-cloth::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.3) 0 2px, rgba(0,0,0,0) 2px 6px) 0 0 / 100% 6px no-repeat,
    var(--hc-gold) 0 0 / 100% 6px no-repeat,
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)) 0 6px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #e9c26a 0 1px, #9a7430 1px 2px, rgba(0,0,0,0) 2px 4px) 0 6px / 100% 18px no-repeat;
  -webkit-mask: linear-gradient(180deg, #000 55%, rgba(0,0,0,.2));
          mask: linear-gradient(180deg, #000 55%, rgba(0,0,0,.2));
}

/* the follow spot held on the badge while the curtain is shut */
.hc-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(380px 290px at var(--hc-lx, 50%) calc(var(--hc-ly, 42%) + 40px), rgba(255,228,181,.3), rgba(255,228,181,.1) 45%, rgba(255,228,181,0) 72%);
}

/* The valance: a velvet band with a braid along its foot, and a row of swags
   (half-ellipses, folds drawn as arcs, gold-edged) with a tassel at every
   join. Swags and tassels are laid out from the centre so the row is
   symmetric at any width. The tassels hang from .hc-val itself, outside the
   swags' mask, which would cut them off at the joins. */
.hc-val {
  --hc-swag: 160px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 86px;
  z-index: 3;
  pointer-events: none;
  transform: translateY(-105%);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.45));
}
.hc-val-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42px;
  background-color: var(--hc-base);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.08) 60%, rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0, rgba(255,255,255,.07) 9px, rgba(0,0,0,.34) 18px);
}
.hc-val-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.3) 0 2px, rgba(0,0,0,0) 2px 6px),
    var(--hc-gold);
}
.hc-val-swags {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 40px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,0) 85%, #f2d27f 88%, #b88c3c 92.5%, #6f5220 96%, rgba(0,0,0,0) 97%) 50% 0 / var(--hc-swag) 100% repeat-x,
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 88%) 50% 0 / var(--hc-swag) 100% repeat-x,
    repeating-radial-gradient(ellipse 50% 100% at 50% 0, rgba(0,0,0,.26) 0 6px, rgba(255,255,255,.07) 12px, rgba(0,0,0,.26) 19px) 50% 0 / var(--hc-swag) 100% repeat-x,
    var(--hc-base);
  -webkit-mask: radial-gradient(ellipse 50% 100% at 50% 0, #000 96%, rgba(0,0,0,0) 97.5%) 50% 0 / var(--hc-swag) 100% repeat-x;
          mask: radial-gradient(ellipse 50% 100% at 50% 0, #000 96%, rgba(0,0,0,0) 97.5%) 50% 0 / var(--hc-swag) 100% repeat-x;
}
.hc-val::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 37px;
  height: 36px;
  background:
    radial-gradient(circle at 50% 6px, #f7de95 0 3px, #9a7430 4px, rgba(0,0,0,0) 4.5px) calc(50% + var(--hc-swag) / 2) 0 / var(--hc-swag) 12px repeat-x,
    linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 5px), #7d5c24 calc(50% - 5px), #f0cf7c 50%, #7d5c24 calc(50% + 5px), rgba(0,0,0,0) calc(50% + 5px)) calc(50% + var(--hc-swag) / 2) 10px / var(--hc-swag) 22px repeat-x;
}

/* The iris: a black stage with an elliptical hole on its target, the rim of
   the hole warmed by --hc-c. --hc-x/-y/-rx/-ry come from the target's box;
   --hc-iris scales the hole (1 = the pin on the target, 0 = out, larger =
   open past the hero's corners). The mask cuts the hole; the background
   draws the rim just outside it. */
.hero-curtain--iris {
  --hc-iris: 40;
  --hc-hole: calc(var(--hc-rx, 200px) * var(--hc-iris)) calc(var(--hc-ry, 150px) * var(--hc-iris)) at var(--hc-x, 50%) var(--hc-y, 50%);
  background: radial-gradient(var(--hc-hole), rgba(0,0,0,0) 76%, color-mix(in srgb, var(--hc-c, #f59e0b) 34%, transparent) 86%, #030205 100%);
  -webkit-mask: radial-gradient(var(--hc-hole), rgba(0,0,0,0) 78%, #000 100%);
          mask: radial-gradient(var(--hc-hole), rgba(0,0,0,0) 78%, #000 100%);
}