/* ═══════════════════════════════════════════════════════════ SWS CANOPY, the living layer. Fixed ambient light, falling-leaf canvases, scroll-grown vines, page-wipe veil, cursor glow. Loaded on every page; canopy.js bootstraps everything and adds .fx-on to . Without JS (or with reduced motion) this file is inert. ═══════════════════════════════════════════════════════════ */ :root{ --cnp-sage:#8fd16a; --cnp-leaf:#4a7c35; --cnp-mint:#b8e986; --cnp-gold:#e3c468; --cnp-ink:#070b05; } /* Page-enter fade. The inline head snippet adds .fx-enter when arriving via an internal wipe, and removes it on a fail-safe timer. */ html.fx-fade body{transition:opacity .55s ease;} html.fx-enter body{opacity:0;} /* Kill legacy per-page leaf systems and vine rails once Canopy owns them */ html.fx-on #lc, html.fx-on #leaf-canvas, html.fx-on svg.vr{display:none!important;} /* ── Ambient light: dawn glow + drifting aurora blobs ── */ #fx-aura{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;} .fx-dawn{position:absolute;left:50%;top:-360px;width:1500px;height:720px;transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%,rgba(143,209,106,.16),rgba(143,209,106,.05) 45%,transparent 72%); filter:blur(36px);} .fx-blob{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform;} .fx-blob.b1{width:640px;height:640px;top:-12%;left:-10%;background:rgba(53,116,53,.34);} .fx-blob.b2{width:520px;height:520px;bottom:-14%;right:-8%;background:rgba(122,179,86,.20);} .fx-blob.b3{width:380px;height:380px;top:42%;left:62%;background:rgba(200,168,75,.10);} html.fx-gold .fx-dawn{background:radial-gradient(50% 50% at 50% 50%,rgba(227,196,104,.13),rgba(227,196,104,.04) 45%,transparent 72%);} html.fx-gold .fx-blob.b1{background:rgba(138,111,37,.30);} html.fx-gold .fx-blob.b2{background:rgba(200,168,75,.16);} /* ── Leaf canvases: far field behind content, near field above it ── */ #fx-bg,#fx-fg{position:fixed;inset:0;pointer-events:none;} #fx-bg{z-index:-1;} #fx-fg{z-index:9;} /* ── Growing vines, desktop only ── */ #fx-vine-l,#fx-vine-r{position:fixed;top:0;bottom:0;width:120px;pointer-events:none;z-index:6;overflow:visible;} #fx-vine-l{left:0;} #fx-vine-r{right:0;} @media(max-width:1279px){#fx-vine-l,#fx-vine-r{display:none;}} .vn-under{fill:none;stroke:rgba(16,30,12,.8);stroke-linecap:round;} .vn-stem{fill:none;stroke-linecap:round;} .vn-tendril{fill:none;stroke:rgba(143,209,106,.42);stroke-linecap:round;} html.fx-gold .vn-tendril{stroke:rgba(216,185,94,.42);} /* Inline icon alignment */ .sws-ic{display:inline-block;vertical-align:-.18em;flex-shrink:0;} /* ── Cursor light, fine pointers only ── */ #fx-glow{position:fixed;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%; pointer-events:none;z-index:8;mix-blend-mode:screen;opacity:0; background:radial-gradient(circle,rgba(143,209,106,.11),rgba(143,209,106,.04) 45%,transparent 70%);} html.fx-gold #fx-glow{background:radial-gradient(circle,rgba(227,196,104,.10),rgba(227,196,104,.035) 45%,transparent 70%);} /* ── Page-wipe veil ── */ #fx-veil{position:fixed;inset:0;z-index:999990;display:none;pointer-events:none; background:radial-gradient(130% 130% at 50% 50%,#16260f 0%,#0a1207 70%);} #fx-veil .vleaf{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;opacity:.9;} /* ── Hero headline line masks (index) ── */ .hl{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em;} .hl-in{display:block;will-change:transform;} /* ── Scroll cue (index hero) ── */ .fx-scrollcue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.5rem; font-family:'DM Mono',monospace;font-size:.52rem;letter-spacing:.26em;text-transform:uppercase; color:rgba(143,209,106,.55);pointer-events:none;} .fx-scrollcue .line{width:1px;height:34px;background:linear-gradient(to bottom,rgba(143,209,106,.75),transparent);transform-origin:top center;} /* ── Card glare + sane transitions while GSAP owns transforms ── */ html.fx-on .hb,html.fx-on .ftile{transition:border-color .35s,box-shadow .35s,background .35s,filter .35s;} html.fx-on .hero-grid{perspective:900px;} html.fx-on .hb{transform-style:preserve-3d;} html.fx-on .hb::after{content:'';position:absolute;inset:0;border-radius:10px;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s; background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 46%);} html.fx-on .hb:hover::after{opacity:1;} html.fx-on .hb:hover{box-shadow:0 22px 48px rgba(0,0,0,.55),0 0 26px rgba(122,179,86,.10);} html.fx-on .hb-gold:hover{box-shadow:0 22px 48px rgba(0,0,0,.5),0 0 30px rgba(200,168,75,.16);} /* ── Polish ── */ html.fx-on ::selection{background:rgba(143,209,106,.30);color:#f4f8ee;} html.fx-on :focus-visible{outline:2px solid rgba(143,209,106,.6);outline-offset:2px;} @media (prefers-reduced-motion:reduce){ #fx-bg,#fx-fg,#fx-glow,#fx-vine-l,#fx-vine-r,.fx-scrollcue .line{display:none!important;} html.fx-enter body{opacity:1;} }