/* ============================================================================= Curiosity Current — experience scene backdrop The animated space atmosphere from the CC web design: CC-tinted nebula orbs that gently breathe + a two-layer twinkling/panning starfield. Shared by the three reskinned interactive experience apps so each matches the new design. Drop

as the first child of ; it paints behind everything (z-index 0). Keep the app's own canvas/stage/svg transparent so the field shows through. All motion is gated on prefers-reduced-motion. (Self-contained: tokens defined here so the file needs no other stylesheet.) ========================================================================== */ :root { --cc-scene-bg: #0A1322; --cc-orb-1: rgba(91, 191, 192, 0.22); /* Aquamarine */ --cc-orb-2: rgba(34, 61, 100, 0.55); /* Aegean */ --cc-orb-3: rgba(251, 64, 165, 0.14); /* Coral */ --cc-orb-4: rgba(79, 168, 224, 0.18); /* azure */ --cc-orb-5: rgba(155, 140, 230, 0.16); /* violet */ --cc-orb-6: rgba(47, 110, 142, 0.30); /* teal-deep */ --cc-orb-7: rgba(34, 61, 100, 0.45); /* Aegean */ --cc-scene-overlay: rgba(8, 14, 24, 0.42); /* darkening veil over orbs */ } .cc-scene-bg { position: fixed; inset: 0; z-index: 0; background: var(--cc-scene-bg); overflow: hidden; pointer-events: none; } .cc-scene-bg::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(38% 40% at 18% 22%, var(--cc-orb-1) 0%, transparent 70%), radial-gradient(46% 48% at 78% 18%, var(--cc-orb-2) 0%, transparent 72%), radial-gradient(32% 34% at 65% 72%, var(--cc-orb-3) 0%, transparent 70%), radial-gradient(40% 42% at 30% 80%, var(--cc-orb-4) 0%, transparent 72%), radial-gradient(36% 38% at 88% 60%, var(--cc-orb-5) 0%, transparent 70%), radial-gradient(44% 46% at 50% 38%, var(--cc-orb-6) 0%, transparent 74%), radial-gradient(50% 52% at 8% 60%, var(--cc-orb-7) 0%, transparent 74%); filter: blur(60px); } .cc-scene-bg::after { content: ""; position: absolute; inset: 0; /* Top layer: a short solid-ground band at the very top so the scene's top edge is uniformly --cc-scene-bg (no nebula-orb tint there). This lets the host's full-bleed strip above an embedded scene match it exactly — no seam. Fades out by ~120px so the orbs read normally below. Then the darkening veil. */ background: linear-gradient(to bottom, var(--cc-scene-bg) 0, var(--cc-scene-bg) 8px, transparent 120px), var(--cc-scene-overlay); } .cc-starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .cc-starfield::before, .cc-starfield::after { content: ""; position: absolute; inset: -20%; } /* near layer — brighter, larger, faster; mixed sizes + brand-tinted stars */ .cc-starfield::before { background-image: radial-gradient(2.4px 2.4px at 40px 60px, rgba(255,255,255,.95), transparent), radial-gradient(1.3px 1.3px at 160px 120px, rgba(147,215,216,.9), transparent), radial-gradient(2px 2px at 300px 40px, rgba(255,255,255,.9), transparent), radial-gradient(1.2px 1.2px at 220px 240px, rgba(253,134,194,.7), transparent), radial-gradient(2.6px 2.6px at 90px 300px, rgba(143,201,238,.85), transparent), radial-gradient(1.1px 1.1px at 360px 200px, rgba(255,255,255,.7), transparent), radial-gradient(1.7px 1.7px at 130px 360px, rgba(195,184,242,.7), transparent), radial-gradient(1.4px 1.4px at 270px 320px, rgba(255,255,255,.8), transparent); background-size: 400px 400px; } /* far layer — dimmer, denser, slower (parallax depth); subtle tints */ .cc-starfield::after { background-image: radial-gradient(1.4px 1.4px at 30px 50px, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 120px 160px, rgba(147,215,216,.5), transparent), radial-gradient(1.6px 1.6px at 200px 90px, rgba(180,220,230,.55), transparent), radial-gradient(1px 1px at 250px 220px, rgba(195,184,242,.45), transparent), radial-gradient(1.3px 1.3px at 70px 210px, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 160px 30px, rgba(253,134,194,.4), transparent); background-size: 280px 280px; } @media (prefers-reduced-motion: no-preference) { .cc-scene-bg::before { animation: cc-orb-breathe 42s ease-in-out infinite alternate; } .cc-starfield::before { animation: cc-star-pan-a 150s linear infinite, cc-twinkle-a 7s ease-in-out infinite; } .cc-starfield::after { animation: cc-star-pan-b 240s linear infinite, cc-twinkle-b 9s ease-in-out infinite; } } @keyframes cc-orb-breathe { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.06); } } /* pan distances are exact multiples of each layer's tile so the loop is seamless */ @keyframes cc-star-pan-a { to { background-position: 400px -400px; } } @keyframes cc-star-pan-b { to { background-position: -280px 280px; } } @keyframes cc-twinkle-a { 0%, 100% { opacity: .55; } 50% { opacity: .95; } } @keyframes cc-twinkle-b { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }