/* ══════════════════════════════════════
 *  MICRO TIDES — Coming Soon
 *  style.css
 * ══════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; padding: 0; cursor: pointer; }

/* ── Tokens ── */
:root {
  --deep:    #0B1D33;
  --warm:    #F0E8DA;
  --serif-1: #6B7D8D;
  --serif-2: #4A5E6E;
  --serif-3: #3A4D5C;
}

/* ── Page ── */
html, body { background: var(--deep); }

.page {
  background: var(--deep);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6vh 7vw;
  font-size: clamp(1.1rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
}

/* Offset compensates for the logo/brand-group being visually wider than
   the text lines — centers on the manifesto text, not the brand group. */
.content-wrap {
  width: fit-content;
  transform: translateX(-2.65em);
}

/* ── Typography ── */
.serif {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
.serif-1 { color: var(--serif-1); }
.serif-2 { color: var(--serif-2); }
.serif-3 { color: var(--serif-3); }

.nav {
  font-family: 'SN Pro', 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  color: var(--warm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: default;
}
.nav[data-hover] { cursor: pointer; }

/* CTA link needs relative positioning for paper planes */
#cta { position: relative; display: inline-block; text-align: left; min-width: 4.5em; }

/* ── Layout ── */
.line          { margin-bottom: 1.3em; white-space: nowrap; }
.line--indented { padding-left: 4.5em; }

/* CTA line: undo content-wrap's translateX so it centers on page axis.
   content-wrap shifts left by -2.65em, so we shift right by +2.65em. */
#line-5 {
  text-align: center;
  transform: translateX(3.5em);
}

/* ── Brand ── */
.brand-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: bottom;
}

.logo {
  margin-bottom: 0.5em;
  width: 3.5em;
  height: auto;
  opacity: 0.7;
}

/* ── Paper planes (spawned by JS after end-state) ── */
.paper-plane {
  position: absolute;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--warm);
  opacity: 0; /* GSAP controls visibility */
}

/* ── Replay ── */
.footer {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
}

.replay-btn {
  width: 2rem;
  height: 2rem;
  opacity: 0;
  color: var(--serif-3);
  transition: opacity 0.4s ease;
}
.replay-btn:hover { opacity: 0.9; }
.replay-btn svg   { width: 100%; height: 100%; display: block; }

/* ── Progressive enhancement (JS loaded) ── */
.js .logo          { opacity: 0; }
.js .char          { opacity: 0; }
.js .nav .char     { opacity: 1; }
.js [data-tide]    { opacity: 0; }
.js .line-hidden   { visibility: hidden; }


/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .js .logo          { opacity: 0.7; }
  .js .char          { opacity: 1; }
  .js [data-tide]    { opacity: 1; }
  .js .line-hidden   { visibility: visible; }
}