/* ============================================================
   base.css
   Reset, root element, body, .screen container, and the shared
   `draw` / `rise-in` keyframes used across sections.
   ============================================================ */

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow-x: hidden;
}

/* Every full-height section uses this container.
   scroll-margin-top clears the fixed nav bar (body::before is 9vh)
   so anchor jumps from the nav don't land with the section title
   tucked under the bar. A hair over 9vh gives a touch of breathing
   room between the bar and the top of the section content. */
.screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  scroll-margin-top: 10vh;
}

/* Inline emphasis used inside body copy.
   .key brightens muted text to ink (cream); .accent paints it sage. */
.key { color: var(--ink); }
.accent { color: var(--accent); }

/* Accessible visually-hidden utility — content stays in the DOM and
   reachable by screen readers and the keyboard tab order, but is
   removed from the visual flow. Standard WCAG-safe technique (avoids
   the older `display:none` / `visibility:hidden` which also hide
   from assistive tech). Used for labels on email inputs where the
   placeholder serves the visual hint role. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — invisible until focused by Tab. Lets keyboard
   users jump past the nav straight into the main content (WCAG 2.4.1
   Bypass Blocks). On focus it pops in at the top-left in cream-on-bg. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75em 1em;
  background: var(--ink);
  color: var(--bg);
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Global keyboard-focus indicator. :focus-visible (not :focus) means
   this only shows up for keyboard / assistive-tech navigation, never
   for mouse clicks — so the design stays clean for sighted clickers
   while staying WCAG 2.4.7 / 2.4.11 compliant for keyboard users.
   Most elements sit on var(--bg), so cream gives the strongest contrast.
   The .waitlist__btn override below handles the inverse case (cream bg). */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Inverse focus ring for the cream-on-bg "Join" buttons — a cream
   outline on a cream button is invisible. Use dark bg colour instead. */
.waitlist__btn:focus-visible {
  outline-color: var(--bg);
}

/* <main> only receives focus programmatically (via the skip link); we
   don't want a giant cream outline wrapping the entire page contents
   when the user lands there. Screen readers still announce the
   landmark, which is the actual user-facing feedback. */
main:focus,
main:focus-visible {
  outline: none;
}

/* ============================================================
   prefers-reduced-motion
   ============================================================
   Users with vestibular disorders, migraines, attention sensitivity,
   or just personal preference can request reduced motion at the OS
   level. We respect that:
   - The 4.7s intro splash is skipped entirely — no roll-up, no
     auto-playing video, no scroll lock. Page content is reachable
     from the first paint.
   - The hero waitlist appears immediately (CSS rule + JS sets the
     .wl-revealed class on load when reduced-motion is requested).
   - Section reveals still happen (IntersectionObserver fires the
     class on scroll), but the per-element CSS transitions snap
     instead of easing.
   - Smooth scrolling is disabled to prevent dizziness on anchor jumps.
   The blanket *,*::before,*::after rule is the "nuclear option" from
   accessibility-engineering.com — it sets ALL author animations and
   transitions to ~0 duration without removing them entirely (so
   final visual states still apply). */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }

  html { scroll-behavior: auto; }

  /* Make the hero waitlist visible from page load — bypasses the
     JS-controlled fade-in that runs on scroll/timer. */
  .screen--1 .waitlist {
    opacity: 1;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Shared animation keyframes ----------
   Used by multiple sections. Defined once here so the section
   files only own their selectors, not the timing primitives. */

@keyframes rise-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes draw {
  /* opacity:1 in both keyframes is a no-op for paths that don't set
     opacity:0 initially. For paths that DO (e.g. .circle), it lets
     them stay invisible until the draw animation kicks in — avoiding
     the small "ghost dot" stroke-linecap:round leaves at the path's
     start point before the line is drawn. */
  from { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}