/* Color is concentrated at chapter seams, using the existing brand palette. */
.opening-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(ellipse at 12% 65%,var(--glow-violet),transparent 65%),radial-gradient(ellipse at 86% 35%,var(--glow-coral),transparent 62%),radial-gradient(ellipse at 52% 95%,rgba(214,51,108,.18),transparent 60%);border-radius:var(--radius-panel)}
.opening-live .split-rule{background:var(--grad);width:2px}
.opening-live .split-right>small{color:var(--magenta-text)}
.opening-live .split-half .experiment-results{border-top-color:var(--rule-strong)}
.opening-live .split-right .experiment-results{border-top-color:var(--magenta)}

#verticals .vert-pair{border-top:2px solid var(--magenta)}
.closing .close-copy .h2{ text-wrap:balance }
@media(prefers-reduced-motion:reduce){.opening-atmosphere{display:none}}
/* Small campaign labels keep full ink contrast over the stronger color field. */
.opening-live .split-right>small{color:var(--ink)}

/* 2026-09-20 chapter arrivals below the opening. Same rise, timing and stagger as the interior pages
   (pages-motion.js / pages.css .m-reveal). Only under html.reveal-live, which scroll-polish.js sets when
   motion is allowed. !important because the homepage keeps html.no-motion for the opening, and that
   class kills every transition on the page. */
html.reveal-live [data-reveal]:not(.is-in) { opacity: 0 !important; transform: translateY(56px) !important; }
html.reveal-live [data-reveal] { transition: opacity 700ms var(--ease-out), transform 760ms var(--ease-out) !important; transition-delay: calc(var(--i, 0) * 90ms) !important; }
html.reveal-live [data-reveal].is-in { opacity: 1 !important; transform: none !important; }

/* 2026-10-04 gate 5, quiet reveals on phones. One orchestrated moment (the hero title rise, hero.css) stays.
   Every other entrance is an 8px, 320ms fade with no stagger. Reduced motion still shows everything at rest. */
@media (max-width: 859px) {
  html.reveal-live [data-reveal]:not(.is-in) { transform: translateY(8px) !important; }
  html.reveal-live [data-reveal] { transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out) !important; transition-delay: 0ms !important; }
  html.reveal-live [data-reveal].is-in { transition-delay: 0ms !important; }
  html.has-motion [data-reveal]:not(.is-in):not(.h2) { transform: translateY(8px); }
}