/* Marquee — generic, content-agnostic vertical text loop.
   Reusable anywhere a continuously-scrolling column of items is needed
   (currently: the vessel types list inside .split-content__media on
   insurance.html). Knows nothing about its content — items are plain
   markup, duplicated for the seamless loop by js/marquee.js.

   Same proven technique as the homepage testimonials marquee
   (css/home.css / js/testimonials.js): the track holds two identical
   groups back-to-back, and a CSS animation moves it from translateY(0) to
   translateY(-50%) on an infinite linear loop — since the second group is
   an exact clone of the first, the loop point is undetectable. This file
   is fully independent of the testimonials implementation. */

/* Height is fluid between a 300px phone height and the Figma 416px,
   reached at 1280px and held from there — the viewport simply clips fewer
   items on a phone, and the two-groups/translateY(-50%) loop stays
   seamless at any height because that offset is always exactly one
   group. */
.marquee {
  position: relative;
  width: 100%;
  height: clamp(300px, 249.2px + 13.03vw, 416px);
}

.marquee__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Two identical groups, no gap between them at the track level — only
   .marquee__group has internal item spacing. This is what makes
   translateY(-50%) land exactly at the start of the second group. */
.marquee__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  animation-name: marquee-scroll;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* padding-bottom repeats the same 32px used between items as the seam gap
   between this group and the next one — the track itself has no gap of
   its own (see .marquee__track), so each group carries its own trailing
   space. That keeps the gap uniform all the way through the loop
   (including the group1→group2 wrap point) while keeping both groups
   exactly equal-height, which is what lets translateY(-50%) land exactly
   on the second group with no jump. */
.marquee__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl); /* 32px between items */
  padding-bottom: var(--space-3xl);
}

@keyframes marquee-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Same fluid ramp as .text-h2 (css/typography.css) — exact Figma 48px at
   1280px and above. */
.marquee__item {
  margin: 0;
  width: 100%;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(30px, 22.11px + 2.022vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--colour-sky-teal);
  text-align: center;
}

/* Sit above the moving items, don't affect track height/position. Fade
   into white — the surface this component sits on — so items appear to
   dissolve as they cross the top/bottom edges of the viewport. Matches
   the Figma spec: ~456px wide, centred, at the 1920px reference; capped
   to the viewport's own width so it stays sensible if the column is ever
   narrower than that. */
.marquee__fade {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 456px;
  max-width: 100%;
  height: 120px;
  z-index: 1;
  pointer-events: none;
}

.marquee__fade--top {
  top: 0;
  background: linear-gradient(to bottom, var(--colour-white) 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee__fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--colour-white) 0%, rgba(255, 255, 255, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* Motion stops entirely. Nothing further needed to hide the duplicate
     group — .marquee__viewport clips at 416px, and the real items (5 ×
     57.6px + 4 × 32px gap) end exactly at that 416px mark (the group's
     own trailing 32px padding-bottom falls past it, invisibly), so with
     the track parked at translateY(0) the duplicate group never scrolls
     into view in the first place. */
  .marquee__track {
    animation: none;
  }
}