/* Approved visual layer. Only four opt-in routes; shared brand tokens unchanged. */
body[data-visual="home"] :is(#what, #question, #cascade) .glass,
body[data-visual="showcase"] :is(#moment .frame, #assignment .glass),
body[data-visual="architecture"] .band {
  background:var(--bg-2);
  border-color:color-mix(in srgb,var(--ink) 12%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent),inset 0 -12px 24px -24px var(--bg);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body[data-visual="home"] :is(#what, #question, #cascade) .glass > .sheen,
body[data-visual="showcase"] :is(#moment .frame, #assignment .glass) > .sheen,
body[data-visual="architecture"] .band > .sheen {display:none}

/* A static final edge is the default, including before script execution. */
body[data-visual="home"] #cascade > .wrap {position:relative;padding-top:30px}
body[data-visual="home"] #cascade > .wrap::before {
  content:"";position:absolute;top:0;left:32px;right:32px;height:18px;
  border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--emerald) 4%,transparent),transparent);
  opacity:.5454545;transform:none;pointer-events:none;
}
/* Runtime mode must still be Full; a later WebGL fallback restores static CSS. */
html[data-animation-quality="high"] body[data-visual="home"] #cascade.visual-edge-pending > .wrap::before {
  opacity:0;transform:translateY(6px);
}
html[data-animation-quality="high"] body[data-visual="home"] #cascade.visual-edge-fired > .wrap::before {
  animation:telos-section-edge 700ms cubic-bezier(.37,0,.63,1) both;
}
@keyframes telos-section-edge {
  0% {opacity:0;transform:translateY(6px)}
  45% {opacity:1}
  100% {opacity:.5454545;transform:translateY(0)}
}

/* Existing typography, with quieter reading measures and section hierarchy. */
body[data-visual="home"] :is(#what, #question) .lede {max-width:64ch !important}
body[data-visual="home"] :is(#what, #question) .t-h2 {margin-bottom:14px !important}
body[data-visual="showcase"] #assignment .wrap > p {max-width:64ch}
@media(min-width:721px) {
  body[data-visual="home"] #top {padding-bottom:44px}
  body[data-visual="home"] #top .lede-audience {margin-top:22px !important}
  body[data-visual="home"] :is(#start, #work, #origins) {padding-top:40px}
  body[data-visual="home"] :is(#start, #work, #origins) h2 {margin-bottom:16px !important}
  body[data-visual="architecture"] .band {margin-block:8px}
}
@media(max-width:720px) {
  body[data-visual="home"] #cascade > .wrap::before {left:20px;right:20px}
}
@media(prefers-reduced-motion:reduce) {
  html[data-animation-quality] body[data-visual="home"] #cascade > .wrap::before {
    animation:none;opacity:.5454545;transform:none;
  }
}