/* The working homepage's three-message introduction. */
.new-hero--slides {
  --hero-gutter: var(--page-gutter, 4vw);
  --hero-title-size: clamp(1.125rem, 5.8vw, 4.5rem);
  align-items: center;
  justify-content: center;
}

.new-hero--slides .new-hero__film {
  background: var(--color-hero-overlay);
}

.new-hero--slides .new-hero__content {
  width: calc(100% - var(--hero-gutter) - var(--hero-gutter));
  margin: 0 auto;
  padding: 0 64px 0 0;
  text-align: left;
}

.new-hero__slides {
  display: grid;
  align-items: center;
  min-width: 0;
}

.new-hero__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.new-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.new-hero--slides .new-hero__headline {
  --fs-h1: var(--hero-title-size);
  --fs-h2: var(--hero-title-size);
  --fw-heading: 500;
  --lh-h1: 1.16;
  --lh-h2: var(--lh-h1);
  --ls-h1: -.04em;
  --ls-h2: -.04em;
  max-width: none;
  margin: 0;
  color: var(--color-white);
  text-align: left;
  text-transform: none;
}

.new-hero--slides .new-hero__headline > .new-hero__line {
  display: block;
  white-space: nowrap;
  text-wrap: nowrap;
}

.new-hero--slides .new-hero__slide > .subline {
  width: auto;
  margin-inline: 0;
  justify-content: flex-start;
}

.new-hero--slides .new-hero__actions {
  display: flex;
  justify-content: flex-start;
  justify-items: start;
}

.new-hero__ui {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.hero-progress {
  --hero-progress: 0;
  --hero-trail-room: 0;
  --hero-track-size: 180px;
  position: absolute;
  top: 50%;
  right: var(--hero-gutter);
  width: 46px;
  height: var(--hero-track-size);
  transform: translateY(-50%);
}

.hero-progress__track {
  position: absolute;
  top: 0;
  right: 5.5px;
  height: 100%;
}

.hero-progress__track {
  width: 1px;
  background: color-mix(in srgb, var(--color-white) 28%, transparent);
  mask-image: linear-gradient(180deg, transparent, var(--color-white) 6%, var(--color-white) 94%, transparent);
}

.hero-progress__step {
  position: absolute;
  top: calc(var(--hero-step) * 100% / var(--hero-step-intervals, 1));
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--color-white) 42%, transparent);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}

.hero-progress__step::after {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-white) 45%, transparent);
  transform: translateY(-50%);
  content: '';
  transition: opacity .3s ease;
}

.hero-progress__step.is-active { color: var(--color-primary); }
.hero-progress__step.is-active::after { opacity: 0; }

.hero-progress__glow {
  position: absolute;
  top: calc(var(--hero-progress) * 100%);
  right: -6px;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-primary) 24%, transparent),
    transparent 70%);
  transform: translateY(-50%);
}

.hero-progress__fill {
  position: absolute;
  top: calc(var(--hero-progress) * 100%);
  right: 5.5px;
  width: 1px;
  height: min(44px, calc(var(--hero-trail-room) * var(--hero-track-size)));
  opacity: clamp(0, calc(var(--hero-trail-room) * 12), 1);
  /* A short mint wake follows the marker without overpowering the scale. */
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 20%, transparent) 45%,
    color-mix(in srgb, var(--color-primary) 75%, transparent));
  transform: translateY(-100%);
}

.hero-progress[data-direction="up"] .hero-progress__fill {
  transform: scaleY(-1);
}

.hero-progress__fill::before {
  position: absolute;
  inset: 0 -2px;
  background: inherit;
  filter: blur(2px);
  /* Fade the halo before the head, so it never shines ahead of the star. */
  mask-image:
    linear-gradient(180deg, transparent, var(--color-white) 40%, var(--color-white) 82%, transparent),
    linear-gradient(90deg, transparent, var(--color-white) 45%, var(--color-white) 55%, transparent);
  mask-composite: intersect;
  opacity: .35;
  content: '';
}

.hero-progress__star {
  position: absolute;
  top: calc(var(--hero-progress) * 100%);
  right: 0;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  -webkit-mask: var(--asset-star-01, url('../brand/logos/yildiz-01-transparent.svg')) center / contain no-repeat;
  mask: var(--asset-star-01, url('../brand/logos/yildiz-01-transparent.svg')) center / contain no-repeat;
  transform: translateY(-50%);
}

.new-hero__scroll-cue {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  left: var(--hero-gutter);
  bottom: 90px;
  color: var(--color-white);
  font-size: var(--fs-subline);
  font-weight: 700;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}

.new-hero__scroll-cue::before {
  width: 20px;
  height: 1px;
  background: var(--color-white);
  opacity: .5;
  content: '';
}

.new-hero__scroll-label {
  font-weight: 700;
  color: transparent;
  background: linear-gradient(100deg,
    var(--color-white) 0% 25%,
    var(--color-primary) 42%,
    var(--color-hero-progress-light) 50%,
    var(--color-primary) 58%,
    var(--color-white) 75% 100%);
  background-size: 400% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hero-scroll-cue 2s linear infinite paused;
}

.new-hero--slides.is-motion-visible .new-hero__scroll-label {
  animation-play-state: running;
}

.hero-about-bridge.is-bridge-ready > .hero-slides-spacer {
  display: none;
}

.hero-about-bridge.has-hero-slides:not(.is-bridge-ready) > .new-hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  margin-bottom: 0;
}

@keyframes hero-scroll-cue {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (max-width: 1023px) {
  .new-hero--slides .new-hero__content { padding-right: 48px; }
  .hero-progress { --hero-track-size: 150px; width: 42px; }
}

@media (min-width: 768px) and (max-height: 600px) {
  .new-hero__scroll-cue { bottom: 24px; }
}

/* Keep the message below the header in a short landscape viewport. */
@media (min-width: 768px) and (max-height: 480px) {
  .new-hero--slides {
    --hero-title-size: clamp(1.125rem, min(5.8vw, 9svh), 4.5rem);
    padding-top: 32px;
  }
}

@media (max-width: 380px) {
  .new-hero--slides { --hero-gutter: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .new-hero--slides .new-hero__scroll-label {
    animation: none;
  }
  .new-hero--slides .new-hero__scroll-label { background-position: 50% 50%; }
}