/* ============================================================
   WannaBeee — coming soon
   One screen: logo, one line, nothing else. Loaded after style.css,
   which supplies the tokens, the reset and .wa-float.

   Contrast on the scrimmed photo (worst case, scrim .72 over the
   brightest part of the sky):
     #fff ................... 13.9:1  AAA
     rgba(255,255,255,.78) ... 8.1:1  AA/AAA
     orange #F68714 .......... 5.8:1  AA
   ============================================================ */

.cs{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(36px,7vh,72px) var(--pad) clamp(64px,9vh,88px);
  text-align:center; overflow:hidden;
}

/* the photo is the whole background — cover, then buried under a scrim */
.cs__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
}
/* One gradient, not two stacked — two put the scrim past .95 and the city
   turned into a grey wash. This darkens the centre enough for the lockup
   while the towers still read at the edges. */
.cs::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(115% 85% at 50% 44%, rgba(24,20,18,.60) 0%, rgba(24,20,18,.80) 100%);
}

.cs__in{ display:flex; flex-direction:column; align-items:center; max-width:min(100%,620px); }

/* ---------- the logo lockup ---------- */
.cs__mark{ width:clamp(72px,10vw,104px); height:auto; }
/* the wordmark is dark artwork — knocked out to white for the scrim.
   The tagline lockup is deliberately NOT here: knocked out it loses its
   baked-in rule and reads as a smudge under the wordmark. */
.cs__word{
  width:clamp(210px,28vw,300px); height:auto; margin-top:20px;
  filter:brightness(0) invert(1);
}

/* ---------- status ---------- */
.cs__soon{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(30px,5vh,44px);
  font-size:12.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange);
}
.cs__dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none; }
.cs__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--orange);
  animation:csPing 2.6s ease-out infinite;
}
@keyframes csPing{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(3.2); opacity:0 } }

.cs__line{
  margin-top:16px;
  font-family:var(--display); font-optical-sizing:auto; font-weight:500; font-style:italic;
  font-size:clamp(17px,2.2vw,23px); line-height:1.45; letter-spacing:-.01em;
  color:rgba(255,255,255,.9); text-wrap:balance;
}
/* on a phone the line breaks at the hyphen and leaves "mid-" dangling */
.cs__line .nb{ white-space:nowrap; }

/* ---------- three quiet links out ---------- */
.cs__soc{ display:flex; gap:12px; margin-top:clamp(28px,4.5vh,40px); }
.cs__soc a{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.86);
  transition:background-color .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease);
}
.cs__soc svg{ width:17px; height:17px; fill:currentColor; }
.cs__soc a:hover{ background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-2px); }

/* ---------- delivery signature ---------- */
.cs__sig{
  position:absolute; left:0; right:0; bottom:clamp(20px,3.5vh,32px);
  padding-inline:var(--pad);
  font-size:12.5px; color:rgba(255,255,255,.66);   /* 6.3:1 on the scrim */
}
/* nowrap: without it the signature orphans "Technology" onto its own line
   at some phone widths, splitting the linked company name in half. */
.cs__sig a{ color:var(--orange); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; white-space:nowrap; }
.cs__sig a:hover{ border-color:var(--orange); }

/* ---------- one load-in, staggered ---------- */
@keyframes csRise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.cs__in > *{ animation:csRise .8s var(--ease) both; }
.cs__in > *:nth-child(1){ animation-delay:.05s }
.cs__in > *:nth-child(2){ animation-delay:.14s }
.cs__in > *:nth-child(3){ animation-delay:.22s }
.cs__in > *:nth-child(4){ animation-delay:.32s }
.cs__in > *:nth-child(5){ animation-delay:.40s }
.cs__in > *:nth-child(6){ animation-delay:.48s }

/* ---------- mobile ---------- */
@media (max-width:767px){
  .cs__bg{ object-position:center 42%; }
  .cs__word{ width:min(72vw,270px); }
  .cs__tag{ width:min(58vw,210px); }
  .cs__soon{ letter-spacing:.18em; }
  .cs__line{ font-size:17px; }
  /* 72px of side padding keeps the signature centred AND clear of the
     WhatsApp float (52px wide, 16px from the right edge) — it wraps to two
     centred lines rather than running under the button. */
  .cs__sig{ bottom:16px; font-size:11px; padding-inline:72px; line-height:1.5; }
}

/* ---------- reduced motion ----------
   style.css flattens the durations; the delays have to go too, or a
   fill-mode:both element sits invisible for the length of its delay. */
@media (prefers-reduced-motion:reduce){
  .cs__in > *{ animation-delay:0s !important; }
  .cs__dot::after{ display:none; }
}