/* ============================================================
   Reality flow · Bundui Text Gradient Scroll port (MIT).
   Attribution and every changed value: assets/REALITY-GRADIENT-SOURCE.md.
   Scope: the three paragraphs under the heading and the section's depth bed
   (far halo, masked neurons plane, floor fade) in the hero's language.
   The heading and its approved word reveal keep living in reality-reveal.css
   and reality-reveal.js, untouched.
   ============================================================ */

/* ---------- depth bed: planes driven by hero-layers.js (.layer-act) ---------- */
/* .sec already carries position:relative (site.css); #reality itself stays
   overflow:visible for the sticky heading, so the bed clips on its own. */
#reality .reality-bed{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
#reality .container{position:relative; z-index:1}
#reality .reality-plane{
  position:absolute; display:block;
  will-change:transform;
  transition:opacity .6s ease-out;   /* opacity only; transform is written per frame */
}
/* Far plane, rate -1.2: one soft lavender halo behind the pinned heading and a
   fainter second breath beside the paragraphs, blurred as distance. Bleeds past
   the section on every side so its 120px of travel never shows an edge. */
#reality .reality-halo{
  inset:-10% -12%;
  background:
    radial-gradient(40% 22% at 90% 12%,rgba(167,139,250,.22),rgba(167,139,250,.08) 55%,transparent 80%),
    radial-gradient(40% 18% at 10% 72%,rgba(167,139,250,.14),transparent 78%);
  filter:blur(48px);
}
/* Mid plane, rate -0.6: the neuron frame as a luminance mask over a lavender
   tint, the hero's own technique. reality-neurons.webp is neurons/f_001.webp
   with its near black ground crushed to pure black (see the SOURCE note), so the
   mask shows only nodes and threads and no banding rings on the flat ground.
   It lives on the inline start side only: its inline end edge stops 40px short
   of the 720px text column and a radial mask fades every edge, so it never
   sits behind the words. */
#reality .reality-neurons{
  inset-inline-start:-2%;
  inset-inline-end:calc(50% + 400px);
  top:18%; height:62%;
  background:linear-gradient(160deg,#cdb9fb 0%,#a78bfa 50%,#c9b6f7 100%);
  -webkit-mask-image:url("reality-neurons.webp"),radial-gradient(62% 48% at 50% 50%,#000 22%,rgba(0,0,0,0) 76%);
  mask-image:url("reality-neurons.webp"),radial-gradient(62% 48% at 50% 50%,#000 22%,rgba(0,0,0,0) 76%);
  -webkit-mask-size:cover,100% 100%; mask-size:cover,100% 100%;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect;
  -webkit-mask-source-type:luminance; mask-mode:luminance,alpha;
  opacity:.7;
}
/* Floor: 220px fade to the ground of #calls (an odd .sec, so #FFFFFF), above
   every plane. The hairline between the two sections is dropped so the fade
   carries the handover, exactly as the hero hands over to this section. */
#reality .reality-floor{
  position:absolute; left:0; right:0; bottom:0; height:220px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#FFFFFF);
}
#reality + .sec{border-top-color:transparent}

/* ---------- the flow: three plain paragraphs in one reading measure ---------- */
#reality .reality-flow{
  position:relative;
  width:100%; max-width:720px; margin-inline:auto;
  display:flex; flex-direction:column;
  gap:clamp(36px,4.5vh,56px);
  text-align:center;
}
/* The pin: reality-gradient.js gives the track its travel (about 3.4 screens) and the stage,
   heading and paragraphs together, sticks near the middle of the viewport while the words
   light up, heading first, then the paragraphs. On short or narrow viewports, without
   JavaScript or under reduced motion the track is plain flow and every word is visible. */
#reality .reality-flow-track{position:relative; width:100%}
#reality .reality-stage{display:flex; flex-direction:column; align-items:center; width:100%}
#reality.reality-flow-pin .reality-flow-track{height:var(--reality-flow-travel, 340svh)}
#reality.reality-flow-pin .reality-stage{position:sticky; top:var(--reality-flow-top, 140px)}
#reality .reality-flow p{
  margin:0;
  font-size:20px; line-height:1.6; font-weight:450;
  letter-spacing:0; color:var(--ink,#1E1A33);
  text-wrap:pretty;
}
/* Words are fully visible by default (no JavaScript, print, any failure).
   The script dims them only after it has split the copy and measured the lines,
   and only while .reality-flow-on is present. Opacity is not layout, so the short
   ease is allowed on the per frame property. */
#reality .reality-gw{display:inline; opacity:1}
#reality .reality-flow-on .reality-gw{transition:opacity .12s ease-out}

@media(max-width:1100px){
  /* No free side strip next to a 720px column: the neurons plane would sit
     behind the words, so only the halo and the floor stay. */
  #reality .reality-neurons{display:none}
  #reality .reality-halo{
    background:
      radial-gradient(70% 18% at 80% 6%,rgba(167,139,250,.2),rgba(167,139,250,.08) 55%,transparent 80%),
      radial-gradient(64% 16% at 20% 86%,rgba(167,139,250,.12),transparent 78%);
  }
}
@media(max-width:600px){
  #reality .reality-flow{gap:32px}
  #reality .reality-flow p{font-size:18px; line-height:1.65}
  #reality .reality-floor{height:160px}
}

/* ---------- static final state ---------- */
@media(prefers-reduced-motion:reduce){
  #reality .reality-flow-track{height:auto !important}
  #reality .reality-stage{position:relative !important; top:0 !important}
  #reality .reality-gw{opacity:1 !important; transition:none !important}
  #reality .reality-plane{transform:none !important}
}
html.a11y-nomotion #reality .reality-gw,
html.a11y-dark #reality .reality-gw,
html.a11y-light #reality .reality-gw{opacity:1 !important; transition:none !important}
html.a11y-nomotion #reality .reality-plane{transform:none !important}
html.a11y-nomotion #reality .reality-flow-track{height:auto !important}
html.a11y-nomotion #reality .reality-stage{position:relative !important; top:0 !important}
html.a11y-contrast #reality .reality-bed{display:none}
@media print{
  #reality .reality-bed{display:none}
  #reality .reality-gw{opacity:1 !important}
}