/* ── Home Layout ── */
html, body {
  overflow: hidden;
}

body {
  font-family: 'DM Serif Display', Georgia, serif;
}

.page {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
}

/* ── Logo ── */
.logo {
  width: clamp(90px, 16vw, 140px);
  height: auto;
  margin-bottom: 3rem;
  opacity: 0;
  animation: fadeUp 1.2s 0.3s ease forwards;
}

/* ── Statement ── */
.statement {
  width: 100%;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  max-width: 600px;
}

.statement__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.statement__line {
  grid-area: 1 / 1;
  min-width: 0;
  color: #5e5e5e;
}

/* Line 1 — fades up plainly (same technique as everything else on the
   page), holds through the word cycle, then exits. Duration stretched
   so it settles in more gradually. */
.statement__line--1 {
  opacity: 0;
  animation:
    lineEnter 2.6s 1.2s ease forwards,
    lineExit 1s 9.2s ease forwards;
}

/* Line 2 — hidden until line 1 exits, then settles in and stays */
.statement__line--2 {
  opacity: 0;
  animation: lineEnter 1.6s 9.8s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

/* ── Word cycle (anything / something / everything) ──
   Box is measured once to the widest word and never resizes — that's
   what keeps "else." from moving. Right-aligned, so any leftover
   space for shorter words sits before the word, not after it. */
.word-cycle {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  text-align: right;
}

/* Starts gray with the rest of the sentence, then turns teal early —
   well before the sentence itself finishes settling in. Stays teal
   for every word swapped in after that (js/hero.js only ever changes
   the text, never this element, so the color animation runs once). */
.word-cycle__text {
  display: inline-block;
  color: #5e5e5e;
  transition: opacity 0.28s ease, transform 0.28s ease;
  animation: wordActivate 0.6s 2.2s ease forwards;
}

/* ── Divider ── */
.line {
  width: 35px;
  height: 1px;
  margin: 2.8rem auto;
  background: rgba(26, 127, 160, 0.1);
  animation: revealLine 3s 2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

/* ── Breath module doubles as the "explore" hint on home ── */
.breath-wrap {
  animation: breathAppear 1s 12.2s ease forwards;
}

/* ── Nav — items reveal one by one, as the story's payoff ── */
.nav {
  opacity: 1;
  animation: none;
  transform: translate(-50%, 0);
}

.nav a {
  opacity: 0;
  animation: navItemUp 0.8s ease forwards;
}

.nav a:nth-child(1) { animation-delay: 12.4s; }
.nav a:nth-child(2) { animation-delay: 12.6s; }
.nav a:nth-child(3) { animation-delay: 12.8s; }

/* ── Home Keyframes ── */
@keyframes lineExit {
  to { opacity: 0; }
}

@keyframes lineEnter {
  to { opacity: 1; }
}

@keyframes revealLine {
  to { background: var(--teal); }
}

@keyframes wordActivate {
  to { color: #0d5b82; }
}

@keyframes navItemUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .statement__line--1,
  .statement__line--2,
  .word-cycle,
  .word-cycle__text,
  .breath-wrap,
  .nav a {
    animation: none;
    transition: none;
  }
  .statement__line--1 { opacity: 0; }
  .statement__line--2 { opacity: 1; color: #5e5e5e; }
  .word-cycle { width: auto; }
  .breath-wrap { opacity: 1; }
  .nav a { opacity: 1; }
}