/* ==========================================================================
   devanshi jain — chapter vii: the nest in place of a film (with site.css; drawn by nest.js)
   Fine grey and desaturated-brown strands on paper with the chapter's photographs set into them.
   Blurred and dimmed behind the chapter text like a film; 'enter' brings it into focus.
   Each photograph lies faded under dense twigs; hovered (tapped), the twigs part and it comes up to full
   strength. Clicked, it grows from its place to full screen (.nest-view) and shrinks back on closing.
   ========================================================================== */

.has-nest {
  --nest-paper: #ecedec;      /* the dossier's paper-mist */
  --nest-ink: #4a4c4b;
  --nest-ink-soft: #858785;
}

.nest { position: fixed; inset: 0; z-index: 2; background: var(--nest-paper); transition: filter var(--slow) var(--ease); }
.nest__canvas, .nest__over { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nest__over { pointer-events: none; }
/* the nest floats clear of the logo and the bar: its twigs fade out softly towards the top and bottom */
.nest__canvas, .nest__over {
  -webkit-mask-image: linear-gradient(to bottom, transparent 64px, #000 128px, #000 calc(100% - 128px), transparent calc(100% - 64px));
  mask-image: linear-gradient(to bottom, transparent 64px, #000 128px, #000 calc(100% - 128px), transparent calc(100% - 64px));
}   /* a few strands cross over the photographs; clicks go through */
/* behind the text: blurred and dimmed like a film; nothing can be touched then */
.nest::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(24, 25, 23, .5); opacity: 0; transition: opacity var(--slow) var(--ease);
}
.nest::before {   /* the chapters' logo light, so the wordmark's dark script reads while dimmed */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 80% 70% at 0% 0%,
    rgba(244, 242, 236, .44) 0%, rgba(244, 242, 236, .30) 18%, rgba(244, 242, 236, .14) 42%, rgba(244, 242, 236, .04) 70%, rgba(244, 242, 236, 0) 100%);
  transition: opacity var(--slow) var(--ease);
}
.is-blurred .nest { filter: blur(22px); pointer-events: none; }
.is-blurred .nest::after, .is-blurred .nest::before { opacity: 1; }

/* the box the photographs are placed in (fractions of it, set by nest.js): between the logo and the bar */
.nest__box {
  position: absolute; left: 50%; top: clamp(84px, 11vh, 110px); transform: translateX(-50%);
  width: 74vw; height: calc(100vh - 2 * clamp(84px, 11vh, 110px) - 20px); min-height: 320px;
  touch-action: none;   /* a finger disturbs the twigs */
}
.nest__img {
  position: absolute; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
/* faded under the twigs like a faint print on the paper; hovered (tapped), the twigs part and it comes
   up to full strength */
.nest__img img {
  display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  opacity: .55; filter: grayscale(.8) contrast(.5) brightness(1.45);
  transition: opacity .9s ease, filter .9s ease;
}
.nest__img.is-revealed img { opacity: 1; filter: none; }
.nest__img.is-away img { opacity: 0; transition: none; }   /* while it is enlarged */
.nest__img:focus { outline: none; }
.nest__img:focus-visible { outline: 1px dotted var(--nest-ink); outline-offset: 4px; }

/* on paper the bottom bar is ink, without the film's soft shadow */
.has-nest:not(.is-blurred) .chapter-bar { color: var(--nest-ink); text-shadow: none; }

/* the hairline × (as on the chapter popups) */
.nest-x {
  position: fixed; z-index: 8; top: clamp(18px, 5.3vh, 60px); right: var(--right); margin: -14px -14px 0 0;
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--nest-ink); cursor: pointer;
  touch-action: manipulation;
}
.nest-x svg { display: block; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.nest-x:focus-visible { outline: 1px dotted var(--nest-ink); }

/* ---------- one photograph, enlarged from its place (nest.js animates it in and out) ---------- */
.nest-view {
  position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; padding: clamp(56px, 9vh, 96px) 24px;
  background: rgba(236, 237, 236, 0); transition: background-color .65s ease; cursor: pointer;
}
.nest-view.is-open { background: rgba(236, 237, 236, .96); }
.nest-view[hidden] { display: none; }
.nest-view__fig { margin: 0; pointer-events: none; }
.nest-view__fig img { display: block; max-width: min(84vw, 1200px); max-height: calc(100vh - 2 * clamp(56px, 9vh, 96px)); width: auto; height: auto; transform-origin: 0 0; }
.nest-x { opacity: 0; transition: opacity .4s ease; }
.nest-view.is-open .nest-x { opacity: 1; }
@media (hover: hover) { .nest-x:hover { opacity: .6; } }
@media (hover: none) { .nest-x:active { opacity: .55; } }

@media (max-width: 719px) {
  /* the owner's mockup: a 9:16 frame across the full width, centred on taller screens */
  .nest__box {
    left: 0; transform: none; width: 100vw; min-height: 0;
    height: min(100vh, 177.78vw); top: max(0px, calc(50vh - 88.89vw));
    height: min(100svh, 177.78vw); top: max(0px, calc(50svh - 88.89vw));
  }
  .nest__img--desk { display: none; }   /* phones show four */
  .nest__img--front { z-index: 1; }     /* laid over its neighbour's corner, as in the mockup */
  /* the branches reach the top edge, as in the mockup, and stop short of the bar */
  .nest__canvas, .nest__over {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 100px), transparent calc(100% - 64px));
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 100px), transparent calc(100% - 64px));
  }
  .nest-view { padding: 64px 16px; }
  .nest-view__fig img { max-width: calc(100vw - 32px); max-height: calc(100vh - 128px); }
  .nest-x { top: 16px; }
  .nest-x svg { width: 11px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .nest, .nest::after, .nest::before, .nest__img img, .nest-view, .nest-x { transition: none; }
}