/* 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.

   Arrows + dots edition: identical to the original CSS, with the bottom
   nav-list slot machinery removed and replaced with two small rules for
   the side arrows and the dots list — only the fade-when-video-playing
   behavior, matching what the nav-list used to do. */

: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 {
  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;

  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 */
}

/* ── New controls: side arrows + dots ───────────────────────────── */

/* Side arrows. Position inside [data-slider], pinned to the vertical
   midpoint at the left/right edge of the carousel. */
[data-prev],
[data-next] {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.55);
  color: #f1f5f4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: translateY(-50%);
  transition:
    opacity 480ms ease-out,
    transform 200ms ease,
    background 200ms ease;
}
[data-prev]:hover,
[data-next]:hover {
  background: rgba(17, 17, 17, 0.85);
}
[data-prev]:active,
[data-next]:active {
  transform: translateY(-50%) scale(0.96);
}
[data-prev]:focus-visible,
[data-next]:focus-visible {
  outline: 2px solid #c8f24a;
  outline-offset: 2px;
}
[data-prev] {
  left: 1rem;
}
[data-next] {
  right: 1rem;
}
/* Chevron glyphs via pseudo-element so the markup stays content-free. */
[data-prev]::before,
[data-next]::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
[data-prev]::before {
  transform: rotate(-135deg);
  margin-left: 0.25rem;
}
[data-next]::before {
  transform: rotate(45deg);
  margin-right: 0.25rem;
}

/* Dots list. Lives outside [data-slider], underneath the carousel. */
[data-dots] {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}
[data-dot-idx] {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(239, 239, 239, 0.35);
  cursor: pointer;
  transition:
    opacity 480ms ease-out,
    width 240ms ease,
    background 240ms ease,
    transform 200ms ease;
}
[data-dot-idx]:hover {
  background: rgba(239, 239, 239, 0.6);
}
[data-dot-idx]:active {
  transform: scale(0.96);
}
[data-dot-idx]:focus-visible {
  outline: 2px solid #c8f24a;
  outline-offset: 3px;
}
/* Active dot grows into a pill so users can tell which slide is live. */
[data-dot-idx][aria-current='true'] {
  width: 1.5rem;
  background: #f1f5f4;
}

/* Fade-while-video-playing behavior — DESKTOP ONLY.
   On touch devices there's no hover affordance, so once the controls
   fade they're stuck offscreen. Gating the entire block on
   `@media (hover: hover)` means touch users keep the arrows and dots
   visible the whole time, while pointer-capable devices still get the
   "controls disappear so the video reads cleanly, come back on hover"
   behavior the nav-list had.
   The dots selector uses ~ so it matches when [data-dots] is a sibling
   of [data-slider] — if your markup nests them differently, adjust the
   right-hand selector. */
@media (hover: hover) {
  [data-prev],
  [data-next],
  [data-dots] {
    transition: opacity 480ms ease-out;
  }
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']) [data-prev],
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']) [data-next],
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']) ~ [data-dots] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 480ms ease-out 2s; /* 2s delay then fade out */
  }
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']):hover [data-prev],
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']):hover [data-next],
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']):focus-within [data-prev],
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']):focus-within [data-next],
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']):hover ~ [data-dots],
  [data-slider]:has(.hero-slider_slide[data-video-playing='true']):focus-within ~ [data-dots] {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 240ms ease-out; /* fast fade-in, no delay */
  }
}

/* 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_header,
  .hero-slider_text,
  .hero-slider_button_group,
  [data-prev],
  [data-next],
  [data-dots] {
    transition: none !important;
  }
}

@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;
  }
  [data-prev],
  [data-next] {
    width: 2.5rem;
    height: 2.5rem;
  }
  [data-prev] {
    left: 0.5rem;
  }
  [data-next] {
    right: 0.5rem;
  }
}

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

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

.hero-slider_slide {
  overflow: visible;
}