/* ============================================================ 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); /* var(--shadow-1), not a literal: the literal was theme-invariant BLACK, so light-theme cards carried a dark-theme shadow. The token is per-theme (light uses rgba(13,19,32,.06)). Predates the 2026-07-01 ramp. */ box-shadow:inset 0 1px 0 var(--hairline), var(--shadow-1); } .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 */ /* --dur-med is 220ms; .28s predates the duration tokens. */ .lift{transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) 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; /* DARK ink, not white. The coin fills are real per-asset BRAND colours and must not be retuned, so the ink adapts instead. White on them measured 1.59-5.19 (SOL 1.59, BNB 1.80, BTC 2.30) — seven of nine under 3:1. Dark ink wins on eight of the nine base fills, and on the gradient's LIGHTEST stop it wins on all nine, which is the stop that actually decides legibility because the initials sit under the top-left highlight. ADA is the one honest borderline: 3.68 on its base fill vs 3.70 for white — symmetric, so it does not argue against the change. It clears the 3:1 floor that applies here (the initials are decorative; the ticker is written in text immediately beside every badge). --ink-on-signal is an existing token. */ color:var(--ink-on-signal); 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 var(--btn-sheen-hover); } .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} }