/* Room pages: one move each. hold (witch), press (nether), scroll (escape).
   See design/DESIGN.md sections 5 to 7. */

.room-hero {
  position: relative; height: 100vh; height: 100svh; min-height: 600px;
  overflow: hidden; background: var(--panel);
}
.room-bg, .room-bg img, .room-bg video, .room-lit, .room-lit img, .room-lit video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.room-bg { will-change: transform; }
/* The Witch House: the dark wall is the colour photo itself, so the torch circle lines up with it.
   Tuned against the old witch-mono-dark photo (same average brightness at 1440x900). */
.room-bg img.bg-from-colour { filter: grayscale(1) brightness(.5) contrast(1.2); }
.room-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 46%, rgba(0,0,0,0) 72%),
              linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 38%); }
.room-copy {
  position: absolute; left: var(--inset); bottom: 132px; z-index: 3;
  width: min(760px, calc(100% - 2 * var(--inset)));
  display: grid; gap: 22px; pointer-events: none;
}
.room-copy > * { pointer-events: auto; }
.room-copy .label { color: var(--ink); opacity: .78; }
.room-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; min-height: 64px; }
.room-foot {
  position: absolute; left: var(--inset); right: var(--inset); bottom: 44px; z-index: 3;
  display: flex; justify-content: space-between; align-items: end; gap: 24px; pointer-events: none;
}
.room-foot .meta { color: var(--ink); opacity: .8; }
.room-foot .ai-note { opacity: 0; visibility: hidden; transition: opacity .4s linear, visibility 0s linear .4s; }
/* only where a clip can play: the same test as canClip() in rooms.js (desktop width, motion allowed) */
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .is-lit .room-foot .ai-note, .is-on .room-foot .ai-note, .story .room-foot .ai-note { opacity: 1; visibility: visible; transition-delay: 0s; }
}

/* the headline rises once the picture is there */
.rise-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rise-line > span { display: block; transform: translateY(105%); transition: transform var(--dur-enter) var(--ease-enter); }
.is-ready .rise-line > span { transform: none; }
.is-ready .rise-line:nth-child(2) > span { transition-delay: .08s; }
.is-ready .rise-line:nth-child(3) > span { transition-delay: .14s; }
.fade-in { opacity: 0; transition: opacity var(--dur-enter) linear .35s; }
.is-ready .fade-in { opacity: 1; }
/* while it fades out it stays drawn, but it takes no clicks (rooms.js also makes it inert, so no focus) */
.arrives { opacity: 0; transform: translateY(18px); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter), visibility 0s linear var(--dur-enter); }
.arrives.is-in { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* ---------- The Witch House: hold for the torch ---------- */
.torch-stage { position: absolute; inset: 0; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.room-lit {
  opacity: 0; transition: opacity .4s linear;
  -webkit-mask-image: radial-gradient(circle 230px at var(--tx, 55%) var(--ty, 36%), #000 97%, transparent 100%);
          mask-image: radial-gradient(circle 230px at var(--tx, 55%) var(--ty, 36%), #000 97%, transparent 100%);
}
.is-lit .room-lit { opacity: 1; transition-duration: .15s; }
.torch-ring {
  position: absolute; left: -230px; top: -230px; width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(239, 233, 221, .35); pointer-events: none; opacity: 0; transition: opacity .4s linear;
  will-change: transform;
}
.is-lit .torch-ring { opacity: 1; transition-duration: .15s; }
.torch-hint {
  position: absolute; left: 73%; top: 34%; z-index: 2; display: flex; align-items: center; gap: 12px;
  max-width: calc(27% - 20px);   /* the longer keyboard hint wraps instead of running to the screen edge */
  pointer-events: none; transition: opacity .4s linear;
}
.torch-hint::before { content: ""; flex: none; width: 34px; height: 1px; background: var(--ink); }
.torch-hint .label { color: var(--ink); }
.has-held .torch-hint { opacity: 0; }
body.key-torch .torch-hint { opacity: 1; }   /* torch lit from the keyboard: the hint says to use the arrow keys */
/* the marks sit under the scrim, the hint and the copy (z-index 2 and 3), so text over them stays readable */
.find-mark {
  position: absolute; z-index: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 1px solid var(--ink); opacity: 0; transform: scale(.9); pointer-events: none;
  transition: opacity .4s linear, transform .4s var(--ease-enter);
}
.find-mark.is-found { opacity: 1; transform: none; }
.found { display: flex; align-items: baseline; gap: 12px; }
.found-num { font-family: var(--serif); font-size: 40px; line-height: 40px; color: var(--ink); white-space: nowrap; }
.found { flex: none; }
.found-num span { color: var(--muted); }

/* ---------- Netherworld: restore the power ---------- */
/* at rest a band is hidden as well as clipped to nothing: a zero-width clip can land on a half pixel and leave a 1px line */
.band { position: absolute; inset: 0; visibility: hidden; clip-path: inset(0 calc(100% - var(--l)) 0 var(--l));
  transition: clip-path var(--dur-travel) var(--ease-travel), visibility var(--dur-travel) linear; }
.band.b1 { --l: 0%; --r: 66.5%; }
.band.b2 { --l: 33.3%; --r: 33.2%; transition-delay: .25s; }
.band.b3 { --l: 66.6%; --r: 0%; transition-delay: .5s; }
.is-on .band { visibility: visible; clip-path: inset(0 var(--r) 0 var(--l)); }
.power-off .band { transition-duration: .3s; transition-delay: 0s; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nether-clip { opacity: 0; transition: opacity .5s linear; }
.is-on .nether-clip.is-playing { opacity: 1; transition-delay: 1.2s; }
.status { display: flex; align-items: center; gap: 12px; }
.status::before { content: ""; width: 8px; height: 8px; background: var(--muted); transition: background-color .3s linear; }
.is-on .status::before { background: var(--ink); }
.status .label { color: var(--ink); font-variant-numeric: tabular-nums; }
.btn-power {
  display: inline-flex; align-items: center; gap: 16px; height: 64px; padding: 0 30px 0 22px;
  border: 1px solid var(--ink); border-radius: 2px; background: rgba(0,0,0,.45); color: var(--ink);
  font-size: 16px; line-height: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  transition: transform var(--dur-press) var(--ease-enter), background-color var(--dur-press) linear, color var(--dur-press) linear;
}
.btn-power::before { content: ""; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 9px no-repeat; }
.btn-power:hover { background: var(--ink); color: var(--ground); }
.btn-power:active { transform: scale(.97); }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; justify-self: start; }
/* the button fades at once but stays focusable until "Power off" arrives and takes the focus (rooms.js adds .is-arrived) */
.is-on .btn-power { opacity: 0; cursor: default; transition: opacity .2s linear; }
.is-on.is-arrived .btn-power { visibility: hidden; }
.after-on { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-text { min-height: 44px; padding: 0 4px; font-size: 14px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- A Great Escape: scroll for the story ---------- */
.story { position: relative; height: 420vh; }
.story .room-hero { position: sticky; top: 0; }
.story .room-bg { transition: transform 1.4s var(--ease-enter); }
.story .room-bg video { opacity: 0; transition: opacity 1.2s linear; }
.story .room-bg img:not(.room-colour) { transition: opacity 1.2s linear; }
.story .room-colour { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s linear; }
.story-lines { position: absolute; left: var(--inset); right: var(--inset); top: 50%; z-index: 3; transform: translateY(-50%); will-change: transform; }
.story-side { font-family: var(--serif); font-size: clamp(22px, 3.05vw, 44px); line-height: 1.1; color: var(--muted); min-height: 1.1em;
  transition: opacity .4s linear; }
.story-side.is-swap { opacity: 0; transition-duration: .15s; }
.story-main { position: relative; height: clamp(120px, 21vw, 300px); margin: clamp(10px, 1.6vw, 24px) 0; }
.story-line { position: absolute; left: 0; top: 50%; width: min(1100px, 100%);
  font-size: clamp(46px, 8.6vw, 124px); line-height: .9;
  transform: translateY(calc(-50% + 30px)); opacity: 0;
  transition: opacity .3s linear, transform .3s var(--ease-enter); }
.story-line.is-on { opacity: 1; transform: translateY(-50%);
  transition: opacity var(--dur-enter) var(--ease-enter) .12s, transform var(--dur-enter) var(--ease-enter) .12s; }
.story-dashes { display: flex; gap: 8px; align-items: center; }
.story-dashes span { width: 44px; height: 1px; background: rgba(239,233,221,.25); transition: background-color .3s linear; }
.story-dashes span.is-on { background: var(--ink); }
.story-skip { position: absolute; right: var(--inset); top: 112px; z-index: 4; }

/* ---------- below the first screen ---------- */
.room-info { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; padding: 120px var(--inset); border-top: 1px solid var(--hairline); }
.room-info-text { display: grid; gap: 28px; align-content: start; }
.room-info-text .body { max-width: 520px; }
.room-info h2 { font-weight: 800; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.room-shots { display: grid; grid-template-columns: 7fr 4fr; gap: 16px; align-items: end; }
.room-shots img { width: 100%; height: auto; filter: grayscale(1) contrast(1.08) brightness(.9); }
.room-shots img:last-child { margin-bottom: 72px; }
.room-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.room-next a { padding: 56px var(--inset); display: grid; gap: 10px; transition: background-color .3s linear; }
.room-next a + a { border-left: 1px solid var(--hairline); }
.room-next a:hover { background: var(--panel); }
.room-next strong { font-weight: 800; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }

@media (max-width: 759.98px) {
  .room-hero { height: calc(100svh - var(--bar-h) - env(safe-area-inset-bottom, 0px)); min-height: 0; }
  @media (max-height: 520px) { .room-hero { height: 520px; } }   /* a phone on its side: keep room for the words */
  .room-copy { bottom: 84px; gap: 16px; }
  .room-copy .statement-serif { font-size: clamp(40px, 12vw, 52px); }
  .room-foot { bottom: 18px; }
  .room-scrim { background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%); }
  .room-bg video, .room-lit video, .nether-clip { display: none; }
  .story .room-bg img { object-position: 38% 50%; }   /* the dark photo and the colour still framed alike, or the hut shows twice */
  .torch-hint { left: auto; right: var(--inset); top: 96px; max-width: calc(100% - 2 * var(--inset)); }
  .room-lit { -webkit-mask-image: radial-gradient(circle 150px at var(--tx, 50%) var(--ty, 32%), #000 97%, transparent 100%); mask-image: radial-gradient(circle 150px at var(--tx, 50%) var(--ty, 32%), #000 97%, transparent 100%); }
  .torch-ring { left: -150px; top: -150px; width: 300px; height: 300px; }
  .btn-power { height: 56px; }
  .story-skip { top: 76px; }
  .story .room-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .found-num { font-size: 30px; line-height: 30px; }
  .story-main { height: 38vw; min-height: 130px; }
  .story-line { font-size: clamp(40px, 12vw, 54px); }
  .room-info { grid-template-columns: 1fr; gap: 48px; padding: 72px var(--inset); }
  .room-next { grid-template-columns: 1fr; }
  .room-next a + a { border-left: 0; border-top: 1px solid var(--hairline); }
}

@media (prefers-reduced-motion: reduce) {
  .rise-line > span, .arrives, .story-line, .story-line.is-on { transform: none !important; transition: opacity .3s linear !important; }
  .story-line, .story-line.is-on { transform: translateY(-50%) !important; }   /* centred like the moving version, or the line hangs low over the next one */
  .band { transition: none !important; }
  .story .room-bg { transition: none; }
  .room-bg video, .room-lit video, .nether-clip { display: none; }
}