/* ═══════════════════════════════════════════════════════════
   Joozic — assets/css/launch.css

   The coming-soon gate, and only that. Loaded by the gate alone —
   which is index.html, the site having moved to live.html. Nothing
   the site loads links this file, and nothing here overrides
   anything the site draws.

   Deliberately thin. The centred brand column, the masked wordmark,
   the j watermark and the geometry are all base.css's, borrowed by
   class — so the gate cannot drift from the screen it stands in for.
   What is left is the palette and the clock.

   The palette is the splash's, inverted: Joozic Grey ground, teal
   marks, where the site's own first screen is teal ground and grey
   marks. Same furniture, reversed — so this reads as the site
   without being mistaken for it.

   Delete at launch — see README, "The coming-soon gate".
   ═══════════════════════════════════════════════════════════ */

/* .splash brings the centring, the padding and the watermark. Its height comes
   from panels.css on the real site, which is a layout file this page has no
   reason to load, so it is set here instead — same measurement, same fallback.

   The vertical padding is even top and bottom — the foot used to carry a strip
   of the nine station colours and needed the extra room; with that gone the one
   group on the page simply centres. It absorbs the safe areas: in a home-screen
   app the status bar is translucent and the page runs underneath it. */
.gate {
  min-height: var(--app-height, 100vh);
  padding-block:
    calc(28px + env(safe-area-inset-top, 0px))
    calc(28px + env(safe-area-inset-bottom, 0px));

  /* The inversion, half of it. Later in the cascade than base.css at equal
     specificity, so this is the one that lands. */
  background: var(--grey);
}

/* The j behind everything. White rather than either brand colour: on the grey
   it is a lift in the ground rather than a third thing in the palette, which
   leaves the teal to the wordmark and the clock alone. 3% — lighter than the
   splash's 5% and the wall's 8%, because white on a dark ground carries
   further than a dark mark on a bright one. */
.gate::before {
  background-color: #ffffff;
  opacity: 0.03;
}

/* The other half. base.css masks the wordmark over a flat fill precisely so it
   can take a colour; this is that colour changing. */
.gate .brand__logo { background-color: var(--teal); }

/* Same reasoning as panels.css: in an installed app every other height source
   reads short on iOS, and there is no URL bar to make 100vh unreliable. max()
   can only ever fill more. .is-standalone is set by launch.js. */
.is-standalone .gate { min-height: max(100vh, var(--app-height, 0px)); }

/* The wordmark is the page's one heading. The mark itself is base.css's
   .brand__logo, which sizes a box and masks the logo over a flat fill — that
   needs a block, and a heading's child is inline by default. */
.gate__title { font-size: 0; line-height: 0; }
.gate__title .brand__logo { display: block; }

/* The heading's actual words. Off screen, but present: the clock is hidden from
   assistive tech, so this is where the date is stated. */
.gate__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────────── The clock ─────────────── */

/* Four units in a row at every size. They stay a row on a phone rather than
   folding to a grid: a countdown reads left to right, and two-by-two turns the
   largest thing on the page into a block of numbers you have to parse. The
   type shrinks instead. */
.gate__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Wide enough that the four units read as four things. The fixed cells below
     already carry air inside them, which works against this — space inside a
     cell and space between cells look the same until the gap clearly wins. */
  gap: clamp(20px, 5vw, 56px);
  /* Follows the wordmark directly, so it carries the whole gap on its own. */
  margin-top: clamp(26px, 5.2vh, 58px);
}

.gate__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Poppins 900 italic, the wordmark's own weight, in teal on the grey — the same
   ink the logo above it is drawn in. Nothing else: no pills, no rules between
   the units, no shadow. The labels underneath do the separating.

   The right padding is the italic's overhang, which would otherwise leave each
   number looking a hair right of its label. The stability is the digits' own
   job — see .gate__digit. */
.gate__num {
  font-family: var(--display);
  /* 700, not the 900 the rest of the brand is set in. At this size 900 stops
     reading as emphasis and starts reading as a slab — and unlike the wordmark
     or a spine, these are numbers you read rather than a mark you recognise.
     The gate asks for italic 700 specially; see the note on its font link. */
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.1rem, 8vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--teal);
  padding-right: 0.07em;
}

/* One box per digit, and this is the whole of why the clock holds still.

   Poppins has no tabular figures. Asking for them is free and does nothing:
   the family ships without a `tnum` feature, so the browser reports
   font-variant-numeric as set and keeps drawing proportional digits — measured
   at this weight, 1 is 0.354em wide against 4's 0.637em.

   Fixing the width of the *pair* is not enough, and looks like it is. The box
   stops moving, so every measurement of the box says the problem is solved,
   while the glyphs inside carry on: centre "11" and centre "44" in the same
   box and the text starts 21px further right in one than the other, once a
   second, on the seconds. The digit is the thing that has to be boxed.

   0.65em is the widest digit ("4", 0.637em including the letter-spacing above)
   with a little air. Every digit therefore lands in the same column whatever
   it is — which is what tabular figures would have done, done by hand. A 1 in a
   4's box carries visible space around it; that is what a clock looks like. */
.gate__digit {
  display: inline-block;
  width: 0.65em;
  text-align: center;
}

/* The splash's small caps, held back so the numbers lead. Teal at 58% rather
   than a second colour — the palette on this page is one ink on one field. */
.gate__label {
  margin-top: clamp(7px, 1.4vh, 13px);
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(0.6rem, 1vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--teal) 58%, transparent);
  /* letter-spacing trails the last glyph too; pull it back into optical centre */
  padding-left: 0.2em;
}

/* The line under the clock. It says what the numbers are for and no more — the
   countdown is the date, expressed the way a countdown expresses one. */
.gate__when {
  margin-top: clamp(18px, 3.6vh, 40px);
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(0.86rem, 1.35vw, 1.15rem);
  letter-spacing: 0.18em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--teal);
  padding-left: 0.18em;
  white-space: nowrap;
}

/* ─────────────── Zero ─────────────── */

/* [hidden] loses to the display rules above, so it is restated with enough
   specificity to win. */
.gate [hidden] { display: none; }

.gate__final {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(20px, 4.4vh, 46px);
}

.gate__live {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.4rem, 9vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--teal);
}

/* The wall's badge, which is a solid block with the ground lettered back out of
   it — teal block, grey letters, the one place on this page the colour is the
   fill rather than the ink. It lifts on hover the way a spine does: movement
   only, no shadow and no change of colour. */
.gate__enter {
  margin-top: clamp(18px, 3.4vh, 38px);
  padding: 0.62em 1.25em;
  border-radius: var(--r-md);
  background: var(--teal);
  color: var(--grey);
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  letter-spacing: -0.02em;
  /* The slant eats the spaces: at 900 italic "your station" closes up into one
     word without this. */
  word-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.22s var(--ease);
}

@media (hover: hover) {
  .gate__enter:hover { transform: translateY(-4px); }
}

/* ═══════════════ Responsive ═══════════════ */

/* Small phones: the gaps go first, then the numbers. Four units of two digits
   plus three gaps has to fit 320px less the splash's 24px either side. */
@media (max-width: 380px) {
  .gate__clock { gap: 14px; }
  .gate__num { font-size: 1.95rem; }
  .gate__label { letter-spacing: 0.14em; padding-left: 0.14em; }
}

/* Short viewports — landscape phones, small windows. Everything on this page is
   one centred column, so height is the scarce direction: the wordmark and the
   clock both give some back rather than letting the strip get pushed off. */
@media (max-height: 620px) {
  .gate__title .brand__logo { width: clamp(150px, 21vw, 250px); }
  .gate__num { font-size: clamp(1.7rem, 5.6vw, 3rem); }
  .gate__live { font-size: clamp(1.9rem, 6vw, 3.2rem); }
  .gate__clock { margin-top: clamp(14px, 3vh, 26px); }
  .gate__when { margin-top: clamp(13px, 2.6vh, 24px); }
  .gate__final { margin-top: clamp(14px, 3vh, 26px); }
}