/* Hero marquee panel and the scrolling client logo rail. */

.hero-shell {
  width: 100%;
  margin-inline: auto;
  padding-top: 0;
}

.hero-panel {
  position: relative;
  min-height: min(700px, calc(100vh - 22px));
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--warm);
  border: 1px solid rgba(26, 23, 16, 0.22);
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 88px 26px 26px;
  z-index: 3;
  border: 1px solid rgba(251, 247, 238, 0.28);
  border-radius: var(--radius);
  pointer-events: none;
}

.hero-marquee {
  --bulb-size: clamp(4px, 0.7vw, 6px);
  --bulb-gap: clamp(22px, 3vw, 30px);
  --bulb-inset: clamp(12px, 1.8vw, 18px);
  --marquee-bulb-rail: radial-gradient(
    circle,
    var(--marquee-bulb-lit) 0 var(--bulb-size),
    var(--marquee-bulb-clear) calc(var(--bulb-size) + 0.7px)
  );
  position: absolute;
  inset: 88px 26px 26px;
  z-index: 4;
  overflow: hidden;
  border-radius: var(--radius);
  display: grid;
  place-items: stretch;
  padding: clamp(26px, 4vw, 42px);
  background: var(--black);
  box-shadow:
    inset 0 0 0 1px rgba(200, 149, 42, 0.4),
    0 24px 54px rgba(26, 23, 16, 0.26);
  isolation: isolate;
  /* size container so the rail spacing below can be derived from the board's
     own height (cqh) — that keeps the full sign on the board instead of
     scaling rails off viewport width and overflowing tall content. */
  container-type: size;
}

.hero-marquee::before,
.hero-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 4px var(--marquee-bulb-glow-soft));
}

/* Split rails keep the corner bulbs from stacking or clipping. */
.hero-marquee::before {
  inset: var(--bulb-inset);
  background-image:
    var(--marquee-bulb-rail),
    var(--marquee-bulb-rail);
  background-repeat: space no-repeat, space no-repeat;
  background-position: left top, left bottom;
  background-size:
    var(--bulb-gap) calc(var(--bulb-size) * 2),
    var(--bulb-gap) calc(var(--bulb-size) * 2);
}

.hero-marquee::after {
  inset: calc(var(--bulb-inset) + (var(--bulb-gap) * 0.7)) var(--bulb-inset);
  background-image:
    var(--marquee-bulb-rail),
    var(--marquee-bulb-rail);
  background-repeat: no-repeat space, no-repeat space;
  background-position: left top, right top;
  background-size:
    calc(var(--bulb-size) * 2) var(--bulb-gap),
    calc(var(--bulb-size) * 2) var(--bulb-gap);
}

/* The reader board itself — a cream sign face slotted with horizontal rails.
   Content rows are whole-rail multiples and the top padding is a half-rail
   multiple, so every row boundary lands on a rail groove: the letters slot in. */
.marquee-sign {
  /* The sign is 14 rails tall (2.5 pad + kicker 1 + 1 + headline 5 + 1 +
     actions 2 + 1.5 pad). Sizing the rail off the board height (100cqh / 15)
     keeps all 14 rows on the board with ~1 rail of slack, at any width. */
  --rail-gap: clamp(22px, calc(100cqh / 15), 46px);
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: calc(var(--rail-gap) * 2.5) clamp(24px, 5vw, 60px) calc(var(--rail-gap) * 1.5);
  color: var(--black);
  text-align: center;
  border-radius: 3px;
  background-color: var(--paper);
  background-image:
    /* full-board marquee rails: a groove + lit lip centered in every slat */
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(var(--rail-gap) * 0.5 - 1.5px),
      rgba(26, 23, 16, 0.18) calc(var(--rail-gap) * 0.5 - 1.5px),
      rgba(26, 23, 16, 0.18) calc(var(--rail-gap) * 0.5),
      rgba(255, 255, 255, 0.72) calc(var(--rail-gap) * 0.5),
      rgba(255, 255, 255, 0.72) calc(var(--rail-gap) * 0.5 + 1.5px),
      transparent calc(var(--rail-gap) * 0.5 + 1.5px),
      transparent var(--rail-gap)
    ),
    radial-gradient(140% 86% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.5), rgba(241, 234, 223, 0.55));
  box-shadow:
    inset 0 0 0 1px rgba(26, 23, 16, 0.55),
    inset 0 0 26px rgba(26, 23, 16, 0.1),
    0 12px 30px rgba(26, 23, 16, 0.3);
}

/* "Now Playing" plaque seated in a single rail channel. */
.marquee-kicker {
  width: min(340px, 100%);
  height: var(--rail-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--rail-gap);
  padding: 0 18px;
  color: var(--warm);
  background: var(--red);
  border: 1px solid rgba(26, 23, 16, 0.84);
  box-shadow: 0 2px 0 rgba(26, 23, 16, 0.42);
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Headline: stacked rows, each two rails tall, with a one-rail channel between
   the words; the trimmed bottom margin keeps the board's total height (and the
   actions' groove) unchanged. container-type makes this the sizing reference
   for the letters below, so the caps can scale to the board width (via cqw). */
.marquee-headline {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  width: 100%;
  max-width: 1080px;
  margin: 0 0 var(--rail-gap);
  text-transform: uppercase;
}

/* Each line spans two rail channels; the letters are seated on the lower rail.
   min-height:0 stops the flex line from growing to the oversized glyphs — it
   keeps its two-rail height and lets the tall caps overflow visually instead. */
.marquee-line {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: calc(var(--rail-gap) * 2);
  min-height: 0;
}

/* Plastic letters: solid glossy faces slotted onto the rails (no shadow).
   Real font metrics (measured from Bricolage Grotesque 800) drive the seat:
     --cap-ratio: cap-height / em = 0.66 (so cap-height = font-size * 0.66).
     --cap-span:  rails the capitals should fill (2 = a full two-row slot).
   Size is the SMALLER of "caps fill --cap-span rails" and "text fills the
   board width" (14.3cqw ~= the headline's longest line). The width clamp keeps
   the long headline from overflowing; the rail clamp keeps it from exceeding
   two rows. text-box-trim then trims the box to the true cap-top and alphabetic
   baseline, so the box edges ARE the letter edges: baseline seats in the lower
   rail groove and the cap-top meets the upper rail — no magic nudge. */
.marquee-line-text {
  --cap-ratio: 0.66;
  --cap-span: 2;
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: min(calc(var(--rail-gap) * var(--cap-span) / var(--cap-ratio)), 14.3cqw);
  line-height: 1;
  letter-spacing: 0.012em;
  color: #181410;
  background-image: linear-gradient(177deg, #453d31 0%, #1d1a12 50%, #060503 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

.marquee-line-text--punctuated {
  padding-right: 0.13em;
}

.marquee-comma {
  position: absolute;
  right: 0;
  bottom: -0.23em;
  display: block;
  line-height: 1;
  color: #181410;
  background-image: linear-gradient(177deg, #453d31 0%, #1d1a12 50%, #060503 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fallback for engines without text-box-trim: with line-height 1 and this
   font's ascent/descent (930/-270 per 1000), the baseline sits 0.17em above
   the line-box bottom, so nudging down 0.17em drops it onto the lower rail. */
@supports not (text-box-edge: cap alphabetic) {
  .marquee-line-text {
    transform: translateY(0.17em);
  }
}

.marquee-sign .hero-actions {
  height: calc(var(--rail-gap) * 2);
  align-items: center;
  margin: 0;
}

/* Client logo rail (filmstrip marquee) */
.logo-rail {
  position: relative;
  margin-top: 18px;
  padding: 0;
  border-block: 2px solid var(--black);
  background:
    linear-gradient(90deg, rgba(200, 149, 42, 0.18), transparent 20%, transparent 80%, rgba(184, 35, 26, 0.2)),
    var(--black);
  overflow: hidden;
}

.logo-rail-track {
  position: relative;
  display: flex;
  width: max-content;
  padding: 16px 0;
  background: var(--black);
  animation: filmstrip-scroll 28s linear infinite;
  will-change: transform;
}

.logo-rail-track::before,
.logo-rail-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 10px;
  background-image: radial-gradient(circle, var(--warm) 0 3px, transparent 3.4px);
  background-position: 0 50%;
  background-size: 28px 10px;
  opacity: 0.86;
  pointer-events: none;
}

.logo-rail-track::before {
  top: 4px;
}

.logo-rail-track::after {
  bottom: 4px;
}

.logo-rail-set {
  display: flex;
  flex: 0 0 auto;
}

.logo-rail span {
  position: relative;
  flex: 0 0 clamp(156px, 18vw, 226px);
  min-height: 70px;
  display: grid;
  place-items: center;
  padding: 0 20px;
  border-inline: 2px solid var(--black);
  background: var(--paper);
  color: rgba(26, 23, 16, 0.58);
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.logo-rail span::before {
  content: "";
  position: absolute;
  inset: 9px 8px;
  border: 1px solid rgba(26, 23, 16, 0.16);
  pointer-events: none;
}

/* Static, centered filmstrip: three real client frames */
.logo-rail-static .logo-rail-track {
  width: 100%;
  justify-content: center;
  animation: none;
}

.logo-cell {
  flex: 0 0 clamp(180px, 24vw, 260px);
  min-height: 96px;
}

.client-logo {
  max-height: 60px;
  max-width: 168px;
  width: auto;
  object-fit: contain;
}

.client-logo--hive {
  max-height: 58px;
  max-width: 96px;
}

.logo-cell--script .client-wordmark {
  font-family: "Great Vibes", "Fraunces", cursive;
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  line-height: 1;
  color: var(--black);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .logo-rail-static .logo-rail-track {
    overflow-x: auto;
    justify-content: flex-start;
  }
}

@keyframes filmstrip-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-33.333333%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-rail {
    overflow-x: auto;
  }

  .logo-rail-track {
    animation: none;
  }
}

@media (max-width: 980px) {
  .hero-panel {
    min-height: min(720px, calc(100vh - 18px));
  }
}

@media (max-width: 760px) {
  .hero-panel {
    min-height: clamp(520px, calc(100vh - 16px), 620px);
  }

  .hero-panel::before {
    inset: 82px 14px 16px;
  }

  .hero-marquee {
    inset: 82px 14px 16px;
    padding: clamp(20px, 5vw, 30px);
    --bulb-inset: 12px;
  }

  .marquee-sign {
    padding-inline: 18px;
  }

  .marquee-kicker {
    font-size: 0.78rem;
  }

  .logo-rail {
    margin-top: 12px;
  }

  .logo-rail-track {
    padding: 14px 0;
  }

  .logo-rail span {
    flex-basis: 148px;
    min-height: 62px;
    padding: 0 14px;
    font-size: 0.82rem;
  }
}

@media (max-width: 520px) {
  .hero-panel {
    min-height: clamp(500px, calc(100vh - 14px), 590px);
  }

  .hero-panel::before,
  .hero-marquee {
    inset: 78px 10px 12px;
  }

  .hero-marquee {
    padding: clamp(16px, 5vw, 24px);
    --bulb-inset: 10px;
    --bulb-gap: 22px;
  }

  .marquee-sign {
    padding-inline: 14px;
    box-shadow:
      inset 0 0 0 1px rgba(26, 23, 16, 0.5),
      inset 0 0 18px rgba(26, 23, 16, 0.1),
      0 10px 24px rgba(26, 23, 16, 0.28);
  }

  .marquee-kicker {
    width: min(250px, 100%);
    font-size: 0.72rem;
  }
}

@media (max-width: 430px) {
  .hero-panel {
    min-height: clamp(500px, calc(100vh - 14px), 590px);
  }
}