/* 02 · base
   Reset, the ground, the page frame, shared type. The page is one 3D scene: the phase module writes one
   camera (--rw-px, --rw-py, from -1 to 1) and one pulse (--rw-pulse, 0 to 1), and each layer reads them at its
   own depth. Far layers move least. Text stays planted.
   Performance rules for every file: the three are registered non-inherited and land only on the elements marked
   [data-rw-cam] (a child that needs them takes them with inherit); what loops moves whole elements (transform,
   opacity), never repaints a background or the inside of a drawing; what loops off screen sleeps ([data-rw-live]). */

*{box-sizing:border-box}
html,body{margin:0}
/* the page never scrolls sideways (perceive.layout): light that reaches past the window's edge ends there */
body{overflow-x:clip}
@property --rw-px{syntax:"<number>";inherits:false;initial-value:0}
@property --rw-py{syntax:"<number>";inherits:false;initial-value:0}
@property --rw-pulse{syntax:"<number>";inherits:false;initial-value:0}

/* the ground: a smooth gradient with two bands of dark-red mist drifting left to right, far band slower. Each band
   is one tile wider than the screen and slides by exactly one tile, so the loop has no seam and moves on the GPU */
.rw-body{background:var(--rw-ground) linear-gradient(168deg,var(--rw-ground) 0%,var(--rw-ground-mid) 55%,var(--rw-ground-end) 100%) fixed;
  color:var(--rw-title-ink);font-family:var(--f-body);font-size:16px;line-height:1.55;position:relative}
.rw-body::before,.rw-body::after{content:"";position:fixed;top:-24px;bottom:-24px;z-index:0;pointer-events:none;background-repeat:repeat-x;
  --rw-px:inherit;--rw-py:inherit;--rw-pulse:inherit;opacity:calc(.78 + var(--rw-pulse) * .22)}
.rw-body::before{left:-1424px;width:calc(100vw + 1448px);
  background-image:radial-gradient(24% 40% at 25% 18%,var(--rw-mist-a),transparent 70%),radial-gradient(20% 32% at 68% 74%,var(--rw-mist-b),transparent 70%);
  background-size:1400px 100%;animation:rw-drift calc(var(--rw-beat) * 32) linear infinite;
  translate:calc(var(--rw-px) * -6px) calc(var(--rw-py) * -4px)}
.rw-body::after{left:-1024px;width:calc(100vw + 1048px);
  background-image:radial-gradient(16% 28% at 38% 46%,var(--rw-mist-b),transparent 70%),radial-gradient(18% 34% at 84% 14%,var(--rw-mist-a),transparent 70%);
  background-size:1000px 100%;animation:rw-drift-near calc(var(--rw-beat) * 20) linear infinite;
  translate:calc(var(--rw-px) * -14px) calc(var(--rw-py) * -9px)}
@keyframes rw-drift{to{transform:translateX(1400px)}}
@keyframes rw-drift-near{to{transform:translateX(1000px)}}

.rw-page{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding-inline:20px;padding-block:28px 56px;display:flex;flex-direction:column;gap:64px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0}
p{margin:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--rw-focus);outline-offset:3px}

.rw-eyebrow{font-family:var(--f-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rw-eyebrow-ink)}
.rw-lede{font-size:18px;color:var(--rw-lede-ink);max-width:56ch}
.rw-section{display:flex;flex-direction:column;gap:12px}
.rw-section__head{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.rw-section__title{font-size:clamp(26px,3.6vw,36px);line-height:1.1;color:var(--rw-title-ink)}
.rw-section__hint{font-size:14px;color:var(--rw-eyebrow-ink)}
.rw-what,.rw-manifesto{max-width:68ch}

/* light that rides on a surface: the hologram follows the hand on it (--mx, --my, written on the holo itself) */
.rw-holo{position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 42%),
    conic-gradient(from var(--ma,0deg) at var(--mx,50%) var(--my,50%),#ff8a9c,#ffd36e,#8bf0d9,#8aa4ff,#f39cff,#ff8a9c);
  background-blend-mode:screen;transition:opacity .3s}
.rw-gloss{position:absolute;inset:-25%;pointer-events:none;z-index:4;opacity:0;
  background:linear-gradient(118deg,transparent 34%,rgba(255,255,255,.06) 42%,rgba(255,255,255,.3) 49%,rgba(255,255,255,.06) 56%,transparent 64%);
  transform:translate(55%,40%)}

.rw-probe{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.rw-noscript{padding:12px 16px;border:1px solid var(--rw-engine-edge);border-radius:12px;color:var(--rw-lede-ink)}

@media (prefers-reduced-motion:reduce){
  .rw-body::before,.rw-body::after{animation:none}
}