/* =============================================================
   Nowambee — Coming soon (pre-release holding page)
   Dark, cinematic, lit-from-above. Built on tokens.css.
   Standalone from site.css: the teaser world from the marketing
   docs (deep-moss/charcoal atmosphere, moss-green highlights,
   slow calm motion). No imagery beyond the brand mark; the only
   UI hint is an abstract, heavily-blurred decoration.
   ============================================================= */

:root {
  --cs-bg:        #070A09;   /* near-black, faint green */
  --cs-bg-2:      #0B100D;
  --cs-cream:     #F2F1EA;   /* primary text on dark */
  --cs-muted:     rgba(242, 241, 234, 0.60);
  --cs-faint:     rgba(242, 241, 234, 0.38);
  --cs-line:      rgba(242, 241, 234, 0.12);
  --cs-line-soft: rgba(242, 241, 234, 0.07);
  --cs-surface:   rgba(255, 255, 255, 0.045);
  --cs-moss:      #5E9E79;   /* luminous moss for accents on near-black */
  --cs-moss-deep: #2E5742;
  --cs-glow:      rgba(94, 158, 121, 0.30);
}

* { box-sizing: border-box; }

/* No fixed height on body — it must grow with content. min-height:100svh
   (on body.cs) keeps it at least one viewport tall for vertical centring.
   tokens.css paints html with the light app canvas; override it so no white
   ever shows behind the dark page when scrolled past the first viewport. */
html { background: var(--cs-bg); min-height: 100%; }

body.cs {
  margin: 0;
  min-height: 100svh;
  background: var(--cs-bg);
  color: var(--cs-cream);
  font-family: var(--jungle-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Atmosphere: a single soft moss light from above-centre, settling into
   near-black. No orbs, no aurora — one calm light source. */
body.cs::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(94, 158, 121, 0.20) 0%, rgba(94, 158, 121, 0.05) 34%, rgba(7, 10, 9, 0) 62%),
    radial-gradient(120% 90% at 50% 116%, rgba(46, 87, 66, 0.16) 0%, rgba(7, 10, 9, 0) 60%),
    linear-gradient(180deg, var(--cs-bg-2) 0%, var(--cs-bg) 46%, #050706 100%);
}

/* Fine grain so the black never looks flat (very subtle). */
body.cs::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 3px 3px;
}

.cs-shell {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--jungle-space-lg);
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* ---------- Top bar ---------- */
.cs-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--jungle-space-lg) 0;
}
.cs-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cs-cream); text-decoration: none;
  font-weight: var(--jungle-weight-black);
  font-size: var(--jungle-size-title-lg);
  letter-spacing: -0.3px;
}
.cs-brand img { width: 26px; height: 26px; object-fit: contain; display: block; }
.cs-lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--jungle-radius-pill);
  border: 1px solid var(--cs-line);
  color: var(--cs-muted); text-decoration: none;
  font-weight: var(--jungle-weight-bold);
  font-size: var(--jungle-size-label-md);
  transition: border-color var(--jungle-dur-medium) ease, color var(--jungle-dur-medium) ease, background var(--jungle-dur-medium) ease;
}
.cs-lang .icon { font-size: 18px; }
.cs-lang:hover { color: var(--cs-cream); border-color: var(--cs-line); background: var(--cs-surface); }

/* ---------- Hero ---------- */
.cs-main {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(24px, 6vh, 72px) 0;
  gap: var(--jungle-space-lg);
}

.cs-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--jungle-size-label-sm);
  font-weight: var(--jungle-weight-black);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cs-faint);
}
.cs-eyebrow .cs-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cs-moss);
  box-shadow: 0 0 12px var(--cs-glow);
}

/* Brand mark with soft moss halo */
.cs-mark {
  position: relative;
  width: clamp(108px, 17vw, 168px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  margin: 4px 0;
}
.cs-mark::before {
  content: '';
  position: absolute; inset: -38%;
  background: radial-gradient(circle, var(--cs-glow) 0%, rgba(94,158,121,0.08) 42%, rgba(7,10,9,0) 70%);
  z-index: 0;
}
.cs-mark img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.5));
}

.cs-wordmark {
  font-size: clamp(44px, 8.4vw, 92px);
  font-weight: var(--jungle-weight-black);
  letter-spacing: -2.4px;
  line-height: 0.95;
  color: var(--cs-cream);
  margin: 0;
}

.cs-hook {
  font-size: clamp(19px, 2.6vw, 27px);
  font-weight: var(--jungle-weight-semibold);
  letter-spacing: -0.4px;
  line-height: 1.4;
  color: var(--cs-muted);
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.cs-hook b { color: var(--cs-cream); font-weight: var(--jungle-weight-bold); }

/* Status pill — "Coming soon" */
.cs-status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px;
  border-radius: var(--jungle-radius-pill);
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-cream);
  font-size: var(--jungle-size-label-md);
  font-weight: var(--jungle-weight-black);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.cs-status .cs-pulse {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cs-moss); flex: 0 0 auto;
}
.cs-status .cs-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--cs-moss);
  animation: cs-pulse 2.6s var(--jungle-ease-standard) infinite;
}
@keyframes cs-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- Store badges (coming-soon, non-interactive) ---------- */
.cs-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--jungle-space-sm);
  margin-top: 2px;
}
.cs-badge {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 56px; padding: 0 22px;
  border-radius: var(--jungle-radius-md);
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-cream);
  cursor: default;
}
.cs-badge__logo { width: 24px; height: 24px; fill: var(--cs-cream); flex: 0 0 auto; opacity: 0.92; }
.cs-badge__label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.cs-badge__label span { font-size: 10.5px; color: var(--cs-faint); font-weight: var(--jungle-weight-bold); letter-spacing: 0.3px; }
.cs-badge__label b { font-size: var(--jungle-size-title-md); font-weight: var(--jungle-weight-bold); color: var(--cs-cream); }

/* ---------- Follow for updates ---------- */
.cs-follow {
  display: inline-flex; align-items: center; gap: var(--jungle-space-md);
  margin-top: var(--jungle-space-xs);
  flex-wrap: wrap; justify-content: center;
}
.cs-follow__label {
  font-size: var(--jungle-size-label-sm);
  font-weight: var(--jungle-weight-black);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cs-faint);
}
.cs-social { display: inline-flex; align-items: center; gap: 10px; }
.cs-social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-cream);
  transition: transform var(--jungle-dur-fast) var(--jungle-ease-spring), border-color var(--jungle-dur-medium) ease, color var(--jungle-dur-medium) ease;
}
.cs-social a:hover { transform: translateY(-2px); color: var(--cs-cream); border-color: var(--cs-moss); }
.cs-social svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- Abstract UI hint (decorative, aria-hidden) ----------
   Heavily blurred, low-opacity silhouettes — suggests "an interface
   exists" without revealing any real layout. Pinned to the lower edge,
   fading into the background. */
.cs-hint {
  position: fixed; z-index: 1; left: 50%; bottom: -6vh;
  transform: translateX(-50%);
  width: min(720px, 92vw); height: 320px;
  pointer-events: none;
  filter: blur(34px) saturate(108%);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 100%, #000 0%, rgba(0,0,0,0.5) 48%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 100%, #000 0%, rgba(0,0,0,0.5) 48%, transparent 78%);
}
.cs-hint__card {
  position: absolute; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
}
.cs-hint__c1 { left: 8%;  bottom: 22px; width: 210px; height: 188px; }
.cs-hint__c2 { right: 8%; bottom: 54px; width: 210px; height: 150px; }
.cs-hint__ring {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%);
  width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--cs-moss), #C98B5E, var(--cs-moss));
}
.cs-hint__cap {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 22px;
  background: linear-gradient(180deg, #3D6E55, var(--cs-moss-deep));
  box-shadow: 0 0 60px rgba(46,87,66,0.6);
}

/* ---------- Footer ---------- */
.cs-foot {
  position: relative; z-index: 2;
  border-top: 1px solid var(--cs-line-soft);
  padding: var(--jungle-space-lg) 0 var(--jungle-space-xl);
  margin-top: var(--jungle-space-xl);
}
.cs-foot__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--jungle-space-sm);
}
.cs-foot__links { display: flex; flex-wrap: wrap; gap: var(--jungle-space-lg); }
.cs-foot__links a {
  color: var(--cs-faint); text-decoration: none;
  font-weight: var(--jungle-weight-semibold);
  font-size: var(--jungle-size-body-sm);
  transition: color var(--jungle-dur-medium) ease;
}
.cs-foot__links a:hover { color: var(--cs-cream); }
.cs-foot__copy { color: var(--cs-faint); font-size: var(--jungle-size-body-sm); }

/* ---------- Entrance (calm fade-up; base state is fully visible for
   no-JS / reduced motion) ---------- */
/* Entrance is enhancement only: the base state is the visible end-state, so
   content is never hidden if animations are frozen/disabled (print, capture,
   reduced-motion). We animate transform — not opacity — to avoid any blank
   frame. */
@media (prefers-reduced-motion: no-preference) {
  .cs-rise { animation: cs-rise 0.8s var(--jungle-ease-standard) both; }
  .cs-rise-1 { animation-delay: 0.04s; }
  .cs-rise-2 { animation-delay: 0.12s; }
  .cs-rise-3 { animation-delay: 0.20s; }
  .cs-rise-4 { animation-delay: 0.28s; }
  .cs-rise-5 { animation-delay: 0.36s; }
  .cs-rise-6 { animation-delay: 0.44s; }
  .cs-rise-7 { animation-delay: 0.52s; }
  .cs-mark img { animation: cs-breathe 7s ease-in-out infinite; }
  @keyframes cs-rise {
    from { transform: translateY(16px); }
    to   { transform: translateY(0); }
  }
  @keyframes cs-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .cs-shell { padding: 0 var(--jungle-space-md); }
  .cs-top { padding: var(--jungle-space-md) 0; }
  .cs-main { gap: var(--jungle-space-md); }
  .cs-badges { width: 100%; }
  .cs-badge { flex: 1 1 auto; justify-content: center; }
  .cs-follow { flex-direction: column; gap: var(--jungle-space-sm); }
  .cs-foot__row { flex-direction: column; align-items: flex-start; gap: var(--jungle-space-md); }
  .cs-hint { height: 240px; opacity: 0.4; }
}