/* v2.1 motion. Scroll owns space and narrative, the clock owns light only, and text and
   windows settle into native, untransformed layout before the reading band. */

/* Depth (desktop): each dawn scene is a far and a near layer, moved by scroll only. Phones,
   reduced motion and saving data show the single original picture (environment.css). */
.site-page .environment-scene-group > :is(.environment-scene-far, .environment-scene-near) { display: none; }
.site-page .environment-scene-group[data-layers="split"] > :is(.environment-scene-master, .environment-scene-focus) { display: none; }
.site-page .environment-scene-group[data-layers="split"] > :is(.environment-scene-far, .environment-scene-near) {
  display: block;
  transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0) scale(var(--layer-scale, 1.025));
}
.site-page .environment-scene-group > .environment-scene-near { z-index: 1; }

/* Dawn (every tier, position only): a warm grade that grows after the first 22% of the page,
   then a low warm horizon and one ray on the right for the first light. All soft-light, so the
   dark areas stay dark; the reading veils above keep the text side calm. Strengths are tuned
   to: page end +3..5 mean luminance, right 40% +8..14, left 40% under +2, any 16px block +22 max. */
.site-page :is(.environment-dawn, .environment-horizon, .environment-ray) {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  pointer-events: none;
  will-change: opacity;
}
.site-page .environment[data-dawn-layer="css"] > :is(.environment-dawn, .environment-horizon, .environment-ray) { display: block; }
.site-page .environment-dawn {
  background: radial-gradient(ellipse 70% 66% at 84% 46%, #f0bb7c 0%, #f0bb7c99 42%, #f0bb7c00 80%);
  mix-blend-mode: soft-light;
  opacity: calc(var(--dawn-o, 0) * .45);
}
.site-page .environment-horizon {
  background: radial-gradient(ellipse 60% 36% at 84% 60%, #e8b273 0%, #e8b27366 46%, #e8b27300 84%);
  mix-blend-mode: soft-light;
  opacity: calc(var(--first, 0) * .12);
}
.site-page .environment-ray {
  background: linear-gradient(112deg, #f7dcb400 50%, #f7dcb466 60%, #f7dcb4a6 67%, #f7dcb466 74%, #f7dcb400 84%);
  mix-blend-mode: soft-light;
  opacity: calc(var(--first, 0) * .25);
}
@media (max-width: 760px) {
  /* Centred below the header so no warm band reaches the top edge. */
  .site-page .environment-dawn { background: radial-gradient(ellipse 80% 36% at 70% 48%, #f0bb7c 0%, #f0bb7c99 42%, #f0bb7c00 78%); }
  .site-page .environment-horizon { background: radial-gradient(ellipse 90% 24% at 70% 70%, #e8b273 0%, #e8b27366 46%, #e8b27300 82%); }
}

/* Settled content is native layout: no transform, mask, filter or clip remains. */
.site-page main [data-scroll-reveal][data-reveal-state="settled"] { transform: none; }
.site-page main [data-scroll-rule][data-rule-state="settled"]::after { transform: none; }

/* Headings rise line by line. The soft edge lives in padding cancelled by a negative margin
   (flex: no margin collapsing), so final glyphs sit in the opaque area and settling changes
   no pixel. Custom elements keep rules such as `.mk-opening h1 span` from matching a line. */
.site-page main .rw-lines { display: flex; flex-direction: column; }
.site-page main :is(rw-line, .rw-line) {
  display: block;
  padding: .4em .12em;
  margin: -.4em -.12em;
  overflow: clip;
  -webkit-mask-image: linear-gradient(to top, #0000, #000 .4em);
  mask-image: linear-gradient(to top, #0000, #000 .4em);
}
.site-page main rw-line-inner {
  display: block;
  transform: translate3d(0, calc((1 - var(--line, 1)) * 90%), 0);
  opacity: clamp(0, calc(var(--line, 1) * 1.4 - .1), 1);
}
.site-page main :is(rw-line, .rw-line)[data-line-state="settled"] { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.site-page main [data-line-state="settled"] > rw-line-inner { transform: none; opacity: 1; }

/* Real photographs develop like a print: from underexposed, flat and desaturated to the final
   grade, inside a whole-pixel inset. In L/M windows the picture lags its frame a little on the
   way in and out (content-motion.js). Highlights never exceed the final grade. A 2D transform
   and no will-change: the window is painted at its current scale in both scroll directions. */
.site-page main .rw-media { clip-path: inset(var(--media-inset, 0px)); }
.site-page main .rw-media > img {
  transform: translate(0, var(--media-shift, 0px)) scale(var(--media-scale, 1));
  filter: contrast(var(--media-contrast, 1)) brightness(calc(var(--media-bright, 1) * var(--media-final, 1))) saturate(var(--media-sat, 1));
}
.site-page main [data-media-state="settled"] .rw-media { clip-path: none; }
.site-page main [data-media-state="settled"] .rw-media > img { transform: none; filter: none; }
/* An author-set final grade (marketing.css, M01) is the settled value, not an override. */
.site-page main .rw-window[data-slot-id="M01"][data-media-state="settled"] .rw-media > img { filter: brightness(var(--media-final)); }

@media (prefers-reduced-motion: reduce), print {
  .site-page main :is(rw-line, .rw-line) { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .site-page main rw-line-inner { transform: none; opacity: 1; }
  .site-page main .rw-media { clip-path: none; }
  .site-page main .rw-media > img { transform: none; filter: none; }
  .site-page main .rw-window[data-slot-id="M01"] .rw-media > img { filter: brightness(var(--media-final)); }
}
@media print { .site-page :is(.environment-dawn, .environment-horizon, .environment-ray) { display: none; } }

/* Page transitions (cross-document View Transitions; others navigate as before). The header
   stays. At the click the old text leaves in place (its own exit-only groups); the old scene
   holds underneath while the new background is revealed along the site's 112° front, a narrow
   edge that reads as passing light. The new text is its own group and appears after the front
   has passed. Every root stays opaque, so no frame can fall through to a white canvas. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-page .site-header { view-transition-name: rw-header; }
html.rw-vt .site-page main { view-transition-name: rw-old-main; }
html.rw-vt .site-page .site-footer { view-transition-name: rw-old-footer; }
html:active-view-transition:not(.rw-vt) .site-page main { view-transition-name: rw-new-main; }
@property --rw-front { syntax: "<percentage>"; inherits: false; initial-value: 112%; }
::view-transition-group(rw-header) { z-index: 1; animation-duration: 240ms; }
::view-transition-old(root) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(root) {
  animation: rw-vt-front 640ms cubic-bezier(.65,0,.35,1) both;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(112deg, #000 calc(var(--rw-front) - 10%), #0000 calc(var(--rw-front) + 10%));
  mask-image: linear-gradient(112deg, #000 calc(var(--rw-front) - 10%), #0000 calc(var(--rw-front) + 10%));
}
::view-transition-old(rw-old-main), ::view-transition-old(rw-old-footer) { animation: rw-vt-out 150ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(rw-new-main) { animation: rw-vt-in 180ms linear 300ms both; mix-blend-mode: normal; }
@keyframes rw-vt-front { from { --rw-front: -12%; } to { --rw-front: 112%; } }
@keyframes rw-vt-out { to { opacity: 0; } }
@keyframes rw-vt-in { from { opacity: 0; } }