/* ============================================================ CoopLink "rainforest" atmosphere — ported from the single-page design into the multi-page site. All fixed decorative overlays (injected into by atmosphere.js), so they never disturb page content. Palette hardcoded to the CoopLink brand. ============================================================ */ /* dappled light — very subtle drifting light pools over everything */ #rf-dapple{position:fixed;inset:0;pointer-events:none;z-index:30; background: radial-gradient(340px 220px at 18% 22%, rgba(18,86,76,0.05), transparent 70%), radial-gradient(420px 280px at 72% 12%, rgba(18,86,76,0.04), transparent 70%), radial-gradient(300px 220px at 55% 65%, rgba(184,134,58,0.035), transparent 70%), radial-gradient(380px 260px at 88% 78%, rgba(18,86,76,0.045), transparent 70%); animation:dapple 46s ease-in-out infinite alternate} @keyframes dapple{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-28px,14px,0) scale(1.04)}100%{transform:translate3d(22px,-18px,0) scale(1.01)}} /* scroll-drawn vine down the left margin */ #rf-vine{position:fixed;left:0;top:0;height:100vh;width:86px;pointer-events:none;z-index:40} #rf-vine svg{width:100%;height:100%;overflow:visible} #rf-vine .stem{fill:none;stroke:#12564C;stroke-width:3.2;stroke-linecap:round} #rf-vine .stem2{fill:none;stroke:#0E4038;stroke-width:1.6;stroke-linecap:round;opacity:.55} #rf-vine .leaf{fill:#12564C;opacity:0;transform:scale(0) rotate(-24deg);transition:transform .8s cubic-bezier(.2,1.35,.35,1),opacity .5s ease} #rf-vine .leaf.alt{fill:#1a6b5d} #rf-vine .leaf.on{opacity:.95;transform:scale(1) rotate(0)} #rf-vine .blossom{fill:#F1E7D6;stroke:#C9B78E;stroke-width:.5;opacity:0;transform:scale(0);transition:transform .7s cubic-bezier(.2,1.4,.4,1),opacity .5s ease} #rf-vine .blossom.on{opacity:.95;transform:scale(1)} #rf-vine .cherry{fill:#6f8f3f;opacity:0;transform:scale(0);transition:transform .7s cubic-bezier(.2,1.4,.4,1),opacity .5s ease,fill 1.6s ease} #rf-vine .cherry.on{opacity:1;transform:scale(1)} #rf-vine .cherry.ripe{fill:#A24E32} #rf-vine .sway{animation:vsway 9s ease-in-out infinite;transform-origin:30px 1000px} @keyframes vsway{0%,100%{transform:rotate(0)}50%{transform:rotate(.7deg)}} /* breathing foliage in the bottom-right corner (parallax on cursor) */ #rf-flora{position:fixed;right:0;bottom:0;width:min(32vw,400px);height:min(32vw,400px);pointer-events:none;z-index:40} #rf-flora svg{position:absolute;right:0;bottom:0;width:100%;height:100%;overflow:visible} .rf-layer{transform-origin:100% 100%} .rf-layer.l1{animation:breath 11s ease-in-out infinite} .rf-layer.l2{animation:breath 14s ease-in-out infinite reverse} .rf-layer.l3{animation:breath 17s ease-in-out infinite} @keyframes breath{0%,100%{rotate:0deg}50%{rotate:1.3deg}} /* drifting spores */ .rf-spore{position:fixed;bottom:-12px;border-radius:50%;background:#B8863A;opacity:0;animation:rise linear infinite;z-index:35;pointer-events:none} @keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.32}85%{opacity:.22}100%{transform:translate3d(var(--dx,30px),-108vh,0);opacity:0}} /* cursor sprouts */ #rf-sprouts{position:fixed;inset:0;pointer-events:none;z-index:45} .rf-sprout{position:absolute;width:20px;height:24px;opacity:0} .rf-sprout svg{width:100%;height:100%;overflow:visible} .rf-sprout.go{animation:sproutUp 1.9s cubic-bezier(.2,1,.4,1) forwards} @keyframes sproutUp{0%{opacity:0;transform:translateY(6px) scale(.1) rotate(-22deg)}22%{opacity:.85;transform:translateY(0) scale(1.06) rotate(3deg)}38%{transform:translateY(0) scale(1) rotate(0)}70%{opacity:.7}100%{opacity:0;transform:translateY(-10px) scale(.96)}} /* fireflies inside dark sections */ .rf-fly{position:absolute;width:5px;height:5px;border-radius:50%;background:#E8C97A;box-shadow:0 0 10px 3px rgba(232,201,122,0.55);animation:fly ease-in-out infinite alternate,fblink 3.4s ease-in-out infinite;pointer-events:none;z-index:1} @keyframes fly{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(46px,-30px,0)}66%{transform:translate3d(-24px,-58px,0)}100%{transform:translate3d(30px,-12px,0)}} @keyframes fblink{0%,100%{opacity:.08}18%{opacity:.95}42%{opacity:.3}60%{opacity:.85}} /* keep phones clean: the side vine + corner foliage overlap centered content on narrow screens, so hide them there (dapple + spores stay). */ @media (max-width:760px){#rf-vine,#rf-flora{display:none}} /* dusk canopy (top) + ground scene (bottom) — frames dark #2B1B12 sections. The section needs position:relative;overflow:hidden and its content wrapper position:relative;z-index:1 so text sits above these decorations. */ .canopy-top{position:absolute;top:-2px;left:0;width:100%;height:clamp(64px,8vw,104px);pointer-events:none;line-height:0;z-index:0} .canopy-top svg{display:block;width:100%;height:100%} .scene{position:absolute;left:0;right:0;bottom:-2px;pointer-events:none;line-height:0;z-index:0} .scene svg{display:block;width:100%;height:clamp(110px,14vw,200px)}