/* Hero intro (docs/04-hero-animation.md). Tokens, reset and grain live in base.css.
   Keep the invariants listed in the docs when changing anything here. */

:root {
  --letter-size: clamp(2.6rem, 12.5vw, 11rem);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vh, 3rem);
  overflow: hidden;
}

.hero-word {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
  width: 92vw;
  max-width: 1700px;
}

/* phase A — single inline line: rows sit side by side */
.hero-word.-inline {
  flex-direction: row;
}

/* phase B — rows stack top / bottom, media opens */
.hero-word.-open {
  flex-direction: column;
}

.hero-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.025em;
  flex: 0 0 auto;
}

.letter {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  color: var(--burgundy);
  font-size: var(--letter-size);
  line-height: 1;
  display: inline-block;
  will-change: transform, opacity;
  flex: 0 0 auto;
  opacity: 0;
}

/* ---------- media slots (placeholders for photo/video) ---------- */

.media-slot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.78em;
  font-size: var(--letter-size);
  width: 0;
  margin: 0;
  overflow: hidden;
  will-change: width, opacity;
}

.hero-word.-open .media-slot.-photo-lg { width: 0.95em; margin: 0 0.32em; }
.hero-word.-open .media-slot.-photo-sm { width: 0.6em;  margin: 0 0.32em; }
.hero-word.-open .media-slot.-video    { width: 2.1em;  margin: 0 0.4em; }

.media-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(216,197,159,0.18), rgba(110,41,39,0.25) 55%, rgba(8,7,6,0.9)),
    linear-gradient(0deg, var(--brown), var(--black));
  border: 1px solid rgba(242,235,221,0.18);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.5em;
  opacity: 0;
  transform: scale(1.15);
  will-change: transform, opacity;
}

.hero .media-label {
  font-family: var(--font-body);
  font-size: 0.11em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--butter);
  opacity: 0.85;
  white-space: nowrap;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--butter);
  opacity: 0;
}

/* Phones (build step 2): media windows taller than the letters, with the desktop's aspect
   ratios (01 1.22, 02 0.77, FILM 2.69), and letters sized so the wider bottom row
   (O [FILM] N A, 6.42 letter sizes wide) fills the screen width minus 20px margins. A fixed
   gap between the rows. Both rows stay equally tall (every row holds media of the same
   height), so the split's nudge formula (rowHeight + rowGap) / 2 holds. row-gap only acts
   once the rows stack, so the inline wave is unchanged. */
@media (max-width: 699px) {
  :root {
    --letter-size: calc((100vw - 40px) / 6.48);
  }
  .hero-word {
    width: calc(100vw - 40px);
    row-gap: 16px;
  }
  .media-slot {
    height: 1.25em;
  }
  .hero-word.-open .media-slot.-photo-lg { width: 1.52em; }
  .hero-word.-open .media-slot.-photo-sm { width: 0.96em; }
  .hero-word.-open .media-slot.-video    { width: 3.37em; }
}