/* ==========================================================================
   devanshi jain — chapter viii: the drawing in place of a film (with site.css; drawn by plan.js)
   Graph paper; the room with the inflatable at the centre; two ruled arcs; seven polaroids from the
   shoot on dotted sightlines (a dial: the wheel or a drag turns them round, and they change as they
   pass the gap in the arcs). Blurred and dimmed behind the
   chapter text like a film; 'enter' brings it into focus. The gallery shows every polaroid.
   ========================================================================== */

.has-plan {
  --plan-paper: #f7f7f4;
  --plan-ink: #4a4c4b;
  --plan-ink-soft: #8a8c8b;
  --plan-line: #a9abaa;
}

/* graph paper: a fine 20px square, a major line every five */
.plan {
  position: fixed; inset: 0; z-index: 2;
  background-color: var(--plan-paper);
  background-image:
    linear-gradient(rgba(74, 76, 75, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 76, 75, .11) 1px, transparent 1px),
    linear-gradient(rgba(74, 76, 75, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 76, 75, .05) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: center center;
  transition: filter var(--slow) var(--ease);
}
/* behind the text (on arrival, and while 'note' is open): blurred and dimmed like a film, so the
   light text reads; nothing on the drawing can be clicked then */
.plan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(24, 25, 23, .5); opacity: 0; transition: opacity var(--slow) var(--ease);
}
.is-blurred .plan { filter: blur(22px); pointer-events: none; }
.is-blurred .plan::after { opacity: 1; }
/* the other chapters' logo light: wide and soft from the top-left corner, so the wordmark's dark
   script reads while the drawing is dimmed (above the dimming: ::before needs z-index 1) */
.plan::before {
  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 .plan::before { opacity: 1; }

.plan__sheet {
  /* as large as fits between the logo and the bar; lifted a little, as the drawing sits low in its square */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -53%);
  width: min(calc(100vw - 2 * var(--side)), calc(100vh - 220px)); aspect-ratio: 1 / 1; max-width: 100%;
  -webkit-user-select: none; user-select: none; touch-action: none;   /* a finger turns the dial */
}
.plan__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plan__svg .arc { fill: none; stroke: var(--plan-line); stroke-width: .8; stroke-dasharray: 9 4 1.5 4; }
.plan__svg .tk { stroke: var(--plan-line); stroke-width: .7; }
.plan__svg .ray { fill: none; stroke: var(--plan-line); stroke-width: .7; stroke-dasharray: 5 4; transition: stroke .3s ease; }
.plan__svg .lab { fill: var(--plan-ink-soft); font: italic 300 13px var(--font); letter-spacing: .02em; transition: fill .3s ease; }
.plan__svg .frame { fill: none; stroke: var(--plan-ink); stroke-width: .8; }
.plan__svg .dot { fill: var(--plan-ink); }
.plan__svg .pol { cursor: pointer; }
.plan__svg .pol:focus { outline: none; }
/* hovered: the polaroid grows a little, its line and number turn to ink */
.plan__svg .pol__inner { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.plan__svg .pol.is-on .pol__inner { transform: scale(1.14); }
.plan__svg .pline.is-on .ray { stroke: var(--plan-ink); }
.plan__svg .pol.is-on .lab { fill: var(--plan-ink); }
.plan__svg .pol:focus-visible image { outline: 1px dotted var(--plan-ink); }
.plan__svg .room { cursor: pointer; }
.plan__svg .room:focus { outline: none; }
.plan__svg .room:focus-visible .frame { stroke-dasharray: 2 2; }

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

/* ---------- the gallery: one polaroid at a time, ‹ › through all of them ---------- */
.plan-gallery {
  position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px;
  background: var(--plan-paper); color: var(--plan-ink);
}
.plan-gallery[hidden] { display: none; }
.plan-gallery__fig { margin: 0; display: flex; flex-direction: column; align-items: center; }
.plan-gallery__fig img { display: block; max-width: min(84vw, 1000px); max-height: 72vh; width: auto; height: auto; }
.plan-gallery__cap { margin-top: .9em; color: var(--plan-ink-soft); letter-spacing: .03em; }
.plan-gallery__cap b { font-weight: 300; color: var(--plan-ink); }
.plan-gallery__nav, .plan-gallery__close {
  position: fixed; z-index: 7; border: 0; background: none; color: var(--plan-ink); font: inherit; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.plan-gallery__nav { top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; padding: 18px 14px; font-style: normal; }
.plan-gallery__nav--prev { left: calc(var(--side) - 14px); }
.plan-gallery__nav--next { right: calc(var(--right) - 14px); }
/* the same hairline × as the chapter popups */
.plan-gallery__close { top: clamp(18px, 5.3vh, 60px); right: var(--right); width: 40px; height: 40px; margin: -14px -14px 0 0; display: grid; place-items: center; }
.plan-gallery__close svg { display: block; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
@media (hover: hover) { .plan-gallery__nav:hover, .plan-gallery__close:hover { opacity: .6; } }
@media (hover: none) { .plan-gallery__nav:active, .plan-gallery__close:active { opacity: .55; } }

@media (max-width: 719px) {
  .plan__sheet { width: calc(100vw - 28px); transform: translate(-50%, -50%); }
  .plan-gallery__close { top: 16px; }
  .plan-gallery__close svg { width: 11px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan::after, .plan__svg .ray, .plan__svg .pol__inner { transition: none; }
}