/* Coming-soon pages — mylosses.co
   Shared by / and /sweat-sodium-calculator/. Layout comes from containers.css
   (the .page grid; the content block sits in the body track) and colour/type
   come from tokens.css — both are copies of design/v2/, which is the source.
   This file holds only what the pages ARE: the wordmark and two lines of type.
   Everything here that concerns the wordmark is copied from design/v2/wordmark.html,
   which is the spec — change it there first. */

:root{
  /* Two wordmark sizes: the intro phrase is 19 characters against the mark's 9, so it
     is set smaller to fit a phone, and the mark grows as it resolves. wordmark.js reads
     --wm-full to measure the finished mark before it exists. */
  --wm-intro:clamp(22px,9vw,104px);
  --wm-full:clamp(30px,12vw,132px);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans)}

/* One screen: the grid fills the viewport and its single row centres within it.
   Horizontal centring is the grid's own — the gutter columns flex equally. */
.page{min-height:100%;align-content:center}

/* The page's one block. It rides the body track (containers' default for .page
   children) and centres its children within that track. */
.cs{display:flex;flex-direction:column;align-items:center;text-align:center}

/* A flex column with align-items:center sizes children to max-content, so they do not
   wrap — they overflow. Every child needs max-width:100%. */
.cs > *{max-width:100%}

.wordmark{
  font-weight:800;line-height:1;letter-spacing:-0.02em;
  display:flex;align-items:baseline;white-space:nowrap;color:var(--ink);
  /* The intro types a 19-character phrase and deletes back to 9. Reserve the height so
     the page does not jump when the line shortens. */
  min-height:1em;

  /* Sized for the INTRO phrase, not the finished mark: "measure your losses" is more
     than twice the width of "my/losses", so sizing for the mark makes the phrase
     overflow on a phone. It grows to full size once the mark resolves, below. */
  font-size:var(--wm-intro);

  /* Full-width and centred for the whole intro (spec: wordmark.html .wordmark--hero).
     The letter spans reserve the phrase's width from frame one, so typing happens
     centred; deletions collapse the line symmetrically toward the centre, and the
     finished mark is already where it ends up — no shift at completion. */
  width:100%;justify-content:center;
  transition:font-size .5s cubic-bezier(.4,0,.2,1);
}
body.is-settled .wordmark{font-size:var(--wm-full)}

/* The intro makes every character a flex item, and flex items shrink by default. On a
   narrow screen that compresses the letters into each other instead of overflowing —
   which reads as a broken font, not as an overflow. Nothing in the wordmark may shrink. */
.wordmark > *{flex:none}
.wordmark svg{
  height:.92em;width:auto;overflow:visible;
  align-self:center;transform:translateY(.02em);
  margin:0 .06em;
}

/* The slash dips like a dipstick; the sindoor level-mark appears where it read. */
@keyframes wm-dip{
  0%,100%{ transform:translateY(0) }
  18%{ transform:translateY(10px) }
  40%,88%{ transform:translateY(0) }
}
@keyframes wm-read{
  0%,39%{ opacity:0 }
  40%,88%{ opacity:1 }
  89%,100%{ opacity:0 }
}

/* Everything below the wordmark waits for the intro to resolve, so the page reads as
   one gesture rather than a logo animating next to finished text. */
h1,.tagline{opacity:0;transition:opacity .5s ease}
body.is-settled h1,
body.is-settled .tagline{opacity:1}

h1{
  margin-top:36px;font-size:clamp(18px,2.4vw,24px);font-weight:700;
  letter-spacing:-0.01em;text-wrap:balance;
}
.tagline{
  margin-top:20px;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
h1 + .tagline{margin-top:20px}
.wordmark + .tagline{margin-top:36px}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important}
  h1,.tagline{opacity:1;transition:none}
  .wordmark{transition:none}
}