/* =========================================================================
   Exteriors

   The same conveyor as the interiors, with the cladding switchable beneath
   it, and framed as the interiors are: the open panel 62% of the row at
   the interiors' row height, so the two cards' pictures match. There are
   three views rather than four rooms, so the two queued panels are wider
   than the interiors' three.

   Three finishes of the same three views, shot from identical cameras, so
   switching finish is a crossfade in place: the panels do not move and
   nothing reloads once a finish has been seen. See src/js/ui/finishes.js.

   The conveyor itself is src/js/ui/conveyor.js, shared with the interiors.
   ========================================================================= */

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

/* The exteriors are a finish card (finish-card.css), framed as the
   interiors' are: the same row height (in the scene, scene.js holds the
   two rows to one height on every screen) and the same open picture, 47%
   of the row, the two other views sharing what is left. */
.exteriors--card {
  --row-h: 28.89cqw;
}

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

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

.exterior {
  position: relative;
  /* The phone card's shape, shared with the interiors 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);
}

/* The finishes are stacked on top of one another and crossfaded. Only the
   one on show is opaque; the rest wait, already decoded, underneath. */
.exterior__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
}

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


/* Where the house sits in each view. The renders are 16:9 and the phone
   card is taller than that, so cover keeps the full height and trims the
   width: all the sky and foreground survive, and only the sides go. At 3:2
   that trim takes about an eighth off each side, so where a view holds
   matters more than it did. The house is not in the same place in all
   three, nor in the same place for both models, so each says where to
   hold.

   As with the interiors, these live here rather than on the elements
   because the site's CSP has no 'unsafe-inline' in style-src. */
.exterior--front    { --focus: 50%; --win: 0.5; }   /* Plus: centred over the creek   */
.exterior--entrance { --focus: 44%; --win: 0.44; }   /* Plus: sits left of centre      */
.exterior--angled   { --focus: 58%; --win: 0.58; }   /* Plus: runs off to the right    */

/* The Studio leads with its three-quarter view over the terrace, the one
   the opening picture grows out of, and keeps its long side for last. */
.exterior--front    [data-model="studio"] { --focus: 46%; --win: 0.46; }  /* the open front, terrace */
.exterior--entrance [data-model="studio"] { --focus: 60%; --win: 0.6; }  /* door and steps, right */
.exterior--angled   [data-model="studio"] { --focus: 54%; --win: 0.54; }  /* the long side      */

/* ---- Tablet and up: the conveyor ---- */
@media (min-width: 48rem) {
  .exteriors__track {
    display: block;
    position: relative;
    height: var(--conveyor-h);   /* the same band as the interiors */
    overflow: hidden;
    margin-inline: 0;
    padding-inline: 0;
    --conveyor-dur: 0.9s;
  }

  /* As on the interiors: every picture drawn at the open panel's size, a
     sliver a window onto it --win of the way across, so opening a panel
     uncovers the picture rather than rescaling it. */
  .exteriors__track {
    container-type: inline-size;
  }

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

  .exterior {
    position: absolute;
    top: 0;
    bottom: 0;
    aspect-ratio: auto;
    left: 0;
    width: 62%;
    transition:
      left var(--conveyor-dur) var(--ease-out),
      width var(--conveyor-dur) var(--ease-out),
      opacity var(--conveyor-dur) var(--ease-out);
  }

  /* The resting row before JS takes over, and if it never does. */
  .exterior:not([data-slot]):nth-child(2) { left: 63.1%; width: 17.9%; }
  .exterior:not([data-slot]):nth-child(3) { left: 82.1%; width: 17.9%; }
  .exterior:not([data-slot]):nth-child(n + 4) { left: 100%; width: 0; opacity: 0; }

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

  /* Which of the three is open, and where that leaves the other two.
     One layout solved three times over, so the row fills its width exactly
     whichever panel is open. */

  /* the open panel */
  .exteriors__track:not([data-open]) .exterior[data-slot="0"],
  .exteriors__track[data-open="0"] .exterior[data-slot="0"] { left: 0%; width: 62%; }
  .exteriors__track:not([data-open]) .exterior[data-slot="1"],
  .exteriors__track[data-open="0"] .exterior[data-slot="1"] { left: 63.1%; width: 17.9%; }
  .exteriors__track:not([data-open]) .exterior[data-slot="2"],
  .exteriors__track[data-open="0"] .exterior[data-slot="2"] { left: 82.1%; width: 17.9%; }

  /* the second panel */
  .exteriors__track[data-open="1"] .exterior[data-slot="0"] { left: 0%; width: 17.9%; }
  .exteriors__track[data-open="1"] .exterior[data-slot="1"] { left: 19%; width: 62%; }
  .exteriors__track[data-open="1"] .exterior[data-slot="2"] { left: 82.1%; width: 17.9%; }

  /* the third panel */
  .exteriors__track[data-open="2"] .exterior[data-slot="0"] { left: 0%; width: 17.9%; }
  .exteriors__track[data-open="2"] .exterior[data-slot="1"] { left: 19%; width: 17.9%; }
  .exteriors__track[data-open="2"] .exterior[data-slot="2"] { left: 38%; width: 62%; }

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

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

  /* Crossing from the exit back round to the wings happens at no width and
     no opacity, so it is moved rather than flown. */
  .exterior[data-slot="4"] {
    transition: none;
  }
}

/* ---- Phones: the same band as the interiors ----

   The card takes the shared phone shape rather than the render's own 16:9,
   so the two sections sit as one. That used to be done here, with a height
   calculated from the interiors' width and ratio and a note to keep the
   two in step by hand; both rows now read the shape from tokens instead,
   and there is nothing left to keep in step.

   It costs a little over half the width of each render. The renders are
   wide, the house takes up well under half of one, and the focal points
   above hold it in frame, so what goes is trees and sky at the edges.
   ========================================================================= */

@media (max-width: 47.99rem) {
  .exterior__img {
    object-position: var(--focus, 50%) 50%;
  }
}



/* =========================================================================
   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) {

  .exteriors__track:not([data-open]) .exterior[data-slot="0"] .peek,
  .exteriors__track[data-open="0"] .exterior[data-slot="0"] .peek,
  .exteriors__track[data-open="1"] .exterior[data-slot="1"] .peek,
  .exteriors__track[data-open="2"] .exterior[data-slot="2"] .peek,
  .exterior: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()) {
    .exterior {
      view-timeline-name: --panel;
      view-timeline-axis: inline;
    }

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