/* ENVOY — drop.css
   the countdown plates and the date line

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* ------------------------------------------------------------------ drop */

.drop {
  /* The one number the countdown row and the date line are both sized from;
     it lives up here so the date, which is a sibling of the row, inherits it
     too. */
  --tw: clamp(52px, 13.6vw, 170px);
  --th: calc(var(--tw) * 1.32);

  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 6vh) clamp(16px, 4vw, 60px) 10vh;
  background: #000;
  text-align: center;
}

.title {
  margin: 0;
  font-size: clamp(52px, 11vw, 168px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--red);
}

/* ---- countdown ----
 *
 * Everything on the row is sized off one number, --tw, so the plates, the
 * gaps between them, the numerals and the colons all scale together and the
 * lockup holds its proportions from phone to desktop. The ratios are traced
 * off the reference art: a plate is 1.32 tall for its width, the gap is
 * roughly half a plate, and the numeral fills about four fifths of it.
 */
.count {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* The reference leaves half a plate between plates, and the colon lives
     inside that space rather than beside it — so the gap is set for two
     gutters plus a colon, not for the 0.48 the gap between plates measures. */
  gap: calc(var(--tw) * 0.11);
  margin-top: clamp(9px, 2.2vw, 26px);
}

/* Lit from above and from one side, guttering out to near-black at the foot.
   --hx/--hy place that hot spot and --hot-a sets how hard it burns; each
   plate below moves them, so the four read as one uneven light source
   rather than four copies of the same chip. */
.unit {
  position: relative;
  width: var(--tw);
  height: var(--th);
  border-radius: calc(var(--tw) * 0.145);
  /* the label sits in the bottom band, so the numeral centres on what's left */
  padding-bottom: calc(var(--tw) * 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(var(--hr) at var(--hx) var(--hy),
        rgba(238, 30, 18, var(--hot-a)) 0%,
        rgba(210, 16, 12, calc(var(--hot-a) * 0.82)) 26%,
        rgba(168, 10, 10, calc(var(--hot-a) * 0.60)) 46%,
        rgba(110, 5, 7, calc(var(--hot-a) * 0.36)) 66%,
        rgba(52, 2, 4, calc(var(--hot-a) * 0.14)) 85%,
        rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg,
        #1c0103 0%, #170103 34%, #110002 62%, #0c0001 82%, #0a0001 100%);
}

/* Where each plate's light sits, how far it reaches, and how hard it burns.
   Traced off the reference: two lit from the top left, one from the left
   edge and lower, one from the top right — the unevenness is the point. */
.unit--months  { --hx: 20%; --hy:  2%; --hr:  84% 72%; --hot-a: 1;    }
.unit--days    { --hx:  0%; --hy: 32%; --hr:  96% 72%; --hot-a: 0.72; }
.unit--hours   { --hx: 18%; --hy:  4%; --hr: 104% 88%; --hot-a: 0.86; }
.unit--minutes { --hx: 60%; --hy:  0%; --hr: 112% 86%; --hot-a: 0.92; }

/* Film grain. A flat gradient reads as plastic at this size; the reference
   art is noisy enough that the noise is part of the look. Generated in the
   stylesheet rather than shipped as an image so it costs no request and
   stays sharp at any plate size. */
.unit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* overlay barely moves a colour this dark, so the noise is pushed to hard
     black and white first and then let through at low strength */
  filter: contrast(320%);
  opacity: 0.42;
  mix-blend-mode: overlay;
}

/* above the grain, which is a sibling painted after them */
.num,
.unit-label {
  position: relative;
  z-index: 1;
}

.num {
  font-family: var(--sans);
  font-size: calc(var(--tw) * 0.78);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  /* tabular figures so a 1 rolling to a 2 doesn't shift the pair sideways */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.unit-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--th) * 0.1);
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-size: max(9px, calc(var(--tw) * 0.135));
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

/* The colon shares the numerals' baseline in the reference, so it hangs off
   the same band: full plate height, same reserved strip at the foot. */
.sep {
  height: var(--th);
  padding-bottom: calc(var(--tw) * 0.32);
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-size: calc(var(--tw) * 0.78);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.date {
  margin: clamp(20px, 5vw, 52px) 0 0;
  font-family: var(--sans);
  font-size: max(15px, calc(var(--tw) * 0.2));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}