/* ── Trailing Text Banner 1 ──────────────────────────────────────────────────
   Orange diagonal band that overlaps the section above it.
   - skewY(-3deg): tilts the whole strip to create the slanted look
   - margin: -3rem 0 0: pulls the strip upward to overlap the previous section
   - overflow: hidden: clips the text content to stay within the skewed band
   - ::before creates a stacking context so .text-container (z-index 2) sits
     correctly above the band background
────────────────────────────────────────────────────────────────────────────── */
.text-section {
  position: relative;
  min-height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0;
  background-color: var(--orange);
  overflow: hidden;
  transform: skewY(-3deg);
  margin: -3rem 0 0;
  pointer-events: none;
}

.text-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

.text-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* ── Infinite scroll technique ───────────────────────────────────────────────
   Two identical <ul> lists sit side by side (min-width: 100% each = 200% total).
   Both animate together via scrollText, translating left by 100% over 40s.
   When the first list exits the viewport the second has seamlessly taken its
   place, creating a gapless loop — no JS needed.
   ::before / ::after are fade masks that dissolve the text at both edges.
────────────────────────────────────────────────────────────────────────────── */
.infinite-scroll {
  position: relative;
  width: 100%;
  height: 10rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0;
}

.infinite-scroll::before,
.infinite-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.infinite-scroll::before {
  left: 0;
  background: linear-gradient(to right, var(--orange), transparent);
}

.infinite-scroll::after {
  right: 0;
  background: linear-gradient(to left, var(--orange), transparent);
}

.scroll-content {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: scrollText 40s linear infinite;
}

.scroll-content li {
  list-style: none;
  white-space: nowrap;
  padding: 0 4rem;
  flex-shrink: 0;
}

/* scrollText moves left (banner 1). scrollTextReverse moves right (banner 3). */
@keyframes scrollText {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes scrollTextReverse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

.word {
  font-family: var(--font-heading);
  font-size: var(--fs-display-2xl);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.word-outline {
  color: transparent;
  -webkit-text-stroke: 0.125rem var(--black);
}

.word-filled {
  color: var(--black);
}

@media (max-width: 1024px) {
  .text-section {
    margin: -2.5rem 0 0;
  }

  .infinite-scroll {
    height: 9rem;
  }

  .scroll-content li {
    padding: 0 3.5rem;
  }

  .word {
    font-size: var(--fs-display-xl);
  }
}

@media (max-width: 912px) {
  .infinite-scroll {
    height: 7rem;
  }

  .scroll-content li {
    padding: 0 2.5rem;
  }

  .word {
    font-size: var(--fs-h1);
  }
}

@media (max-width: 900px) {
  .text-section {
    margin: -2rem 0 0;
  }

  .infinite-scroll {
    height: 7rem;
  }

  .scroll-content li {
    padding: 0 2.5rem;
  }

  .word {
    font-size: var(--fs-h2);
  }
}

@media (max-width: 768px) {
  .text-section {
    padding: 2rem 0;
    margin: -1.5rem 0 0;
  }

  .infinite-scroll {
    height: 5rem;
  }

  .scroll-content li {
    padding: 0 2rem;
  }

  .word {
    font-size: var(--fs-h3);
  }
}

@media (max-width: 480px) {
  .text-section {
    padding: 1.5rem 0;
    margin: -1rem 0 0;
  }

  .infinite-scroll {
    height: 4rem;
  }

  .scroll-content li {
    padding: 0 1.5rem;
  }

  .word {
    font-size: var(--fs-h4);
  }
}

@media (max-width: 375px) {
  .infinite-scroll {
    height: 4rem;
  }

  .scroll-content li {
    padding: 0 1.5rem;
  }

  .word {
    font-size: var(--fs-h4);
  }
}

/* ── Lottie van animation ────────────────────────────────────────────────────
   The van drives left-to-right between the two orange text banners.

   .car-animation-section
   - margin: -10rem 0 -10rem pulls the section behind the banners above and
     below it, so the van visually passes through them rather than sitting
     between two hard edges.
   - overflow: hidden clips the van once it exits the viewport.
   - height + margin are tuned per breakpoint to match the van's scaled width
     (van is 16:9, so height ≈ width × 0.5625).

   .car-lottie (the <dotlottie-player> element)
   - Starts off-screen to the LEFT (negative translateX matching its width)
     and drives to 100vw (fully off-screen right). Each breakpoint uses its
     own named @keyframes so the start offset matches the van's narrower width
     at that screen size — keeping the entrance timing consistent.
   - CSS keyframes can't read responsive values at runtime, so a separate
     named keyframe is required for each breakpoint rather than one shared one.

   Breakpoint summary:
     default  → driveAcross    5s   van 58rem  starts at -60rem
     ≤1024px  → driveAcrossMd  4.5s van 50rem  starts at -52rem
     ≤768px   → driveAcrossSm  4s   van 40rem  starts at -42rem
     ≤480px   → driveAcrossXs  3.5s van 32rem  starts at -34rem
     ≤375px   → driveAcrossXxs 3s   van 26rem  starts at -28rem
     ≤320px   → driveAcrossTiny 2.5s van 22rem starts at -24rem
────────────────────────────────────────────────────────────────────────────── */
.car-animation-section {
  width: 100%;
  /* height matches van's aspect ratio (1920×1080 = 16:9) at 58rem wide: 58 × 0.5625 ≈ 33rem */
  height: 33rem;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin: -10rem 0 -10rem;
}

.car-lottie {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 58rem;
  height: auto;
  z-index: 2;
  animation: driveAcross 5s linear infinite;
  animation-play-state: paused;
}

.car-animation-section.is-playing .car-lottie {
  animation-play-state: running;
}

@keyframes driveAcross {
  0%   { transform: translateX(-60rem); }
  100% { transform: translateX(100vw); }
}

@keyframes driveAcrossMd {
  0%   { transform: translateX(-52rem); }
  100% { transform: translateX(100vw); }
}

@keyframes driveAcrossSm {
  0%   { transform: translateX(-42rem); }
  100% { transform: translateX(100vw); }
}

@keyframes driveAcrossXs {
  0%   { transform: translateX(-34rem); }
  100% { transform: translateX(100vw); }
}

@keyframes driveAcrossXxs {
  0%   { transform: translateX(-28rem); }
  100% { transform: translateX(100vw); }
}

@keyframes driveAcrossTiny {
  0%   { transform: translateX(-24rem); }
  100% { transform: translateX(100vw); }
}

@media (max-width: 1024px) {
  .car-animation-section {
    height: 28rem;
    margin: -8rem 0 -8rem;
  }
  .car-lottie {
    width: 50rem;
    animation: driveAcrossMd 4.5s linear infinite;
  }
}

@media (max-width: 768px) {
  .car-animation-section {
    height: 23rem;
    margin: -6rem 0 -6rem;
  }
  .car-lottie {
    width: 40rem;
    animation: driveAcrossSm 4s linear infinite;
  }
}

@media (max-width: 480px) {
  .car-animation-section {
    height: 18rem;
    margin: -4.5rem 0 -4.5rem;
  }
  .car-lottie {
    width: 32rem;
    animation: driveAcrossXs 3.5s linear infinite;
  }
}

@media (max-width: 375px) {
  .car-animation-section {
    height: 15rem;
    margin: -3.5rem 0 -3.5rem;
  }
  .car-lottie {
    width: 26rem;
    animation: driveAcrossXxs 3s linear infinite;
  }
}

@media (max-width: 320px) {
  .car-animation-section {
    height: 13rem;
    margin: -3rem 0 -3rem;
  }
  .car-lottie {
    width: 22rem;
    animation: driveAcrossTiny 2.5s linear infinite;
  }
}

/* ── Trailing Text Banner 3 ──────────────────────────────────────────────────
   Mirror of banner 1 but skewed the opposite direction (skewY(3deg)) and
   scrolling in reverse (scrollTextReverse) to create visual contrast.
   Uses -3 suffixed class names to keep styles independent of banner 1.
────────────────────────────────────────────────────────────────────────────── */
.text-section-3 {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0;
  background-color: var(--orange);
  overflow: hidden;
  transform: skewY(3deg);
  margin: -3rem 0 0;
  pointer-events: none;
}

.text-section-3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
}

.text-container-3 {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.infinite-scroll-3 {
  position: relative;
  width: 100%;
  height: 10rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.infinite-scroll-3::before,
.infinite-scroll-3::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.infinite-scroll-3::before {
  left: 0;
  background: linear-gradient(to right, var(--orange), transparent);
}

.infinite-scroll-3::after {
  right: 0;
  background: linear-gradient(to left, var(--orange), transparent);
}

.scroll-content-3 {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: scrollTextReverse 40s linear infinite;
}

.scroll-content-3 li {
  list-style: none;
  white-space: nowrap;
  padding: 0 4rem;
  flex-shrink: 0;
}

.word-3 {
  font-family: var(--font-heading);
  font-size: var(--fs-display-2xl);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.word-outline-3 {
  color: transparent;
  -webkit-text-stroke: 0.125rem var(--black);
}

.word-filled-3 {
  color: var(--black);
}

@media (max-width: 1024px) {
  .text-section-3 {
    margin: -2.5rem 0 0;
  }

  .infinite-scroll-3 {
    height: 9rem;
  }

  .scroll-content-3 li {
    padding: 0 3.5rem;
  }

  .word-3 {
    font-size: var(--fs-display-xl);
  }
}

@media (max-width: 912px) {
  .infinite-scroll-3 {
    height: 7rem;
  }

  .scroll-content-3 li {
    padding: 0 2.5rem;
  }

  .word-3 {
    font-size: var(--fs-h1);
  }
}

@media (max-width: 900px) {
  .text-section-3 {
    margin: -2rem 0 0;
  }

  .infinite-scroll-3 {
    height: 7rem;
  }

  .scroll-content-3 li {
    padding: 0 2.5rem;
  }

  .word-3 {
    font-size: var(--fs-h2);
  }
}

@media (max-width: 768px) {
  .text-section-3 {
    padding: 2rem 0;
    margin: -1.5rem 0 0;
  }

  .infinite-scroll-3 {
    height: 5rem;
  }

  .scroll-content-3 li {
    padding: 0 2rem;
  }

  .word-3 {
    font-size: var(--fs-h3);
  }
}

@media (max-width: 480px) {
  .text-section-3 {
    padding: 1.5rem 0;
    margin: -1rem 0 0;
  }

  .infinite-scroll-3 {
    height: 4rem;
  }

  .scroll-content-3 li {
    padding: 0 1.5rem;
  }

  .word-3 {
    font-size: var(--fs-h4);
  }
}

@media (max-width: 375px) {
  .infinite-scroll-3 {
    height: 4rem;
  }

  .scroll-content-3 li {
    padding: 0 1.5rem;
  }

  .word-3 {
    font-size: var(--fs-h4);
  }
}