/* =====================================================================
   ATMOSPHERE STREAM PACK — shared sky design system (Galaxy / dark)
   Night sky · soft clouds · twinkling stars · shooting stars · sparkles
   Reskin: change the :root tokens only.
   ===================================================================== */
:root{
  --sky-top:#1d1d24;
  --sky-bottom:#131318;
  --cloud:#26262e;        /* filled cloud */
  --cloud-hi:#2e2e37;     /* nearer filled cloud (slightly lighter) */
  --cloud-line:#8b8b95;   /* outline cloud stroke */
  --ink:#f2f2f5;          /* text */
  --mute:rgba(242,242,245,.62);
  --chip:#191920;         /* alert/panel bar fill */
  --chip-icon:#101015;    /* icon square fill */
  --glint:rgba(255,255,255,.85);
  --font:'Poppins',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:var(--font);color:var(--ink)}

/* ---------- sky background (add class="sky" to a full-size div) ---------- */
.sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}

/* ---------- filled cloud (svg use) ---------- */
.cloud{position:absolute;pointer-events:none}
.cloud svg{display:block;width:100%;height:100%}
.cloud .fill{fill:var(--cloud)}
.cloud.near .fill{fill:var(--cloud-hi)}
.cloud.line .fill{fill:none;stroke:var(--cloud-line);stroke-width:2.5;stroke-linejoin:round}

/* drifting */
@keyframes drift-l{from{transform:translateX(0)}50%{transform:translateX(-26px)}to{transform:translateX(0)}}
@keyframes drift-r{from{transform:translateX(0)}50%{transform:translateX(26px)}to{transform:translateX(0)}}
.cloud.d1{animation:drift-l 14s ease-in-out infinite}
.cloud.d2{animation:drift-r 18s ease-in-out infinite}
.cloud.d3{animation:drift-l 22s ease-in-out infinite}

/* ---------- stars ---------- */
.star{position:absolute;border-radius:50%;background:#fff;opacity:.7;
  animation:twinkle var(--tw,3s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.85}}

/* 4-point sparkle */
.sparkle{position:absolute;pointer-events:none;animation:spark var(--tw,4s) ease-in-out infinite}
.sparkle svg{display:block;width:100%;height:100%;fill:#fff}
@keyframes spark{0%,100%{transform:scale(.55);opacity:.25}50%{transform:scale(1);opacity:.95}}

/* ---------- shooting star ---------- */
.shoot{position:absolute;width:120px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));
  transform:rotate(-35deg);opacity:0;animation:shoot var(--dur,7s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes shoot{
  0%,88%{opacity:0;translate:0 0}
  90%{opacity:.95}
  100%{opacity:0;translate:-340px 238px}
}

/* ---------- ufo: glides across every so often, gentle bob ---------- */
.ufo{position:absolute;opacity:0;pointer-events:none;
  animation:ufoA var(--dur,16s) linear infinite;animation-delay:var(--delay,0s)}
.ufo.back{animation-name:ufoB}
.ufo svg{display:block;width:100%;height:100%}
.ufo .hull{fill:var(--cloud-hi);stroke:var(--cloud-line);stroke-width:2.5}
.ufo .dome{fill:var(--cloud);stroke:var(--cloud-line);stroke-width:2.5}
.ufo .lite{fill:#fff;animation:twinkle 1.1s ease-in-out infinite}
.ufo .beam{fill:url(#beamg)}
/* 16s loop · fly L→R at 5-8s · pause 5s · fly R→L at 13-16s (use .back) */
@keyframes ufoA{
  0%,31.2%{opacity:0;translate:0 0;rotate:-6deg}
  32.5%{opacity:1}
  36.3%{translate:calc(var(--dx,900px)*.27) -12px}
  40.6%{translate:calc(var(--dx,900px)*.5) 8px;rotate:-2deg}
  45%{translate:calc(var(--dx,900px)*.73) -10px}
  48.7%{opacity:1}
  50%,100%{opacity:0;translate:var(--dx,900px) -4px;rotate:-8deg}
}
@keyframes ufoB{
  0%,81.2%{opacity:0;translate:0 0;rotate:6deg}
  82.5%{opacity:1}
  86.3%{translate:calc(var(--dx,900px)*-.27) -12px}
  90.6%{translate:calc(var(--dx,900px)*-.5) 8px;rotate:2deg}
  95%{translate:calc(var(--dx,900px)*-.73) -10px}
  98.7%{opacity:1}
  100%{opacity:0;translate:calc(var(--dx,900px)*-1) -4px;rotate:8deg}
}

/* ---------- text shimmer: light sweeps across the letters ---------- */
.shimmer{
  --sb:var(--ink);                                  /* base letter color */
  background:linear-gradient(100deg,var(--sb) 42%,#ffffff 50%,var(--sb) 58%) 0 0/220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.22));
  animation:shimmer var(--shim,6s) linear infinite;
}
.shimmer.dim{--sb:var(--mute);filter:drop-shadow(0 0 10px rgba(255,255,255,.12))}
@keyframes shimmer{to{background-position:-220% 0}}

/* ---------- jiggle letters: each character bobs in a wave ---------- */
.jl{display:inline-block;animation:jig var(--jd,2.6s) ease-in-out infinite}
.jl.shimmer{animation:jig var(--jd,2.6s) ease-in-out infinite,
            shimmer var(--shim,6s) linear infinite}
@keyframes jig{0%,100%{translate:0 0}50%{translate:0 calc(var(--amp,6px)*-1)}}

/* ---------- letter-spaced text helpers ---------- */
.t-small{font-weight:300;font-size:20px;letter-spacing:.55em;color:var(--mute);text-transform:lowercase}
.t-big{font-weight:500;font-size:64px;letter-spacing:.35em;text-transform:uppercase;
  text-indent:.35em;text-align:center}