/* RETURN OUTSIDE.

   The drawing comes back one last time, then takes itself apart: the interior
   walls fade out room by room until only the outline of the house is left.
   That outline is also a clip path — assets/js/night.js grows it from the
   silhouette to the whole viewport, and the night photograph is what was
   inside it all along. Then the outline is gone and so is the house tour. */
.night .stage { background: var(--night); }
.night__plan { position: absolute; inset: 0; z-index: 3; }
.night__plan * {
  fill: none; stroke: rgba(239,234,224,.55); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pa, 0));
}
.night__plan .outline { stroke: rgba(239,234,224,.85); }
.night__frame {
  position: absolute; inset: 0; z-index: 4;
  clip-path: var(--cut, inset(50% 50% 50% 50%));
}
.night__frame img { width: 100%; height: 100%; object-fit: cover; }
.night__type {
  position: absolute; z-index: 6; left: var(--gut); right: var(--gut);
  bottom: clamp(2.4rem, 9vh, 5.6rem);
  display: grid; gap: clamp(1rem, 2.4vh, 1.8rem);
  color: var(--warm-white);
  opacity: var(--pc, 0);
  transform: translateY(calc(1.5rem * (1 - var(--pc, 0))));
  text-shadow: 0 1px 30px rgba(23,32,42,.45);
}
.night__type h2 { max-width: 13ch; }
.night__sign { display: flex; align-items: baseline; gap: .7em; }
.night__type .label { color: rgba(251, 249, 244, .78); }
.night__actions { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; }
.night .line-cta { color: var(--warm-white); }
.night .line-cta::before { background: rgba(251,249,244,.55); }
.night .line-cta--solid { border-color: rgba(251,249,244,.45); }
.night .line-cta--solid:hover, .night .line-cta--solid:focus-visible { background: var(--warm-white); color: var(--night); }

/* phases of the closing scene, cut out of the same --p as every room */
.night {
  --pa: clamp(0, calc(var(--p) / .22), 1);
  --pc: clamp(0, calc((var(--p) - .74) / .18), 1);
}
.night__plan {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(56rem, 62vw); height: auto;
  opacity: calc(1 - clamp(0, calc((var(--p) - .60) / .14), 1));
}
@media (max-width: 900px) { .night__plan { width: 86vw; } }
/* the interior walls leave one at a time, oldest room first */
.night__plan .wall {
  opacity: calc(1 - clamp(0, calc((var(--p) - .30 - .024 * var(--i)) / .05), 1));
}
.night__frame { opacity: clamp(0, calc((var(--p) - .34) / .10), 1); }
html:not(.js) .night__frame { clip-path: inset(0); opacity: 1; }
html:not(.js) .night__plan { display: none; }