/*
  The page, alive.

  Four things, all optional: a light that follows the pointer, boxes that stand off
  the page, sections that arrive from behind it, and figures that count up to
  themselves the first time they are seen. Every one of them is switched off by
  prefers-reduced-motion, and none of them moves a word on the page.
*/

/* ── the light that follows the pointer ──────────────────────────────────── */
#tp-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;          /* over the bands: a band's own background is opaque */
}
#tp-glow {
  background: radial-gradient(
    130px 130px at var(--gx, -300px) var(--gy, -300px),
    rgba(58, 160, 255, 0.13),
    rgba(58, 160, 255, 0.05) 38%,
    transparent 70%
  );
  transition: opacity 0.4s ease;
  opacity: 0;
}
#tp-glow.on { opacity: 1; }
html[data-theme="dark"] #tp-glow {
  background: radial-gradient(
    140px 140px at var(--gx, -300px) var(--gy, -300px),
    rgba(123, 184, 238, 0.20),
    rgba(123, 184, 238, 0.08) 40%,
    transparent 72%
  );
}
.tp-spark {
  position: fixed;
  z-index: 9999;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,160,255,.75), rgba(58,160,255,0) 70%);
  pointer-events: none;
  will-change: transform, opacity;
}
html[data-theme="dark"] .tp-spark {
  background: radial-gradient(circle, rgba(166,227,233,.8), rgba(166,227,233,0) 70%);
}

/* ── boxes that stand off the page ───────────────────────────────────────── */
.tiles .tile,
.features .feature,
.four .p4,
.flow .step,
.tile,
.card,
.compare-card,
.stat {
  box-shadow:
    0 1px 2px rgba(27, 42, 65, 0.05),
    0 6px 14px -8px rgba(27, 42, 65, 0.16),
    0 24px 48px -28px rgba(27, 42, 65, 0.28);
  transform-style: preserve-3d;
  transition: transform 0.28s cubic-bezier(.2,.7,.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.tiles .tile:hover,
.features .feature:hover,
.four .p4:hover,
.flow .step:hover,
.tile:hover,
.card:hover,
.compare-card:hover,
.stat:hover {
  transform: perspective(1200px) translateY(-6px) rotateX(2.2deg) scale(1.012);
  box-shadow:
    0 2px 4px rgba(27, 42, 65, 0.07),
    0 14px 26px -12px rgba(27, 42, 65, 0.22),
    0 44px 72px -34px rgba(27, 42, 65, 0.34);
}
html[data-theme="dark"] .tiles .tile,
html[data-theme="dark"] .features .feature,
html[data-theme="dark"] .four .p4,
html[data-theme="dark"] .flow .step {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 10px 22px -10px rgba(0, 0, 0, 0.5),
    0 34px 60px -30px rgba(0, 0, 0, 0.6);
}

/* The stat cards and the numbered reasons lift too, a little less. */
.stats > div,
.panelstats > div,
.quad .q {
  transition: transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.stats > div:hover,
.panelstats > div:hover,
.quad .q:hover {
  transform: perspective(1000px) translateY(-3px) scale(1.01);
}

/* ── figures that count up ───────────────────────────────────────────────── */
.tp-count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.tp-count.rolling {
  filter: blur(0.22px);
}

@media (prefers-reduced-motion: reduce) {
  #tp-glow, .tp-spark { display: none !important; }
  .tiles .tile, .features .feature, .four .p4, .flow .step,
  .stats > div, .panelstats > div, .quad .q { transition: none !important; }
  .tiles .tile:hover, .features .feature:hover, .four .p4:hover, .flow .step:hover,
  .stats > div:hover, .panelstats > div:hover, .quad .q:hover { transform: none !important; }
  .tp-count.rolling { filter: none; }
}


/* the boxes stand off the page (David, 8 Oct 2026) */
.tiles { perspective: 1300px; }
.tiles .tile {
  transform-style: preserve-3d;
  border-top-color: rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset,
              0 2px 4px rgba(13,31,61,.10),
              0 14px 24px -10px rgba(13,31,61,.34),
              0 38px 62px -30px rgba(13,31,61,.52);
}
html[data-theme="dark"] .tiles .tile {
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset,
              0 2px 4px rgba(0,0,0,.40),
              0 16px 28px -12px rgba(0,0,0,.62),
              0 44px 70px -34px rgba(0,0,0,.80);
}
.tiles .tile:hover { transform: translateY(-7px) rotateX(3.2deg) scale(1.016); }
@media (prefers-reduced-motion: reduce) {
  .tiles .tile:hover { transform: none; }
}


/* the quoted law slides down out of its card (David, 8 Oct 2026) */
.tiles .tile[open] { grid-column: 1 / -1; }
.tiles .tile[open] .tilebody { animation: tileopen .34s cubic-bezier(.22,.61,.36,1) both; }
.tiles .tile[open] .tilebody p { max-width: 86ch; }
@keyframes tileopen {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tiles .tile[open] .tilebody { animation: none; }
}


/* less of the pale blue wash (David, 8 Oct 2026) */
/* --pale drove the pale bands, the blued body and the greyed head, and in the light
   scheme it was mist, a pale cyan. That is the blue that was everywhere. A light grey
   from the same family takes its place; ice stays on the tinted bands, so the approved
   palette still shows, with far less of it. */
html[data-theme="light"] { --pale: #EDEFF2; }