/*
  Title:      bashCRM website styles (coming soon page)
  File:       web/site/assets/bw_site.css
  Version:    0.1.0
  Date:       2026-10-12
  Sections:   tokens, base, drifting stars, landscape, centre block, footer, motion
  Depends on: Google Fonts (Cormorant Garamond, Figtree), loaded in the page
  Used by:    web/site/index.html
  Purpose:    The China Gold deep-space look: near-black night sky, gold foil name, a few stars that drift and
              twinkle (CSS only), the planet horizon low on the page.
  Revisions:  0.1.0 2026-10-12 Claude Code: first version (copied from Zen portal index.html/zh_hub.* and changed for bashCRM)
*/

:root{
  color-scheme: dark;
  --ivory:#FBF8F2; --on-dark:#F4EEE4; --on-dark-2:#CFC6B8; --muted:#9C9284;
  --black:#12100E; --gold-lt:#E9CF8F;
  --foil:linear-gradient(115deg,#8C6A2F 0%,#E9CF8F 42%,#A57C35 70%,#D9B872 100%);
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.25,.6,.25,1);
}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0; min-height:100svh; display:flex; flex-direction:column; color:var(--on-dark); font-family:var(--body);
  font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
  background:radial-gradient(ellipse 85% 75% at 50% 52%,#2A2219 0%,#17130F 55%,#0B0A08 100%) fixed, var(--black)}
.foil-text{background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- drifting stars ---------- */
.sky{position:fixed; inset:0; overflow:hidden; pointer-events:none}
.s{position:absolute; left:var(--x); top:var(--y); width:var(--d,3px); height:var(--d,3px); border-radius:50%;
  background:#FFF4D2; box-shadow:0 0 8px 2px rgba(233,207,143,.45); opacity:.5;
  animation:drift var(--t,18s) ease-in-out infinite alternate, twinkle var(--k,5s) ease-in-out infinite}
.s1{--x:8%;--y:14%;--d:3px;--t:19s;--k:5s}   .s2{--x:19%;--y:36%;--d:2px;--t:23s;--k:6s}
.s3{--x:27%;--y:9%;--d:2px;--t:17s;--k:4s}   .s4{--x:36%;--y:27%;--d:3px;--t:26s;--k:7s}
.s5{--x:47%;--y:7%;--d:2px;--t:21s;--k:5s}   .s6{--x:58%;--y:22%;--d:2px;--t:18s;--k:6s}
.s7{--x:66%;--y:11%;--d:3px;--t:24s;--k:4s}  .s8{--x:76%;--y:31%;--d:2px;--t:20s;--k:7s}
.s9{--x:86%;--y:15%;--d:3px;--t:22s;--k:5s}  .s10{--x:93%;--y:38%;--d:2px;--t:25s;--k:6s}
.s11{--x:12%;--y:56%;--d:2px;--t:27s;--k:4s} .s12{--x:88%;--y:58%;--d:2px;--t:19s;--k:5s}
.s13{--x:4%;--y:34%;--d:2px;--t:23s;--k:7s}  .s14{--x:71%;--y:47%;--d:2px;--t:21s;--k:6s}
.s15{--x:30%;--y:50%;--d:2px;--t:28s;--k:5s} .s16{--x:52%;--y:40%;--d:2px;--t:24s;--k:4s}
@keyframes drift{from{transform:translate(0,0)} to{transform:translate(14px,-10px)}}
@keyframes twinkle{0%,100%{opacity:.25} 50%{opacity:.85}}

/* ---------- landscape ---------- */
.land{position:fixed; left:0; right:0; bottom:0; height:min(46vh,420px); pointer-events:none; overflow:hidden; opacity:.6}
.land img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%}

/* ---------- centre block ---------- */
.page{position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 24px 140px}
.emblem{width:96px; height:96px; display:block; margin-bottom:14px; filter:drop-shadow(0 0 18px rgba(233,207,143,.35))}
.name{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(64px,13vw,128px); line-height:1.05; letter-spacing:.03em}
.line{margin:10px 0 0; max-width:42ch; font-size:clamp(17px,2.2vw,21px); color:var(--on-dark-2)}
.soon{margin:30px 0 0; font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-lt);
  padding:9px 8px 9px 20px; border-top:1px solid rgba(233,207,143,.35); border-bottom:1px solid rgba(233,207,143,.35)}

/* ---------- footer ---------- */
.foot{position:relative; z-index:1; text-align:center; padding:8px 16px max(16px, env(safe-area-inset-bottom)); font-size:13px; color:var(--on-dark-2);
  text-shadow:0 0 10px var(--black), 0 0 18px var(--black)}

@media (max-width:600px){
  .emblem{width:72px; height:72px}
  .page{padding-bottom:110px}
  .land{height:min(34vh,300px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}