/* 42 Drawn in Light. Lights Out's dark room and its four doors, but the doors have no bodies: each
   one is only the light escaping it, drawn in the line language of the design it leads to.
     Door 1  (32)  gold light through film sprocket holes all round the frame; a gold line beneath
     Door 2  (33)  the crack round a rounded television door, broken into blue-white scan lines
     Door 3  (34)  flat cream light cut into slivers round a crooked door left ajar; a cream wedge
     Door 4  (35)  a double gold hairline with an arch; a bright seam where the two doors meet
   Every door is drawn on a stage measured in em, so it scales as one piece with the window. The stage
   is 62em wide and 118em tall; the doors stand on the floor line at 104em, and the light poured onto
   the floor may run on past the stage, under the door's label. The leaves themselves are pure black,
   like the room: they only show once they swing open against the light behind them.
   The words are in Cormorant, a calligraphic display Garamond, mostly italic, in plain warm white:
   no glow on the type, only the doors give off light. */

:root {
  --gold: #C9A24B;
  --paper: #F3EFE4;
  --ink: #f5f0e6;
  --serif: 'Cormorant', Garamond, Georgia, serif;
  --side: clamp(16px, 4.4vw, 190px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #fff; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, p, ul { margin: 0; padding: 0; }
img, svg { display: block; }

/* ---------- the room: one screen ---------- */
.room {
  height: 100vh; height: 100svh; min-height: 540px;         /* a landscape phone may scroll */
  display: flex; flex-direction: column; overflow: hidden;
  padding: clamp(16px, 3.4svh, 60px) var(--side) clamp(10px, 2.2svh, 40px);
}

/* The page's own words: one serif, set plainly. */
.head { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo { height: clamp(28px, 4.2svh, 56px); width: auto; opacity: .82; }
.title {
  margin-top: clamp(8px, 1.4svh, 20px);
  font: italic 500 clamp(42px, min(3.6vw, 6.6svh), 96px)/1 var(--serif);
  letter-spacing: -.01em; color: var(--ink);
}
.line {
  margin-top: clamp(4px, .8svh, 12px);
  font: italic 500 clamp(18px, min(1.25vw, 2.5svh), 32px)/1.25 var(--serif);
  color: rgba(245, 240, 230, .86);
}
/* what a door is: the same work behind each one, only the design changes */
.note {
  margin-top: clamp(2px, .5svh, 8px); max-width: 34em; text-wrap: balance;
  font: 500 clamp(15px, min(.95vw, 1.9svh), 24px)/1.4 var(--serif);
  color: rgba(245, 240, 230, .56);
}

.doors {
  flex: 1 1 auto; min-height: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2svh, 32px) clamp(8px, 2vw, 72px);
  margin-top: clamp(6px, 2.4svh, 44px);
}
.doors > li { display: flex; min-width: 0; min-height: 0; }

.door {
  position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  color: inherit; text-decoration: none; outline: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity .45s ease;
}
.art { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; }
.stage {
  position: absolute; left: 50%; bottom: 0;
  width: 62em; height: 118em; margin-left: -31em;
  font-size: min(100cqh / 118, 100cqw / 62);
}
.stage > * { position: absolute; }
.stage > span { display: block; }
.lines { left: 0; top: 0; width: 62em; height: 118em; overflow: visible; transition: opacity .45s ease, filter .45s ease; }

/* While one door is pointed at, the other three go darker still. */
.doors:has(.door:is(:hover, :focus-visible)) .door:not(:hover):not(:focus-visible) { opacity: .26; }
.is-leaving .door:not(.is-going) { opacity: .08; }


/* ---------- the parts every door shares ---------- */
.opening { perspective: 150em; }
.light { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.leaf { position: absolute; inset: 0; background: #000; transform-origin: 0 50%; }
.door:is(:hover, :focus-visible, .is-going) .light { opacity: 1; }

/* the bright line on the floor under the door, and the faint wash it throws toward us */
.spill { left: -6em; right: -6em; top: 103.5em; height: 13em; pointer-events: none; }
.spill::before {
  content: ''; position: absolute; left: 50%; top: 0; width: var(--sw, 42em); margin-left: calc(var(--sw, 42em) / -2); height: max(1.5px, .62em);
  border-radius: 50%; filter: blur(max(.6px, .26em));
  background: linear-gradient(to right, rgba(var(--c), 0), rgba(var(--c), .8) 16%, var(--core) 50%, rgba(var(--c), .8) 84%, rgba(var(--c), 0));
}
.spill::after {
  content: ''; position: absolute; inset: 0; transition: opacity .45s ease; opacity: .7;
  background: radial-gradient(ellipse 32% 50% at 50% 0%, rgba(var(--c), .24), rgba(var(--c), .06) 52%, rgba(var(--c), 0) 100%);
}
.door:is(:hover, :focus-visible, .is-going) .spill::after { opacity: 1; }

/* a faint breath of the door's light on the wall round it */
.halo { pointer-events: none; transition: opacity .45s ease; }
.door:is(:hover, :focus-visible, .is-going) .halo { opacity: 1; }

/* the light poured onto the floor when the door opens: a cone that widens toward us */
.cone { left: 0; top: 103.6em; width: 62em; height: 30em; opacity: 0; pointer-events: none; transition: opacity .45s ease; filter: blur(.8em); }
.cone > i { position: absolute; left: -20em; top: 0; width: 102em; height: 30em; clip-path: var(--cone); background: var(--beam); }
.door:is(:hover, :focus-visible, .is-going) .cone { opacity: 1; }
.door.is-going .cone > i { clip-path: var(--cone-go); }

/* a few motes of dust hanging in the light */
.motes { left: 0; top: 0; width: 62em; height: 118em; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.motes i {
  position: absolute; width: max(1.5px, .42em); height: max(1.5px, .42em); border-radius: 50%;
  background: var(--mote); box-shadow: 0 0 .5em rgba(var(--c), .9);
}
.door:is(:hover, :focus-visible) .motes { opacity: 1; }
.motes i:nth-child(1) { left: 45em; top: 81em; }
.motes i:nth-child(2) { left: 52em; top: 90em; width: max(1px, .3em); height: max(1px, .3em); }
.motes i:nth-child(3) { left: 48em; top: 99em; }
.motes i:nth-child(4) { left: 56em; top: 106em; width: max(1px, .3em); height: max(1px, .3em); }
.motes i:nth-child(5) { left: 43em; top: 111em; width: max(1px, .34em); height: max(1px, .34em); }
.motes i:nth-child(6) { left: 51em; top: 117em; }
.d4 .motes i:nth-child(1) { left: 29em; top: 79em; }
.d4 .motes i:nth-child(2) { left: 34em; top: 88em; }
.d4 .motes i:nth-child(3) { left: 27em; top: 97em; }
.d4 .motes i:nth-child(4) { left: 36em; top: 107em; }
.d4 .motes i:nth-child(5) { left: 24em; top: 113em; }
.d4 .motes i:nth-child(6) { left: 32em; top: 119em; }


/* ---------- the labels: one serif, one size, one colour, under each door ---------- */
.plate {
  position: relative; z-index: 2; flex: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(2px, .7svh, 12px);
  --pn: clamp(18px, min(1.25vw, 2.5svh), 32px);
}
.name {             /* lining figures: Cormorant's own hang below the line */
  display: block; font: italic 500 calc(var(--pn) * 1.15)/1.2 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap;
  color: rgba(245, 240, 230, .88); transition: color .4s ease;
}
.door:is(:hover, :focus-visible) .name { color: #fff; }
.door:focus-visible .name { outline: 2px solid currentColor; outline-offset: .35em; border-radius: 2px; }

/* "You Came from Here": the door the visitor came back from, marked quietly. Its line is always
   kept, so all four doors stay the same size. */
.came {
  margin-top: .45em; display: inline-flex; align-items: center; gap: .55em;
  font: italic 500 clamp(14px, min(.85vw, 1.7svh), 21px)/1.2 var(--serif);
  color: rgba(255, 255, 255, .6); white-space: nowrap; visibility: hidden;
}
.came::before { content: ''; flex: none; width: .42em; height: .42em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 .6em rgba(201, 162, 75, .7); }
.door.is-from .came { visibility: visible; }


/* =========================================================================================
   1. GOLD, THROUGH THE FILM. The frame is a strip of film seen only by the gold light through
   its sprocket holes, up both jambs and across the top, the light stronger toward the floor.
   A gold line under the door; the knob a reel, lit through its six holes.
   ========================================================================================= */
.d1 {
  --c: 226, 186, 102; --core: #fff4d6; --mote: rgba(255, 240, 205, .9); --sw: 40em;
  --cone: polygon(58em 0, 70em 0, 96em 30em, 48em 30em);
  --cone-go: polygon(32em 0, 70em 0, 100em 30em, 14em 30em);
  --beam: linear-gradient(to bottom, rgba(255, 242, 208, .85) 0%, rgba(236, 200, 118, .45) 22%, rgba(214, 176, 92, .16) 58%, rgba(201, 162, 75, 0) 100%);
}
.d1 .halo { left: -2em; right: -2em; top: -2em; height: 112em; opacity: .55; background: radial-gradient(ellipse 50% 52% at 50% 52%, rgba(201, 162, 75, .07), rgba(201, 162, 75, 0) 100%); }
.d1 .opening { left: 12em; top: 8em; width: 38em; height: 96em; }
.d1 .light { background: radial-gradient(ellipse 130% 80% at 75% 100%, #fff8e6 0%, #f8e2aa 20%, #e2bd6c 44%, #b48f3f 72%, #7a5c22 100%); }
.p-lines { opacity: .88; filter: drop-shadow(0 0 .3em rgba(240, 204, 120, .55)) drop-shadow(0 0 1.4em rgba(201, 162, 75, .22)); }
.d1:is(:hover, :focus-visible, .is-going) .p-lines { opacity: 1; filter: drop-shadow(0 0 .4em rgba(250, 220, 150, .8)) drop-shadow(0 0 2em rgba(214, 176, 92, .4)); }
.p-knob {
  position: absolute; right: 2.2em; top: 48em; width: 4.4em; height: 4.4em; fill: #e6c475; opacity: .72;
  filter: drop-shadow(0 0 .3em rgba(240, 204, 120, .6));
}


/* =========================================================================================
   2. BLUE-WHITE, IN SCAN LINES. The crack round a door with a television's rounded corners,
   and the glow it throws on the wall, both broken into scan lines. A faint roll passes down
   it now and then. The knob is the dial, its ticks lit from behind.
   ========================================================================================= */
.d2 {
  --c: 208, 224, 255; --core: #f4f8ff; --mote: rgba(235, 242, 255, .9); --sw: 40em;
  --cone: polygon(58.5em 0, 70.5em 0, 96em 30em, 48em 30em);
  --cone-go: polygon(31.5em 0, 70.5em 0, 100em 30em, 13em 30em);
  --beam: linear-gradient(to bottom, rgba(244, 248, 255, .85) 0%, rgba(208, 224, 255, .42) 22%, rgba(190, 210, 250, .15) 58%, rgba(190, 210, 250, 0) 100%);
  --t-base: rgba(218, 230, 255, .8); --t-hi: #ffffff;
}
.d2 .halo { left: -2em; right: -2em; top: -2em; height: 112em; opacity: .55; background: radial-gradient(ellipse 50% 52% at 50% 52%, rgba(190, 210, 250, .06), rgba(190, 210, 250, 0) 100%); }
.d2 .opening { left: 11.5em; top: 7.5em; width: 39em; height: 96.5em; }
.d2 .light, .d2 .leaf { border-radius: 6.3em 6.3em 0 0; }
.d2 .light {
  background: radial-gradient(ellipse 120% 80% at 70% 100%, #f7faff 0%, #dbe6fa 22%, #a6b6d4 48%, #64748f 76%, #333d4f 100%);
}
.d2 .light::after {            /* the tube's own lines, behind the door */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 max(1px, .42em), rgba(0, 0, 0, .3) max(1px, .42em) max(2px, 1.05em));
}
.t-scan {
  left: 0; top: 0; width: 62em; height: 118em; opacity: .94; transition: opacity .45s ease;
  --sl: max(1px, .5em); --sp: max(2px, 1.05em);
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 var(--sl), transparent var(--sl) var(--sp));
  mask: repeating-linear-gradient(to bottom, #000 0 var(--sl), transparent var(--sl) var(--sp));
  filter: drop-shadow(0 0 .3em rgba(214, 228, 255, .5));
}
.d2:is(:hover, :focus-visible, .is-going) .t-scan { opacity: 1; }
.t-ring, .t-glow { position: absolute; left: 10.4em; top: 6.4em; width: 41.2em; height: 97.6em; border-radius: 7.4em 7.4em 0 0; }
.t-ring {                      /* the crack itself: a rounded ring of light, open at the floor */
  border: 1.3em solid transparent; border-bottom: 0;
  background: linear-gradient(to bottom, var(--t-base) 0%, var(--t-base) 45%, var(--t-hi) 50%, var(--t-base) 55%, var(--t-base) 100%) border-box;
  background-size: 100% 400%; background-position: 0 100%;      /* the roll waits out of sight above */
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}
.t-glow {                      /* the glow it throws on the wall, outward only */
  box-shadow: 0 0 2.8em .7em rgba(196, 214, 255, .28);
  clip-path: inset(-12em -12em 0 -12em);
  transition: box-shadow .45s ease;
}
.d2:is(:hover, :focus-visible, .is-going) .t-glow { box-shadow: 0 0 3.4em 1em rgba(200, 218, 255, .34); }
.t-dial {                      /* the dial's rim and its pointer, lit through */
  position: absolute; right: 2.2em; top: 46em; width: 4.6em; height: 4.6em; overflow: visible; opacity: .8;
  fill: none; stroke: rgba(222, 234, 255, .9); stroke-width: .6; stroke-linecap: round;
  filter: drop-shadow(0 0 .25em rgba(214, 228, 255, .6));
}
.t-dial line { stroke-width: .8; }


/* =========================================================================================
   3. CREAM, CUT. Flat paper-cream light, never blurred. Slivers of it round a crooked door cut
   by hand, which stands ajar: a jagged gap at its edge, stepped paler toward the top. On the
   floor a thin line and a cream wedge. The gold tag on the knob hangs half in the light.
   ========================================================================================= */
.d3 {
  --c: 243, 239, 228;
}
.c-light {           /* behind the door: plain paper light, stepped as cut paper would be */
  left: 10em; top: 7.2em; width: 41.3em; height: 96.8em;
  clip-path: polygon(.4em 1em, 20em .35em, 41em 0, 41.15em 48em, 40.9em 49.2em, 41.3em 96.8em, 0 96.8em);
  background: linear-gradient(to top, var(--paper) 0 9%, rgba(243, 239, 228, .72) 9% 50%, rgba(243, 239, 228, .52) 50% 100%);
}
.c-light::after { content: ''; position: absolute; inset: 0; background: var(--paper); opacity: 0; transition: opacity .2s steps(2, end); }
.d3:is(:hover, :focus-visible, .is-going) .c-light::after { opacity: 1; }
.c-leaf { left: 10.6em; top: 8.2em; width: 40em; height: 96em; transform-origin: 0 50%; }
.c-leaf svg { width: 100%; height: 100%; overflow: visible; }
.c-face { fill: #000; }
.c-string { fill: none; stroke: rgba(243, 239, 228, .6); stroke-width: .3; }
.c-gold { fill: #5a4720; }
.c-gold-lit { fill: var(--gold); }
.c-hole { fill: #000; }
.c-tag { transform-box: view-box; transform-origin: 36.1px 47.6px; transform: rotate(3deg); }

.c-w { left: -20em; top: 104.05em; width: 102em; height: 30em; background: var(--paper); clip-path: var(--w); pointer-events: none; }
.c-w1 { --w: polygon(30em 0, 71.3em 0, 71.1em .55em, 30.3em .62em); }
.c-w2 { opacity: .36; --w: polygon(68.8em 0, 71.3em 0, 76.2em 4.6em, 72.4em 5em); }
.c-w3 { opacity: .15; --w: polygon(68.4em 0, 71.3em 0, 80.4em 8.6em, 71.6em 9.2em); }
.d3:is(:hover, :focus-visible) .c-w1 { --w: polygon(42em 0, 71.3em 0, 74em 1.4em, 40em 1.6em); }
.d3:is(:hover, :focus-visible) .c-w2 { --w: polygon(52em 0, 71.3em 0, 88em 13em, 56em 14em); }
.d3:is(:hover, :focus-visible) .c-w3 { --w: polygon(46em 0, 71.3em 0, 98em 25em, 48em 27em); }
.d3.is-going .c-w1 { --w: polygon(30em 0, 71.3em 0, 76em 2em, 28em 2.2em); }
.d3.is-going .c-w2 { --w: polygon(30em 0, 71.3em 0, 92em 16em, 18em 17em); }
.d3.is-going .c-w3 { --w: polygon(30em 0, 71.3em 0, 108em 30em, 4em 30em); }

.c-flecks { left: 0; top: 0; width: 62em; height: 118em; opacity: 0; pointer-events: none; transition: opacity .2s steps(2, end); }
.c-flecks i { position: absolute; width: max(1.5px, .55em); height: max(1.5px, .55em); background: var(--paper); transform: rotate(18deg); }
.c-flecks i:nth-child(1) { left: 46em; top: 83em; }
.c-flecks i:nth-child(2) { left: 54em; top: 93em; transform: rotate(-24deg); }
.c-flecks i:nth-child(3) { left: 49em; top: 103em; width: max(1px, .4em); height: max(1px, .4em); }
.c-flecks i:nth-child(4) { left: 58em; top: 112em; transform: rotate(40deg); }
.c-flecks i:nth-child(5) { left: 44em; top: 118em; width: max(1px, .4em); height: max(1px, .4em); }
.d3:is(:hover, :focus-visible) .c-flecks { opacity: 1; }


/* =========================================================================================
   4. GOLD HAIRLINES, AND A SEAM. A fine double gold hairline with an arch, glowing warm; the
   two black doors inside it are seen only by the bright seam where they meet, and the gold
   pulls either side of it that catch the seam's light.
   ========================================================================================= */
.d4 {
  --c: 250, 232, 200; --core: #fffaf0; --mote: rgba(255, 248, 232, .9); --sw: 38em;
  --cone: polygon(44em 0, 58em 0, 76em 30em, 26em 30em);
  --cone-go: polygon(32em 0, 70em 0, 96em 30em, 6em 30em);
  --beam: linear-gradient(to bottom, rgba(255, 250, 238, .8) 0%, rgba(250, 232, 200, .4) 24%, rgba(240, 215, 170, .14) 60%, rgba(240, 215, 170, 0) 100%);
}
.d4 .halo { left: -2em; right: -2em; top: -2em; height: 112em; opacity: .55; background: radial-gradient(ellipse 50% 52% at 50% 52%, rgba(245, 225, 190, .06), rgba(245, 225, 190, 0) 100%); }
.d4 .opening { left: 11.8em; top: 7.8em; width: 38.4em; height: 96.2em; }
.d4 .light {          /* behind the doors: darkness, and a column of warm light in the middle */
  border-radius: 19.2em 19.2em 0 0;
  background: radial-gradient(ellipse 34% 62% at 50% 58%, #fffdf8 0%, rgba(255, 246, 228, .85) 34%, rgba(250, 232, 200, .25) 80%, rgba(250, 232, 200, 0) 100%), radial-gradient(ellipse 80% 70% at 50% 60%, #6b5530, #120e07 100%);
}
.d4 .b-l { right: 50%; border-top-left-radius: 19.2em; transform-origin: 0 50%; }
.d4 .b-r { left: 50%; border-top-right-radius: 19.2em; transform-origin: 100% 50%; }
.b-lines { filter: drop-shadow(0 0 .3em rgba(222, 186, 106, .6)) drop-shadow(0 0 1.5em rgba(201, 162, 75, .24)); }
.b-lines path { fill: none; stroke: var(--gold); vector-effect: non-scaling-stroke; transition: stroke-opacity .45s ease; }
.b-out { stroke-width: max(1px, .22em); stroke-opacity: .95; }
.b-in { stroke-width: max(1px, .14em); stroke-opacity: .6; }
.d4:is(:hover, :focus-visible, .is-going) .b-lines { filter: drop-shadow(0 0 .4em rgba(232, 200, 126, .85)) drop-shadow(0 0 2em rgba(201, 162, 75, .4)); }
.d4:is(:hover, :focus-visible, .is-going) .b-out { stroke-opacity: 1; }
.d4:is(:hover, :focus-visible, .is-going) .b-in { stroke-opacity: .8; }
.b-pull {
  position: absolute; top: 47em; width: max(1.5px, .36em); height: 9em; border-radius: .2em; opacity: .72;
  background: linear-gradient(180deg, #f5e0a8 0%, var(--gold) 50%, #8a6a2b 100%);
  box-shadow: 0 0 .7em rgba(201, 162, 75, .55);
}
.b-l .b-pull { right: 1.5em; }
.b-r .b-pull { left: 1.5em; }
.b-seam {
  left: 29.4em; top: 9em; width: 3.2em; height: 95em; pointer-events: none; transition: opacity .5s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 84%, rgba(0, 0, 0, .8) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 84%, rgba(0, 0, 0, .8) 100%);
}
.b-seam::before, .b-seam::after { content: ''; position: absolute; top: 0; bottom: 0; }
.b-seam::before {     /* the glow round it */
  left: 0; right: 0; filter: blur(max(.5px, .3em));
  background: linear-gradient(to right, rgba(250, 232, 200, 0) 0%, rgba(250, 232, 200, .26) 36%, rgba(255, 250, 238, .9) 50%, rgba(250, 232, 200, .26) 64%, rgba(250, 232, 200, 0) 100%);
}
.b-seam::after {      /* the seam itself, sharp */
  left: 50%; width: max(1px, .14em); margin-left: max(-.5px, -.07em); background: #fffaf0;
}


/* =========================================================================================
   Choosing a door: its light floods out from the floor and fills the screen, then the page goes.
   ========================================================================================= */
.flood { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; visibility: hidden; }
.flood::before {
  content: ''; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%);
  width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; border-radius: 50%;
  background: radial-gradient(closest-side, var(--f-core) 0%, var(--f-mid) 50%, var(--f-edge) 76%, rgba(0, 0, 0, 0) 100%);
  transform: scale(0);
}
.flood::after { content: ''; position: absolute; inset: 0; background: var(--f-mid); opacity: 0; }
[data-door="1"] .flood { --f-core: #fffaf0; --f-mid: #f6dea0; --f-edge: rgba(214, 176, 92, .7); }
[data-door="2"] .flood { --f-core: #ffffff; --f-mid: #e4ecfb; --f-edge: rgba(190, 208, 240, .7); }
[data-door="3"] .flood { --f-core: #F3EFE4; --f-mid: #F3EFE4; --f-edge: #F3EFE4; }
[data-door="4"] .flood { --f-core: #fffcf5; --f-mid: #f7ebd2; --f-edge: rgba(235, 212, 165, .7); }
[data-door="2"] .flood::before {      /* the tube's lines, in the light that pours out */
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(40, 52, 80, .16) 2px 4px),
    radial-gradient(closest-side, var(--f-core) 0%, var(--f-mid) 50%, var(--f-edge) 76%, rgba(0, 0, 0, 0) 100%);
}
[data-door="3"] .flood::before {      /* cut paper: a hard-edged sheet of light, in four frames */
  border-radius: 0; background: var(--paper);
  clip-path: polygon(50% 0, 63% 14%, 86% 10%, 84% 34%, 100% 50%, 85% 64%, 90% 88%, 64% 85%, 50% 100%, 37% 86%, 12% 90%, 15% 65%, 0 50%, 16% 36%, 10% 11%, 36% 15%);
}
.is-leaving .flood { visibility: visible; }
.is-leaving .flood::before { animation: dl-bloom .5s cubic-bezier(.5, 0, .7, .6) forwards; }
.is-leaving .flood::after { animation: dl-fill .5s ease-in forwards; }
.is-leaving[data-door="3"] .flood::before { animation-timing-function: steps(4, end); }
.is-leaving[data-door="3"] .flood::after { animation-timing-function: steps(3, end); }
@keyframes dl-bloom { from { transform: scale(.02); } to { transform: scale(1); } }
@keyframes dl-fill { 0%, 50% { opacity: 0; } 100% { opacity: 1; } }


/* =========================================================================================
   The movement. Only when the visitor has not asked for less motion. Otherwise nothing moves:
   pointed at, a door's black leaf simply fades away to show the light behind it, and a click
   goes straight through.
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .leaf, .c-leaf { transition: opacity .3s ease; }
  .door:is(:hover, :focus-visible) :is(.leaf, .c-leaf) { opacity: .12; }
}

@media (prefers-reduced-motion: no-preference) {
  /* 1 and 2: in on the hinge, heavy and smooth; the light on the floor widens as it goes. */
  .d1 .leaf, .d2 .leaf { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  .d1:is(:hover, :focus-visible) .leaf, .d2:is(:hover, :focus-visible) .leaf { transform: rotateY(30deg); }
  .d1.is-going .leaf, .d2.is-going .leaf { transform: rotateY(84deg); transition-duration: .46s; transition-timing-function: cubic-bezier(.5, 0, .3, 1); }
  .cone > i { transition: clip-path .46s cubic-bezier(.5, 0, .3, 1); }

  /* 2: a faint roll passes down the crack now and then; behind the door, the set flickers. */
  .t-ring { animation: dl-roll 9s linear infinite; }
  .d2 .light, .d2 .cone > i { animation: dl-tv 3.4s linear infinite; }

  /* 3: three cut frames, a stop-motion swing; the wedges of light step out with it, the tag swings. */
  .c-leaf { transition: transform .27s steps(3, end); }
  .c-w { transition: clip-path .27s steps(3, end); }
  .c-tag { transition: transform .18s steps(2, end); }
  .d3:is(:hover, :focus-visible) .c-leaf { transform: perspective(150em) rotateY(36deg); }
  .d3:is(:hover, :focus-visible, .is-going) .c-tag { transform: rotate(-9deg); }
  .d3.is-going .c-leaf { transform: perspective(150em) rotateY(82deg); transition-duration: .3s; }
  .d3.is-going .c-w { transition-duration: .3s; }
  .c-flecks i { animation: dl-fleck 4.8s steps(8, end) infinite; }
  .c-flecks i:nth-child(2) { animation-delay: -1.2s; animation-duration: 5.6s; }
  .c-flecks i:nth-child(3) { animation-delay: -2.6s; }
  .c-flecks i:nth-child(4) { animation-delay: -3.4s; animation-duration: 6.2s; }
  .c-flecks i:nth-child(5) { animation-delay: -.6s; animation-duration: 5.2s; }

  /* 4: slow and smooth, both leaves at once; the seam gives way to the light. */
  .d4 .leaf { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
  .d4:is(:hover, :focus-visible) .b-l { transform: rotateY(28deg); }
  .d4:is(:hover, :focus-visible) .b-r { transform: rotateY(-28deg); }
  .d4:is(:hover, :focus-visible, .is-going) .b-seam { opacity: 0; }
  .d4.is-going .b-l { transform: rotateY(84deg); transition-duration: .48s; transition-timing-function: cubic-bezier(.45, 0, .3, 1); }
  .d4.is-going .b-r { transform: rotateY(-84deg); transition-duration: .48s; transition-timing-function: cubic-bezier(.45, 0, .3, 1); }

  /* the dust drifts */
  .motes i { animation: dl-mote 9s ease-in-out infinite; }
  .motes i:nth-child(2) { animation-duration: 11s; animation-delay: -3s; }
  .motes i:nth-child(3) { animation-duration: 8s; animation-delay: -5s; }
  .motes i:nth-child(4) { animation-duration: 12s; animation-delay: -1s; }
  .motes i:nth-child(5) { animation-duration: 10s; animation-delay: -7s; }
  .motes i:nth-child(6) { animation-duration: 9.5s; animation-delay: -4s; }
}

@keyframes dl-roll { from { background-position: 0 100%; } to { background-position: 0 0; } }
@keyframes dl-tv {
  0%, 100% { opacity: 1; }
  7% { opacity: .84; } 8% { opacity: .97; }
  21% { opacity: .9; } 22% { opacity: .6; } 24% { opacity: .95; }
  46% { opacity: 1; } 48% { opacity: .78; } 50% { opacity: .92; }
  69% { opacity: .86; } 70% { opacity: 1; }
  86% { opacity: .9; } 87% { opacity: .66; } 89% { opacity: 1; }
}
@keyframes dl-mote {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: .8; }
  100% { transform: translate(-1.8em, -8em); opacity: 0; }
}
@keyframes dl-fleck {
  0% { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-2em, -9em) rotate(130deg); opacity: 0; }
}


/* ---------- phones and tall windows: two by two ---------- */
@media (max-width: 599px), (max-aspect-ratio: 4 / 5) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.8svh, 24px) 12px; }
  .plate { --pn: clamp(17px, 4.6vw, 22px); }
  /* door 4's hairlines meet the one-pixel floor on a phone and grow heavier than drawn: ease them
     back so it keeps the same presence as the other three */
  .b-out { stroke-opacity: .78; }
  .b-in { stroke-opacity: .3; }
  .b-seam::after { opacity: .75; }
  /* the mark becomes a gold dot beside the door's label */
  .came { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .door.is-from .name::before {
    content: ''; display: inline-block; width: .3em; height: .3em; margin-right: .42em; vertical-align: .18em;
    border-radius: 50%; background: var(--gold); box-shadow: 0 0 .6em rgba(201, 162, 75, .7);
  }
}