/**
 * Hero Visual Cards — horizontal fan with light overlap; SEO landing heroes.
 * Depends on global tokens + .card from cards.css.
 */

.ml-lp__hero-visual-wrap {
  position: relative;
  display: block;
  margin-bottom: 0.25rem;
}

.ml-lp__hero-visual-wrap > header.ml-lp__hero,
.ml-lp__hero-visual-wrap > .subpage-head.ml-lp__hero {
  min-width: 0;
}

/* Reserve space for four portrait cards + overlap */
@media (min-width: 768px) {
  .ml-lp__hero-visual-wrap > header.ml-lp__hero,
  .ml-lp__hero-visual-wrap > .subpage-head.ml-lp__hero {
    padding-right: clamp(14rem, 46%, 32rem);
  }
}

.hero-visual-cards {
  --hvc-parallax-x: 0px;
  --hvc-parallax-y: 0px;
  position: absolute;
  /* Nudge inward from the far edge so the fan sits closer to the headline */
  right: clamp(0.75rem, 6.5vw, 3.25rem);
  top: 50%;
  z-index: 1;
  display: block;
  width: max-content;
  max-width: min(860px, 78vw);
  pointer-events: none;
  isolation: isolate;
  transform: translate3d(
    var(--hvc-parallax-x),
    calc(-50% + var(--hvc-parallax-y) + clamp(0.65rem, 2vw, 1.15rem)),
    0
  );
  will-change: transform;
}

.hero-visual-cards__glow {
  position: absolute;
  inset: -25% -12% -20% -12%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 75% 65% at 58% 48%,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    transparent 70%
  );
  filter: blur(32px);
  opacity: 0.75;
  pointer-events: none;
}

.hero-visual-cards__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.hero-card.card {
  padding: 0;
}

.hero-card {
  --hvc-stagger: 0px;
  --hvc-rot: 0deg;
  --hvc-scale: 1;
  position: relative;
  flex: 0 0 auto;
  width: clamp(112px, 15vw, 156px);
  /* Allow hover on videos while parent strip stays non-interactive */
  pointer-events: auto;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, var(--surface-card-glass-border) 80%, transparent);
  transform: translateY(var(--hvc-stagger)) rotate(var(--hvc-rot)) scale(var(--hvc-scale));
}

/* ~18–26% width overlap; later cards sit on top */
.hero-visual-cards__row .hero-card:nth-child(1) {
  z-index: 1;
}

.hero-visual-cards__row .hero-card:nth-child(2) {
  z-index: 2;
  margin-left: clamp(-22px, -4vw, -14px);
}

.hero-visual-cards__row .hero-card:nth-child(3) {
  z-index: 3;
  margin-left: clamp(-22px, -4vw, -14px);
}

.hero-visual-cards__row .hero-card:nth-child(4) {
  z-index: 4;
  margin-left: clamp(-22px, -4vw, -14px);
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg) 12%, transparent) 0%,
    transparent 42%,
    color-mix(in srgb, var(--accent) 8%, transparent) 100%
  );
  mix-blend-mode: soft-light;
}

.hero-card__media {
  display: block;
  width: 100%;
  height: auto;
  /* Portrait: taller than wide */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  vertical-align: middle;
  background: color-mix(in srgb, var(--border) 55%, var(--bg));
}

video.hero-card__media {
  pointer-events: none;
}

.hero-card__chip {
  pointer-events: none;
  position: absolute;
  left: 0.45rem;
  bottom: 0.4rem;
  z-index: 2;
  padding: 0.2rem 0.48rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 94%, var(--accent) 6%);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--surface-card-glass-border) 90%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-card--float {
    animation-name: hero-card-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: var(--hvc-dur, 11s);
    animation-delay: var(--hvc-delay, 0s);
  }
}

/* Vertical float only; stagger/rotate/scale come from card base + vars */
@keyframes hero-card-float {
  0%,
  100% {
    transform: translateY(var(--hvc-stagger)) translateY(0) rotate(var(--hvc-rot)) scale(var(--hvc-scale));
  }
  50% {
    transform: translateY(var(--hvc-stagger)) translateY(-7px) rotate(var(--hvc-rot)) scale(var(--hvc-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card--float {
    animation: none !important;
  }

  .hero-visual-cards {
    transform: translate3d(
      0,
      calc(-50% + clamp(0.65rem, 2vw, 1.15rem)),
      0
    ) !important;
    --hvc-parallax-x: 0 !important;
    --hvc-parallax-y: 0 !important;
  }
}

/* Mobile: same four clips — horizontal row, light scroll, tap to play (see JS) */
@media (max-width: 767.98px) {
  .ml-lp__hero-visual-wrap > header.ml-lp__hero,
  .ml-lp__hero-visual-wrap > .subpage-head.ml-lp__hero {
    padding-right: 0;
  }

  .hero-visual-cards {
    position: relative;
    right: auto;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 1.1rem auto 0;
    transform: none !important;
    --hvc-parallax-x: 0 !important;
    --hvc-parallax-y: 0 !important;
  }

  .hero-visual-cards__row {
    justify-content: flex-start;
    gap: clamp(8px, 2.4vw, 12px);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.35rem 0 0.65rem;
    margin: 0 calc(-1 * clamp(0.75rem, 4vw, 1rem));
    padding-left: clamp(0.75rem, 4vw, 1rem);
    padding-right: clamp(0.75rem, 4vw, 1rem);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .hero-visual-cards__row .hero-card {
    flex: 0 0 auto;
    width: clamp(104px, 36vw, 142px);
    scroll-snap-align: start;
    cursor: pointer;
    --hvc-stagger: 0px !important;
    --hvc-rot: 0deg !important;
    --hvc-scale: 1 !important;
    margin-left: 0 !important;
  }

  /* Slight playful tilt + vertical jitter (static; no float animation on mobile) */
  .hero-visual-cards__row .hero-card:nth-child(1) {
    transform: rotate(-2.7deg) translateY(6px) !important;
  }

  .hero-visual-cards__row .hero-card:nth-child(2) {
    transform: rotate(2.1deg) translateY(-4px) !important;
  }

  .hero-visual-cards__row .hero-card:nth-child(3) {
    transform: rotate(-1.4deg) translateY(3px) !important;
  }

  .hero-visual-cards__row .hero-card:nth-child(4) {
    transform: rotate(2.4deg) translateY(-5px) !important;
  }

  .hero-card--float {
    animation: none;
  }
}