@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

.hero {
  --ribbon-gap: 16px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: max(660px, calc(100svh - 84px));
  padding: 100px 24px 80px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #24242465, transparent 67%);
}

/* The silhouette is a shallow, rounded image field; no device chrome. */
.hero-marquee {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: min(1320px, calc(100% - 96px));
  height: clamp(340px, 30vw, 420px);
  transform: translate(-50%, -56%);
  overflow: hidden;
  isolation: isolate;
  border-radius: 32px;
  pointer-events: none;
  background: #181818;
  mask-image: linear-gradient(#000c, #000 16%, #000 84%, #000c);
}

.hero-marquee-main,
.hero-marquee-echo {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: grid;
  gap: var(--ribbon-gap);
  translate: 0 -50%;
}
.hero-marquee-row { width: 100%; overflow: hidden; }
.hero-marquee-track,
.hero-marquee-group { display: flex; gap: var(--ribbon-gap); width: max-content; }
.hero-marquee-track { animation: hero-marquee 260s linear infinite; will-change: transform; }
.hero-marquee-row-2 .hero-marquee-track { animation-duration: 300s; animation-direction: reverse; }
.hero-marquee-row-3 .hero-marquee-track { animation-duration: 280s; }
.hero-marquee-group img {
  display: block;
  width: clamp(230px, 22vw, 310px);
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  flex: none;
  border-radius: 10px;
}

/* Dark neutral veil keeps every image sharp and the type legible. */
.hero-marquee::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(90deg, #10101028, #0c0c0cb3 35%, #0c0c0cbd 50%, #0c0c0cb3 65%, #10101028);
  pointer-events: none;
}

/* Desaturation and blur increase continuously toward the two side edges. */
.hero-edge-haze {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, #90909050, #5d5d5d15 20%, transparent 34%, transparent 66%, #5d5d5d15 80%, #90909050);
  -webkit-backdrop-filter: grayscale(1) blur(5px);
  backdrop-filter: grayscale(1) blur(5px);
  mask-image: linear-gradient(90deg, #000, #000c 9%, #0004 22%, transparent 34%, transparent 66%, #0004 78%, #000c 91%, #000);
}

/* A low-opacity, monochrome duplicate supplies actual double vision, at edges only. */
.hero-marquee-echo {
  z-index: 1;
  filter: grayscale(1) blur(.8px);
  opacity: .29;
  transform: translateX(6px);
  mask-image: linear-gradient(90deg, #000, #0009 14%, transparent 30%, transparent 70%, #0009 86%, #000);
  animation: edge-drift 13s linear infinite;
}
.hero-content { position: relative; z-index: 4; width: min(100%, 1100px); }
.hero-content h1 { text-shadow: 0 4px 30px #0009; }
.hero .hero-content h1 {
  font-size: clamp(4.2rem, 8.25vw, 7.4rem);
  line-height: 1.05;
  letter-spacing: -.055em;
  font-weight: 600;
}
.hero .hero-content h1 span {
  display: inline-block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.29em;
  line-height: 1.12;
  letter-spacing: -.032em;
  color: var(--accent);
}
.hero-content .button-row { margin-top: 40px; }

@keyframes hero-marquee { to { transform: translateX(calc(-50% - var(--ribbon-gap) / 2)); } }
/* One short, soft displacement in thirteen seconds, without flashes. */
@keyframes edge-drift {
  0%, 92%, 96%, 100% { transform: translateX(6px); }
  93% { transform: translate(9px, 1px); }
  94% { transform: translate(-3px, -1px); }
  95% { transform: translateX(4px); }
}

@media (max-width: 1000px) {
  .hero-marquee { width: calc(100% - 48px); height: 370px; border-radius: 26px; }
}
@media (max-width: 780px) {
  /* Keep the next section below the screen when mobile browser bars retract. */
  .hero { --ribbon-gap: 12px; min-height: max(650px, calc(100vh - 77px)); min-height: max(650px, calc(100lvh - 77px)); padding: 90px 20px 70px; }
  .hero-marquee { height: 330px; width: calc(100% - 32px); }
  .hero-marquee-group img { width: 230px; border-radius: 8px; }
  .hero .hero-content h1 { font-size: clamp(3.25rem, 9.8vw, 4.8rem); }
  .hero .hero-content h1 span { font-size: 1.22em; }
  .hero-content .button-row { margin-top: 32px; }
}
@media (max-width: 520px) {
  .hero { min-height: max(540px, calc(100vh - 77px)); min-height: max(540px, calc(100lvh - 77px)); padding: 72px 16px 68px; }
  .hero-marquee { width: calc(100% - 24px); height: 254px; border-radius: 22px; transform: translate(-50%, -59%); }
  .hero-marquee-group img { width: 190px; }
  .hero .hero-content h1 { font-size: clamp(2.4rem, 12.3vw, 4.1rem); letter-spacing: -.055em; }
  .hero .hero-content h1 span { font-size: 1.2em; letter-spacing: -.035em; }
  .hero-content .button-row { margin-top: 34px; }
  .hero-edge-haze { -webkit-backdrop-filter: grayscale(1) blur(3.5px); backdrop-filter: grayscale(1) blur(3.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track { animation: none; will-change: auto; }
  .hero-marquee-echo { display: none; animation: none; }
}

/* Full-height curved wall; all three rows remain inside the field. */
.hero-marquee {
  width: 100vw;
  height: clamp(528px, 51.6vw, 696px);
  transform: translate(-50%, -53%);
  border-radius: 0;
  background: transparent;
  mask-image: none;
}
.hero-marquee-main, .hero-marquee-echo { padding-block: 8px; }
.hero-marquee-group img { width: clamp(252px, 24vw, 336px); }
.hero-curve { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-marquee.is-curved .hero-marquee-main,
.hero-marquee.is-curved .hero-marquee-echo,
.hero-marquee.is-curved .hero-edge-haze { visibility: hidden; }
.hero-marquee.is-curved .hero-marquee-track,
.hero-marquee.is-curved .hero-marquee-echo { animation-play-state: paused; }
.hero-marquee::after {
  background: radial-gradient(ellipse at 50% 50%, #101010cf 0%, #101010a6 36%, #10101040 76%, #10101022);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.hero .hero-content h1 { color: #fff; }
.hero .hero-content h1 br { display: none; }
.hero .hero-content h1 span { display: block; margin-top: -.27em; }
@media (max-width: 780px) {
  .hero-marquee { width: 100vw; height: 540px; }
  .hero-marquee-group img { width: 264px; }
}
@media (max-width: 520px) {
  .hero-marquee { width: 100vw; height: 444px; }
  .hero-marquee-group img { width: 228px; }
}