/* hero-slider — animation + sizing only.
   Drop into your Webflow project alongside your own theme/typography/
   color rules. This file contains nothing about colors, borders, radii,
   typography, hover decoration, or focus rings. */

:root {
  --transition: 250ms cubic-bezier(0.65, 0, 0.35, 1);
  --nav-easing: cubic-bezier(0.7, 0, 0.2, 1);
  --nav-duration: 720ms;
}

/* ── Stage scaler (zoom) + horizontal track ─────────────────────── */
.hero-slider_zoom {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 1;
}
.hero-slider_track {
  will-change: transform;
}

/* ── Slide stage — slides stack and cross-fade ────────────────── */
.hero-slider_slide {
  position: relative;
  flex: 0 0 100cqw;
  height: 100cqh;
  overflow: hidden;
}

.wf-design-mode .hero-slider_slide {
  opacity: 1;
}
.hero-slider_slide[data-active='true'] {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.hero-slider_content_wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-slider_button_group {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.75rem;
}
.hero-slider_button_group a {
  padding: 0.875rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition:
    transform 240ms ease,
    background 240ms ease;
}
.hero-slider_button_group a:active {
  transform: scale(0.985);
}

.hero-slider_item {
  position: relative;
  overflow: hidden;
}
.hero-slider_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero text staged enter/exit per active slide */
.hero-slider_slide .hero-slider_header,
.hero-slider_slide .hero-slider_text,
.hero-slider_slide .hero-slider_button_group {
  transform: translateY(0.625rem);
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-slider_slide[data-active='true'] .hero-slider_header,
.hero-slider_slide[data-active='true'] .hero-slider_text,
.hero-slider_slide[data-active='true'] .hero-slider_button_group {
  opacity: 1;
  transform: translateY(0);
}
.hero-slider_slide[data-active='true'] .hero-slider_header {
  transition-delay: 80ms;
}
.hero-slider_slide[data-active='true'] .hero-slider_text {
  transition-delay: 140ms;
}
.hero-slider_slide[data-active='true'] .hero-slider_button_group {
  transition-delay: 200ms;
}
[data-slider-content] {
  transition: opacity 480ms ease-out;
}
.hero-slider_slide[data-video-playing='true'] [data-slider-content] {
  opacity: 0;
  transition: opacity 480ms ease-out 2s; /* 2s delay then fade out */
}
.hero-slider_slide[data-video-playing='true']:hover [data-slider-content],
.hero-slider_slide[data-video-playing='true']:focus-within [data-slider-content] {
  opacity: 1;
  transition: opacity 240ms ease-out; /* fast fade-in, no delay */
}
/* ── Bottom nav — slot-based slider strip ─────────────────────── */
.hero-slider_nav_wrap {
  width: calc(22rem + 6.5rem + 0.75rem);
  height: 6.5rem;
}

.hero-slider_nav_item {
  position: absolute;
  top: 0;

  overflow: hidden;
  display: inline-flex;
  align-items: center;
  pointer-events: none;

  /* slot-driven sizing & position */
  --x: 0rem;
  --w: 0rem;
  --pad-l: 0rem;
  --pad-r: 0rem;
  --gap-x: 0rem;
  --copy-w: 0rem;
  --copy-opacity: 0;
  --copy-x: -0.5rem;
  opacity: 0;

  right: var(--x);
  width: var(--w);
  padding: 0.5rem var(--pad-r) 0.5rem var(--pad-l);
  gap: var(--gap-x);

  transition:
    right var(--nav-duration) var(--nav-easing),
    width var(--nav-duration) var(--nav-easing),
    padding var(--nav-duration) var(--nav-easing),
    gap var(--nav-duration) var(--nav-easing),
    opacity 280ms ease,
    background 280ms ease,
    transform var(--animation-default-half),
    box-shadow var(--animation-default-half);
}
.hero-slider_nav_item:active {
  transform: scale(0.985);
}

.hero-slider_nav_item[data-slot='1'] {
  --x: calc(6.5rem + 0.75rem);
  --w: 22rem;
  --pad-l: 0.5rem;
  --pad-r: 1.5rem;
  --gap-x: 1rem;
  --copy-w: 13rem;
  --copy-opacity: 1;
  --copy-x: 0;
  opacity: 1;
  pointer-events: auto;
}
.hero-slider_nav_item[data-slot='2'] {
  --x: 0rem;
  --w: 6.5rem;
  --pad-l: 0.5rem;
  --pad-r: 0.5rem;
  opacity: 1;
  pointer-events: auto;
}
.hero-slider_nav_item[data-slot='0'] {
  --x: 32rem;
}
.hero-slider_nav_item[data-slot='3'] {
  --x: -8rem;
}

/* While JS teleports an item between hidden slots, suppress all
   transitions for one frame so the jump is invisible. */
.hero-slider_nav_item[data-instant],
.hero-slider_nav_item[data-instant] .hero-slider_nav_thumb_wrap,
.hero-slider_nav_item[data-instant] .hero-slider_nav_content_wrap {
  transition: none !important;
}

.hero-slider_nav_thumb_wrap {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  flex: 0 0 auto;
}
.hero-slider_nav_thumb_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slider_nav_content_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
  width: var(--copy-w, 0rem);
  overflow: hidden;
  flex: 0 0 auto;
  opacity: var(--copy-opacity);
  transform: translateX(var(--copy-x));
  transition:
    width var(--nav-duration) var(--nav-easing),
    opacity 380ms var(--nav-easing) 240ms,
    transform 380ms var(--nav-easing) 240ms;
}
.hero-slider_nav_item[data-slot='0'] .hero-slider_nav_content_wrap,
.hero-slider_nav_item[data-slot='2'] .hero-slider_nav_content_wrap,
.hero-slider_nav_item[data-slot='3'] .hero-slider_nav_content_wrap {
  transition:
    width var(--nav-duration) var(--nav-easing),
    opacity 200ms var(--nav-easing),
    transform 200ms var(--nav-easing);
}

/* Shared <video>, mounted on the active video slide. Fades in once the
     first frame is decoded (data-ready set by the JS). */
.hero-slider_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1; /* above poster img, below vignette */
  opacity: 0;
  transition: opacity 280ms ease-out;
  background: #111; /* avoids a flash if the asset is briefly empty */
  pointer-events: none;
}
.hero-slider_video[data-ready='true'] {
  opacity: 1;
}

/* Play-button overlay — only visible in manual mode (reduced motion / save-data) */
.hero-slider_play_btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.5rem;
  height: 4.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  z-index: 3;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition:
    transform 200ms ease,
    background 200ms ease;
}
.hero-slider_play_btn::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.625rem 0 0.625rem 1rem;
  border-color: transparent transparent transparent #111;
  margin-left: 4px;
}
.hero-slider_play_btn:hover {
  background: #fff;
  transform: scale(1.04);
}
.hero-slider_play_btn:active {
  transform: scale(0.98);
}

[data-video-mode='manual']
  .hero-slider_slide[data-video][data-active='true']:not([data-video-playing='true'])
  .hero-slider_play_btn {
  display: inline-flex;
}

/* Once the active slide's video has been on screen for ~2s, fade the
     entire content overlay out so the video can read clearly. Hovering
     (or tab-focusing) the slide brings it back immediately so the CTA
     stays reachable. The 2s delay only applies to the fade-out — the
     fade-in on hover is fast and has no delay. */
[data-slider-content] {
  transition: opacity 480ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider_slide,
  .hero-slider_nav_item,
  .hero-slider_nav_content_wrap,
  .hero-slider_header,
  .hero-slider_text,
  .hero-slider_button_group {
    transition: none !important;
  }
}

@media (max-width: 60rem) {
  .hero-slider_nav_wrap {
    width: calc(18rem + 6.5rem + 0.75rem);
  }
  .hero-slider_nav_item[data-slot='1'] {
    --w: 18rem;
    --copy-w: 9.5rem;
  }
}

@media (max-width: 48rem) {
  .hero-slider_slide[data-video-playing='true'] [data-slider-content] {
    opacity: 1;
    transition: opacity 480ms ease-out 2s; /* 2s delay then fade out */
  }
  .hero-slider_slide {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .hero-slider_nav_wrap {
    top: auto;

    left: 55%;
    right: auto;
    transform: translateX(-50%);

    width: calc(12rem + 4rem + 0.5rem);
    height: 4rem;
  }
  .hero-slider_nav_item {
    height: 4.5rem;
  }
  .hero-slider_nav_item[data-slot='1'] {
    --w: 14rem;
    --copy-w: 7.5rem;
    --x: calc(4.5rem + 0.75rem);
  }
  .hero-slider_nav_item[data-slot='2'] {
    --w: 4.5rem;
  }
  .hero-slider_nav_item[data-slot='0'] {
    --x: 22rem;
  }
  .hero-slider_nav_thumb_wrap {
    width: 3.5rem;
    height: 3.5rem;
  }
}

.wf-design-mode .hero-slider_slide {
  opacity: 1;
}

.wf-design-mode .hero-slider_track {
  overflow-x: auto;
  max-width: 100%;
}