/* Breathe: Box Breathing — one-page site.
   Palette and type lifted from the app's Theme.swift / SkyPalette.swift:
   hairline weights on a dark ground read as light, not ink. */

:root{
  --bg:#0E1626;
  --bright:#9EEDFF;
  --mid:#4785FF;
  --track:#293857;
  --star:#DFEDFF;
  --dim:#8CA3C7;
  --hairline:rgba(223,237,255,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--star);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background 1.2s linear;
}
::selection{background:var(--mid);color:#fff}
a:focus-visible{outline:1px solid var(--bright);outline-offset:8px}

canvas#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
canvas#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wordmark{
  position:fixed;top:30px;left:38px;z-index:40;
  font-size:11px;font-weight:300;letter-spacing:.55em;color:var(--star);opacity:.75;
}

/* ---- sections ---- */
section{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16vh 8vw;text-align:center;
}
.block{max-width:46rem;margin:0 auto}

/* ---- hero ---- */
#hero{min-height:100svh}
.pattern{
  font-size:13px;font-weight:300;letter-spacing:.6em;padding-left:.6em;
  color:var(--dim);margin-bottom:2.6rem;
}
#phaseLabel{
  font-size:clamp(30px,6vw,56px);font-weight:100;
  letter-spacing:.34em;padding-left:.34em;white-space:nowrap;
  transition:opacity .26s ease;
}
#phaseLabel.out,#count.out,#skyName.out{opacity:0;transition:opacity .16s ease}
.rule{width:min(240px,44vw);height:1px;background:var(--hairline);margin:2.4rem auto;overflow:hidden}
.rule i{display:block;height:100%;width:0;background:var(--bright);box-shadow:0 0 8px var(--bright)}
#count{font-size:46px;font-weight:100;opacity:.92;transition:opacity .26s ease;font-variant-numeric:tabular-nums}

#hint{
  position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:opacity .4s ease;
}
#hint span{font-size:10px;letter-spacing:.5em;padding-left:.5em;color:var(--dim)}
#hint i{width:1px;height:34px;background:linear-gradient(var(--dim),transparent)}

/* ---- placard content ---- */
.eyebrow{
  font-size:11px;font-weight:400;letter-spacing:.5em;padding-left:.5em;
  color:var(--bright);margin-bottom:2.2rem;min-height:1em;
}
h2{
  font-size:clamp(26px,4.2vw,44px);font-weight:100;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.55;
  margin-bottom:2.2rem;text-wrap:balance;
}
h2.big{font-size:clamp(34px,7vw,64px);letter-spacing:.4em;padding-left:.4em}
.copy{
  max-width:34rem;margin:0 auto 1.6rem;
  color:var(--dim);line-height:1.9;font-size:17px;
}
.copy.quiet{font-size:14px;letter-spacing:.08em;margin-top:2.6rem;opacity:.85}
.placard-line{
  font-weight:100;font-size:clamp(19px,2.6vw,27px);letter-spacing:.06em;
  line-height:1.9;color:var(--star);max-width:30em;margin:3.4rem auto 0;
}

/* ---- feature lines ---- */
.lines{margin-top:.6rem;max-width:36rem;margin-inline:auto}
.lines li{
  list-style:none;padding:1.5rem 0;border-top:1px solid var(--hairline);
  font-weight:200;font-size:clamp(16px,2vw,20px);letter-spacing:.05em;line-height:1.6;
}
.lines li:last-child{border-bottom:1px solid var(--hairline)}

/* ---- skies (sticky re-tint) ---- */
#skies{display:block;min-height:260vh;padding:0}
#skies .sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:0 8vw;text-align:center;
}
#skyName{
  font-size:clamp(26px,5vw,48px);font-weight:100;
  letter-spacing:.32em;padding-left:.32em;white-space:nowrap;
  margin:1rem 0 .4rem;transition:opacity .22s ease;
}
#skyPro{
  font-size:10px;letter-spacing:.42em;padding-left:.42em;color:var(--bright);
  margin-bottom:1.6rem;opacity:0;transition:opacity .5s ease;min-height:1em;
}
#skies .copy{margin-top:1.4rem}

/* ---- activity ---- */
.constellation{width:min(340px,72vw);margin:1rem auto 2.4rem;display:block}
.constellation circle{fill:var(--star)}

/* ---- pro ---- */
.tiers{
  display:grid;grid-template-columns:1fr 1fr;gap:7vw;
  max-width:44rem;margin:2.4rem auto 0;text-align:left;
}
.tier h3{
  font-size:11px;font-weight:400;letter-spacing:.45em;
  color:var(--dim);margin-bottom:1.5rem;
}
.tier.pro h3{color:var(--bright)}
.tier li{
  list-style:none;padding:.72rem 0;font-weight:200;font-size:16px;
  line-height:1.5;display:flex;gap:.95rem;align-items:baseline;
}
.pip{
  width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--dim);opacity:.55;transform:translateY(-2px);
}
.tier.pro .pip{background:var(--bright);opacity:1;box-shadow:0 0 6px var(--bright)}
.oneline{
  margin-top:3.4rem;color:var(--dim);
  font-size:12px;letter-spacing:.28em;padding-left:.28em;text-transform:uppercase;
}

/* ---- complete ---- */
.cta{
  display:inline-flex;align-items:center;gap:1rem;
  margin-top:3rem;padding:1.25rem .5rem;
  color:var(--star);text-decoration:none;
  font-size:13px;font-weight:300;letter-spacing:.32em;
  border-top:1px solid rgba(223,237,255,.25);
  border-bottom:1px solid rgba(223,237,255,.25);
  transition:color .3s ease,border-color .3s ease,text-shadow .3s ease;
}
.cta svg{width:17px;height:21px;flex:none;transform:translateY(-1px)}
.cta:hover{color:var(--bright);border-color:var(--bright);text-shadow:0 0 14px var(--bright)}
#complete footer{
  margin-top:14vh;color:var(--dim);opacity:.65;
  font-size:11px;letter-spacing:.22em;
}

/* ---- scroll reveals ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.on{opacity:1;transform:none}

@media (max-width:640px){
  .wordmark{left:50%;transform:translateX(-50%);padding-left:.55em}
  .tiers{grid-template-columns:1fr;gap:3rem;max-width:22rem}
  section{padding:14vh 10vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  body{transition:none}
}

/* the pitch's closing line is the one thing on this page that begins */
.beginlink{
  display:inline-block;color:var(--star);text-decoration:none;
  border-bottom:1px solid var(--hairline);padding-bottom:.5rem;
  transition:color .3s ease,border-color .3s ease,text-shadow .3s ease;
}
.beginlink:hover{color:var(--bright);border-color:var(--bright);text-shadow:0 0 12px var(--bright)}

/* photographic skies — five stacked layers, crossfaded by scroll.
   The photograph carries the nebula; the canvas above adds the twinkle. */
#skyPhotos{position:fixed;inset:0;z-index:-2;background:var(--bg)}
#skyPhotos div{
  position:absolute;inset:0;opacity:0;will-change:opacity;
  background-size:cover;background-position:center bottom;
}

/* the count changes every second — its fade must be far quicker than the label's */
#count{transition:opacity .16s ease}
#count.out{transition:opacity .08s ease}

/* Dusk is ~8x brighter than Deep Field — text over the photographic skies
   stays near-white with a soft ground shadow, same rule as the app */
#skies .block{text-shadow:0 1px 16px rgba(0,0,0,.65)}
#skies .copy{color:var(--star);opacity:.9}

#complete footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--hairline)}
#complete footer a:hover{color:var(--bright);border-color:var(--bright)}