/* ============================================================
   SCREEN 05 — the countdown.

   The last screen, and the invitation's return to the black it
   opened on. It is not a timer placed on a page: the four figures
   are set across the whole of it, each one on its own line of the
   measure, none of them starting where another starts and none of
   them the same size — the days carry the page and the seconds are
   the quietest thing on it. The room between them is the design;
   nothing is drawn around any of them.

   One lily comes in at the foot, cut from the sheet the guest
   opened on, and leaves the window again on two edges. It is the
   only ornament, and it is kept to the corner the figures step
   away from.

   The figures are rows of digit cells. A cell is a fixed window on
   two glyphs that take turns, so the row cannot shift as the shapes
   change and only the digit that changed is ever in motion.

     1. Tokens and ground
     2. The screen
     3. The lily at the foot
     4. The heading
     5. The four figures
     6. A digit
     7. The units
     8. The day, and the day itself
     9. Composition — tablet and desktop
    10. Entrance
    11. Reduced motion
   ============================================================ */

/* ---------- 1. Tokens and ground -------------------------- */
:root {
  --count-ground: #000000;
  --count-ivory:  #F4F1EC;
  --count-soft:   #C6C0B6;   /* 9.9:1 on black */
  --count-faint:  #A8A196;   /* 6.6:1 — small, tracked, and still read */

  --t-count-head: clamp(1.45rem, 6.6vw, 2.6rem);
  /* The days set the scale; the other three step down from it, so the
     four are a family rather than a row of equals. */
  --t-count-n:    clamp(4.25rem, 26vw, 7rem);
  --t-count-l:    clamp(.58rem, 2.7vw, .6875rem);
}

html[data-ground="count"],
html[data-ground="count"] body { background: var(--count-ground); }

html[data-top="count"] .lang { color: var(--count-ivory); }
html[data-top="count"] .lang__b:focus-visible { outline-color: var(--count-ivory); }

/* ---------- 2. The screen --------------------------------- */
.screen--count {
  position: relative;
  isolation: isolate;
  height: auto;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  cursor: default;
  background: var(--count-ground);
  color: var(--count-ivory);
  /* The foot is left long on purpose: the lily lives there, and the
     date is set above it rather than over it. */
  padding: clamp(3.5rem, 10svh, 7rem) var(--pad) clamp(10rem, 31svh, 17rem);

  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* ---------- 3. The lily at the foot ----------------------- */
/* Placed against the window's own corner and pulled past it, so the
   stem is cut by the edge of the screen rather than by an edge of its
   own. It was keyed off the sheet's black when it was cut, and the
   page is that same black, so there is no ground on it and nothing
   to see but the flower. */
.count__bloom {
  position: absolute;
  z-index: 0;
  left: calc(-1 * clamp(4.75rem, 25vw, 11.5rem));
  bottom: 0;
  /* Sized by the window's height as well as its width: on a short
     phone a flower measured only across would stand up into the
     figures. 470 x 740 is the crop's own shape. */
  width: min(clamp(21rem, 84vw, 34rem), calc(57svh * 470 / 740));
  pointer-events: none;
  user-select: none;
}
.count__bloom img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  /* It rises out of the black and returns to it: the top of the crop
     is taken back to nothing, so however the figures fall the flower
     never comes up behind one of them, and the foot is taken back too,
     because the credit follows the countdown and a stem cut off by the
     end of a section would show as a line across the page. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 36%, #000 78%, transparent 100%);
}

/* Everything written stands over it. */
.count__type,
.count,
.count__date,
.count__here { position: relative; z-index: 1; }

/* ---------- 4. The heading -------------------------------- */
/* Held clear of the language switch in the corner above it. */
.count__type { max-width: min(18em, 76%); }

.count__head {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
  font-size: var(--t-count-head);
  line-height: 1.1;
  letter-spacing: .09em;
  text-indent: .09em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

/* One hairline, and it is short: it ends the heading rather than
   underlining it. */
.count__head::after {
  content: '';
  display: block;
  width: clamp(2.5rem, 14vw, 5rem);
  height: 1px;
  margin: clamp(1.1rem, 3.5vw, 1.6rem) 0 0;
  background: currentColor;
  opacity: .34;
}

.count__sub {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 11;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--count-soft);
  max-width: 22em;
  margin: clamp(1.1rem, 3.4vw, 1.7rem) 0 0;
}

/* ---------- 5. The four figures --------------------------- */
/* Twelve columns, one figure to a line, and no two of them starting
   or ending together: the days hold the left, the hours answer from
   the right and a little lower, the minutes come back to the left but
   set in from it, and the seconds close at the right. */
.count {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: clamp(.25rem, 1.4svh, .9rem);
  width: 100%;
  margin-top: clamp(1.5rem, 5svh, 3rem);
}

.count__unit {
  /* A row each, named rather than packed: with disjoint columns the
     grid would set two of them side by side on a wide window, and the
     cascade is the composition. */
  grid-column: var(--from) / var(--to);
  grid-row: var(--row);
  justify-self: var(--side, start);
  text-align: var(--align, left);
  /* `em` here is the figure's own size, so the offsets hold their
     proportion at every width. */
  font-size: calc(var(--t-count-n) * var(--step, 1));
  margin-top: var(--drop, 0em);
  min-width: 0;
}

.count__unit--days    { --row: 1; --from:  1; --to: 11; --step: 1;   --drop: 0em;   }
.count__unit--hours   { --row: 2; --from:  4; --to: 13; --step: .86; --drop: -.05em;
                        --side: end; --align: right; }
.count__unit--minutes { --row: 3; --from:  2; --to: 11; --step: .78; --drop: .06em; }
.count__unit--seconds { --row: 4; --from:  5; --to: 13; --step: .70; --drop: -.02em;
                        --side: end; --align: right; }

/* The language switch and the music switch are fixed in the right
   margin for the whole visit, and this is the one screen whose figures
   are set against that same edge — so as it scrolls past, a numeral
   arrives underneath them, ivory on ivory, and neither can be read.
   The two right-hand figures keep a lane clear for the chrome: the
   switches' own offset from the edge, plus the wider of the two, plus
   a little air. The left-hand figures do not move at all, so the
   cascade — days left, hours right, minutes left, seconds right — is
   the composition it was. */
/* The lane is narrow and it is bounded on both sides. The switches
   stand about 76px in from the right edge on a phone and about 119px on
   a desktop, while the screen's own padding already accounts for 24 to
   88 of that — so the figures overhang the chrome by roughly fifty
   pixels at every size, and pulling them back much further than that
   would stop them answering from the right at all. Sixty clears the
   switch at every window measured, from 320 to 1920, and still leaves
   the right-hand figures out past three quarters of the page. */
:root { --count-guard: 3.75rem; }

.count__unit--hours,
.count__unit--seconds { margin-right: var(--count-guard); }

.count__n {
  display: flex;
  justify-content: inherit;
  font-family: var(--display);
  /* Bodoni's hairlines vanish at a display optical size over black:
     the axis is taken back toward the reading cut and the weight up,
     which thickens the thin strokes without thickening the face. */
  font-weight: 620;
  font-variation-settings: 'opsz' 18;
  font-size: 1em;
  line-height: 1;
  letter-spacing: .005em;
  font-variant-numeric: lining-nums tabular-nums;
}
.count__unit--hours .count__n,
.count__unit--seconds .count__n { justify-content: flex-end; }

/* ---------- 6. A digit ------------------------------------ */
/* A fixed window, and two glyphs inside it that take turns. The width
   is the font's own tabular advance, so a 1 takes the same room as an
   8 and the row never moves. The window is taller than an em because
   Bodoni's lining figures overshoot one — a window cut to 1em takes
   the tops off them — and the extra is taken back out of the flow so
   the row keeps its height. */
.digit {
  position: relative;
  display: block;
  /* One `ch` is the advance of a zero, and tabular figures all share
     it — so the window is exactly the room the font gives a digit,
     measured rather than guessed. */
  width: 1ch;
  height: 1.3em;
  margin-block: -.15em;
  overflow: hidden;
}
.digit b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: inherit;
  font-variation-settings: inherit;
  will-change: transform, opacity;
}
/* The one waiting its turn starts out of sight below the window. */
.digit b:last-child { opacity: 0; transform: translateY(100%); }

/* ---------- 7. The units ---------------------------------- */
.count__l {
  display: block;
  margin-top: clamp(.5rem, 2.2vw, .95rem);
  font-family: var(--ui);
  /* Small and widely tracked, but not thin: at this size a 300 over
     black is a suggestion of a word rather than a word. */
  font-weight: 400;
  font-size: var(--t-count-l);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--count-faint);
  white-space: nowrap;
}
/* A tracked word carries its tracking after the last letter, which on
   a right-aligned figure leaves it visibly short of the edge. */
.count__unit--hours .count__l,
.count__unit--seconds .count__l { margin-right: -.26em; }

/* ---------- 8. The day, and the day itself ---------------- */
/* The date closes the composition from the right, under the seconds.
   Nothing is drawn over it: a rule there is the last horizontal line
   on the page and reads as one over the credit below rather than as
   one under the figures above. */
.count__date {
  align-self: flex-end;
  /* Clear of the music switch, which is fixed in the same corner and
     would otherwise cross it on the way past. */
  margin: clamp(1.75rem, 6svh, 3.5rem) clamp(2.9rem, 13vw, 4.75rem) 0 0;
  /* Face, size and tracking come from the shared rule in screens.css. */
  color: var(--count-soft);
}

.count__here {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
  font-size: var(--t-count-head);
  line-height: 1.1;
  letter-spacing: .12em;
  text-indent: .12em;
  text-transform: uppercase;
  margin: clamp(3rem, 11svh, 6rem) 0 0;
}
[hidden] { display: none !important; }

/* ---------- 9. Composition — tablet and desktop ----------- */
/* The same composition, re-cut for the room: the figures step further
   apart across the measure as it widens, and the lily grows with the
   window rather than staying at a phone's size. */
@media (min-width: 620px) {
  :root {
    --t-count-head: clamp(1.9rem, 4.2vw, 3.2rem);
    --t-count-n:    clamp(5.5rem, 19vw, 11rem);
    --t-count-l:    clamp(.62rem, 1.2vw, .8125rem);
  }
  .count { row-gap: clamp(.5rem, 2svh, 1.6rem); }
  .count__unit--days    { --from: 1; --to: 9;  }
  .count__unit--hours   { --from: 6; --to: 13; --step: .84; }
  .count__unit--minutes { --from: 3; --to: 10; --step: .74; }
  .count__unit--seconds { --from: 7; --to: 13; --step: .64; }
  .count__bloom {
    width: min(clamp(24rem, 54vw, 40rem), calc(49svh * 470 / 740));
    left: calc(-1 * clamp(5rem, 14vw, 11rem));
    bottom: 0;
  }
  .count__type  { max-width: 20em; }
}

@media (min-width: 1100px) {
  :root {
    --t-count-head: clamp(2.2rem, 3vw, 3.6rem);
    --t-count-n:    clamp(7rem, 13.5vw, 15rem);
    --t-count-l:    clamp(.7rem, .95vw, .875rem);
  }
  /* With the room, the figures take the diagonal properly: each one
     starts further across the measure than the one above it. */
  .count__unit--days    { --from: 1; --to: 7;  }
  .count__unit--hours   { --from: 7; --to: 13; --step: .82; }
  .count__unit--minutes { --from: 3; --to: 9;  --step: .70; }
  .count__unit--seconds { --from: 8; --to: 13; --step: .60; }
  .count { row-gap: clamp(.75rem, 2.6svh, 2.2rem); margin-top: clamp(2rem, 6svh, 4rem); }
  .count__bloom {
    width: min(clamp(26rem, 40vw, 46rem), calc(68svh * 470 / 740));
    left: calc(-1 * clamp(4rem, 7vw, 9rem));
    bottom: 0;
  }
  .count__l { letter-spacing: .3em; text-indent: .3em; }
  .count__unit--hours .count__l,
  .count__unit--seconds .count__l { margin-right: -.3em; }
}

@media (min-width: 1600px) {
  :root { --t-count-n: clamp(9rem, 11.5vw, 17rem); }
}

/* ---------- 10. Entrance ---------------------------------- */
/* The heading arrives, then the figures one after another, then the
   date. Once they are up, the section is still: what moves after that
   is a single digit at a time. */
.count__type > *,
.count__unit,
.count__date,
.count__here {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 1100ms cubic-bezier(.32,.08,.24,1) calc(var(--i, 0) * 130ms),
    transform 1100ms cubic-bezier(.32,.08,.24,1) calc(var(--i, 0) * 130ms);
}
.screen--count.is-in .count__type > *,
.screen--count.is-in .count__unit,
.screen--count.is-in .count__date,
.screen--count.is-in .count__here { opacity: 1; transform: none; }

.count__bloom {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1800ms cubic-bezier(.32,.08,.24,1) 260ms,
    transform 2400ms cubic-bezier(.22,.61,.24,1) 260ms;
}
.screen--count.is-in .count__bloom { opacity: 1; transform: none; }

/* The figures come up out of a mask; their units follow. */
.count__n {
  clip-path: inset(-.14em -.2em 100% -.2em);
  transition: clip-path 1300ms cubic-bezier(.22,.61,.24,1) calc(var(--i, 0) * 130ms + 180ms);
}
.screen--count.is-in .count__n { clip-path: inset(-.14em -.2em -.16em -.2em); }

.count__l {
  opacity: 0;
  transition: opacity 900ms ease calc(var(--i, 0) * 130ms + 620ms);
}
.screen--count.is-in .count__l { opacity: 1; }

/* ---------- 11. Reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .count__type > *,
  .count__unit,
  .count__date,
  .count__here,
  .count__bloom,
  .count__n,
  .count__l {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
  .count__n { clip-path: none; }
  .screen--count.is-in .count__type > *,
  .screen--count.is-in .count__unit,
  .screen--count.is-in .count__bloom,
  .screen--count.is-in .count__date,
  .screen--count.is-in .count__l,
  .screen--count.is-in .count__here { opacity: 1; }
}

/* ============================================================
   The credit.

   The one line on the invitation that is not the wedding's. It is set
   after the countdown on the countdown's own black, so the page ends
   on one ground, and it is the quietest thing here: the companion
   face, tracked, and small enough that it closes the page rather than
   signing over it.
   ============================================================ */
.credit {
  background: var(--count-ground);
  color: var(--count-faint);
  /* The foot is long enough that the line always clears the music
     switch where the page comes to rest, which is the corner this line
     belongs in. On the way down the switch travels through it — it is
     fixed to the bottom of the window — and for a moment the three
     hairlines cross a letter. Insetting the line would answer that and
     cost it the corner, which is the wrong trade: the corner is the
     brief, the crossing is a second of a scroll. */
  padding:
    clamp(3rem, 9svh, 5rem)
    var(--pad)
    max(clamp(5rem, 13svh, 7.5rem), calc(env(safe-area-inset-bottom, 0px) + 5rem));
  text-align: right;
}
.credit p {
  margin: 0;
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--t-count-l);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  line-height: 1.6;
}
/* The studio's name, and nothing more: there is no site behind it, so
   it is set as what it is. The rule that used to sit under it, the
   hover, the focus ring and the invisible target a thumb could find
   were all a link's furniture — kept on text that goes nowhere they
   only invite a tap that does nothing. What remains is the one thing
   that was never about being clickable: the name is lifted a little
   out of the words around it, the way a signature is. */
.credit__studio { color: var(--count-soft); }