cinny/src/app/features/lotus/backgrounds/stars.ts

import { ChatBgVariants } from './types';

// stars — a deep-space starfield with subtle depth.
//
// Concept: three parallax layers of stars at different tile sizes and offsets
// (so the repeat never lines up and reads as a genuine random field), lifted
// onto a faint deep-blue->violet nebula wash for depth, and finished with a
// gentle center vignette that keeps the reading column the calmest area of the
// canvas. Every layer is a stacked radial-gradient — pure CSS, no assets.
//
// Layer stacking order (topmost first, as CSS paints image #1 on top):
//   1. bright near stars   (crisp, sparse, largest tile)
//   2. mid stars           (dimmer, medium tile)
//   3. faint blue far stars (haze, smallest tile — most repeats, least visible)
//   4. calming center vignette
//   5. nebula wash (deep blue -> violet)
// The three star tiles use coprime-ish sizes (137/191/233 dark) so their least
// common repeat is enormous and no seam is perceivable.

export const stars: ChatBgVariants = {
  // Dark: bright/dim white + faint blue stars on a near-black cosmos, with a
  // deep-blue->violet nebula and a soft vignette that darkens the calm center.
  dark: {
    backgroundColor: 'oklch(0.16 0.03 275)',
    backgroundImage: [
      // 1. bright near stars — crisp cool-white, sparse
      'radial-gradient(circle at center, oklch(0.98 0.01 260 / 0.85) 0.6px, transparent 1.4px)',
      // 2. mid stars — softer, more of them
      'radial-gradient(circle at center, oklch(0.92 0.02 265 / 0.55) 0.6px, transparent 1.3px)',
      // 3. faint blue far dust — the parallax haze
      'radial-gradient(circle at center, oklch(0.80 0.06 255 / 0.30) 0.5px, transparent 1.1px)',
      // 4. center vignette — keeps the reading column calmest
      'radial-gradient(ellipse 120% 90% at 50% 42%, transparent 42%, oklch(0.10 0.03 270 / 0.55) 100%)',
      // 5. nebula wash — deep blue -> violet drift
      'radial-gradient(ellipse 140% 120% at 78% 12%, oklch(0.25 0.08 280 / 0.55) 0%, transparent 55%)',
      'radial-gradient(ellipse 130% 110% at 18% 92%, oklch(0.20 0.06 250 / 0.50) 0%, transparent 58%)',
    ].join(','),
    backgroundSize: [
      '137px 137px', // near stars
      '191px 191px', // mid stars
      '233px 233px', // far dust
      '100% 100%', // vignette
      '100% 100%', // nebula A
      '100% 100%', // nebula B
    ].join(','),
    backgroundPosition: [
      '0 0', // near
      '61px 43px', // mid  (offset breaks alignment)
      '113px 97px', // far  (offset again)
      '0 0', // vignette
      '0 0', // nebula A
      '0 0', // nebula B
    ].join(','),
  },

  // Light: an airy pre-dawn sky. No literal white stars on white — instead very
  // soft pale sparkles paired with the faintest cool-grey speckles, floated on a
  // gentle cool gradient. Reads as elegant atmosphere, never as noise over text.
  light: {
    backgroundColor: 'oklch(0.965 0.008 255)',
    backgroundImage: [
      // 1. pale warm pre-dawn sparkles — a hair brighter than the sky
      'radial-gradient(circle at center, oklch(0.995 0.015 90 / 0.55) 0.6px, transparent 1.4px)',
      // 2. tiny cool speckles — the merest hint of darkness for texture/contrast
      'radial-gradient(circle at center, oklch(0.62 0.05 260 / 0.16) 0.5px, transparent 1.2px)',
      // 3. faint far dust — very soft, most-repeated layer
      'radial-gradient(circle at center, oklch(0.70 0.04 255 / 0.12) 0.5px, transparent 1.1px)',
      // 4. center vignette — brightens the calm reading center slightly
      'radial-gradient(ellipse 120% 90% at 50% 44%, oklch(1 0 0 / 0.45) 30%, transparent 100%)',
      // 5. pre-dawn wash — cool blue high, warm blush low
      'radial-gradient(ellipse 150% 120% at 80% 8%, oklch(0.90 0.05 255 / 0.60) 0%, transparent 60%)',
      'radial-gradient(ellipse 140% 120% at 15% 95%, oklch(0.93 0.04 40 / 0.45) 0%, transparent 62%)',
    ].join(','),
    backgroundSize: [
      '149px 149px', // sparkles
      '199px 199px', // speckles
      '251px 251px', // far dust
      '100% 100%', // vignette
      '100% 100%', // wash A
      '100% 100%', // wash B
    ].join(','),
    backgroundPosition: [
      '0 0', // sparkles
      '71px 53px', // speckles
      '127px 109px', // far dust
      '0 0', // vignette
      '0 0', // wash A
      '0 0', // wash B
    ].join(','),
  },
};