/* ============================================================================
   SushiSwim — SITE STYLES
   ----------------------------------------------------------------------------
   Layered, in this order, and please keep it that way:

     1. RESET      — flatten browser defaults
     2. BASE       — document-level typography and background
     3. LAYOUT     — the single centred column
     4. COMPONENTS — hero, wordmark, welcome
     5. STATE      — focus, motion, print
     6. FUTURE     — reserved mount point for the fishtank

   No raw values live here. Everything refers to a token in tokens.css.
   ========================================================================= */


/* == 1. RESET ============================================================= */

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

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

body, h1, p, figure { margin: 0; }

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


/* == 2. BASE ============================================================== */

html, body { min-height: 100%; }

body {
  background:
    linear-gradient(
      180deg,
      var(--surface)      0%,
      var(--surface-deep) 100%
    );
  background-attachment: fixed;

  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* == 3. LAYOUT ============================================================
   One column. Centred. No navigation, no sidebar, no drawer, no overlay.
   There is nowhere else to go, and that is the design.
   ======================================================================== */

.page {
  min-height: 100svh;                /* svh avoids mobile URL-bar jump */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);

  padding: var(--sp-5) var(--sp-3);
  text-align: center;
}

.page > * { max-width: min(100%, 60rem); }


/* == 4. COMPONENTS ======================================================== */

/* --- 4.1 Hero -----------------------------------------------------------
   The artwork is the page. It is never cropped, never a background image,
   never overlaid with text. It gets a real <img> so it is savable, zoomable,
   and legible to assistive technology.
   ---------------------------------------------------------------------- */

.hero {
  width: 100%;
  max-width: 52rem;
  border-radius: var(--radius);
  overflow: hidden;

  /* A soft lift, not a hard drop shadow. */
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(10, 55, 66, 0.35);

  animation: settle var(--dur-settle) var(--ease-calm) both;
}

.hero img {
  width: 100%;
  animation: drift var(--dur-drift) var(--ease-calm) infinite;
}


/* --- 4.2 Wordmark -------------------------------------------------------
   NAMING: the text node in index.html is the single source of truth for
   "SushiSwim" vs "Sushi Swim". Changing it is a one-word edit in one file.
   ---------------------------------------------------------------------- */

.wordmark {
  font-size: var(--t-wordmark);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wordmark);
  font-weight: 700;
  color: var(--text);

  animation: settle var(--dur-settle) var(--ease-calm) 0.15s both;
}


/* --- 4.3 Welcome -------------------------------------------------------- */

.question {
  font-size: var(--t-question);
  line-height: var(--lh-tight);
  color: var(--text-quiet);
  margin-top: calc(var(--sp-2) * -1);   /* pull toward the wordmark */

  animation: settle var(--dur-settle) var(--ease-calm) 0.3s both;
}

.welcome {
  max-width: var(--measure);
  margin-inline: auto;
  color: var(--text-quiet);
  text-wrap: pretty;                    /* avoids orphaned last words */

  animation: settle var(--dur-settle) var(--ease-calm) 0.45s both;
}

.welcome + .welcome { margin-top: var(--sp-3); }


/* --- 4.4 Colophon ------------------------------------------------------- */

.colophon {
  font-size: var(--t-quiet);
  color: var(--text-quiet);
  opacity: 0.7;
  margin-top: var(--sp-2);
}


/* == 5. STATE ============================================================= */

/* --- 5.1 Motion ---------------------------------------------------------
   One slow horizontal drift and one fade. Nothing scales the viewport,
   nothing strobes, nothing loops faster than three times a minute.
   ---------------------------------------------------------------------- */

@keyframes drift {
  0%, 100% { transform: translate3d(-0.6%, 0,      0); }
  50%      { transform: translate3d( 0.6%, -0.9%,  0); }
}

@keyframes settle {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* The visitor's operating system decides. We do not ask, and we do not
   override. Everything lands in its final position instantly. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- 5.2 Focus ----------------------------------------------------------
   No interactive elements exist yet. This is defined now so that the first
   control ever added to the page is keyboard-legible by default rather than
   by remembering. WCAG 2.2 focus appearance: >=2px, >=3:1 against adjacent.
   ---------------------------------------------------------------------- */

:focus-visible {
  outline: var(--ring) solid var(--c-focus);
  outline-offset: var(--ring);
  border-radius: calc(var(--radius) / 3);
}

:focus:not(:focus-visible) { outline: none; }


/* --- 5.3 Print ---------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .hero { box-shadow: none; }
  .hero img { animation: none; }
}


/* == 6. FUTURE ============================================================
   Reserved for the interactive fishtank.

   Constraints it must inherit, per the project charter:
     - opens only on deliberate visitor action; never on load
     - sound starts off and stays off until asked
     - honours prefers-reduced-motion via the block in 5.1
     - never traps focus, pointer, or the keyboard
     - always offers an immediate, unpunished way back to still water

   #tank is present but empty and [hidden] in the markup. Nothing renders
   into it until that experience is approved to build.
   ======================================================================== */

#tank[hidden] { display: none; }