/* =========================================================================
   DOTLSD — apex landing page
   =========================================================================
   Current state: a plain white page with the mark centered. Nothing else.
   Built to grow — see the section markers below for where header, hero
   copy, and content sections attach later without restructuring `.page`.

   Token note: only two colors exist right now (white background, and the
   logo art itself). When real brand colors land, define them here as
   custom properties on :root (e.g. --color-ink, --color-accent) rather
   than hard-coding new hex values inline, and reference them everywhere.
   ========================================================================= */

:root {
  --color-bg: #fff;

  /* Tagline sits well below body-text size, so it reads as a caption to
     the mark rather than competing with it. #6b6b6b against #fff still
     clears 4.5:1 (~5.3:1) at that size — subordinate, not illegible. */
  --color-ink-muted: #6b6b6b;

  /* Logo is a 1080×283 landscape banner (~3.82:1). The cap below is sized
     so it reads as a calm, confident mark on an otherwise empty page —
     present without feeling like a splash screen. At the 480px cap the
     rendered height is ~126px. Revisit this pairing if the logo asset
     ever changes proportions. */
  --logo-max-width: 480px;
  --logo-width: min(70vw, var(--logo-max-width));

  /* Vertical rhythm between the mark and whatever sits under it (today:
     the tagline). Kept as a token since more stacked elements are likely
     once this grows past the foundation build. */
  --stack-gap: 1rem;

  color-scheme: light;
}

/* ---- Reset --------------------------------------------------------------
   Keep this minimal and additive. Don't fight the browser more than the
   page currently needs. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

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

/* ---- Page frame ----------------------------------------------------------
   `.page` is the full-bleed, full-viewport centering frame. It owns the
   background and vertical/horizontal centering today. When header/footer
   and real content sections are added (see index.html for the intended
   shape), `.page` becomes the scrollable <main> and this rule stays as-is
   — new sections stack below the hero inside it. */

body {
  background: var(--color-bg);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap);

  min-height: 100vh; /* fallback for browsers without dvh support */
  min-height: 100dvh;
  width: 100%;

  /* Respect safe areas on notched/rounded-corner devices, since the
     viewport meta opts into viewport-fit=cover. */
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
}

/* ---- Mark ---------------------------------------------------------------- */

.logo {
  width: var(--logo-width);
  height: auto;
}

/* ---- Tagline --------------------------------------------------------------
   Sits directly under the mark as part of the same centered unit (`.page`
   handles the stacking via flex-direction: column + gap, so the pair is
   centered as a group rather than the logo pinned dead-center with text
   hanging below it). Deliberately smaller and lighter than the mark —
   a caption, not a second headline. */

.tagline {
  margin: 0;
  max-width: 90%;

  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  text-align: center;
}

/* ---- Tagline dots ---------------------------------------------------------
   The words "hold still, developing" stay put; only this trailing bit
   cycles 1 → 2 → 3 dots, looping. It's a decorative echo of the static
   copy (a screen reader gets "hold still, developing" and stops there —
   see `aria-hidden` in index.html), so the animated text lives entirely
   in generated content, never in the accessible tree.

   `.tagline-dots` reserves a fixed-width box sized for the widest state
   (three dots) so the line never reflows as the count changes; the
   content itself is left-aligned inside that box so it grows rightward
   from a fixed start point, matching how a person would type it. */

.tagline-dots {
  display: inline-block;
  min-width: 1.5em;
  text-align: left;
}

.tagline-dots::after {
  content: "...";
}

@media (prefers-reduced-motion: no-preference) {
  .tagline-dots::after {
    animation: tagline-dots-cycle 1.4s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tagline-dots::after {
    content: "...";
    animation: none;
  }
}

@keyframes tagline-dots-cycle {
  0%,
  24% {
    content: ".";
  }
  33%,
  57% {
    content: "..";
  }
  66%,
  90% {
    content: "...";
  }
  100% {
    content: ".";
  }
}