/* ============================================================ CryptoSignals.bot — atmosphere.css (shared beautification layer) Reusable depth / elevation / motion primitives built ENTIRELY on tokens.css (atmosphere layer). Additive and guarded: every effect is decorative, pointer-events:none where it overlays, and degrades to the flat token surfaces if unsupported. Honors prefers-reduced-motion. Load order: tokens.css -> fonts.css -> main.css -> atmosphere.css -> .css (surface sheets may reference these classes/vars). ============================================================ */ /* ---------- 1. Ambient page backdrop ---------------------------------- Layered radial meshes behind everything + a faint film grain. Attaches to a full-bleed fixed layer so it never affects layout or scroll cost. */ .atmos{position:relative;isolation:isolate} .atmos::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(720px 520px at 82% -8%, var(--ambient-1), transparent 60%), radial-gradient(640px 600px at -6% 32%, var(--ambient-2), transparent 58%), radial-gradient(900px 700px at 50% 116%, var(--ambient-3), transparent 60%); } /* film grain — single inline SVG noise, tiled, ultra-low opacity. Pure decoration; pointer-events none; hidden from a11y tree. */ .atmos::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; opacity:var(--grain-opacity); 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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } /* ---------- 2. Elevated surface -------------------------------------- The card treatment that replaces flat panels: a subtle top-lit gradient over the panel color, a hairline inner highlight, and depth shadow. Apply alongside an existing background (the gradient sits on top). */ .elevated{ position:relative; background:var(--surface-grad), var(--panel-2); border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--hairline), 0 1px 2px rgba(0,0,0,.18); } .elevated.is-glass{ background:var(--surface-grad), color-mix(in srgb, var(--panel-2) 72%, transparent); backdrop-filter:blur(10px); } /* hover lift + accent glow — opt in with .lift */ .lift{transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out)} .lift:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:inset 0 1px 0 var(--hairline-2), var(--glow-accent); } /* accent ring for featured / focused elements */ .ring-accent{box-shadow:inset 0 1px 0 var(--hairline-2), 0 0 0 1px var(--accent-2), var(--glow-accent)} /* ---------- 3. Coin badge ------------------------------------------- Colored, softly glowing asset avatar. Set --c to a coin token. BT */ .coinb{ --c:var(--coin-default); display:grid;place-items:center;flex:none; width:34px;height:34px;border-radius:50%; font-family:var(--fs-mono);font-weight:700;font-size:11px;letter-spacing:-.02em; color:var(--on-accent); background:radial-gradient(120% 120% at 30% 22%, color-mix(in srgb,var(--c) 88%,#fff 18%), var(--c) 70%); box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent), 0 6px 18px -6px color-mix(in srgb,var(--c) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.28); } .coinb.sm{width:24px;height:24px;font-size:8.5px} .coinb.lg{width:44px;height:44px;font-size:14px} /* ---------- 4. Gradient text ----------------------------------------- For a single hero keyword. Uses accent->up->signal sweep; falls back to solid --text where background-clip is unsupported. */ .text-grad{ background:linear-gradient(100deg,var(--text) 0%, color-mix(in srgb,var(--accent) 80%,var(--text)) 42%, var(--signal) 96%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .text-grad{color:var(--text);-webkit-text-fill-color:currentColor} } /* ---------- 5. Motion ------------------------------------------------ Orchestrated load-in. Parent .stagger animates direct children up with an increasing delay. Pairs with the existing JS .reveal for scroll. */ @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes haze{0%,100%{opacity:.85;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(0,-14px,0)}} @keyframes shimmer{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}} @keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 var(--up-2)}50%{box-shadow:0 0 0 5px transparent}} .stagger>*{animation:rise .7s var(--ease-out) both} .stagger>*:nth-child(1){animation-delay:.04s} .stagger>*:nth-child(2){animation-delay:.12s} .stagger>*:nth-child(3){animation-delay:.20s} .stagger>*:nth-child(4){animation-delay:.28s} .stagger>*:nth-child(5){animation-delay:.36s} .stagger>*:nth-child(6){animation-delay:.44s} /* live shimmer sweep — wrap content; .shimmer::after sweeps a sheen */ .shimmer{position:relative;overflow:hidden} .shimmer::after{ content:"";position:absolute;top:0;bottom:0;width:38%; background:linear-gradient(90deg,transparent,var(--sheen),transparent); transform:translateX(-120%);animation:shimmer 4.5s var(--ease) infinite; pointer-events:none; } /* pulsing live dot — apply to a small round element */ .live-dot{animation:pulse-dot 2.4s var(--ease) infinite} /* breathing ambient blob — apply to a decorative absolutely-positioned div */ .haze{animation:haze 9s var(--ease) infinite} @media (prefers-reduced-motion:reduce){ .stagger>*,.shimmer::after,.live-dot,.haze{animation:none!important} .stagger>*{opacity:1;transform:none} }