/* Flagship hero: one full-screen film or photograph, optional centred logo +
   menu, optional brand name running across. Builds on campaign.css. */

.flagship {
  --flagship-ui: 0.625rem;
}

/* Dark text for light photographs (studio backdrops). */
.flagship.flagship--dark {
  color: var(--color-ink);
}

.flagship.flagship--dark .flagship__menu a {
  text-shadow: none;
}

.flagship.flagship--dark .campaign__button:hover {
  background: var(--color-ink);
  color: var(--color-on-media);
}

/* ---------- Centred logo + vertical menu ---------- */
.flagship__center {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding: 6rem var(--page-margin);
  text-align: center;
}

.flagship__logo {
  color: inherit;
  text-decoration: none;
}

.flagship__logo img {
  height: auto;
}

.flagship__wordmark {
  font-family: var(--font-heading--family);
  font-size: calc(clamp(1.5rem, 1rem + 1.5vw, 2.25rem) * var(--heading-scale));
  font-weight: var(--font-heading--weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.flagship__menu {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flagship__menu a {
  color: inherit;
  font-size: var(--flagship-ui);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgb(0 0 0 / 0.25);
}

.flagship__menu a:hover,
.flagship__menu a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* ---------- Headline + button ---------- */
.flagship__caption {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  align-self: end;
  gap: 0.75rem;
  max-width: 28rem;
  padding: 2rem var(--page-margin) 1.5rem;
}

.flagship__heading {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Brand name running across the media ---------- */
.flagship__marquee {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: 1;
  overflow: hidden;
  transform: translateY(-50%);
  pointer-events: none;
}

.flagship__marquee-track {
  display: flex;
  width: max-content;
  animation: flagship-marquee var(--flagship-marquee-speed, 30s) linear infinite;
}

.flagship__marquee-track span {
  padding-inline-end: 0.35em;
  font-family: var(--font-body--family);
  font-size: clamp(3.5rem, 1rem + 9vw, 10rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.flagship.is-paused .flagship__marquee-track {
  animation-play-state: paused;
}

body:not(.motion-on) .flagship__marquee-track {
  animation: none;
}

@keyframes flagship-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Sound + pause, bottom left ---------- */
.flagship__controls {
  position: absolute;
  right: var(--page-margin);
  bottom: 1.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.flagship__sound {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.flagship__sound svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.3;
}

.flagship__sound[aria-pressed='false'] .flagship__sound-on,
.flagship__sound[aria-pressed='true'] .flagship__sound-off {
  display: none;
}

.flagship__toggle {
  color: inherit;
  font-size: var(--flagship-ui);
}

@media (prefers-reduced-motion: reduce) {
  .flagship__marquee-track {
    animation: none;
  }
}