/* Ported from the approved r7 prototype (_workspace/brd_site_2026-09/preview/r7/rooms.css) —
   the design of record, unchanged. */
/* HOW IT WORKS TOGETHER as ROOMS — Peter-approved concept D, polished (refs/motion/rooms/MOTION_rooms.md).
   Seen / Found / Chosen / Booked: four colour rooms, one giant word each, the matching work drifting round it.
   Each room rises over the last as a card (scale .92→1, radius→0), and its word enters letter by letter. */
.funnel__intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end; padding: var(--sec) var(--m) calc(90 * var(--u)); }
.funnel__intro h2 { grid-column: 1 / span 7; font-size: calc(128 * var(--u)); line-height: .8; }
.funnel__intro p { grid-column: 8 / span 5; font-size: max(15px, calc(19 * var(--u))); line-height: 1.5; color: var(--dim); }
.room { position: relative; height: 270vh; }   /* ~70vh held full-screen before the next room rises */
.room + .room { margin-top: -100vh; }
.room__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg); will-change: transform, border-radius; transform-origin: 50% 0; }
/* the composition (word + pieces + service words) lives on one 16:10 canvas that scales as a unit, so the arrangement is identical on every screen */
.room__canvas { position: absolute; left: 50%; top: 50%; width: min(100vw, 160vh); aspect-ratio: 1.6; transform: translate(-50%, -50%); --c: calc(min(100vw, 160vh) / 1440); }
.room__no { position: absolute; left: var(--m); top: calc(110 * var(--u)); color: var(--acc); z-index: 6; }
.room__word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%); text-align: center; z-index: 4; pointer-events: none; }
.room__word .it { font-size: calc(260 * var(--c)); line-height: .9; color: var(--foam); white-space: nowrap; text-shadow: 0 10px 70px rgba(0,0,0,.3); }
.room__word .wrap { display: inline-block; overflow: hidden; padding: 0 .06em .12em; vertical-align: top; }
.room__word .ch { transform: translateY(105%) rotate(7deg); transform-origin: 0 100%; transition: transform 1.1s var(--e-out); }
.room__word sup { display: inline-block; font-family: Inter; font-style: normal; font-size: .075em; letter-spacing: .14em; vertical-align: top; margin: .9em 0 0 .4em; color: var(--acc);
  opacity: 0; transform: translateY(30px); transition: opacity .6s var(--e-out) .35s, transform .8s var(--e-out) .35s; }
.room.in .room__word .ch { transform: none; } .room.in .room__word sup { opacity: 1; transform: none; }
.room__body { position: absolute; left: var(--m); bottom: calc(64 * var(--u)); width: calc(430 * var(--u)); z-index: 6; font-size: max(14px, calc(17 * var(--u))); line-height: 1.5; color: rgba(238,240,236,.78); }
.room__body .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.room__body .tags span { padding: .75em 1.1em; border-radius: 999px; background: rgba(238,240,236,.1); color: var(--foam); }
.room__body .by { margin-top: 16px; color: var(--acc); }
.room__p { position: absolute; z-index: 2; will-change: transform; transition: opacity .25s var(--e-ui), filter .25s var(--e-ui); }
.room__p.front { z-index: 5; }
.room__p .m { width: 100%; aspect-ratio: var(--r); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.4); }
.room__p video, .room__p img { width: 100%; height: 100%; display: block; transition: transform .3s var(--e-ui); }
.room__p .c { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; opacity: 0; transform: translateY(8px); transition: opacity .25s var(--e-ui), transform .45s var(--e-back); }
.room__p .c .it { font-size: max(14px, calc(18 * var(--u))); }
.room__p:hover .c { opacity: 1; transform: none; }
.room.hov .room__p { opacity: .35; filter: saturate(.3); } .room.hov .room__p:hover { opacity: 1; filter: none; z-index: 7; }
.room__p:hover video, .room__p:hover img { transform: scale(1.05); }
/* rooms with no pictures to show carry their services as big drifting words */
.room__chip { position: absolute; z-index: 3; will-change: transform; font-size: calc(58 * var(--c)); color: var(--acc); white-space: nowrap; }
.room__chip.disp { font-size: calc(54 * var(--u)); color: rgba(238,240,236,.28); }
.room__cta { position: absolute; right: var(--m); bottom: calc(64 * var(--u)); z-index: 6; }
/* PHONES scale the composition, they never re-flow it (Peter 09-02): the same pinned room, giant word and
   growing frame, on a portrait canvas; positions come from rooms.js's phone slots. */
@media (max-width: 700px) {
  .funnel__intro { grid-template-columns: 1fr; row-gap: 14px; } .funnel__intro h2, .funnel__intro p { grid-column: 1; } .funnel__intro h2 { font-size: 17vw; }
  .room { height: 240vh; }
  .room__stage { height: 100svh; }
  .room__canvas { width: 100vw; height: 100svh; aspect-ratio: auto; --c: min(calc(100vw / 390), calc(100svh / 844)); }   /* sizes follow the tighter of width and height, like positions do */
  .room__word .it { font-size: calc(92 * var(--c)); }
  .room__word sup { font-size: .14em; }
  .room__no { top: 8svh; left: 16px; }
  .room__body { left: 16px; right: 16px; width: auto; bottom: 24px; font-size: 14px; }
  .room__body .tags { gap: 6px; margin-top: 12px; } .room__body .by { margin-top: 12px; }
  .room__cta { right: auto; left: 16px; transform-origin: 0 100%; }
  .room__chip { font-size: calc(30 * var(--c)); }
  .room__p .c { display: none; }
}
/* layout-change modes */
.room__p.lead { transition: none; }
.room__p.lead .m { transition: filter .2s linear; }
.room__line { position: absolute; left: 0; z-index: 1; white-space: nowrap; pointer-events: none; font-size: calc(100 * var(--c)); line-height: 1; color: var(--acc); will-change: transform, opacity; }
.room--row .room__chip { will-change: transform; }
.room__cta { transition: box-shadow .4s var(--e-out); }
.room__cta:hover, .room__cta.lit { box-shadow: 0 0 0 12px rgba(238,240,236,.12); }
.room__word .it { text-shadow: 0 10px 80px rgba(0,0,0,.45); }
@media (max-width: 700px) { .room__line { font-size: calc(44 * var(--c)); } }