/* ---------- the hi-fi room's window (hifiwindow.js) ----------
   A picture window in the wall left of the console, where a wide screen leaves the wall bare: a
   moulded casing in the baseboard's stained walnut (the sides cut with the grain running down them,
   the head and the sill across), the opening's depth showing as the left jamb (we look at it from
   the right) and the head's underside, a plain sash, and the glass, through which the countryside
   shows (countryside.js renders it). hifiwindow.js places it in stage px and sets every part's box.

   It stands above the room's darkness (z 4, like the console's body) and darkens its own wood, while
   the glass stays as bright as the day outside: the view is light coming in, not something the room
   lights. Light in the room comes from the upper left: the casing throws its shadow down and to the
   right, as the poster does. */
.hf-window { position: absolute; z-index: 4; display: none; --hw-day: 1; --wal: linear-gradient(rgb(120 54 14 / .2), rgb(120 54 14 / .2)); }
.hf-window.on { display: block; }
.hf-window i, .hf-window b { position: absolute; display: block; }

/* the wood takes the room's light like the furniture (a filter: it changes only with the dimmer); the
   window's own wood is lit by the daylight coming in, the recess and the sill most, so in a dark room
   by day it keeps some of it */
.hw-wood { position: absolute; inset: 0; filter: brightness(calc(1 - var(--dark, 0) * (.96 - var(--hw-day) * .5))); }
.hw-lit { position: absolute; inset: 0; filter: brightness(calc(1 - var(--dark, 0) * (.96 - var(--hw-day) * .7))); }

/* the casing: a back band, a flat face and a bead at the opening, mitred at the head's corners */
.hw-cas { box-shadow: 3px 6px 9px rgb(var(--sh-rgb) / calc(.42 * var(--sh-k))), 1px 1px 2px rgb(var(--sh-rgb) / .35); }
.hw-cas.l, .hw-cas.r {
  background:
    linear-gradient(90deg, rgb(255 226 186 / .28) 0, rgb(255 226 186 / .08) 1.5px, rgb(20 8 0 / .25) 3px, rgb(20 8 0 / .1) 5px, rgb(255 232 196 / .08) 6px, transparent 9px calc(100% - 5px), rgb(255 226 186 / .2) calc(100% - 4px), rgb(20 8 0 / .35) calc(100% - 1.5px), rgb(10 4 0 / .55)),
    linear-gradient(rgb(46 20 4 / .58), rgb(46 20 4 / .58)),
    url(tex/teak-v.jpg) var(--gx, -120px) var(--gy, -200px) / 1000px 1000px,
    #3e2818;
}
/* the right side turns its back band away from the light */
.hw-cas.r { background:
    linear-gradient(-90deg, rgb(10 4 0 / .5) 0, rgb(20 8 0 / .3) 2px, rgb(20 8 0 / .12) 4px, rgb(255 232 196 / .05) 6px, transparent 9px calc(100% - 5px), rgb(255 226 186 / .22) calc(100% - 4px), rgb(20 8 0 / .28) calc(100% - 1.5px), rgb(10 4 0 / .45)),
    linear-gradient(rgb(46 20 4 / .62), rgb(46 20 4 / .62)),
    url(tex/teak-v.jpg) var(--gx, -480px) var(--gy, -260px) / 1000px 1000px,
    #3c2716;
}
.hw-cas.h {
  /* (its ends are cut at 45°, over the sides) */
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cw)) 100%, var(--cw) 100%);
  background:
    linear-gradient(rgb(255 230 192 / .34) 0, rgb(255 230 192 / .1) 1.5px, rgb(20 8 0 / .2) 3px, rgb(20 8 0 / .06) 5px, rgb(255 232 196 / .1) 6px, transparent 9px calc(100% - 5px), rgb(255 226 186 / .16) calc(100% - 4px), rgb(20 8 0 / .4) calc(100% - 1.5px), rgb(10 4 0 / .6)),
    var(--wal),
    url(tex/teak-dark.jpg) -300px -560px / 1000px 1000px,
    #4a3220;
}
/* the joints at the mitres: a hairline each */
.hw-cas.h::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent calc(50% - .6px), rgb(10 4 0 / .55) 50%, transparent calc(50% + .6px)) 0 0 / var(--cw) 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - .6px), rgb(10 4 0 / .55) 50%, transparent calc(50% + .6px)) 100% 0 / var(--cw) 100% no-repeat; }

/* the opening's depth: the left jamb, its face square to the wall and running back to the sash, and
   the head's underside. Lit by the room on its outer edge and by the daylight toward the glass. */
.hw-jamb {
  clip-path: polygon(0 0, 100% var(--jt), 100% calc(100% - var(--jb)), 0 100%);
  background:
    linear-gradient(90deg, rgb(10 4 0 / .45), rgb(10 4 0 / .1) 30%, transparent 60%, rgb(232 240 255 / calc(.1 + var(--hw-day) * .16))),
    linear-gradient(rgb(46 20 4 / .55), rgb(46 20 4 / .55)),
    url(tex/teak-v.jpg) -760px -120px / 1000px 1000px,
    #3a2616;
}
.hw-head {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--jw) 100%);
  background:
    linear-gradient(rgb(10 4 0 / .62), rgb(10 4 0 / .35)),
    var(--wal),
    url(tex/teak-dark.jpg) -120px -40px / 1000px 1000px,
    #3a2616;
}

/* the sash: a plain frame round the glass, the glass held by a bead that catches a line of light;
   its right side runs on behind the casing */
.hw-sash {
  background:
    var(--wal),
    url(tex/teak-dark.jpg) -620px -330px / 1000px 1000px,
    #3e2818;
  box-shadow: inset 0 1px 0 rgb(255 228 190 / .12), inset 1px 0 0 rgb(255 228 190 / .08), inset 0 -1px 0 rgb(0 0 0 / .4);
}
.hw-sash::after { content: ''; position: absolute; inset: var(--sw) var(--swr) var(--swb) var(--sw); box-shadow: 0 0 0 1px rgb(12 5 0 / .8), 0 0 0 2px rgb(255 226 186 / .14), -1px -1px 0 2px rgb(10 4 0 / .3); }

/* the stool (the inside sill): its top, seen from just above, then its rounded front edge; it runs
   past the casing at each end. Under it, the apron, and the stool's shadow on it. */
.hw-stool {
  background:
    linear-gradient(rgb(255 232 196 / calc(.1 + var(--hw-day) * .08)) 0, rgb(255 232 196 / .04) var(--st), rgb(255 232 196 / .4) calc(var(--st) + .5px), rgb(255 232 196 / .12) calc(var(--st) + 2px), transparent calc(var(--st) + 4px), rgb(20 8 0 / .2) calc(100% - 3px), rgb(10 4 0 / .55)),
    var(--wal),
    url(tex/teak-dark.jpg) -40px -700px / 1000px 1000px,
    #4a3220;
  border-radius: 2px 2px 3px 3px;
  box-shadow: 2px 5px 6px rgb(var(--sh-rgb) / calc(.4 * var(--sh-k))), 0 1px 2px rgb(var(--sh-rgb) / .4);
}
.hw-apron {
  background:
    linear-gradient(rgb(10 4 0 / .55), rgb(10 4 0 / .18) 4px, transparent 9px calc(100% - 4px), rgb(255 226 186 / .12) calc(100% - 3px), rgb(20 8 0 / .4)),
    var(--wal),
    url(tex/teak-dark.jpg) -500px -250px / 1000px 1000px,
    #4a3220;
  box-shadow: 2px 4px 6px rgb(var(--sh-rgb) / calc(.36 * var(--sh-k)));
}

/* the glass and the countryside through it. The view is a box the screen's shape, centred on the
   glass and as tall as it (hifiwindow.js scales it as you walk up to the window); in it, each render
   is a set of layers placed in percent of its frame: the sky (drifting), the clouds, the land. */
.hw-glass { position: absolute; overflow: hidden; cursor: pointer; background: #0b0f16; z-index: 1; }
.hw-view { position: absolute; transform-origin: 50% 50%; }
.hw-set { position: absolute; inset: 0; transition: opacity 2.5s; }
.hw-set canvas { position: absolute; display: block; }
.hw-set .sky, .hw-set .clouds { animation: hw-drift var(--drift-t, 600s) linear both; }
@keyframes hw-drift { from { translate: 0 0; } to { translate: var(--drift, 0) 0; } }
.hw-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* What the glass mirrors: the room. By day the light outside drowns it; at night, with the room's
   lights on, the room shows faintly in the pane (warm, low down where the furniture is), and with
   them off there's nothing to mirror. A crisp band where the ceiling light catches the pane. */
.hw-refl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc((1 - var(--dark, 0)) * (.12 + .5 * (1 - var(--hw-day))));
  background:
    linear-gradient(104deg, transparent 18%, rgb(255 250 240 / .12) 18.5% 26%, transparent 26.5% 30%, rgb(255 250 240 / .06) 30.5% 33%, transparent 33.5%),
    linear-gradient(rgb(70 42 22 / 0) 30%, rgb(70 42 22 / .5) 75%, rgb(40 24 12 / .65)),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgb(255 200 140 / .35), transparent);
  transition: opacity .5s;
}

/* walking up to the window and looking out: the wall's switch plates and the help step aside */
body.hw-out #viewSwitch, body.hw-out #room-dimmer, body.hw-out #help { opacity: 0 !important; pointer-events: none; transition: opacity .5s; }
#hw-catch { position: fixed; inset: 0; z-index: 8; cursor: pointer; display: none; }
body.hw-out #hw-catch { display: block; }
#hw-hint { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 9; text-align: center; font: 400 13px/1 'Archivo Narrow', sans-serif; letter-spacing: .3px; color: rgb(255 255 255 / .75); text-shadow: 0 1px 3px rgb(0 0 0 / .7); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
body.hw-out #hw-hint.show { opacity: 1; }

/* the curtains (hifiwindow.js paints each panel): a walnut rod with turned ball finials, the drapes
   hung from it by wooden rings, open to either side. They take the room's light like the casing (and
   some of the daylight); the daylight on the folds facing the window is a layer of its own. */
.hw-drapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; filter: brightness(calc(1 - var(--dark, 0) * (.96 - var(--hw-day) * .45))); }
.hw-drapes canvas, .hw-drape-lit canvas { position: absolute; display: block; }
.hw-rod {
  border-radius: 3.5px;
  background:
    linear-gradient(rgb(255 228 190 / .38) 0, rgb(255 228 190 / .12) 1.5px, transparent 3px, rgb(10 4 0 / .25) 5px, rgb(10 4 0 / .55)),
    var(--wal),
    url(tex/teak-dark.jpg) -200px -820px / 1000px 1000px,
    #3e2818;
  box-shadow: 2px 5px 5px rgb(var(--sh-rgb) / calc(.4 * var(--sh-k)));
}
.hw-fin { border-radius: 50%; background: radial-gradient(circle at 35% 32%, rgb(255 226 186 / .55), rgb(120 74 40 / .2) 32%, transparent 55%), radial-gradient(circle at 50% 50%, #5a3a22, #2e1a0c 72%, #1c0f06); box-shadow: 2px 4px 5px rgb(var(--sh-rgb) / calc(.4 * var(--sh-k))), inset -1px -2px 2px rgb(0 0 0 / .4); }
.hw-drape-lit { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--hw-day) * (.35 + var(--dark, 0) * .4)); }