/* ch07 — The Cracked Ground.
   The sky is white-hot behind the copy, so the copy carries a wide, soft,
   warm-dark shade (it fades with the copy) and its text a soft shadow. The
   stuck header takes a warm dark tint instead of the default cool one, which
   reads as a grey band on this sky. While the chapter is active the phone
   wears sand on its glass (three streaming layers of one tiling grain
   texture drawn in JS) over the real app capture. */

#ch07 .ch-copy { z-index: 5; }
#ch07 .ch-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  /* much wider and taller than the text column, so no edge ever shows */
  inset: -70% -55% -70% -30%;
  background: radial-gradient(closest-side at 44% 50%,
    rgba(62, 28, 6, 0.60) 0%, rgba(62, 28, 6, 0.48) 34%,
    rgba(62, 28, 6, 0.24) 66%, rgba(62, 28, 6, 0) 100%);
}
#ch07 .ch-copy h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(40, 20, 8, 0.35); }
#ch07 .lede {
  color: #FBF1E2;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(40, 20, 8, 0.55);
}
#ch07 .eyebrow { color: #FFC24A; text-shadow: 0 1px 10px rgba(40, 20, 8, 0.7); }

/* The header on the white-hot sky: a warm dark tint, darker at the top edge. */
html[data-chapter="ch07"] .site-head.is-stuck {
  background: linear-gradient(180deg, rgba(34, 20, 9, 0.76) 0%, rgba(34, 20, 9, 0.62) 100%);
  border-color: rgba(255, 214, 160, 0.10);
}
html[data-chapter="ch07"] .brand { text-shadow: 0 1px 12px rgba(38, 18, 8, 0.75), 0 0 2px rgba(38, 18, 8, 0.6); }
html[data-chapter="ch07"] .sound-toggle { background: rgba(38, 20, 8, 0.28); border-color: rgba(255, 220, 170, 0.22); color: #F6E9D6; }

/* ---- the phone while the chapter is active ---- */
html[data-chapter="ch07"] .phone { --sand: 0; }

/* Sand on the glass: three tiles streaming left → right at different speeds, and a tan wash. */
html[data-chapter="ch07"] .ch07-sand { position: absolute; inset: 0; overflow: hidden; opacity: calc(var(--sand) * 0.7); pointer-events: none; }
html[data-chapter="ch07"] .ch07-sand i { position: absolute; inset: -20%; display: block; background-image: var(--ch07-sand, none); background-repeat: repeat; }
html[data-chapter="ch07"] .ch07-sand-a { background-size: 96px 96px; opacity: 0.7; animation: ch07-stream-a 0.42s linear infinite; }
html[data-chapter="ch07"] .ch07-sand-b { background-size: 150px 150px; opacity: 0.45; animation: ch07-stream-b 0.68s linear infinite; }
html[data-chapter="ch07"] .ch07-sand-c { background-size: 64px 64px; opacity: 0.3; animation: ch07-stream-c 0.31s linear infinite; }
html[data-chapter="ch07"] .ch07-sand-wash {
  inset: 0; background-image: none;
  background: linear-gradient(100deg, rgba(214, 170, 112, 0.22) 0%, rgba(214, 170, 112, 0.06) 45%, rgba(232, 196, 140, 0.24) 100%);
  mix-blend-mode: screen;
}
@keyframes ch07-stream-a { from { background-position: 0 0; } to { background-position: 96px 22px; } }
@keyframes ch07-stream-b { from { background-position: 0 0; } to { background-position: 150px 26px; } }
@keyframes ch07-stream-c { from { background-position: 0 0; } to { background-position: 64px 18px; } }

@media (max-width: 900px) {
  /* Copy at the top over the brightest sky: a shade that falls from above the
     header to below the lede and dissolves sideways, so it reads as the upper
     sky deepening, not as a band. */
  #ch07 .ch-copy::before {
    inset: -95% -12% -70% -12%;
    background:
      radial-gradient(120% 70% at 30% 48%, rgba(62, 28, 6, 0.46) 0%, rgba(62, 28, 6, 0.28) 55%, rgba(62, 28, 6, 0) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-chapter="ch07"] .ch07-sand i { animation: none; }
}