/* #room (pass 7b, owner: SECTIONS) · "החלל" · ככה זה נראה מקיר לקיר. The pass-2 opening, made smooth (owner, 2026-10-25).
   A sticky stage one large screen tall (100lvh: it never jumps when Safari's bars move; the dock keeps clear of the bars with
   calc(100lvh - 100svh)). Layers (back to front): the room (.room__view: the live canvas over a still, and the dock), the paper
   sheet with the word cut out (.room__sheet, one SVG), the intro type (.room__intro).
   Motion:
   - html.sda: the section is the stage + a short run (--room-run, 60svh); over that run the sheet scales up from the thickest
     stroke of the ה (--ox / --oy, set at layout time by room.js) and dissolves (CSS scroll-driven, transform / opacity only);
   - no scroll timelines: no run; one timed opening (650 ms, so it is at rest within the house's 700 ms) once most of the stage
     is on screen (.is-open from an observer), interruptible, reversed when the visitor goes back above it;
   - both: the headline and its line leave on a clock as the opening starts (.is-open); .is-full (an observer, never the scroll
     position) brings the dock in (300 / 400 ms) and starts the pour (time-based, room-gl.js).
   Static (no WebGL / lost context): .is-still, the stills. Reduced motion and high contrast: no pin, no opening; the word is a
   window into the still (high contrast: plain type), then the room with its dock, as a still block.
   (The pass-7 version, a dark panel without the word: archive/pass7-v9-sections-2026-10-25/.) */

.room {
  --room-run: 60svh;
  position: relative; z-index: 2;
  height: 100vh; height: 100lvh;
  view-timeline: --room block;
}
html.sda .room { height: calc(100vh + 60vh); height: calc(100lvh + var(--room-run)); }
.room__stage {
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip;
  background: var(--paper);
}

/* ---------- the room ---------- */
/* (the backing is the living-room still's own mid-tone: a slow still or a late first GL frame shows a soft room-coloured screen) */
.room__view { position: absolute; inset: 0; background: #857975; }
.room__still, .room__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room__still { object-fit: cover; object-position: 50% 60%; }
.room__gl { opacity: 0; transition: opacity var(--t-fade) var(--ease-out); }
.room.gl-on .room__gl { opacity: 1; }
.room.is-still .room__gl { display: none; }

/* ---------- the paper sheet with the word cut out ---------- */
.room__sheet {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; overflow: visible;
  pointer-events: none; transform-origin: var(--ox, 70%) var(--oy, 25%);
}

/* ---------- the intro: the word's slot, the headline, the line ---------- */
.room__intro {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  padding: calc(var(--hdr) + env(safe-area-inset-top) + 14px) var(--gut) calc(26px + 100lvh - 100svh);
  /* phones: the word, the headline and the line as one block, a little above the middle of the screen */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .55fr) auto auto auto minmax(0, 1fr); row-gap: 14px;
}
.room__intro > * { pointer-events: auto; min-width: 0; }
.room__slot {
  grid-row: 2; justify-self: start; position: relative;
  /* as wide as the column, never taller than the screen leaves room for (the word's ink is 1761 x 875) */
  --ww: min(calc(100vw - 2 * var(--gut)), calc((100svh - var(--hdr) - 330px) * 2.0126));
  width: var(--ww); aspect-ratio: 1761 / 875;
}
.room__wordtxt {
  /* the still version of the word: a window into the room still (the SVG sheet draws it otherwise) */
  position: absolute; inset: -6% -2% 0; display: none; white-space: nowrap; direction: rtl;
  font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  font-size: calc(var(--ww) / 1.761); line-height: 1; align-items: flex-end; justify-content: center;
  color: var(--ink); -webkit-text-fill-color: transparent;
  background: var(--still, url(../assets/room/room-still-living-m.webp)) 50% 62% / cover no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.room__h {
  grid-row: 3; margin: clamp(22px, 5svh, 44px) 0 0; font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  font-size: clamp(46px, 16vw, 84px); line-height: .9; color: var(--ink); letter-spacing: 0;
}
.room__hl { display: block; }
.room__sub { grid-row: 4; margin: 0; font: 400 var(--fs-lead)/1.5 var(--text); color: var(--ink); max-width: 34ch; }
@media (max-height: 700px) and (max-width: 899px) {
  .room__h { font-size: clamp(40px, 12.5vw, 60px); }
}
@media (min-width: 900px) {
  /* desktop: the word across the top; the headline under it on the right and the line beside it (RTL: to its left), on one
     baseline band */
  .room__intro {
    grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto minmax(20px, 1fr) auto; column-gap: 4vw;
    padding-bottom: 8svh;
  }
  .room__slot { grid-row: 1; grid-column: 1 / -1; --ww: min(74vw, calc((100svh - var(--hdr) - 300px) * 2.0126)); margin-top: 1svh; }
  .room__h { grid-row: 3; grid-column: 1; font-size: min(6.6vw, 112px); align-self: end; margin-top: 0; }
  .room__sub { grid-row: 3; grid-column: 2; align-self: end; max-width: 34ch; padding-bottom: .5em; }
}

/* ---------- the opening ---------- */
/* the headline and its line leave on a clock as the opening starts (.is-open), and come back when the visitor returns above */
.room__intro > :not(.room__slot) { transition: opacity var(--t-fade) var(--ease-out), transform var(--t-rise) var(--ease-out); }
.room.is-open .room__intro > :not(.room__slot) { opacity: 0; transform: translateY(-3svh); pointer-events: none; }
/* scroll-driven: the sheet opens over the short run, from the ה's stroke, and dissolves into the room */
html.sda .room__sheet { animation: roomOpen linear both; animation-timeline: --room; animation-range: contain 0% contain 100%; }
/* (the paper dissolves only in the last 12 % of the run: a stop anywhere else leaves it whole, either cut or gone) */
@keyframes roomOpen {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.9); opacity: 1; }
  70% { transform: scale(3.6); opacity: 1; }
  88% { transform: scale(5.6); opacity: 1; }
  100% { transform: scale(7.5); opacity: 0; }
}
/* time-based (no scroll timelines): one opening on a clock, at rest within the house's 700 ms (650 ms: the scale, the paper
   dissolving over its last 200 ms); removing .is-open plays it back from wherever it is */
html:not(.sda) .room__sheet { transition: transform 500ms var(--ease-in-out), opacity 160ms linear, visibility 0s; }
html:not(.sda) .room.is-open .room__sheet {
  transform: scale(7.5); opacity: 0; visibility: hidden;
  transition: transform 650ms cubic-bezier(.55, 0, .2, 1), opacity 200ms linear 450ms, visibility 0s linear 650ms;
}

/* ---------- the dock: paper tabs (room · day/night, finish, palette) ---------- */
.room__ui {
  position: absolute; z-index: 4; inset: auto 0 calc(100lvh - 100svh) 0;
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-drawer);
}
/* (still focusable before it arrives: a keyboard visitor who tabs into it brings it in) */
.room.is-full .room__ui, .room__ui:focus-within { opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--t-fade) var(--ease-out), transform var(--t-rise) var(--ease-drawer); }
html:not(.js) .room__ui { opacity: 1; transform: none; pointer-events: auto; }
.room__dock {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  padding: 10px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background: var(--paper) url(../assets/paper.webp) 0 0 / 256px 256px; color: var(--ink);
  box-shadow: 0 -1px 0 rgba(20, 18, 16, .1), 0 -22px 44px -30px rgba(11, 10, 9, .75);
}
.room__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font: 400 var(--fs-s)/1.35 var(--text); color: var(--ink-2); }
.room__tag { color: var(--copper-t); font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; flex: none; }   /* (pass 4, INFRA: small text: the darker copper, 5.2:1) */
.room__now { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.room__row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 6px 10px; }
/* (larger text from the accessibility menu: the tabs wrap onto a second line instead of widening the page) */
.room .tabs { display: flex; flex-wrap: wrap; row-gap: 4px; min-width: 0; max-width: 100%; }
.room .tabs--room { flex: 1 1 auto; }
.room .tabs--room .tab { flex: 1 1 auto; }
.room .tabs--fin { width: 100%; }
.room .tabs--fin .tab { flex: 1 1 auto; }
.room .tab {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; margin: 0; cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 .75em; font: 500 var(--fs-s)/1 var(--text); color: var(--ink-2); background: transparent;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .16); position: relative; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform var(--t-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.room .tab + .tab { margin-inline-start: -1px; }
/* (motion sweep plan 008) a press answers under the finger at once */
.room .tab:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .room .tab:hover { color: var(--ink); background-color: rgba(20, 18, 16, .04); } }
.room .tab[aria-checked="true"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); z-index: 1; }
.room .tab:focus-visible { outline: 2px solid var(--copper); outline-offset: -2px; z-index: 2; }
/* (QA-19) every swatch is a 44 px target: a row of eight fits 352 px; a narrower screen wraps the last one */
.room__sws { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0; min-height: 44px; }
.room .sw {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer;
  flex: 1 0 44px; min-width: 44px; max-width: 56px; height: 44px; display: grid; place-items: center; position: relative;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: var(--ink);
}
.room .sw::before {
  content: ""; width: 26px; height: 26px; background: var(--g, var(--paper-2));
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .22); transition: transform var(--t-press) var(--ease-out);
}
.room .sw:active::before { transform: scale(.9); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) { .room .sw:hover::before { transform: scale(1.08); } }
.room .sw[aria-checked="true"]::after {
  content: ""; position: absolute; width: 34px; height: 34px; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 1.5px var(--ink); pointer-events: none;
}
.room .sw:focus-visible { outline: 2px solid var(--copper); outline-offset: -2px; }
.room .sw--custom svg { position: absolute; width: 14px; height: 14px; color: var(--pearl); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }

/* the visitor's own colours: a small paper panel above the dock */
.room__pick {
  position: absolute; inset: auto var(--gut) calc(100% + 8px) var(--gut); z-index: 5; display: grid; gap: 12px;
  padding: 14px 16px 12px; background: var(--paper) url(../assets/paper.webp) 0 0 / 256px 256px; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20, 18, 16, .14), 0 24px 50px -24px rgba(11, 10, 9, .7);
}
.room__pick[hidden] { display: none; }
.room__pick-h { margin: 0; font: 500 var(--fs-body)/1.3 var(--text); }
.room__pick-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.room__pick-c { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font: 400 var(--fs-s)/1.2 var(--text); color: var(--ink-2); }
.room__pick-c input { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.room__pick-hint { margin: 0; font: 400 var(--fs-xs)/1.5 var(--text); color: var(--ink-3t); max-width: 40ch; }   /* (pass 4, INFRA: small text, 5.1:1) */
.room__pick-end { display: flex; gap: 18px; align-items: center; }
.room__pick-end button { appearance: none; border: 0; border-radius: 0; background: none; cursor: pointer; min-height: 44px; padding: 0 2px; font: 500 var(--fs-btn)/1 var(--text); color: var(--ink); }
.room__pick-end .room__pick-done { background: var(--ink); color: var(--paper); padding: 0 18px; }

@media (min-width: 900px) {
  .room__ui { inset: auto auto var(--gut) var(--gut); width: min(560px, 42vw); }
  .room__dock { padding: 14px 18px 14px; gap: 8px; box-shadow: 0 0 0 1px rgba(20, 18, 16, .1), 0 28px 60px -30px rgba(11, 10, 9, .85); }
  .room__pick { inset: auto 0 calc(100% + 8px) 0; }
  .room .sw { max-width: 56px; height: 48px; }
  .room .sw::before { width: 30px; height: 30px; }
  .room .sw[aria-checked="true"]::after { width: 38px; height: 38px; }
}

/* the markers (scroll timelines only: observed for .is-open / .is-full; never read for positions). Each spans from its point
   of the run to the end of the run; it counts once its top passes the top band of the screen. */
.room__mark { position: absolute; left: 0; width: 1px; pointer-events: none; visibility: hidden; display: none; bottom: 100vh; bottom: 100lvh; }
html.sda .room__mark { display: block; }
.room__mark--open { top: 8svh; }          /* the headline leaves as the sheet starts to open */
.room__mark--full { top: 38svh; }         /* the dock arrives and the floor pours with the opening ~60 % done */

/* the builder's link lands here (common.js clears the header above its target): at the end of the run, the room already open */
.room__to { position: absolute; left: 0; width: 1px; height: 1px; top: calc(var(--hdr) + 8px); pointer-events: none; outline: 0; }
html.sda .room__to { top: calc(var(--room-run) + var(--hdr) + 8px); }

/* ---------- static: no WebGL, or the context was lost ---------- */
.room.is-still .room__gl-only { display: none; }

/* ---------- reduced motion and high contrast: no pin, no opening; the word, then the room and the dock, still ---------- */
html:is(.rm, .a11y-contrast) .room { height: auto; }
html:is(.rm, .a11y-contrast) .room__stage { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; background: none; }
html:is(.rm, .a11y-contrast) .room__intro { position: relative; inset: auto; padding: 12svh var(--gut) 7svh; grid-template-rows: 0 auto auto auto 0; }
html:is(.rm, .a11y-contrast) .room__intro > :not(.room__slot) { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
html:is(.rm, .a11y-contrast) .room__wordtxt { display: flex; }
html:is(.rm, .a11y-contrast) .room__sheet, html:is(.rm, .a11y-contrast) .room__mark { display: none; }
html:is(.rm, .a11y-contrast) .room__to { top: calc(var(--hdr) + 8px); }
html:is(.rm, .a11y-contrast) .room__view { position: relative; inset: auto; height: 100svh; min-height: 560px; max-height: 1000px; }
html:is(.rm, .a11y-contrast) .room__ui { opacity: 1; transform: none; pointer-events: auto; inset: auto 0 0 0; }
@media (min-width: 900px) {
  html:is(.rm, .a11y-contrast) .room__intro { grid-template-rows: auto auto; row-gap: 5svh; }
  html:is(.rm, .a11y-contrast) .room__ui { inset: auto auto var(--gut) var(--gut); }
}
/* high contrast: the word as plain type (no picture inside letters) */
html.a11y-contrast .room__wordtxt { background: none; -webkit-text-fill-color: currentColor; color: #fff; }