/* ---------- 06 · delta ---------- */

#ch06 .scene { overflow: hidden; }

#ch06 .ch06-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), var(--ty, 0%), 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;
}
#ch06 .ch06-plate:not([src]) { visibility: hidden; }

/* Everything above the water line lives here; --wb is the water's height. */
#ch06 .ch06-above { position: absolute; inset: 0; clip-path: inset(0 0 var(--wb, 0%) 0); pointer-events: none; }

#ch06 .ch06-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 7, 14, 0.5) 0%, rgba(5, 7, 14, 0.22) 36%, rgba(5, 7, 14, 0) 62%);
}
#ch06 .ch06-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#ch06 .ch-copy h2, #ch06 .ch-copy .lede { text-shadow: 0 2px 24px rgba(5, 7, 14, 0.6); }

/* Everything below the water line: the reflection and the submerged copy. */
#ch06 .ch06-under { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); pointer-events: none; }
#ch06 .ch06-under[hidden] { display: none; }
#ch06 .ch06-clone {
  position: absolute; margin: 0;
  /* the letters take the water's colour: the original's colour, pulled toward the flood */
  color: var(--clone-color, #EAF1FA);
  color: color-mix(in srgb, var(--clone-color, #EAF1FA) 70%, #4F7A9C);
  /* a gentle refraction only: the words must stay readable under the line */
  filter: url(#ch06-refract-text);
  opacity: 0.86;
  text-shadow: 0 2px 18px rgba(5, 7, 14, 0.5);
  animation: ch06-sway 3.4s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ch06-sway {
  from { transform: translate(0, -1px); }
  to { transform: translate(1px, 1px); }
}
html[data-tier="lite"] #ch06 .ch06-clone { filter: none; }

/* The phone's reflection fades with distance from the surface and is gone
   before the bottom of the frame, so it never sits over the dial. */
#ch06 .ch06-mirror {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22vh), rgba(0, 0, 0, 0) calc(100% - 9vh));
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22vh), rgba(0, 0, 0, 0) calc(100% - 9vh));
}
#ch06 .ch06-under .phone.ch06-reflection {
  position: absolute; left: 0; top: 0; opacity: calc(0.6 * var(--ro, 1)); z-index: auto;
  transform: translate(calc(var(--px) - 50%), calc(var(--py) - 50%)) rotate(calc(-1 * var(--pr))) scale(var(--ps)) scaleY(-1);
  filter: url(#ch06-refract) blur(0.4px) brightness(0.8) saturate(0.85);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 70%);
}
html[data-tier="lite"] #ch06 .ch06-under .phone.ch06-reflection { filter: brightness(0.8) saturate(0.85); }

/* The phone sits in the water: its lowest part is under the surface. The
   depth (--ch06-sink) comes from the chapter: deeper when the flood is high
   and the phone must stay clear of the header. */
html[data-chapter="ch06"] .phone:not(.ch06-reflection) .phone-body {
  clip-path: inset(0 0 var(--ch06-sink, 14%) 0 round 12% 12% 0 0 / 5.6% 5.6% 0 0);
}

/* Rain on the glass, as heavy as the rain outside (--rain on .phone). */
.ch06-glass {
  position: absolute; inset: 0; opacity: var(--rain, 0);
  background-image:
    radial-gradient(3px 4px at 18% 22%, rgba(255, 255, 255, 0.6) 40%, transparent 62%),
    radial-gradient(2px 3px at 71% 14%, rgba(255, 255, 255, 0.55) 40%, transparent 62%),
    radial-gradient(4px 5px at 44% 38%, rgba(255, 255, 255, 0.5) 40%, transparent 62%),
    radial-gradient(2px 3px at 86% 47%, rgba(255, 255, 255, 0.55) 40%, transparent 62%),
    radial-gradient(3px 4px at 27% 61%, rgba(255, 255, 255, 0.5) 40%, transparent 62%),
    radial-gradient(2px 2px at 60% 72%, rgba(255, 255, 255, 0.55) 40%, transparent 62%),
    radial-gradient(3px 5px at 12% 84%, rgba(255, 255, 255, 0.45) 40%, transparent 62%),
    radial-gradient(2px 3px at 78% 88%, rgba(255, 255, 255, 0.5) 40%, transparent 62%),
    linear-gradient(172deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.07));
}

@media (max-aspect-ratio: 6 / 5) {
  #ch06 .ch06-plate { --cx: 14%; }
}
@media (max-width: 900px) {
  /* Mid-height copy so the water reaches it while the phone still fits above. */
  #ch06 .ch-copy { top: 46vh; max-width: 64vw; }
  #ch06 .ch-copy .eyebrow { white-space: nowrap; letter-spacing: 0.12em; }
  /* the words keep the narrower measure, so they wrap clear of the floating phone */
  #ch06 .ch-copy h2, #ch06 .ch-copy .lede { max-width: calc(58vw - 2 * var(--pad-x)); }
  #ch06 .ch-copy h2 { font-size: clamp(1.5rem, 6.6vw, 2.2rem); }
  #ch06 .ch06-scrim {
    background: linear-gradient(180deg, rgba(5, 7, 14, 0.5) 0%, rgba(5, 7, 14, 0.25) 45%, rgba(5, 7, 14, 0) 70%);
  }
}