/* ── Header section ── */

.header {
  /* Music player (player.css): shader light spilling out of the bottom-right corner,
     --light across, with its controls --player-inset from the corner. The bottom row
     only reserves room for the controls; the light itself may drift under text.
     On phones the light becomes a full-width horizon band, --horizon tall, below
     the description instead. */
  --light: clamp(320px, 40vw, 760px);
  --controls-w: 300px;
  --controls-h: 36px;
  --player-inset: 32px;
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding-top: max(48px, env(safe-area-inset-top));
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Text sits above the light. */
.header > :not(.player) {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .header {
    --horizon: clamp(150px, 28dvh, 300px);
    --player-inset: 20px;
    --controls-h: 40px; /* stays comfortably tappable */
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
    /* Page scroll is locked on mobile; scroll the header itself on screens
       too short to fit everything (e.g. 320x568) instead of clipping widgets. */
    overflow-y: auto;
  }
}

/* ── Greeting area: optically centered between the logo wall and the bottom row ── */

.header__greetings {
  /* Grow into spare height but never shrink below the text, or the
     description overlaps the greetings on short (landscape) viewports. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  cursor: default;
}

/* Two spacers share the free height between the logos and the bottom row. The top one
   gets a little less (0.85 : 1), so the lines sit at ~47% of the gap, just above the
   mathematical middle, where the eye reads "centered". The basis keeps some air on
   screens with no spare height. No font-metric correction is needed: at line-height
   0.95, Timeless Serif leaves 0.113em above the capitals and 0.118em below the
   baseline, so the line boxes already center the ink to within a pixel. */
.header__greetings::before,
.header__greetings::after {
  content: '';
  flex: 1 0 clamp(24px, 6vh, 64px);
}

.header__greetings::before {
  flex-grow: 0.85;
}

/* Shared line styles */

.header__greeting-line {
  /* Clip only the horizontal marquee overflow; line-height: 1 puts comma
     tails and other descenders outside the line box, so they must stay visible. */
  overflow-x: clip;
  overflow-y: visible;
  white-space: nowrap;
  animation: greeting-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.header__greeting-line--2 {
  animation-delay: 0.12s;
}

/* On load each line rises in while its ink settles from hairline to the final weight. */
@keyframes greeting-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes ink-settle {
  from {
    font-weight: 200;
  }
}

.header__greeting-text {
  display: inline-block;
  font-family: var(--font-serif);
  font-variation-settings: 'STYL' 0; /* display Serif cut, not Text */
  /* Light, tightly set display serif, as on timeless.co */
  font-weight: 300;
  font-size: clamp(60px, 10.4vw, 200px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fg);
  white-space: nowrap;
}

/* A word leans in (gets heavier) under the cursor. */
.header__greeting-word {
  transition: font-weight 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.4s ease;
}

.header__greeting-word:hover {
  font-weight: 500;
}

/* ── Hover marquee: line 1 drifts left, line 2 right ──
   Driven by main.js (initMarquee) so it can ease in and out and stay seamless while
   hovered words change width. Line 2 starts one copy in; this transform is the no-JS
   resting position and main.js takes over from it. */

.header__greeting-line--1 .header__greeting-text {
  animation: ink-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.header__greeting-line--2 .header__greeting-text {
  transform: translateX(-33.333%);
  animation: ink-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}

/* ── Bottom row ── */

.header__bottom {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  /* Keep the description clear of the player controls on its right. */
  padding: 0 calc(var(--controls-w) + var(--player-inset) + 24px) 48px 48px;
}

/* ── Role: a small uppercase Paper Mono caption above the description ── */

.header__role {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}

/* ── Description ── */

.header__description {
  font-family: var(--font-sans);
  font-variation-settings: 'STYL' 0; /* Grotesk cut */
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.019em;
  color: var(--fg);
  max-width: 1120px;
  margin: 0;
}

/* ── Responsive ── */

@media (max-width: 900px) {
  /* Too narrow to sit side by side: the controls go below the description instead. */
  .header__bottom {
    padding: 0 24px calc(var(--controls-h) + var(--player-inset) + 28px);
  }
}

@media (max-width: 600px) {
  .header__greeting-text {
    font-size: clamp(52px, 16vw, 90px);
  }

  /* The horizon band is reserved with a margin, not padding: padding would make the
     text row cover the band and swallow the touches that stir the light. */
  .header__bottom {
    margin-bottom: var(--horizon);
    padding: 0 20px 8px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Keep the role on one line down to 320px wide. */
  .header__role {
    font-size: clamp(10.5px, 3.3vw, 12px);
    letter-spacing: 0.02em;
  }

  .header__description {
    font-size: clamp(18px, 5vw, 26px);
  }
}