/* ══════════════════════════════════════════════════════════════════════ Sweet Scales — shared cinematic atmosphere (fi-atmos) Ported verbatim from the marketing homepage (C:\SweetScalesWeb\site\ index.html, background stack lines ~44-77) so the feature pages sit in the SAME world as sweetscales.com/. Layers (fixed, behind all content, z-index 0..2): .fi-bgposter static poster base (always painted; sole bg on lite) .fi-bgfilm x2 crossfading hero video (opt-in: ) .fi-bgscrim darken+cool gradient so bone-white type always reads .fi-atmos fog blobs + spore canvas + canopy silhouette + grain + vignette Usage: link this file, load sweet-atmos.js, and set on : data-fi-atmos="video" -> full poster+video+atmos (Voice, Live) data-fi-atmos="still" -> poster+atmos, NO video (Map, Skin lab chrome) sweet-atmos.js injects the DOM; pages only need the two attributes. Palette tokens come from _shared.css (already repointed to FI green/red). ══════════════════════════════════════════════════════════════════════ */ .fi-bgposter{position:fixed;inset:0;z-index:-3;opacity:.9;pointer-events:none;transition:opacity .5s linear; /* Stage 6: the donor hero footage was not carried into this fork — the poster is a plain tone (the atmos gradients paint over it). */ background:#070c06} .fi-bgposter.hide{opacity:0} .fi-bgfilm{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:0;pointer-events:none; transition:opacity .55s linear;transform:translateZ(0);backface-visibility:hidden;will-change:opacity} .fi-bgfilm.on{opacity:.9} html.fi-lite .fi-bgfilm,html.fi-lite #fi-spores,html.fi-lite .fi-atmos .fi-fog,html.fi-lite .fi-atmos .fi-grain{display:none!important} .fi-bgscrim{position:fixed;inset:0;z-index:-2;pointer-events:none;background: linear-gradient(180deg, rgba(3,7,5,.9) 0%, rgba(3,7,5,.62) 26%, rgba(4,8,6,.52) 52%, rgba(4,9,6,.68) 78%, rgba(3,7,4,.97) 100%), radial-gradient(120% 80% at 50% 42%, transparent 34%, rgba(4,10,6,.56) 94%), linear-gradient(0deg, rgba(36,51,15,.18), rgba(36,51,15,.18))} .fi-atmos{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background: radial-gradient(120% 90% at 50% 118%, rgba(224,180,92,.13), transparent 52%), radial-gradient(80% 60% at 82% -10%, rgba(143,180,58,.07), transparent 60%)} .fi-atmos .fi-fog{position:absolute;width:58vw;height:58vw;border-radius:50%;filter:blur(44px);opacity:.26} .fi-atmos .fi-f1{left:-18vw;top:16vh;background:radial-gradient(circle,rgba(36,51,15,.5),transparent 64%);animation:fifog1 32s cubic-bezier(.22,.61,.36,1) infinite alternate} .fi-atmos .fi-f2{right:-20vw;bottom:-12vh;background:radial-gradient(circle,rgba(38,120,72,.28),transparent 62%);animation:fifog2 40s cubic-bezier(.22,.61,.36,1) infinite alternate} @keyframes fifog1{from{transform:translate(-4%,-3%) scale(1)}to{transform:translate(6%,4%) scale(1.18)}} @keyframes fifog2{from{transform:translate(4%,3%) scale(1.1)}to{transform:translate(-6%,-5%) scale(1)}} #fi-spores{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(0)} .fi-atmos .fi-canopy{position:absolute;left:0;right:0;bottom:0;height:38vh; background:linear-gradient(180deg,transparent,rgba(2,5,3,.6) 58%,#030604 97%)} .fi-atmos .fi-canopy svg{position:absolute;bottom:-2px;width:100%;height:100%} .fi-atmos .fi-grain{position:absolute;inset:0;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .fi-atmos .fi-vig{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 30%,transparent 52%,rgba(0,0,0,.55) 86%,rgba(0,0,0,.9))} /* still mode: keep poster + atmosphere, drop the video layer entirely */ body[data-fi-atmos="still"] .fi-bgfilm{display:none!important} /* the atmosphere must never eat pointer events or scroll on interactive pages */ .fi-bgposter,.fi-bgfilm,.fi-bgscrim,.fi-atmos,.fi-atmos *{pointer-events:none} @media (prefers-reduced-motion:reduce){ .fi-atmos .fi-fog{animation:none!important} }