/* ==========================================================================
   Caver Info — Coming Soon
   One screen. Background photo, dark overlay, and a single centred column:
   logo, name, status line, countdown. Nothing else.
   System fonts only, no third-party requests, no cookies, no tracking.

   Sections
   01. Design tokens
   02. Reset & base
   03. Backdrop & screen
   04. Logo, name, status
   05. Countdown
   06. Motion
   07. Responsive
   08. Reduced motion, forced colors, print
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS — change these first, everything else follows.
   ========================================================================== */
:root {
  /* Colour */
  --night:       #0C1116;                    /* behind the photo, and the fallback */
  --veil-top:    rgba(8, 12, 17, 0.68);      /* overlay over the photo, top */
  --veil-bottom: rgba(8, 12, 17, 0.88);      /* overlay over the photo, bottom */
  --bone:        #F2F1EC;                    /* primary text */
  --bone-muted:  #AEB9C0;                    /* unit labels */
  --teal:        #6FD3E4;                    /* accent */
  --panel:       rgba(255, 255, 255, 0.055); /* countdown cells */
  --edge:        rgba(255, 255, 255, 0.26);  /* cell borders */

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --size-micro:  0.75rem;                                  /* 12px */
  --size-status: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --size-brand:  clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);
  --size-clock:  clamp(1.875rem, 1.15rem + 3vw, 3rem);

  --track-label: 0.18em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Layout */
  --column: 36rem;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --radius: 4px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--night);
  color: var(--bone);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }

img { display: block; max-width: 100%; height: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. BACKDROP & SCREEN
   The photo is decorative, so it is a CSS background rather than an <img>:
   it needs no alt text and never blocks the text from painting.
   ========================================================================== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--night);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* Fallback for browsers without image-set(): the JPEG. */
  background-image:
    linear-gradient(to bottom, var(--veil-top), var(--veil-bottom)),
    url("/assets/img/background.jpg");
}
/* Modern browsers take the smaller WebP instead. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .backdrop {
    background-image:
      linear-gradient(to bottom, var(--veil-top), var(--veil-bottom)),
      image-set(
        url("/assets/img/background.webp") type("image/webp"),
        url("/assets/img/background.jpg") type("image/jpeg")
      );
  }
}

.screen {
  min-height: 100vh;
  min-height: 100svh;        /* honours mobile browser chrome */
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--gutter);
}

.panel {
  width: 100%;
  max-width: var(--column);
  text-align: center;
}

/* ==========================================================================
   04. LOGO, NAME, STATUS
   ========================================================================== */
.logo {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-6);
}

.brand {
  font-size: var(--size-brand);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.status {
  margin-top: var(--space-4);
  font-size: var(--size-status);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--teal);
}

/* ==========================================================================
   05. COUNTDOWN
   ========================================================================== */
.clock {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.clock__cell {
  padding: var(--space-4) var(--space-2);
  background-color: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.clock__value {
  display: block;
  font-size: var(--size-clock);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Tabular figures keep the boxes perfectly still as the digits change. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.clock__unit {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bone-muted);
}

.launched {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-4);
  background-color: var(--panel);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  font-size: var(--size-status);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--teal);
}

/* ==========================================================================
   06. MOTION — one quiet entrance, staggered by position.
   ========================================================================== */
.panel > * { animation: rise 620ms var(--ease) both; }
.panel > *:nth-child(1) { animation-delay:  80ms; }
.panel > *:nth-child(2) { animation-delay: 180ms; }
.panel > *:nth-child(3) { animation-delay: 260ms; }
.panel > *:nth-child(4) { animation-delay: 360ms; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   07. RESPONSIVE — mobile first. Checked at 320 / 375 / 768 / 1024 / 1440.
   ========================================================================== */
@media (min-width: 34em) {          /* 544px */
  .clock { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 48em) {          /* 768px */
  .logo { width: 112px; height: 112px; }
}

/* Short landscape screens: keep the column inside the viewport. */
@media (max-height: 34em) {
  .logo { width: 64px; height: 64px; margin-bottom: var(--space-4); }
  .clock { margin-top: var(--space-5); }
  .screen { padding-block: var(--space-5); }
}

/* Very small phones */
@media (max-width: 22.5em) {        /* 360px */
  .clock { gap: var(--space-2); }
  .clock__cell { padding: var(--space-3) var(--space-1); }
}

/* ==========================================================================
   08. REDUCED MOTION, FORCED COLORS, PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .panel > * { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .backdrop { display: none; }
  .clock__cell, .launched { border-color: CanvasText; }
}

@media print {
  body { background: #fff; color: #000; }
  .backdrop { display: none; }
}