/* ─────────────────────────────  THE NIGHT (v15)  ───────────────────────────
   The photograph's cloud bank and the fishing moon, built by js/night.js
   inside .bg: canvas, then moon, then three banks, then the grain over
   everything. This file is their geometry and their small clocks; the
   parallax itself is written by the module, transform only.

   The bank is ONE 2016x864 file (2.333:1, generated in the pin's own style,
   clouds at full density edge to edge) shown three times: far, mid and near,
   at three offsets, scales and brightnesses. Nobody recognises the same
   cloud three times, and the three different shares of scroll and pointer
   between the sheets are the volume. Every bottom is a calc against vw,
   because the image's height follows its WIDTH - a constant offset that
   fits one window stands far too tall on a wider, shorter one.

   The moon is a photograph too - crescent, fisher, glow, cut free to alpha -
   in three nested boxes: the outer takes the module's parallax and scroll
   shrink, the middle leans in perspective with the pointer, the inner rides
   the nine second swell and carries the swinging line.
   ─────────────────────────────────────────────────────────────────────────── */

.night {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── the three cloud sheets ────────────────────────────────────────────────
   The file is cropped to the clouds plus a hand of sky (2016x574, 3.512:1) -
   the generated frame carried 45 percent sky of its own, and shipping that
   meant shipping a bank that showed a sliver where the calc promised half a
   window. Heights: 130% width = 37.0vw, 112% = 31.9vw, 106% = 30.2vw. The
   visible band above the bottom edge stays a fixed share of the height at
   any window shape, and the mask fades the remaining sky into the shader's
   starfield. */
.night__bank {
  position: absolute;
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
  will-change: transform;
}

.night__bankImg {
  display: block;
  width: 100%;
  height: auto;
}

.night__bank--far {
  width: 130%;
  left: -18%;
  bottom: calc(50vh - 37.01vw);
}
.night__bank--far .night__bankImg { filter: brightness(0.42); }

.night__bank--mid {
  width: 112%;
  left: -7%;
  bottom: calc(47vh - 31.89vw);
}
.night__bank--mid .night__bankImg { filter: brightness(0.68); }

.night__bank--near {
  width: 106%;
  left: -3%;
  bottom: calc(44vh - 30.18vw);
}

/* each sheet also drifts on its own slow clock, held INSIDE the masked,
   parallaxed box so the CSS animation and the module's inline transform
   never touch the same element */
.night__bank--far  .night__bankImg { animation: nightDrift 150s ease-in-out infinite alternate; }
.night__bank--mid  .night__bankImg { animation: nightDrift 105s ease-in-out infinite alternate-reverse; }
.night__bank--near .night__bankImg { animation: nightDrift 75s  ease-in-out infinite alternate; }
/* one animation shorthand would erase the brightness filters above, so the
   drifts are declared on their own and the filters stay where they are */
.night__bank--far  .night__bankImg { filter: brightness(0.42); }
.night__bank--mid  .night__bankImg { filter: brightness(0.68); }

/* the reading column lives on the left, and the one thing that must never
   sit under body copy is a blown-out cloud top. Same pull the shader's coda
   makes, drawn here because the photograph does not run through the coda. */
.night__dim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62vh;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0.46) 32%,
    transparent 62%);
  /* the dim must also ARRIVE softly: the horizontal gradient alone ended in
     a hard top edge at 62vh, and boosted levels showed it as a straight
     line across the left half of the sky - the "little stroke in the
     middle" that survived two wrong suspects (the spike stars, the link
     underline). The vertical mask fades the whole overlay in over its top
     third, so there is no longer any row where it switches on. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 36%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 36%);
}

/* ── the moon ─────────────────────────────────────────────────────────────
   High right, where the sky stays open above the props. Outer box: module
   parallax + scroll shrink. Middle: pointer tilt. Inner: the swell. */
.night__moon {
  position: absolute;
  top: 3vh;
  right: 5vw;
  width: clamp(160px, 17vw, 250px);
  aspect-ratio: 1;
  will-change: transform;
}

.night__moonTilt {
  width: 100%;
  height: 100%;
}

.night__moonInner {
  position: relative;
  width: 100%;
  height: 100%;
  animation: nightBob 9s ease-in-out infinite alternate;
}

.night__moonImg {
  display: block;
  width: 100%;
  height: 100%;
}

/* the line lies exactly over the photograph; the box is square, so the
   percent viewBox maps 1:1. It hangs past the bottom edge on purpose. */
.night__moonLine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.night__lineSwing {
  transform-box: view-box;
  transform-origin: 15.4% 38.5%;   /* where the photographed rod ends */
  animation: nightSwing 6.5s ease-in-out infinite alternate;
}

.night__bait {
  animation: nightGlint 3.4s ease-in-out infinite;
}

@keyframes nightBob {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}

@keyframes nightSwing {
  from { transform: rotate(-3.2deg); }
  to   { transform: rotate(3.2deg); }
}

@keyframes nightGlint {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@keyframes nightDrift {
  from { transform: translateX(-0.7%); }
  to   { transform: translateX(0.7%); }
}

/* a phone gets one bank, wide and low, and a smaller moon clear of the
   headline; three sheets would only be noise behind a single column */
@media (max-width: 720px) {
  .night__bank--far,
  .night__bank--mid { display: none; }
  .night__bank--near { width: 210%; left: -58%; bottom: calc(36vh - 59.79vw); }
  .night__moon { top: 5vh; right: 4vw; width: 36vw; }
  .night__dim  { background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 70%); }
}

@media (prefers-reduced-motion: reduce) {
  .night__moonInner,
  .night__lineSwing,
  .night__bait,
  .night__bankImg {
    animation: none;
  }
}