/* ══════════════════════════════════════════════════════════════
   THE ROOMS — Nick, 28 Aug: "morphing effects where click buttons
   and we zoom in and out like we are entering different rooms."

   The metaphor earns its place here: the business is about rooms,
   and the hero is already a photograph of one. So the site is a
   house you move through rather than a stack of pages.

   HOW IT WORKS. Every room is in the HTML from the first byte.
   JavaScript only adds the depth: it hides the inactive rooms and
   animates the transform between them. With JS off — or if the
   script fails — `.no-js` never gets removed and you get one long
   readable page with every word on it. Nothing is behind a click
   that isn't also in the source.

   THE MOTION. Going deeper: the room you leave shrinks and fades,
   the room you enter starts oversized and settles. Coming back
   reverses it. That reads as depth without a spatial map to
   maintain, which is the fragile way to do this.
   ══════════════════════════════════════════════════════════════ */

.stage{
  position:relative;
  min-height:100svh; min-height:100dvh;
  overflow:hidden;
  background:var(--navy);
}

/* The photograph sits behind everything and drifts as you go in,
   which is most of what sells the depth. */
.stage-bg{
  position:absolute; inset:-4%;
  background-image:url("room-mobile.jpg");
  background-size:cover; background-position:58% 38%;
  transform:scale(1); transition:transform .85s cubic-bezier(.22,1,.36,1), filter .85s;
  will-change:transform;
  z-index:0;
}
@media (min-width:820px){ .stage-bg{ background-image:url("room-desktop.jpg"); background-position:center 42% } }
.stage[data-depth="1"] .stage-bg{ transform:scale(1.22); filter:blur(9px) brightness(.34) saturate(.7) }

.stage-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(13,21,38,.94) 0%, rgba(13,21,38,.72) 12%,
    rgba(13,21,38,.34) 26%, rgba(13,21,38,.62) 42%,
    rgba(13,21,38,.90) 56%, rgba(13,21,38,.96) 100%);
  transition:opacity .6s;
}
.stage[data-depth="1"] .stage-scrim{
  opacity:1;
  background:linear-gradient(to bottom,
    rgba(13,21,38,.97) 0%, rgba(13,21,38,.94) 30%,
    rgba(13,21,38,.95) 70%, rgba(13,21,38,.98) 100%);
}

/* ── A room ───────────────────────────────────────────────────── */
.room{
  position:absolute; inset:0; z-index:2;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 0 40px;
  opacity:0; visibility:hidden;
  transform:scale(1.14);
  transition:opacity .5s ease, transform .62s cubic-bezier(.22,1,.36,1), visibility .62s;
  will-change:transform,opacity;
}
.room.is-active{ opacity:1; visibility:visible; transform:scale(1) }
/* the one you just left, on the way in — pushed back, not up */
.room.is-behind{ opacity:0; visibility:hidden; transform:scale(.9) }

/* ── Doors ────────────────────────────────────────────────────── */
.doors{
  display:grid; gap:10px;
  margin:clamp(18px,4vw,26px) 0 0;
  grid-template-columns:1fr 1fr;
}
@media (min-width:700px){ .doors{ grid-template-columns:repeat(4,1fr) } }
.door{
  appearance:none; -webkit-appearance:none;
  text-align:left; cursor:pointer;
  background:rgba(13,21,38,.55);
  border:1px solid var(--rule); border-radius:4px;
  backdrop-filter:blur(6px);
  padding:14px 14px 13px;
  color:var(--paper); font-family:inherit;
  transition:border-color .2s, background .2s, transform .2s;
  min-height:74px;
}
.door:hover,.door:focus-visible{
  border-color:color-mix(in oklab, var(--cool) 60%, transparent);
  background:rgba(13,21,38,.75);
  transform:translateY(-2px);
}
.door .d-dia{
  display:block; width:8px; height:8px; margin-bottom:9px;
  border:1.5px solid var(--cool); transform:rotate(45deg);
}
.door .d-name{
  display:block; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(13.5px,3.6vw,15.5px); line-height:1.2;
}
.door .d-sub{
  display:block; margin-top:4px; color:var(--dim);
  font-size:clamp(11px,2.9vw,12.5px); line-height:1.35;
}
.door--call{ border-color:color-mix(in oklab, var(--warm) 45%, transparent) }
.door--call .d-dia{ border-color:var(--warm) }

/* ── Back ─────────────────────────────────────────────────────── */
.back{
  appearance:none; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 0; margin:0 0 4px;
  color:var(--dim); font-family:inherit; font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  min-height:44px;
}
.back:hover,.back:focus-visible{ color:var(--paper) }
.back .b-dia{
  width:8px; height:8px; border:1.5px solid var(--warm);
  transform:rotate(45deg); flex:none;
}

.room-inner{
  width:100%; max-width:760px; margin:0 auto;
  padding:clamp(16px,4vw,28px) max(20px,env(safe-area-inset-left)) 0;
}
.room[data-room="home"] .room-inner{ max-width:960px; min-height:100svh; display:flex; flex-direction:column }

/* ── No JS: everything on, stacked, readable ──────────────────── */
.no-js .room{
  position:static; opacity:1; visibility:visible; transform:none;
  border-top:1px solid var(--rule); padding-top:34px;
}
.no-js .room[data-room="home"]{ border-top:0 }
.no-js .stage{ overflow:visible; min-height:0 }
.no-js .stage-bg,.no-js .back{ display:none }
.no-js .stage-scrim{ position:absolute; height:100% }

@media (prefers-reduced-motion:reduce){
  .room,.stage-bg,.stage-scrim{ transition-duration:.001s }
  .room{ transform:none !important }
}

/* Focus is moved to the room heading so a screen reader announces
   where it has arrived. A heading is not an interactive control, so
   the ring would only ever be visual noise — every real control
   keeps its own :focus-visible outline. */
.room h1[tabindex="-1"]:focus,
.room h2[tabindex="-1"]:focus{ outline:none }