/* THE SIX ROOMS.

   Each room is one scene: a tall scroller with a sticky 100svh stage. The only
   input is --p, that scene's scroll progress. Every room cuts its own phases
   out of --p and opens with its own geometry — a frame that expands, a wall
   that slides, a doorway, a horizontal split, a window, a horizon. No room
   fades up, and no two rooms open alike.

     01 LIVING   exterior is masked by a drawn rectangle which expands into it
     02 KITCHEN  a vertical wall line crosses the screen and leaves the room
     03 MASTER   a tall doorway aperture widens until the room is the whole wall
     04 BATH     the ground splits horizontally and parts
     05 TERRACE  a window opening grows outward, interior lines leave the frame
     06 POOL     the infinity edge draws across, opens, then flattens to a plan
*/
.scene { height: calc(var(--len, 220) * 1svh); }
@media (max-width: 900px) { .scene { height: calc(var(--len, 220) * .74 * 1svh); } }

.room .stage { color: var(--warm-white); }
.room__label {
  position: absolute; z-index: 6;
  top: clamp(5.2rem, 13vh, 7.4rem); left: var(--gut);
  display: flex; align-items: baseline; gap: .8em;
  color: inherit; opacity: .82;
}
.room__type { position: absolute; z-index: 6; }
.room__copy { color: rgba(251,249,244,.82); }

/* annotations lifted off an architectural drawing: a hairline, a dot, a word */
.notes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.note {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: .55rem;
  font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(251,249,244,.92);
  text-shadow: 0 1px 14px rgba(23,32,42,.5);
}
.note::before {
  content: ""; width: clamp(1.6rem, 4vw, 3.4rem); height: 1px;
  background: rgba(251,249,244,.7);
  transform: scaleX(var(--pc, 1)); transform-origin: 0 50%;
}
.note--left { flex-direction: row-reverse; }
.note--left::before { transform-origin: 100% 50%; }

/* the line work each stage can draw over its photograph */
.draw {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  /* white hairlines over a sunlit exterior need something behind them */
  filter: drop-shadow(0 0 4px rgba(23, 32, 42, .55));
}
.draw * {
  fill: none; stroke: rgba(251,249,244,.9); stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pa, 1));
}

/* ============================ 01 LIVING ================================= */
/* The exterior is still on screen. Thin lines draw a rectangle over it — the
   living room seen as a plan — and that rectangle then expands until the room
   inside it is the whole viewport. This is the moment of entering the house. */
.room--living {
  --pa: clamp(0, calc((var(--p) - .04) / .18), 1);
  --pb: clamp(0, calc((var(--p) - .18) / .40), 1);
  --pc: clamp(0, calc((var(--p) - .56) / .22), 1);
}
.room--living .frame--outside { z-index: 1; }
.room--living .frame--outside img {
  transform: scale(calc(1 + .14 * var(--pb)));
  transform-origin: 62% 46%;
}
.room--living .draw { opacity: calc(1 - var(--pb) * 1.6); }
.room--living .frame--room {
  z-index: 3;
  /* the outline is drawn first and only then does the room appear inside it */
  opacity: clamp(0, calc((var(--p) - .155) / .05), 1);
  clip-path: inset(
    calc(30% - 30% * var(--pb))
    calc(31% - 31% * var(--pb))
    calc(32% - 32% * var(--pb))
    calc(29% - 29% * var(--pb)));
}
/* depth, not parallax: the room drifts a couple of viewport-percent while the
   annotations drift the other way by half as much */
.room--living .frame--room img {
  transform: scale(calc(1.16 - .16 * var(--pb))) translateY(calc(-1.8svh * var(--p)));
}
.room--living .notes { transform: translateY(calc(.9svh * var(--p))); }
.room--living .room__label,
.room--living .notes,
.room--living .room__type { opacity: var(--pc); }
.room--living .room__type {
  left: var(--gut); bottom: clamp(2.4rem, 8vh, 5rem); max-width: 46rem;
  transform: translateY(calc(1.6rem * (1 - var(--pc))));
}
.room--living .room__copy {
  position: absolute; z-index: 6; right: var(--gut); bottom: clamp(2.6rem, 8vh, 5.2rem);
  max-width: 24ch; text-align: right; opacity: var(--pc);
}

/* ============================ 02 KITCHEN =============================== */
/* A single vertical line crosses the stage. Behind it the room is already
   there; in front of it the wall has not moved yet. The type sits in the
   structural margin the wall leaves behind — never in a content box. */
.room--kitchen {
  --pa: clamp(0, calc(var(--p) / .40), 1);
  --pc: clamp(0, calc((var(--p) - .36) / .24), 1);
}
.room--kitchen .stage { background: var(--chalk); color: var(--charcoal); }
.room--kitchen .k-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 34% 66%; }
.room--kitchen .k-type {
  position: relative; z-index: 6;
  padding: clamp(6rem, 15vh, 9rem) clamp(1.2rem, 2.4vw, 2.4rem) clamp(2rem, 5vh, 3.4rem) var(--gut);
  display: grid; align-content: space-between; gap: 1.6rem;
  opacity: var(--pc);
  transform: translateX(calc(-1.4rem * (1 - var(--pc))));
}
.room--kitchen .k-type .room__copy { color: var(--ink-2); }
.room--kitchen .k-type h2 { font-size: clamp(2rem, 3.6vw, 3.9rem); }
.room--kitchen .frame--room {
  position: relative; z-index: 2;
  clip-path: inset(0 calc(100% - 100% * var(--pa)) 0 0);
}
.room--kitchen .frame--room img { transform: scale(calc(1.08 - .08 * var(--pa))); }
.room--kitchen .wall {
  position: absolute; z-index: 5; top: 0; bottom: 0; width: 1px;
  left: calc(34% + 66% * var(--pa));
  background: rgba(36,37,34,.5);
  opacity: calc(1.6 - 1.6 * var(--pa));
}
.room--kitchen .room__label { color: var(--ink-2); opacity: 1; }

/* ============================ 03 MASTER ================================= */
/* Quieter. The room appears through a tall narrow opening with a soft head —
   a doorway — that widens until it is the wall itself. The headline is set
   underneath the photograph, so the opening eats it as it grows. */
.room--master {
  --pa: clamp(0, calc(var(--p) / .46), 1);
  --pc: clamp(0, calc((var(--p) - .10) / .26), 1);
  --pd: clamp(0, calc((var(--p) - .48) / .24), 1);
}
.room--master .stage { background: var(--chalk); }
.room--master .frame--room {
  z-index: 3;
  clip-path: inset(
    calc(15% - 15% * var(--pa)) calc(37% - 37% * var(--pa)) 0% calc(37% - 37% * var(--pa))
    round calc(11rem * (1 - var(--pa))) calc(11rem * (1 - var(--pa))) 0 0);
}
.room--master .frame--room img { transform: scale(calc(1.14 - .14 * var(--pa))); }
.room--master .room__ghost {
  position: absolute; z-index: 2; left: var(--gut); top: 50%; transform: translateY(-50%);
  margin: 0; color: var(--charcoal); opacity: var(--pc);
  font-family: var(--serif); font-weight: 300; font-size: var(--d2);
  line-height: .92; letter-spacing: -.014em;
}
.room--master .room__type {
  z-index: 6; left: var(--gut); bottom: clamp(2.4rem, 9vh, 5.4rem);
  color: var(--warm-white); opacity: var(--pd);
  transform: translateY(calc(1.4rem * (1 - var(--pd))));
}
.room--master .room__label { color: var(--ink-2); }
.room--master .room__copy {
  position: absolute; z-index: 6; right: var(--gut); bottom: clamp(2.6rem, 8vh, 5rem);
  max-width: 22ch; text-align: right; opacity: var(--pd);
  transform: translateY(calc(1.2rem * (1 - var(--pd))));
}

/* ============================= 04 BATH ================================== */
/* The calmest chapter: the ground itself splits along one horizontal line and
   the two halves leave. Nothing else moves, and most of the stage stays empty. */
.room--bath {
  --pa: clamp(0, calc(var(--p) / .42), 1);
  --pc: clamp(0, calc((var(--p) - .40) / .26), 1);
}
.room--bath .stage { background: var(--page); display: grid; place-items: center; }
.room--bath .frame--room {
  position: relative; inset: auto; z-index: 2;
  width: min(58vw, 52rem); height: min(58svh, 38rem);
}
.room--bath .frame--room img { transform: scale(calc(1.1 - .1 * var(--pa))); }
.room--bath .split { position: absolute; left: 0; right: 0; z-index: 4; background: var(--page); }
.room--bath .split--top { top: 0; height: 50.05%; transform: translateY(calc(-100% * var(--pa))); }
.room--bath .split--bot { bottom: 0; height: 50.05%; transform: translateY(calc(100% * var(--pa))); }
.room--bath .seam {
  position: absolute; z-index: 5; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--rule-2); opacity: calc(1.4 - 1.4 * var(--pa));
}
.room--bath .room__label { color: var(--ink-2); z-index: 6; }
.room--bath .room__type h2 { font-size: clamp(2rem, 4vw, 4.2rem); }
.room--bath .room__type {
  z-index: 6; left: var(--gut); bottom: clamp(2.4rem, 9vh, 5.4rem);
  color: var(--ink); opacity: var(--pc); transform: translateY(calc(1.2rem * (1 - var(--pc))));
  mix-blend-mode: multiply;
}
.room--bath .room__copy {
  position: absolute; z-index: 6; right: var(--gut); top: clamp(5.2rem, 13vh, 7.4rem);
  max-width: 20ch; text-align: right; color: var(--ink-2); opacity: var(--pc);
}

/* ============================ 05 TERRACE =============================== */
/* Doors disappear. A window opening grows outward in every direction, and the
   two rules that held the interior together leave the frame with it. More sky
   arrives than in any chapter before. */
.room--terrace {
  --pa: clamp(0, calc(var(--p) / .44), 1);
  --pc: clamp(0, calc((var(--p) - .44) / .24), 1);
}
.room--terrace .stage { background: var(--page); }
.room--terrace .frame--room {
  z-index: 2;
  clip-path: inset(
    calc(24% - 24% * var(--pa)) calc(30% - 30% * var(--pa))
    calc(26% - 26% * var(--pa)) calc(30% - 30% * var(--pa)));
}
.room--terrace .frame--room img { object-position: 50% 34%; transform: scale(calc(1.12 - .12 * var(--pa))); }
.room--terrace .out-rule {
  position: absolute; z-index: 5; left: 0; right: 0; height: 1px;
  background: rgba(36,37,34,.34); opacity: calc(1 - var(--pa));
}
.room--terrace .out-rule--a { top: 24%; transform: translateY(calc(-24svh * var(--pa))); }
.room--terrace .out-rule--b { top: 74%; transform: translateY(calc(26svh * var(--pa))); }
.room--terrace .room__type {
  left: var(--gut); right: var(--gut); bottom: clamp(2.2rem, 8vh, 4.6rem);
  opacity: var(--pc);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
}
.room--terrace .room__label { opacity: var(--pc); }

/* ============================= 06 POOL ================================== */
/* Almost no interface. One hairline draws across the middle of the screen —
   the infinity edge — then opens into the photograph. At the end of the
   chapter the picture flattens: it shrinks, loses its light, and thin plan
   lines rise through it. The house is becoming a drawing. */
.room--pool {
  --pa: clamp(0, calc(var(--p) / .12), 1);
  --pb: clamp(0, calc((var(--p) - .11) / .32), 1);
  --pc: clamp(0, calc((var(--p) - .44) / .20), 1);
  --pd: clamp(0, calc((var(--p) - .70) / .30), 1);
}
.room--pool .stage { background: var(--page); }
.room--pool .flatten {
  position: absolute; inset: 0;
  transform: scale(calc(1 - .40 * var(--pd))) translateY(calc(-4svh * var(--pd)));
  opacity: calc(1 - .80 * var(--pd));
}
.room--pool .frame--room {
  z-index: 2;
  clip-path: inset(
    calc(49.75% - 49.75% * var(--pb)) calc(50% - 50% * var(--pa))
    calc(49.75% - 49.75% * var(--pb)) calc(50% - 50% * var(--pa)));
}
.room--pool .frame--room img { transform: scale(calc(1.1 - .1 * var(--pb))); }
.room--pool .edge {
  position: absolute; z-index: 5; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(36, 37, 34, .55);
  transform: scaleX(var(--pa));
  opacity: calc(1 - var(--pb) * 1.3);
}
.room--pool .edge-note {
  position: absolute; z-index: 6; left: var(--gut); top: calc(50% + .9rem);
  opacity: calc(var(--pa) - var(--pb) * 1.3);
}
.room--pool .room__type h2 { font-size: clamp(1.9rem, 4vw, 4.2rem); }
.room--pool .room__type {
  left: var(--gut); bottom: clamp(1.8rem, 5vh, 3.2rem);
  opacity: calc(var(--pc) - var(--pd) * 2);
}
.room--pool .room__label { opacity: calc(var(--pc) - var(--pd) * 2); }
/* the drawing rising through the photograph */
.room--pool .to-plan {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  opacity: calc(var(--pd) * 1.15);
  transform: scale(calc(1.22 - .22 * var(--pd)));
}
.room--pool .to-plan * {
  fill: none; stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke;
}

/* ===================== the corridor between rooms ======================= */
/* Materials, not cards: four crops pinned at different heights along one rule,
   annotated the way a sample board is annotated. It exists to change the
   rhythm between the kitchen and the bedroom, nothing more. */
.corridor { position: relative; padding: clamp(3.4rem, 9vh, 6rem) 0 clamp(4rem, 10vh, 7rem); background: var(--page); }
.corridor__rule { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.corridor__head { padding-inline: var(--gut); display: flex; gap: 1.2rem; align-items: baseline; margin-bottom: clamp(1.6rem, 4vh, 3rem); }
.corridor__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9rem, 1fr);
  gap: clamp(1rem, 3.4vw, 3.4rem); align-items: center;
  padding-inline: var(--gut);
  overflow-x: auto; scrollbar-width: none;
}
.corridor__row::-webkit-scrollbar { display: none; }
.material { position: relative; display: grid; gap: .8rem; }
.material:nth-child(2) { transform: translateY(clamp(1rem, 4vh, 3rem)); }
.material:nth-child(3) { transform: translateY(clamp(-1.4rem, -4vh, -3.2rem)); }
.material:nth-child(4) { transform: translateY(clamp(.6rem, 2vh, 1.6rem)); }
.material img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.material figcaption { display: flex; align-items: baseline; gap: .6rem; }

@media (max-width: 900px) {
  .room__label { top: clamp(4.2rem, 10vh, 6rem); }
  .room--kitchen .k-grid { grid-template-columns: 1fr; }
  .room--kitchen .frame--room { position: absolute; inset: 0; }
  .room--kitchen .k-type {
    position: absolute; inset: auto 0 0 0; z-index: 6;
    background: linear-gradient(to top, rgba(245,241,233,.97) 62%, rgba(245,241,233,0));
    padding: 5rem var(--gut) clamp(2rem, 6vh, 3rem);
    gap: 1.1rem;
  }
  .room--master .room__type { bottom: 5.6rem; }
  .room--master .room__copy { bottom: 2rem; max-width: 16ch; }
  .room--bath .room__copy { max-width: 15ch; }
  .room--living .room__copy, .room--pool .room__type { max-width: 15ch; }
  .notes { display: none; }
  .room--master .room__ghost { display: none; }
  .room--bath .frame--room { width: 86vw; height: 56svh; }
}

/* Where light ink is set over photography, a scrim rides inside the room mask
   so it appears only with the room and never floats over the paper. */
.room--living .room__type, .room--terrace .room__type,
.room--pool .room__type, .room--master .room__type,
.room--living .room__copy, .room--terrace .room__copy {
  text-shadow: 0 2px 30px rgba(23, 32, 42, .5);
}
/* the pool is nearly all bright water, so its scrim carries more weight */
.room--pool .scrim {
  background:
    linear-gradient(to top,    rgba(23,32,42,.80), rgba(23,32,42,0) 58%),
    linear-gradient(to bottom, rgba(23,32,42,.34), rgba(23,32,42,0) 26%);
}

.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top,    rgba(23,32,42,.58), rgba(23,32,42,0) 44%),
    linear-gradient(to bottom, rgba(23,32,42,.38), rgba(23,32,42,0) 28%);
}