/* Threshold composition for the grown house. Loaded after the fifth-room styles.

   The house is read left to right in the order it grew: Conversation, Colour,
   Garden, Listening, Afterimage — the five rooms that hold a piece and end.
   Below and smaller, set apart and further away, the three that have no
   duration at all: Window, Machine Room, Archive.

   The apertures themselves are no longer painted here. Each one is a live
   miniature of its own room drawn onto the threshold canvas behind these
   tiles, so what is left in CSS is the edge, the name, and the way a room
   answers being approached. */

.rooms {
  perspective: 900px;
}

.room {
  width: clamp(7rem, 14vw, 14rem);
  will-change: transform;
}

/* The five that end. */
.room-conversation { left: 12%; top: 42%; width: clamp(8.2rem, 16.5vw, 16.5rem); }
.room-colour { left: 30%; top: 31%; width: clamp(7.8rem, 15.5vw, 15.5rem); }
.room-garden { left: 48%; top: 43%; width: clamp(7.5rem, 15vw, 15rem); }
.room-listening { left: 66%; top: 31%; width: clamp(7rem, 14vw, 14rem); }
.room-afterimage { left: 84%; top: 43%; width: clamp(6.8rem, 13.5vw, 13.5rem); }

/* The three that do not. Further down, further away, smaller. */
.room-window {
  left: 27%;
  top: 77%;
  width: clamp(6.6rem, 12.8vw, 12.8rem);
  aspect-ratio: 1.22;
}

.room-machine { left: 50%; top: 78%; width: clamp(5.8rem, 10.6vw, 10.6rem); }
.room-archive { left: 73%; top: 77%; width: clamp(6.2rem, 11.6vw, 11.6rem); }

/* The canvas carries the picture; the aperture is only its edge. */
.aperture {
  background: none;
  box-shadow: none;
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  transition: opacity 1.4s ease;
}

.aperture::before {
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(236, 234, 244, .09);
  box-shadow: none;
  transition: border-color 1s ease, box-shadow 1.4s ease;
}

.aperture::after { content: none; }

.room-machine .aperture,
.room-machine .aperture::before { border-radius: 5%; }

.room-window .aperture,
.room-window .aperture::before { border-radius: 4% / 6%; }

.room:hover .aperture::before,
.room:focus-visible .aperture::before {
  border-color: rgba(236, 234, 244, .5);
  box-shadow:
    0 0 0 1px rgba(112, 225, 209, .1),
    0 0 60px rgba(112, 225, 209, .1);
}

.room:hover .aperture,
.room:focus-visible .aperture {
  opacity: 1;
  transform: none;
  filter: none;
}

.room.visited .aperture::before {
  border-color: rgba(112, 225, 209, .28);
  box-shadow: none;
}

.room-name {
  bottom: -7%;
  color: rgba(236, 234, 244, .42);
  font-size: clamp(.6rem, .86vw, .76rem);
  letter-spacing: .19em;
}

.room:hover .room-name,
.room:focus-visible .room-name { color: var(--ink); }

/* The rooms that do not end name themselves more quietly. */
.room-window .room-name,
.room-machine .room-name,
.room-archive .room-name {
  color: rgba(236, 234, 244, .3);
  font-size: clamp(.55rem, .76vw, .68rem);
}

/* Crossing. The rooms do not fade up together; they arrive one after another
   in the order the house grew, and each one is named a moment after it is
   there. The canvas fades the picture, this fades the edge and the word. */
@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The title leaves at the speed of the strike, not at the old fade, so the
   rooms are not arriving underneath it. */
[data-crossing="yes"] .arrival { transition: opacity .8s ease, visibility .8s; }

[data-crossing="yes"] .room { animation: arrive .62s ease backwards; }
[data-crossing="yes"] .room-name { animation: arrive .9s ease backwards; }

[data-crossing="yes"] .room-conversation { animation-delay: 0s; }
[data-crossing="yes"] .room-colour { animation-delay: .115s; }
[data-crossing="yes"] .room-garden { animation-delay: .23s; }
[data-crossing="yes"] .room-listening { animation-delay: .345s; }
[data-crossing="yes"] .room-afterimage { animation-delay: .46s; }
[data-crossing="yes"] .room-window { animation-delay: .575s; }
[data-crossing="yes"] .room-machine { animation-delay: .69s; }
[data-crossing="yes"] .room-archive { animation-delay: .805s; }

[data-crossing="yes"] .room-conversation .room-name { animation-delay: .42s; }
[data-crossing="yes"] .room-colour .room-name { animation-delay: .535s; }
[data-crossing="yes"] .room-garden .room-name { animation-delay: .65s; }
[data-crossing="yes"] .room-listening .room-name { animation-delay: .765s; }
[data-crossing="yes"] .room-afterimage .room-name { animation-delay: .88s; }
[data-crossing="yes"] .room-window .room-name { animation-delay: .995s; }
[data-crossing="yes"] .room-machine .room-name { animation-delay: 1.11s; }
[data-crossing="yes"] .room-archive .room-name { animation-delay: 1.225s; }

[data-crossing="yes"] .house-nav,
[data-crossing="yes"] .sound,
[data-crossing="yes"] .leave { animation: arrive 1s ease 1.15s backwards; }

/* A house that can be entered and never left is not a house. Once every room
   has left a trace, the threshold offers the other gesture.

   Closing is a third state of the threshold, so it has to hold the house open
   while the apertures withdraw, and keep the arrival screen from returning
   underneath them. */
[data-state="closing"] .house {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

[data-state="closing"] .arrival {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-state="closing"] #threshold-field { opacity: .92; }

.leave {
  position: absolute;
  left: max(1.4rem, env(safe-area-inset-left));
  bottom: max(1.3rem, env(safe-area-inset-bottom));
  z-index: 5;
  padding: .55rem 0;
  border: 0;
  border-bottom: 1px solid rgba(236, 234, 244, .24);
  color: rgba(236, 234, 244, .52);
  background: transparent;
  cursor: pointer;
  font-size: .7rem;
  letter-spacing: .08em;
}

.leave:hover,
.leave:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

.closing {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2.4rem;
  padding: clamp(1.5rem, 8vw, 8rem);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 3.4s ease 2.2s, visibility 3.4s;
}

[data-state="closing"] .closing {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

[data-state="closing"] .house-nav,
[data-state="closing"] .sound,
[data-state="closing"] .leave,
[data-state="closing"] .unformed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}

/* The rooms withdraw one after another rather than all at once, in the order
   the house grew. */
[data-state="closing"] .room {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.9s ease;
}

[data-state="closing"] .room-conversation { transition-delay: .1s; }
[data-state="closing"] .room-colour { transition-delay: .34s; }
[data-state="closing"] .room-garden { transition-delay: .58s; }
[data-state="closing"] .room-listening { transition-delay: .82s; }
[data-state="closing"] .room-afterimage { transition-delay: 1.06s; }
[data-state="closing"] .room-window { transition-delay: 1.3s; }
[data-state="closing"] .room-machine { transition-delay: 1.54s; }
[data-state="closing"] .room-archive { transition-delay: 1.78s; }

.closing-line {
  margin: 0;
  max-width: 26ch;
  color: rgba(236, 234, 244, .84);
  font: 300 clamp(1.35rem, 3.4vw, 2.5rem)/1.5 var(--sans);
  letter-spacing: -.01em;
}

.closing-actions {
  display: flex;
  gap: 2rem;
  align-items: baseline;
}

.closing-actions button {
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid rgba(236, 234, 244, .26);
  color: rgba(236, 234, 244, .74);
  background: transparent;
  cursor: pointer;
  font-size: .74rem;
  letter-spacing: .09em;
  transition: color .7s ease, border-color .7s ease;
}

.closing-actions button:hover,
.closing-actions button:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

#release:hover,
#release:focus-visible {
  color: var(--warm);
  border-color: var(--warm);
}

.closing-note {
  margin: 0;
  max-width: 44ch;
  color: rgba(178, 175, 192, .92);
  font-family: var(--mono);
  font-size: clamp(.6rem, .95vw, .7rem);
  line-height: 1.8;
  letter-spacing: .04em;
}

@media (max-width: 650px) {
  /* The apertures are the navigation on a phone; the pill of room names is
     not, and it stops fitting here. The order stays the order. */
  .house-nav { display: none; }

  .rooms { perspective: none; }

  .room { width: min(31vw, 9rem); }
  .room-conversation { left: 27%; top: 16%; width: min(33vw, 9.6rem); }
  .room-colour { left: 73%; top: 16%; width: min(32vw, 9.3rem); }
  .room-garden { left: 27%; top: 37%; width: min(31vw, 9rem); }
  .room-listening { left: 73%; top: 37%; }
  .room-afterimage { left: 27%; top: 58%; }
  .room-window { left: 73%; top: 58%; width: min(34vw, 9.9rem); }
  .room-machine { left: 27%; top: 79%; width: min(27vw, 7.8rem); }
  .room-archive { left: 73%; top: 79%; width: min(29vw, 8.4rem); }

  .room-name { bottom: -9%; font-size: .58rem; letter-spacing: .1em; }

  .closing { gap: 1.9rem; }
  .closing-actions { gap: 1.5rem; }
}

@media (max-width: 650px) and (orientation: portrait) {
  /* Four rows are 21svh apart. Keep each image within its row even when
     browser controls shorten the viewport, leaving space for its caption.
     Preserve the room aspect ratios: (21svh - 2rem) * .78 or * 1.22. */
  .room { max-width: calc(16.38svh - 1.56rem); }
  .room-window { max-width: calc(25.62svh - 2.44rem); }

  .room .room-name {
    top: calc(95% + .375rem);
    bottom: auto;
    width: 42vw;
    transform: translateX(-50%);
    font-size: .58rem;
    line-height: 1.35;
    letter-spacing: .1em;
    text-align: center;
    white-space: normal;
  }

}

@media (max-height: 520px) and (orientation: landscape) {
  .room { width: min(12.5vw, 5.6rem); }
  .room-conversation { left: 10%; top: 40%; width: min(14vw, 6.2rem); }
  .room-colour { left: 27%; top: 33%; width: min(13.5vw, 6rem); }
  .room-garden { left: 44%; top: 41%; }
  .room-listening { left: 61%; top: 33%; }
  .room-afterimage { left: 78%; top: 41%; }
  .room-window { left: 27%; top: 79%; width: min(11vw, 5rem); }
  .room-machine { left: 50%; top: 80%; width: min(9.5vw, 4.3rem); }
  .room-archive { left: 73%; top: 79%; width: min(10vw, 4.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .room { transition: none; }
}