/* =========================================================================
   The picture buttons

   The eye, and the day/night switch beside it, laid over the corner of
   whichever picture is open: glass chips that blur the photograph behind
   them, set in from the corner rather than cut into it. Shown by the
   interiors and exteriors sheets on the open panel; styled here.
   ========================================================================= */

.peek {
  position: absolute;
  z-index: 2;              /* over the pictures and the room name */
  right: var(--peek-inset);
  bottom: var(--peek-inset);
  display: inline-grid;
  place-items: center;
  width: var(--peek-size);
  height: var(--peek-size);
  padding: 0;
  color: var(--c-white);
  /* The floor plan's chip, cut the same way at its corner. Real glass:
     the photograph behind is blurred and lifted through it, under a faint
     white, so it reads against a dark corner and a bright sky alike. */
  --notch-edge: rgb(255 255 255 / 0.13);
  background: var(--notch-line), var(--glass-frost), rgb(0 0 0 / 0.12);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow:
    inset 0 1px 1.5px rgb(255 255 255 / 0.18),
    inset 0 0 10px rgb(255 255 255 / 0.04),
    0 6px 18px -8px rgb(0 0 0 / 0.6);
  border: 1px solid rgb(255 255 255 / 0.13);
  border-radius: var(--notch-corners);
  clip-path: var(--notch-clip);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;      /* out of the tab order until its picture is up */
  transition:
    opacity 0.45s var(--ease-out),
    visibility 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    background 0.45s var(--ease-out);
}

/* The second chip, inboard of the eye. No cut: the corner belongs to the
   eye, the way the floor plan's bedroom chip carries the cut for its row
   and the other two do not. */
.peek--clock {
  right: calc(var(--peek-inset) + var(--peek-size) + var(--peek-gap));
  --chip-line: none;
  background: rgb(255 255 255 / 0.08);
  border-radius: 4px;
  clip-path: none;
}

/* Night is on. The glyph fills rather than the chip lighting up, so the
   two chips still read as one pair. */
.peek--clock[aria-pressed="true"] .peek__moon {
  fill: currentColor;
  opacity: 1;
}

/* Nothing to switch to on this palette — the night renders do not exist
   yet. Marked the way a pending swatch is, and left in place so the row
   does not change shape as you move between palettes. */
.peek--clock.is-pending {
  cursor: default;
}

.peek--clock.is-pending svg {
  opacity: 0.32;
}

.peek svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  pointer-events: none;
}

.peek__pupil {
  fill: currentColor;
  stroke: none;
}

@media (hover: hover) {
  .peek:hover {
    --notch-edge: rgb(255 255 255 / 0.45);
    border-color: rgb(255 255 255 / 0.45);
    background: var(--notch-line), rgb(220 240 255 / 0.14);
  }

  .peek:hover svg {
    opacity: 1;
  }
}

.peek:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* =========================================================================
   When the buttons are out

   Both rows drive this the same way, so it lives here rather than being
   written twice: the conveyor switches the buttons on for the open panel,
   and phones run them off the row's own scrolling as a card reaches the
   middle.
   ========================================================================= */

/* The buttons. Visibility as well as opacity, so a button nobody can see is
   not a stop on the way through the page with a keyboard. */
@keyframes peek-attend {
  0%, 32%   { opacity: 0; visibility: hidden; }
  42%, 58%  { opacity: 1; visibility: visible; }
  68%, 100% { opacity: 0; visibility: hidden; }
}