/* ---------- 05 · forest ---------- */

#ch05 .scene { overflow: hidden; }

/* Cover-sized plates, dollied by --s and drifted by --ty (% of own height).
   The origin sits 55 % down the frame to match the shader's dolly centre. */
#ch05 .ch05-set { position: absolute; inset: 0; }
#ch05 .ch05-plate {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.78svh); max-width: none; aspect-ratio: 16 / 9; height: auto;
  transform: translate(calc(-50% + var(--cx, 0%)), -50%) translate3d(var(--tx, 0px), calc(var(--ty, 0%) + var(--tj, 0px)), 0) scale(var(--s, 1));
  transform-origin: calc(50% - var(--cx, 0%)) 55%;
  opacity: var(--o, 1);
  will-change: transform;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
#ch05 .ch05-plate:not([src]) { visibility: hidden; }

/* A soft scrim behind the copy so the shafts never wash the words. */
#ch05 .ch05-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 7, 14, 0.55) 0%, rgba(5, 7, 14, 0.3) 34%, rgba(5, 7, 14, 0) 62%);
}
#ch05 .ch05-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#ch05 .ch-copy h2, #ch05 .ch-copy .lede { text-shadow: 0 2px 24px rgba(5, 7, 14, 0.6); }

/* A drop on the glass. Under it, a lens: a copy of the screenshot masked to
   a ~90 px circle (32 % of the glass width), magnified a touch and rippled
   once. Only that patch ever moves; the rest of the screen stays still. */
.ch05-lens {
  --lx: 62.5%; --ly: 36.1%;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(16% 7.5% at var(--lx) var(--ly), #000 50%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(16% 7.5% at var(--lx) var(--ly), #000 50%, rgba(0, 0, 0, 0) 100%);
}
.ch05-lens .ps-shot { transform-origin: var(--lx) var(--ly); transform: scale(1.06); }
html[data-chapter="ch05"] .phone.is-rippling .ch05-lens .ps-shot { animation: ch05-lens 1.2s ease-out both; }
html[data-chapter="ch05"]:not([data-tier="lite"]) .phone.is-rippling .ch05-lens .ps-shot { filter: url(#ch05-ripple); }
@keyframes ch05-lens {
  0% { transform: scale(1); }
  24% { transform: scale(1.13); }
  50% { transform: scale(1.02); }
  74% { transform: scale(1.08); }
  100% { transform: scale(1.06); }
}
.ch05-drop { position: absolute; left: 58%; top: 34%; width: 9%; aspect-ratio: 1; }
.ch05-drop i {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9) 0 8%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.05) 0 68%, rgba(12, 20, 32, 0.32) 86%, rgba(255, 255, 255, 0.42) 96%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.ch05-drop::before, .ch05-drop::after {
  content: ''; position: absolute; inset: -40%; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: ch05-ring 1.4s ease-out forwards;
}
.ch05-drop::after { animation-delay: 0.25s; }
@keyframes ch05-ring {
  from { transform: scale(0.3); opacity: 0.9; }
  to { transform: scale(2.2); opacity: 0; }
}

/* Portrait: crop toward the plate's sunlit left, as the shader does. */
@media (max-aspect-ratio: 6 / 5) {
  #ch05 .ch05-plate { --cx: 14%; }
}
@media (max-width: 900px) {
  #ch05 .ch05-scrim {
    background: linear-gradient(180deg, rgba(5, 7, 14, 0.66) 0%, rgba(5, 7, 14, 0.38) 38%, rgba(5, 7, 14, 0) 60%);
  }
}