/* ==========================================================================
   HAVEN. — THE LIVING LENS.

   One window, fixed to the viewport, that travels the whole page. Everything
   about WHERE it is belongs to assets/js/site/lens.js, which writes four
   numbers onto .lens__box every frame; this file owns what the window looks
   like and, crucially, the one z-index that makes the idea work.

   THE WINDOW PASSES BEHIND THE TYPE. The lens is z-index 3. Section grounds and
   the empty station frames sit below it, and everything that has to stay
   readable — .wrap and the header, listed once in base.css — sits at 4. So the
   photograph slides behind a headline rather than over it, which is the whole
   difference between an editorial window and a lightbox.

   THE SHOTS. The window holds a stack of photographs, one per slot it has been
   asked for, mounted on demand by lens.js. Changing which one is showing is a
   soft CROSSFADE: the incoming photograph fades in over the outgoing one,
   which stays fully opaque underneath until the fade has finished, so the
   window never goes pale in the middle of a change.
   ========================================================================== */
.lens {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--lens-on, 0);
  transition: opacity .18s linear;
}

.lens__box {
  position: absolute;
  top: 0; left: 0;
  width: 100px; height: 100px;      /* placeholder; lens.js writes the real box */
  overflow: hidden;
  background: var(--limestone);
  will-change: transform, width, height;
}

.lens__shots { position: absolute; inset: 0; }

.lens__shots picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.lens__shots picture.is-in { opacity: 1; z-index: 2; }
/* the outgoing shot holds still underneath; it only becomes transparent once
   lens.js lets it go, by which time it is covered */
.lens__shots picture.is-out { opacity: 1; z-index: 1; transition: none; }

/* a hairline inside the window, so the frame reads as a frame and not as a
   photograph that happens to be rectangular */
.lens__edge {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, .28);
  pointer-events: none;
}

/* --- the frames the window docks into -------------------------------------
   Empty by design. In lens mode they are invisible boxes that exist only to be
   measured; the thin rule is what a reader sees of them while the window is
   somewhere else, and it is the brief's "calm editorial wall of empty frames". */
.frame {
  outline: 1px solid var(--ink-08);
  outline-offset: 0;
}
.horizon__frame, .close__frame { outline: none; }

/* --- STATIC MODE ----------------------------------------------------------
   No script, or prefers-reduced-motion. The travelling window is removed
   entirely and every station frame simply holds its own photograph: the
   information architecture is identical, the reader gets every picture, and
   nothing moves. This is the mode the page is DESIGNED in — the lens is the
   enhancement, not the content. */
html:not(.js) .lens,
html[data-lens-mode="static"] .lens { display: none; }

html:not(.js) .frame,
html[data-lens-mode="static"] .frame { outline: none; background: var(--limestone); }

@media (prefers-reduced-motion: reduce) {
  .lens { display: none; }
  .frame { outline: none; background: var(--limestone); }
}