/* ZS R3 FX: the Growth effect layer (r3-fx.css + r3-fx.js), stream FXG, 3b-2b. Contract and attribute API: evidence/r3/final10/FXG/FX_GUIDE.md.
   Everything that hides or moves hangs on html.lib-on:not(.no-motion):not(.r3fx-off): under reduced motion / toggle OFF / no-JS this file adds nothing visible. Compositor properties only
   (opacity, the individual translate / scale, clip-path on a static box); hidden start states are failsafed (shown after 2.5 s if r3-fx.js never runs). */

:root {
  --r3fx-ease-quick: cubic-bezier(0, 0, .58, 1);                 /* EASE_OUT: text pops .5 s */
  --r3fx-ease-settle: cubic-bezier(.304, .714, 0, 1);            /* the plate-move spring shape; linear() below */
  --r3fx-d-text: .5s;  --r3fx-d-calm: 1.25s;  --r3fx-d-sig: 1.6s;  /* quick / calm / Growth signature (G-49) */
  --r3fx-step: .075s;  --r3fx-ga: .2s;  --r3fx-gb: .4s;  --r3fx-gc: .6s;   /* word / line step, groups a / b / c */
  --r3fx-rise: 18px;   --r3fx-bleed: 80px;
  --r3fx-u: max(100vh, 500px);                                   /* one screen of a pinned chapter */
  --r3fx-shadow: rgba(0, 0, 0, .6);  --r3fx-edge: rgba(220, 188, 126, .5);  --r3fx-glow: rgba(220, 188, 126, .14);
  --r3fx-amb-a: rgba(236, 200, 138, .36);  --r3fx-amb-b: rgba(255, 224, 176, .20);
}
@supports (height: 100svh) { :root { --r3fx-u: max(100svh, 500px); } }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --r3fx-ease-settle: linear(0, 0.0015 0.5%, 0.0058 1%, 0.0216 2%, 0.0451 3%, 0.0747 4%, 0.1086 5%, 0.1458 6%, 0.2255 8%, 0.3076 10%, 0.3879 12%, 0.4638 14%, 0.5665 17%, 0.6542 20%, 0.7272 23%, 0.8038 27%, 0.8606 31%, 0.9104 36%, 0.9481 42%, 0.9731 49%, 0.9876 57%, 0.9949 66%, 0.9982 76%, 0.9995 87%, 1); }
}
:root[data-theme="light"] { --r3fx-shadow: rgba(30, 24, 16, .30); --r3fx-edge: rgba(30, 24, 16, .16); --r3fx-glow: rgba(30, 24, 16, .0); --r3fx-amb-a: rgba(255, 214, 150, .34); --r3fx-amb-b: rgba(255, 240, 210, .20); }
html.r3-has-dock { --r3fx-dock: 72px; }

/* cascade groups a (default .2 s) / b / c; data-fx-delay sets --r3fx-d0 */
[data-fx-g="b"] { --r3fx-g: var(--r3fx-gb); }
[data-fx-g="c"] { --r3fx-g: var(--r3fx-gc); }
[data-fx-g="0"] { --r3fx-g: 0s; }

/* failsafe */
@keyframes r3fx-fs { to { opacity: 1; translate: none; scale: none; clip-path: inset(-80px); } }
html.lib-on:not(.no-motion):not(.r3fx-ready):not(.r3fx-off) :is([data-fx~="rise"], [data-fx~="up"], [data-fx~="wipe"], [data-fx~="stagger"] > *, .fx-wi) { animation: r3fx-fs 0s 2.5s forwards; }
html.lib-on:not(.no-motion):not(.r3fx-ready):not(.r3fx-off) [data-fx~="wipe"] :is(img, video) { animation: r3fx-fs 0s 2.5s forwards; }

/* 1. masked headline rise (G-47, G-48): .fx-w = the mask, .fx-wi = the word; page rules like `h2 > span { display: block }` must not reach them */
.fx-w, .fx-wi { display: inline-block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; vertical-align: baseline; }
.fx-w { clip-path: inset(-.16em -1em -.28em -1em); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="rise"]:not(.fx-split):not(.fx-plain):not([data-fx-lcp]) { opacity: 0; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="rise"].fx-plain:not(.fx-in):not([data-fx-lcp]) { opacity: 0; translate: 0 var(--r3fx-rise); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="rise"].fx-plain.fx-in { animation: r3fx-up var(--r3fx-d-text) var(--r3fx-ease-quick) calc(var(--r3fx-g, var(--r3fx-ga)) + var(--r3fx-d0, 0s)) backwards; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="rise"] .fx-wi { translate: 0 130%; transition: translate .25s var(--r3fx-ease-quick) 0s; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="rise"].fx-in .fx-wi {
  translate: 0 0; transition: translate var(--r3fx-d-text) var(--r3fx-ease-quick) calc(var(--r3fx-g, var(--r3fx-ga)) + var(--r3fx-d0, 0s) + var(--r3fx-i, 0) * var(--r3fx-step)); }

/* 2. reveal (up) and stagger */
@keyframes r3fx-up { from { opacity: 0; translate: 0 var(--r3fx-rise); } }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="up"]:not(.fx-in):not([data-fx-lcp]) { opacity: 0; translate: 0 var(--r3fx-rise); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="up"].fx-in { animation: r3fx-up var(--r3fx-d-text) var(--r3fx-ease-quick) calc(var(--r3fx-g, 0s) + var(--r3fx-d0, 0s)) backwards; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="stagger"]:not(.fx-in):not([data-fx-lcp]) > * { opacity: 0; translate: 0 var(--r3fx-rise); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="stagger"].fx-in > * { animation: r3fx-up var(--r3fx-d-text) var(--r3fx-ease-quick) calc(var(--r3fx-g, 0s) + var(--r3fx-d0, 0s) + var(--r3fx-i, 0) * var(--r3fx-step)) backwards; }

/* 3. clip-path wipe with a settle (G-45 media first) */
@keyframes r3fx-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(calc(var(--r3fx-bleed) * -1)); } }
@keyframes r3fx-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(calc(var(--r3fx-bleed) * -1)); } }
@keyframes r3fx-wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(calc(var(--r3fx-bleed) * -1)); } }
@keyframes r3fx-wipe-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(calc(var(--r3fx-bleed) * -1)); } }
@keyframes r3fx-settle { from { scale: var(--r3fx-settle, 1.14); } }
/* hidden = a closed clip-path (pages neutralise it with clip-path: none); a box taller than the window is revealed by geometry in r3-fx.js, IntersectionObserver cannot see it */
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"]:not(.fx-in):not([data-fx-lcp]) { clip-path: inset(100% 0 0 0); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"][data-fx-dir="down"]:not(.fx-in):not([data-fx-lcp]) { clip-path: inset(0 0 100% 0); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"][data-fx-dir="right"]:not(.fx-in):not([data-fx-lcp]) { clip-path: inset(0 100% 0 0); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"][data-fx-dir="left"]:not(.fx-in):not([data-fx-lcp]) { clip-path: inset(0 0 0 100%); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"].fx-in { animation: r3fx-wipe-up var(--r3fx-d-calm) var(--r3fx-ease-settle) var(--r3fx-d0, 0s) backwards; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"][data-fx-dir="down"].fx-in { animation-name: r3fx-wipe-down; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"][data-fx-dir="right"].fx-in { animation-name: r3fx-wipe-right; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"][data-fx-dir="left"].fx-in { animation-name: r3fx-wipe-left; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"]:not([data-fx-settle="off"]):not(.fx-in):not([data-fx-lcp]) :is(img, video) { scale: var(--r3fx-settle, 1.14); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"]:not([data-fx-settle="off"]).fx-in :is(img, video) { animation: r3fx-settle var(--r3fx-d-sig) var(--r3fx-ease-settle) var(--r3fx-d0, 0s) backwards; }
/* The settle grows the picture 1.14 x inside its box, so the box clips it: unclipped, a wiped box within 7 % of the window edge (a phone gutter) made the page scroll sideways until it was revealed
   (clip-path never shrinks the scrollable area). Only a box that holds a picture and settles; settle-off and picture-less boxes (an svg wordmark that overflows on purpose) are left alone. */
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="wipe"]:not([data-fx-settle="off"]):has(img, video) { overflow: hidden; overflow: clip; }

/* 4. controlled parallax (transform only) */
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-par-in { overflow: hidden; overflow: clip; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-par-media { scale: var(--r3fx-over, 1.16); transform-origin: 50% 50%; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-par-on { will-change: translate, scale; }

/* 5. hover / focus depth on cards */
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-rel { position: relative; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="depth"] > .fx-edge { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 42%);
  box-shadow: 0 36px 58px -30px var(--r3fx-shadow), 0 0 46px -14px var(--r3fx-glow), 0 0 0 1px var(--r3fx-edge); transition: opacity .45s var(--r3fx-ease-quick); }
:where(html.lib-on:not(.no-motion):not(.r3fx-off)) [data-fx~="depth"] { transition: translate .5s var(--r3fx-ease-quick); }
:where(html.lib-on:not(.no-motion):not(.r3fx-off)) [data-fx~="depth"]:not([data-fx-zoom="0"]) :is(img, video) { transition: scale .9s var(--r3fx-ease-settle); }
@media (hover: hover) and (pointer: fine) {
  html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="depth"]:hover { translate: 0 -6px; z-index: 2; }
  html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="depth"]:hover > .fx-edge { opacity: 1; }
  html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="depth"]:not([data-fx-zoom="0"]):hover :is(img, video) { scale: 1.04; }
}
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="depth"]:focus-within { translate: 0 -6px; z-index: 2; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="depth"]:focus-within > .fx-edge { opacity: 1; }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="depth"]:not([data-fx-zoom="0"]):focus-within :is(img, video) { scale: 1.04; }

/* 6. a quiet ambient light over one still */
@keyframes r3fx-amb-a { from { translate: -9% 6%; opacity: .45; } to { translate: 11% -7%; opacity: .95; } }
@keyframes r3fx-amb-b { from { translate: 12% -4%; opacity: .85; } to { translate: -8% 9%; opacity: .35; } }
[data-fx-amb="violet"] { --r3fx-amb-a: rgba(164, 143, 255, .34); --r3fx-amb-b: rgba(220, 188, 126, .16); }
[data-fx-amb="cream"] { --r3fx-amb-a: rgba(255, 244, 222, .34); --r3fx-amb-b: rgba(255, 224, 176, .18); }
[data-fx-amb="rose"] { --r3fx-amb-a: rgba(255, 190, 176, .30); --r3fx-amb-b: rgba(255, 224, 200, .16); }
[data-fx-amb="ice"] { --r3fx-amb-a: rgba(200, 228, 236, .30); --r3fx-amb-b: rgba(240, 250, 250, .16); }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-amb-host { isolation: isolate; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-amb { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--r3fx-ease-settle); }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-amb-live > .fx-amb { opacity: 1; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-amb i { position: absolute; display: block; width: 74%; height: 0; padding-bottom: 74%; border-radius: 50%; animation-play-state: paused; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-amb i:nth-child(1) { left: -8%; top: -14%; background: radial-gradient(closest-side, var(--r3fx-amb-a), transparent); animation-name: r3fx-amb-a; animation-duration: 17s; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-amb i:nth-child(2) { right: -12%; bottom: -22%; width: 64%; padding-bottom: 64%; background: radial-gradient(closest-side, var(--r3fx-amb-b), transparent); animation-name: r3fx-amb-b; animation-duration: 23s; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-amb-live > .fx-amb i { animation-play-state: running; }

/* 7. the two-state sticky chapter (a light G-01) */
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="chapter"].fx-live { height: calc(var(--r3fx-u) * (1 + var(--r3fx-run, 1.2))); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx~="chapter"].fx-live > .fx-pin { position: sticky; top: var(--r3fx-top, 0px); height: calc(var(--r3fx-u) - var(--r3fx-top, 0px)); box-sizing: border-box; align-content: center; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live .fx-stack { display: grid; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live .fx-stack > [data-fx-in] { grid-area: 1 / 1; min-width: 0; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live .fx-layers > .fx-l2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live [data-fx-in] { opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .25s var(--r3fx-ease-quick), translate .25s var(--r3fx-ease-quick); }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live [data-fx-in].fx-on { opacity: 1; translate: 0 0; pointer-events: auto;
  transition: opacity var(--r3fx-d-text) var(--r3fx-ease-quick) var(--r3fx-ga), translate var(--r3fx-d-text) var(--r3fx-ease-quick) var(--r3fx-ga); }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live [data-fx-in].fx-layer { translate: 0 0; transition: opacity .6s var(--r3fx-ease-settle); }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live [data-fx-in].fx-layer.fx-on { transition: opacity .8s var(--r3fx-ease-settle); }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live [data-fx-in]:focus-within { opacity: 1; translate: 0 0; transition: none; }
.fx-ticks { display: none; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-live > .fx-pin > .fx-ticks { display: flex; gap: 6px; position: absolute; z-index: 5; right: var(--r3fx-tick-r, clamp(16px, 4vw, 48px)); bottom: calc(var(--r3fx-dock, 0px) + clamp(16px, 3.4svh, 36px)); pointer-events: none; }
html.lib-on:not(.no-motion):not(.r3fx-off) .fx-ticks i { display: block; width: 30px; height: 2px; border-radius: 1px; background: currentColor; opacity: .3; scale: .53 1; transform-origin: 100% 50%; transition: scale .3s var(--r3fx-ease-quick), opacity .3s var(--r3fx-ease-quick); }
html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx-state="1"] .fx-ticks i:nth-child(1), html.lib-on:not(.no-motion):not(.r3fx-off) [data-fx-state="2"] .fx-ticks i:nth-child(2) { scale: 1 1; opacity: .85; }

/* instant reveal; print */
.fx-now, .fx-now .fx-wi, .fx-now > *, .fx-now :is(img, video) { animation: none !important; transition: none !important; }
@media print { .fx-w { clip-path: none; } html [data-fx] { opacity: 1 !important; translate: none !important; clip-path: none !important; } .fx-wi { translate: none !important; } }