/* =========================================================================
   Interiors

   A conveyor of the interior renders. The leftmost panel is wide and fully
   readable; the rest are narrow slivers queued to its right. Every few
   seconds the whole row steps one place left: the lead panel shrinks away
   off the left edge, each sliver slides across, and the one arriving in the
   lead slot expands.

   The panels are absolutely positioned and their `left` and `width` are
   animated directly. That is deliberate — animating flex or grid tracks
   leaves the images resampling mid-flight, and a transform-based conveyor
   cannot change an item's width as it travels.

   Slot 0 is the lead. Slots 1-3 are the queue. Slot 7 is the exit (zero
   width, hard left) and slots 4-6 are the wings (zero width, hard right),
   where the panels wait, unseen, to come round again.

   Without JavaScript the first four panels simply hold slots 0-3: a static
   row, with the living room open. See src/js/ui/interiors.js.
   ========================================================================= */

.interiors {
  padding: var(--section-pad) var(--gutter-safe);
  background: var(--c-black);
}

/* The interiors are a finish card (finish-card.css). Their renders are
   3:2 and the open panel is 62% of the row, so a row this tall shows the
   open room whole; where the screen is too short for it, the scene
   shortens it (scene.js) and the room is framed rather than squeezed. */
.interiors--card {
  --row-h: 28.89cqw;
}

/* The words before the card, where the scene is not staging them: on
   the page's edges, the card following on beneath them. */
.palettes__lead,
.exteriors__lead {
  padding: var(--section-pad) var(--gutter-safe) 0;
  background: var(--c-black);
}

.palettes__lead + .finish-card,
.exteriors__lead + .finish-card {
  margin-top: 0;
}

/* the chips between the lines of a lead (the four palettes, the two
   sizes): only where the scene stages the words (scene.css) */
.lead-chips {
  display: none;
}

/* ---- What the palettes are ----
   Set as the chooser's paragraph is: the page's quietest ink with the
   phrase that matters brought up, only larger. On a wide screen the
   palette scene stages it; elsewhere it introduces the section. The
   floor plan's words are set the same way. */
.palettes__intro,
.exteriors__intro,
.plan__intro {
  max-width: 48rem;
  margin: 0 auto clamp(var(--space-7), 7vw, 5rem);
  text-align: center;
}

.palettes__line,
.exteriors__line,
.plan__line {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  line-height: 1.45;
  color: var(--c-ink-4);
  text-wrap: balance;
}

.palettes__line + .palettes__line,
.exteriors__line + .exteriors__line,
.plan__line + .plan__line {
  margin-top: var(--space-6);
}

.palettes__line strong,
.exteriors__line strong,
.plan__line strong {
  font-weight: 400;
  color: var(--c-ink-2);
}



/* ---- Phones: a swipeable row, no conveyor ---- */
.interiors__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* the gutter is reached by the scroll, not left as dead space */
  margin-inline: calc(-1 * var(--gutter-safe));
  padding-inline: var(--gutter-safe);
}

.interiors__track::-webkit-scrollbar {
  display: none;
}

.interior {
  position: relative;
  /* The phone card's shape, shared with the exteriors row — see tokens.
     Desktop overrides both: there the conveyor sets the height and the
     panel's width is animated. */
  flex: 0 0 var(--card-phone-w);
  margin: 0;
  overflow: hidden;
  /* The page's cut corner, at picture scale (tokens). The glass buttons
     sit over the picture, inset from it. */
  border-radius: var(--img-radius) var(--img-radius) 0 var(--img-radius);
  clip-path: var(--img-notch-clip);
  aspect-ratio: var(--card-phone-ar);
  scroll-snap-align: center;
  background: var(--c-black);
}

/* One image per palette, stacked and crossfaded: only the one on show is
   opaque. See src/js/ui/variants.js. */
.interior__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
  /* Phones show a wide-ish panel, so they get the open framing. On the
     conveyor the slivers tighten to --focus and pan back out to
     --focus-lead as they open. Both are set in the markup. */
  object-position: var(--focus-lead, 50%) 50%;
}

.interior__img.is-shown {
  opacity: 1;
}



/* Where each render is most worth looking at. --focus is what a phone's
   card crops to; --focus-lead is the open panel's framing. On the conveyor
   a sliver is a window onto that framing, --win of the way across it (a
   number, as it multiplies a length). Percentages across the image.

   These live here rather than on the elements because the site's CSP has no
   'unsafe-inline' in style-src: a style attribute is dropped on the floor. */
.interior--living   { --focus: 52%; --focus-lead: 46%; --win: 0.52; }
.interior--bedroom  { --focus: 74%; --focus-lead: 58%; --win: 0.74; }
.interior--bathroom { --focus: 56%; --focus-lead: 50%; --win: 0.56; }
.interior--kitchen  { --focus: 48%; --focus-lead: 45%; --win: 0.48; }

/* The caption is only a wrapper for the room name, in the top corner. */
.interior__caption {
  margin: 0;
}

.interior__label {
  position: absolute;
  z-index: 1;
  right: var(--space-4);
  top: var(--space-4);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.9), 0 0 24px rgb(0 0 0 / 0.8);
}

/* Phones have no hover and no conveyor, so the card being looked at names
   itself instead: the room name comes up as a card reaches the middle of
   the row and goes again as it leaves, which under scroll snapping means
   the one card at rest in front of the reader.

   Driven by the row's own scrolling rather than by script. Where there is
   no scroll timeline to read, every card simply keeps its words, as before. */
@media (max-width: 47.99rem) {
  @supports (animation-timeline: view()) {
    .interior {
      view-timeline-name: --panel;
      view-timeline-axis: inline;
    }

    .interior__label {
      animation: panel-attend linear both;
      animation-timeline: --panel;
    }
  }
}

/* Held through the middle of the card's pass across the row and faded out
   well before either edge, so only one card is ever speaking. The plateau
   is wide enough to cover the first and last cards, which cannot quite
   reach the centre of the row. */
@keyframes panel-attend {
  0%, 32%   { opacity: 0; }
  42%, 58%  { opacity: 1; }
  68%, 100% { opacity: 0; }
}

/* ---- Tablet and up: the conveyor ---- */
@media (min-width: 48rem) {
  .interiors__track {
    display: block;
    position: relative;
    height: var(--conveyor-h);
    overflow: hidden;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Every picture is drawn at the size it has when its panel is open —
     the open width (62% of the row, in container units of the track) by
     the row's height — and a narrower panel is a window onto it, set
     --win of the way across. Opening a panel uncovers more of a picture
     that holds still, rather than rescaling it to each new width: drawn
     to the panel, a sliver framed it to the row's height and the open
     panel to its width, and every opening swelled the picture between
     the two, worst on a wide, short screen. Opened, the window is the
     whole picture, framed at --focus-lead as before. */
  .interiors__track {
    container-type: inline-size;
  }

  .interior__img {
    right: auto;
    width: 62cqw;
    max-width: none;           /* the page's images otherwise stop at 100% */
    left: calc((100% - 62cqw) * var(--win, 0.5));
    object-position: var(--focus-lead, 50%) 50%;
  }

  .interior {
    position: absolute;
    top: 0;
    bottom: 0;
    aspect-ratio: auto;
    /* slot 0 until JS says otherwise */
    left: 0;
    width: var(--w-lead);
    transition:
      left var(--conveyor-dur) var(--ease-out),
      width var(--conveyor-dur) var(--ease-out),
      opacity var(--conveyor-dur) var(--ease-out);
  }

  /* The no-JS / pre-JS resting row: one open, three queued. */
  .interior:not([data-slot]):nth-child(2) { left: var(--x-1); width: var(--w-queue); }
  .interior:not([data-slot]):nth-child(3) { left: var(--x-2); width: var(--w-queue); }
  .interior:not([data-slot]):nth-child(4) { left: var(--x-3); width: var(--w-queue); }
  .interior:not([data-slot]):nth-child(n + 5) { left: 100%; width: 0; opacity: 0; }

  /* Once JS is driving, the slot is authoritative. The open panel is 62%
     of the row and each queued one 11.57%, with the exteriors' 1.1%
     between them. */
  .interiors__track {
    --w-lead: 62%;
    --w-queue: 11.57%;
    --x-1: 63.1%;
    --x-2: 75.77%;
    --x-3: 88.43%;
    --conveyor-dur: 0.9s;
  }

  .interior[data-slot="0"],
  .interior[data-slot="1"],
  .interior[data-slot="2"],
  .interior[data-slot="3"] {
    opacity: 1;
  }

  /* Which of the four is open, and where that leaves the other three.
     By default it is the lead; hovering a sliver hands it the open width
     and the row closes up around it. One layout solved four times over,
     so the row fills its width exactly whichever panel is open. */

  /* the lead is open */
  .interiors__track:not([data-open]) .interior[data-slot="0"],
  .interiors__track[data-open="0"] .interior[data-slot="0"] { left: 0%; width: 62%; }
  .interiors__track:not([data-open]) .interior[data-slot="1"],
  .interiors__track[data-open="0"] .interior[data-slot="1"] { left: 63.1%; width: 11.57%; }
  .interiors__track:not([data-open]) .interior[data-slot="2"],
  .interiors__track[data-open="0"] .interior[data-slot="2"] { left: 75.77%; width: 11.57%; }
  .interiors__track:not([data-open]) .interior[data-slot="3"],
  .interiors__track[data-open="0"] .interior[data-slot="3"] { left: 88.43%; width: 11.57%; }

  /* the second panel is open */
  .interiors__track[data-open="1"] .interior[data-slot="0"] { left: 0%; width: 11.57%; }
  .interiors__track[data-open="1"] .interior[data-slot="1"] { left: 12.67%; width: 62%; }
  .interiors__track[data-open="1"] .interior[data-slot="2"] { left: 75.77%; width: 11.57%; }
  .interiors__track[data-open="1"] .interior[data-slot="3"] { left: 88.43%; width: 11.57%; }

  /* the third panel is open */
  .interiors__track[data-open="2"] .interior[data-slot="0"] { left: 0%; width: 11.57%; }
  .interiors__track[data-open="2"] .interior[data-slot="1"] { left: 12.67%; width: 11.57%; }
  .interiors__track[data-open="2"] .interior[data-slot="2"] { left: 25.34%; width: 62%; }
  .interiors__track[data-open="2"] .interior[data-slot="3"] { left: 88.43%; width: 11.57%; }

  /* the fourth panel is open */
  .interiors__track[data-open="3"] .interior[data-slot="0"] { left: 0%; width: 11.57%; }
  .interiors__track[data-open="3"] .interior[data-slot="1"] { left: 12.67%; width: 11.57%; }
  .interiors__track[data-open="3"] .interior[data-slot="2"] { left: 25.34%; width: 11.57%; }
  .interiors__track[data-open="3"] .interior[data-slot="3"] { left: 38%; width: 62%; }

  /* Wings: waiting off the right edge at no width. */
  .interior[data-slot="4"],
  .interior[data-slot="5"],
  .interior[data-slot="6"] { left: 100%; width: 0; opacity: 0; }

  /* Exit: the departing lead closes against the left edge. */
  .interior[data-slot="7"] { left: 0; width: 0; opacity: 0; }

  /* A panel crossing from the exit back round to the wings has no width and
     no opacity, so it is moved without a transition rather than flown. */
  .interior[data-slot="6"] {
    transition: none;
  }

  /* The open panel pans out to its wider framing and names itself.
     Whichever panel that is: the lead by default, the hovered one while
     the pointer is over the row. */
  .interior__label {
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
  }

  /* in the card the room is named over the story ("Burgundy · Living"),
     so the picture carries no name of its own */
  .interiors--card .interior__label {
    display: none;
  }

  .interiors__track:not([data-open]) .interior[data-slot="0"] .interior__label,
  .interiors__track[data-open="0"] .interior[data-slot="0"] .interior__label,
  .interiors__track[data-open="1"] .interior[data-slot="1"] .interior__label,
  .interiors__track[data-open="2"] .interior[data-slot="2"] .interior__label,
  .interiors__track[data-open="3"] .interior[data-slot="3"] .interior__label,
  .interior:not([data-slot]):first-child .interior__label {
    opacity: 1;
    transition-delay: 0.35s;
  }
}

/* People who would rather nothing moved get the static row above. */
@media (prefers-reduced-motion: reduce) {
  .interior {
    transition: none;
  }

  .interior__img,
  .interior__label {
    transition: none;
  }
}


/* =========================================================================
   The open picture shows its buttons

   Whichever panel is open carries the glass buttons over its corner: the
   same panel as the one that pans out and names itself above, a beat
   later, as the room name does.
   ========================================================================= */

@media (min-width: 48rem) {

  .interiors__track:not([data-open]) .interior[data-slot="0"] .peek,
  .interiors__track[data-open="0"] .interior[data-slot="0"] .peek,
  .interiors__track[data-open="1"] .interior[data-slot="1"] .peek,
  .interiors__track[data-open="2"] .interior[data-slot="2"] .peek,
  .interiors__track[data-open="3"] .interior[data-slot="3"] .peek,
  .interior:not([data-slot]):first-child .peek {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.45s;
  }
}

/* Phones: the card in the middle of the row, the same one that carries the
   room name. Without a scroll timeline there is no middle to read, so the
   buttons stay away. */
@media (max-width: 47.99rem) {
  @supports (animation-timeline: view()) {
    .interior .peek {
      animation: peek-attend linear both;
      animation-timeline: --panel;
    }
  }
}


/* =========================================================================
   The interiors' choices

   Two rows of chips under the question where the exteriors have one: the
   palettes, then the joinery, each under its name (finish-card.css).
   ========================================================================= */
@media (min-width: 48rem) {
  .interiors--card .section-head .swatches--joinery {
    margin-top: calc(2.08 * var(--u));
  }
}

@media (max-width: 47.99rem) {
  .interiors--card .section-head .swatches--joinery {
    margin-top: 2.4cqw;
  }
}