/* 01 · Hero "Sunlit Paper" — Welle 2.5 Port (Bundle s01, Terminal C)
   Layout: Fullbleed-Plate, Meta oben am Viewport-Rand, riesiger Name unten links
   im Paper-Glow-Block, Colophon als 4-Zellen-Border-Grid am Boden.
   Plate als CSS-Background: url() ist relativ zu DIESER Datei,
   funktioniert deshalb in preview.html und in der integrierten index.html. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}

.hero__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper) url('../../assets/hero/hero-light-plate.jpg') 30% 0 / cover no-repeat;
  will-change: transform;
}

.hero__breath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Gradient-Overlay aus dem Bundle: paper (#F6F0E4) läuft nach unten zu,
   damit Colophon-Band und Name satt auf dem Foto sitzen */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(246, 240, 228, 0) 0%,
    rgba(246, 240, 228, 0.14) 55%,
    rgba(246, 240, 228, 0.55) 100%
  );
  pointer-events: none;
}

/* ---- Meta-Zeile am Viewport-Top: Kicker links, Lisboa-Uhr rechts ---- */
.hero__meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding: clamp(18px, 3vh, 34px) var(--px) 0;
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink); /* ink statt ink-soft: liegt auf der Foto-Plate */
  /* weicher paper-Halo (--paper #F6F0E4): hebt den Kicker aus dem
     Blatt-Schatten der Plate, ohne Layout/Farbe zu ändern */
  text-shadow: 0 0 10px rgba(246, 240, 228, 0.9), 0 0 26px rgba(246, 240, 228, 0.65);
}

.hero__kicker-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--coral);
  margin-right: 12px;
}

.hero__clock {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  /* gleicher paper-Halo wie .hero__kicker (Blatt-Schatten der Plate) */
  text-shadow: 0 0 10px rgba(246, 240, 228, 0.9), 0 0 26px rgba(246, 240, 228, 0.65);
}

/* ---- Name + Tagline unten links, margin-top:auto drückt sie an den Boden ---- */
.hero__stage {
  position: relative;
  z-index: 2;
  padding: 0 var(--px);
  margin-top: auto;
}

/* Paper-Glow-Block (Bundle-Technik): der Block strahlt Papier per box-shadow
   nach außen und macht den Namen auf der Plate lesbar, ohne harte Kante */
.hero__glow {
  width: fit-content;
  max-width: 100%;
  background: var(--paper);
  box-shadow:
    0 0 0 clamp(14px, 2.2vw, 32px) var(--paper),
    0 0 60px clamp(20px, 3vw, 48px) var(--paper);
  pointer-events: none;
}

.hero__name {
  margin-left: -0.05em;
  font-weight: 460;
  font-size: clamp(60px, 13.5vw, 224px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.hero__dot {
  color: var(--coral);
  display: inline-block;
}

.hero__tagline {
  margin: clamp(14px, 2.4vh, 28px) 0 0 clamp(2px, 0.4vw, 10px);
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 500;
  color: var(--ink);
}

/* Halt den zweiten Satz "I build my own tools." zusammen, nie mitten drin brechen */
.hero__nowrap {
  white-space: nowrap;
}

/* ---- Colophon-Band: Fullbleed-Border-Grid, 4 Zellen, ink-Hairlines ---- */
.hero__colophon {
  position: relative;
  z-index: 2;
  margin-top: clamp(36px, 7vh, 72px);
  border-top: 1px solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
}

.hero__cell {
  flex: 1 1 230px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: -1px; /* unterste Border verschwindet an der Sektionskante */
  padding: clamp(18px, 2.6vw, 30px) clamp(20px, 2.4vw, 34px);
}

.hero__cell-label {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero__cell-main {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.hero__cell-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}

/* Countdown-Zelle: große Fraunces-Ziffer in coral (34-56px = Large Text, 3.1:1 ok) */
.hero__cell--race .hero__cell-label {
  margin-bottom: 6px;
}

.hero__race-value {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1;
  color: var(--coral);
}

.hero__race-unit {
  font-family: var(--font-mono);
  font-size: 0.32em;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: 10px;
}

.hero__cell--race .hero__cell-sub {
  margin-top: 8px;
}

/* Scroll-Hint-Zelle */
.hero__cell--scroll {
  flex: 1 1 190px;
  display: flex;
  align-items: flex-end;
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none; /* Komponenten-Link, kein Fließtext-Underline */
}

.hero__scroll:hover {
  color: var(--coral-deep);
}

.hero__scroll-line {
  display: inline-block;
  width: 1px;
  height: 34px;
  background: var(--coral);
  transform-origin: top center;
}

/* ---- Responsive ---- */
/* Colophon-Zellen stapeln via flex-wrap von selbst (230px-Basis);
   nur die Plate-Position braucht bei schmalen Screens den Licht-Ausschnitt */
@media (max-width: 720px) {
  .hero__plate {
    background-position: 24% 0;
  }
}