:root {
  --bg: #200002;
  --ink: #f6e3d6;
  --muted: rgba(246, 227, 214, 0.45);

  --font-mono: "DM Mono", "Courier New", monospace;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;

  --topbar-h: clamp(3.5rem, 6vw, 4.75rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--font-mono);
  overflow-x: hidden;
}

/* --- Scroll stage -----------------------------------------------------------
   The hero stays pinned (position: sticky) for the height of this wrapper,
   giving scroll a runway to drive the headline/subline exit and the nav +
   poem-list entrance before the page unpins and continues normally. */

.scroll-stage {
  height: 260vh;
  position: relative;
}

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* --- Top bar -------------------------------------------------------------- */
/* Hidden at rest — brought in on scroll by homepage.js once the headline /
   subline have cleared the screen. */

.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1vw, 1.1rem);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.top-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.top-bar span:nth-child(5) {
  margin-left: auto;
  margin-right: clamp(1rem, 4vw, 3rem);
}

.top-bar__mark {
  width: 1em;
  height: 1em;
  background: var(--ink);
  flex-shrink: 0;
}

/* --- Center line ------------------------------------------------------------
   Drawn top-to-bottom during the intro, then stays as a permanent element
   of the page (matches every homepage state in the Figma reference, not
   just the loading sequence). */

.center-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--muted);
  z-index: 1;
  animation: lineDraw 1400ms ease-in-out forwards;
  animation-delay: 1100ms;
}

@keyframes lineDraw {
  to {
    height: 100%;
  }
}

/* --- B / S monogram ---------------------------------------------------------
   Fades in together at center, holds while the line draws, then splits
   apart and fades out for good. */

.monogram {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.monogram__letter {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 18rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  animation-duration: 3600ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.monogram__letter--b {
  animation-name: monogramB;
}

.monogram__letter--s {
  animation-name: monogramS;
}

@keyframes monogramB {
  0% { left: 46%; opacity: 0; }
  26% { left: 46%; opacity: 1; }
  65% { left: 46%; opacity: 1; }
  100% { left: -10%; opacity: 0; }
}

@keyframes monogramS {
  0% { left: 54%; opacity: 0; }
  26% { left: 54%; opacity: 1; }
  65% { left: 54%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* --- Hero content ------------------------------------------------------------ */

.hero__name {
  position: absolute;
  top: 50%;
  left: clamp(1.25rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  z-index: 3;
  font-size: clamp(0.85rem, 1.1vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeIn 1000ms ease forwards;
  animation-delay: 6700ms;
}

/* Positioned on the wrapper; homepage.js fades this out once the poem
   list (which occupies the same right/mid-height spot) becomes visible. */
.hero__series-wrap {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  z-index: 3;
  transition: opacity 0.6s ease;
}

.hero__series {
  margin: 0;
  font-size: clamp(0.85rem, 1.1vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeIn 1000ms ease forwards;
  animation-delay: 7000ms;
}

.hero__stack {
  position: absolute;
  left: 50%;
  top: 50%;
  /* homepage.js only ever writes the --parallax-y custom property, never
     `transform` directly — otherwise its inline style would silently wipe
     out this centering translate. */
  transform: translate(-50%, -50%) translateY(var(--parallax-y, 0px));
  z-index: 4;
  width: clamp(160px, 15vw, 296px);
  aspect-ratio: 1200 / 1490; /* matches the source photos */
}

.sheet {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: fadeIn 900ms ease forwards;
}

/* Each sheet lands ~600ms after the last, building the stack up one
   photo at a time rather than all three appearing at once. */
.sheet--1 {
  animation-delay: 2600ms;
}

.sheet--2 {
  transform: rotate(-11.97deg);
  animation-delay: 4000ms;
}

.sheet--3 {
  transform: rotate(9.11deg);
  animation-delay: 5000ms;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Headline / subline ------------------------------------------------------
   Each is a clipping mask (JS-driven scroll transform lives here) around
   the actual text (CSS mask-reveal animation lives here) — kept on two
   elements so the one-shot reveal animation and the continuous
   scroll-driven transform never fight over the same property. */

.hero__headline-mask,
.hero__subline-mask {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  will-change: transform, opacity, filter;
}

.hero__headline-mask {
  left: clamp(1.25rem, 3vw, 2.5rem);
  top: clamp(1.25rem, 3vw, 2.5rem);
}

.hero__subline-mask {
  right: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
}

/* Each line gets its own clipping mask so it reveals independently,
   top line first — the outer .hero__headline-mask/.hero__subline-mask
   above only ever handles the scroll-driven exit for the block as a
   whole. */
.mask-line {
  overflow: hidden;
}

.hero__headline,
.hero__subline {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  transform: translateY(110%);
  animation: maskDown 2100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__headline {
  font-size: clamp(2.25rem, 7vw, 7rem);
  line-height: 1.05;
}

.hero__subline {
  font-size: clamp(2rem, 6.5vw, 6.5rem);
  line-height: 1;
  animation-delay: 5600ms;
}

/* Top to bottom, ~300ms apart. */
.hero__headline-mask .mask-line:nth-child(1) .hero__headline {
  animation-delay: 3600ms;
}

.hero__headline-mask .mask-line:nth-child(2) .hero__headline {
  animation-delay: 4000ms;
}

@keyframes maskDown {
  to {
    transform: translateY(0);
  }
}

/* --- Poem list ---------------------------------------------------------------
   Hidden at rest, revealed one line at a time once the headline/subline
   have scrolled off (triggered by homepage.js). */

.hero__poems {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.5rem);
  top: 50%;
  /* Same reasoning as .hero__stack above — parallax only ever writes
     --parallax-y, composing with this centering translate rather than
     replacing it. */
  transform: translateY(-50%) translateY(var(--parallax-y, 0px));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: clamp(0.85rem, 1.1vw, 1.1rem);
  text-align: right;
}

.hero__poems .poem-line {
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero__poems.is-visible .poem-line {
  opacity: 1;
  transform: translateY(0);
}

.hero__poems .poem-line:nth-child(1) { transition-delay: 0ms; }
.hero__poems .poem-line:nth-child(2) { transition-delay: 90ms; }
.hero__poems .poem-line:nth-child(3) { transition-delay: 180ms; }
.hero__poems .poem-line:nth-child(4) { transition-delay: 270ms; }
.hero__poems .poem-line:nth-child(5) { transition-delay: 360ms; }
.hero__poems .poem-line:nth-child(6) { transition-delay: 450ms; }
.hero__poems .poem-line:nth-child(7) { transition-delay: 540ms; }
.hero__poems .poem-line:nth-child(8) { transition-delay: 630ms; }
.hero__poems .poem-line:nth-child(9) { transition-delay: 720ms; }

a.poem-line {
  transition: opacity 0.6s ease, transform 0.6s ease, color 0.25s ease;
}

a.poem-line:hover,
a.poem-line:focus-visible {
  color: var(--muted);
}

span.poem-line {
  color: var(--muted);
  cursor: default;
}

/* --- Scroll cursor -------------------------------------------------------------
   Custom "SCROLL" ring cursor, shown over the hero once the intro sequence
   has fully finished (homepage.js listens for the last intro animation to
   end). Position is JS-driven (mousemove -> transform: translate() on the
   outer element); the gentle pulse lives on the inner element's own
   transform: scale() so the two never fight over the same property — same
   reasoning as the headline/subline mask split elsewhere in this file.

   The native cursor is only hidden while the ring is actually standing in
   for it — homepage.js toggles this class in the exact same render() call
   that shows/hides the ring, so the two can never drift out of sync (e.g.
   leaving the cursor invisible after scrolling past the top, when the
   ring has hidden itself but nothing was left to restore it). */

.hero.hero--cursor-active {
  cursor: none;
}

.scroll-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 108px;
  height: 108px;
  margin: -54px 0 0 -54px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 50;
}

.scroll-cursor.is-visible {
  opacity: 1;
}

.scroll-cursor__ring {
  width: 100%;
  height: 100%;
  border: 1px solid var(--muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  animation: scrollCursorPulse 2.4s ease-in-out infinite;
}

@keyframes scrollCursorPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* --- Accessibility / reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .scroll-stage {
    height: auto;
  }

  .hero {
    position: relative;
  }

  .monogram {
    display: none;
  }

  .center-line {
    animation: none;
    height: 100%;
  }

  .sheet,
  .hero__name {
    animation: none;
    opacity: 1;
  }

  .hero__headline-mask,
  .hero__subline-mask {
    display: none;
  }

  /* Poems (and nav) are visible immediately under reduced motion — see
     homepage.js's revealImmediately() — so the series label, which shares
     this same screen position, stays hidden rather than overlapping it. */
  .hero__series-wrap {
    display: none;
  }

  .top-bar,
  .hero__poems,
  .hero__series-wrap {
    transition: none;
  }

  /* The pulsing "encourage to scroll" cursor is exactly the kind of
     motion this preference asks us to skip — homepage.js never initializes
     it (and so never adds .hero--cursor-active) under reduced motion, this
     is just the visual backstop. */
  .scroll-cursor {
    display: none;
  }
}

/* Arriving from a poem page's "Breathing Underwater" link (href
   ../index.html#poems) — homepage.js adds this class when it sees that
   hash. The intro has already been seen; skip straight to the poem list
   rather than replaying a multi-second animation the visitor didn't ask
   for. Deliberately the same treatment as prefers-reduced-motion above,
   just triggered by navigation instead of an OS setting — kept as a
   separate block (rather than merged into that selector) so each stays
   independently correct if one changes later. */
html.skip-intro .scroll-stage {
  height: auto;
}

html.skip-intro .hero {
  position: relative;
}

html.skip-intro .monogram {
  display: none;
}

html.skip-intro .center-line {
  animation: none;
  height: 100%;
}

html.skip-intro .sheet,
html.skip-intro .hero__name {
  animation: none;
  opacity: 1;
}

html.skip-intro .hero__headline-mask,
html.skip-intro .hero__subline-mask {
  display: none;
}

html.skip-intro .hero__series-wrap {
  display: none;
}

html.skip-intro .top-bar,
html.skip-intro .hero__poems,
html.skip-intro .hero__series-wrap {
  transition: none;
}

html.skip-intro .scroll-cursor {
  display: none;
}

@media (max-width: 760px) {
  .hero__headline {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }

  .hero__subline {
    font-size: clamp(1.75rem, 9vw, 3rem);
  }

  .hero__series {
    display: none;
  }

  /* Mid-height (the desktop position) puts a 6-line list right behind the
     paper stack on a narrow screen. Anchor to the bottom instead — free
     space by the time this reveals, since the subline that lived there
     has already scrolled out. */
  .hero__poems {
    top: auto;
    bottom: clamp(1.5rem, 5vw, 3rem);
    transform: translateY(var(--parallax-y, 0px));
    font-size: 0.95rem;
  }
}