/* Product vessel marquee — generic, content-agnostic horizontal marquee.
   Built for the Insurance Product Detail hero (Figma node 18682:13805,
   Runabout instance) but knows nothing about Runabout, or about hero
   layout — items are plain markup, duplicated for the seamless loop by
   js/product-vessel-marquee.js. Reusable on any future product-detail
   page with different vessel-type copy.

   Distinct from the existing vertical .marquee (css/marquee.css) — that
   component scrolls a fixed-height column with top/bottom fades; this one
   scrolls a single horizontal line with left/right fades. Same proven
   "two identical groups, translate by -50%" technique, reimplemented
   independently so neither component depends on the other.

   Owns its own 1280px container (max-width + centred margin + 24px side
   padding) — the same convention used by every other top-level section on
   the site (e.g. .site-header__bar, .product-selector__panel,
   .accordion-tabs-section__inner) — so it aligns with the rest of the
   page without depending on a shared container class the project doesn't
   have, and without any page-specific CSS. Any spacing above/below the
   marquee (e.g. the gap down from a hero's content row) is a property of
   that specific page layout, not of this component, so it's left for the
   page to set via inline style on the .product-vessel-marquee element
   itself — see runabout.html. */

.product-vessel-marquee {
  position: relative; /* stacks above a hero's absolutely-positioned z-index:0 background artwork (e.g. .page-hero__bg) — see .page-hero__wave's own z-index:1 for the same reason */
  z-index: 1;
  /* Space above the marquee is a property of the page layout it sits in,
     not of the marquee — the page sets --marquee-top (see runabout.html)
     and this file steps it down at narrower widths, the same
     page-sets-the-value/component-owns-the-breakpoints split used by
     --hero-pad-bottom (css/page-hero.css). */
  margin-top: var(--marquee-top, 0px);
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  /* 24px from tablet up (the desktop value, unchanged), 16px on phones —
     matches the hero this sits inside (see --page-gutter). */
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
}

/* Visible bounds of the marquee — the fade mask below is sized to this
   box, so it fades in/out at the container's own left/right edges (inside
   the 24px side padding), not the physical browser edges. */
.product-vessel-marquee__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;

  /* ~60px soft fade at each edge. Genuine transparency via mask, not a
     solid-colour overlay — works over any hero background/artwork behind
     it. Keeping mask on this (stationary) element rather than the track
     that scrolls is what keeps the fade itself fixed in place while the
     content moves underneath it. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 60px,
    black calc(100% - 60px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 60px,
    black calc(100% - 60px),
    transparent 100%
  );
}

/* No gap here — each .product-vessel-marquee__group carries its own
   trailing margin equal to its internal item gap (see below), so the
   group-to-group seam reads identically to every other gap in the
   sequence, and translateX(-50%) lands exactly on the second group with
   no jump. */
.product-vessel-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation-name: product-vessel-marquee-scroll;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.product-vessel-marquee__group {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-right: 80px; /* seam gap to the next (cloned) group, same as the internal item gap */
}

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

/* Same fluid ramp as .text-h2 (css/typography.css) — the items are that
   type level, and reach the exact Figma 48px at 1280px and above. */
.product-vessel-marquee__item {
  margin: 0;
  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);
  white-space: nowrap;
}

.product-vessel-marquee__separator {
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Item size is fluid (clamp(), above); this only tightens the spacing and
   the edge fade, which are absolute values tuned against desktop. */
@media (max-width: 767px) {
  .product-vessel-marquee__viewport {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 32px,
      black calc(100% - 32px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 32px,
      black calc(100% - 32px),
      transparent 100%
    );
  }

  .product-vessel-marquee__group {
    gap: 48px;
    margin-right: 48px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .product-vessel-marquee__group {
    gap: 64px;
    margin-right: 64px;
  }
}

/* The page's desktop offset above the marquee is measured against a
   desktop hero; a stacked tablet/phone hero needs proportionally less. */
@media (max-width: 1023px) {
  .product-vessel-marquee {
    margin-top: var(--marquee-top-tablet, var(--space-6xl)); /* 64px */
  }
}

@media (max-width: 767px) {
  .product-vessel-marquee {
    margin-top: var(--marquee-top-mobile, var(--space-4xl)); /* 40px */
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Motion stops entirely; the track parks at translateX(0), showing only
     the real (first) group — a static single line rather than a loop. */
  .product-vessel-marquee__track {
    animation: none;
  }
}