/* ---------- Hero Slider (Full-Bleed Variant) ----------
   The slider replaces the static hero content. Each slide carries its own
   background image, dark overlay, and centered content (constrained by
   .container). The hero stretches edge-to-edge. */

/* Tame the parent hero — strip its padding so the slide images bleed to the
   section edges. Stats sit below in their own container with breathing room. */
.hero--slider {
  min-height: 0;
  padding-block: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

.hero--slider::before,
.hero--slider::after {
  display: none;
}

.hero-slider {
  --slider-duration: 7000ms;
  --slide-fade: var(--dur-slow);
  --slide-min-height: calc(100vh - var(--header-h));

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

@supports (height: 100dvh) {
  .hero-slider {
    --slide-min-height: calc(100dvh - var(--header-h));
  }
}

.hero-slider__viewport {
  position: relative;
  display: grid;
  width: 100%;
  min-height: var(--slide-min-height);
}

/* ---------- Slide stacking ---------- */
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--slide-fade) var(--ease-out),
              visibility 0s linear var(--slide-fade);
  pointer-events: none;
  overflow: hidden;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}

/* ---------- Background image ---------- */
.hero-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transform: scale(1.04);
  transition: transform 12s var(--ease-out);
}

.hero-slide.is-active .hero-slide__bg {
  transform: scale(1);
}

/* ---------- Dark overlay for legibility ---------- */
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Strong top band guarantees header contrast regardless of image */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.7)  0%,
      rgba(0, 0, 0, 0.55) 8%,
      rgba(0, 0, 0, 0.3)  22%,
      rgba(0, 0, 0, 0.2)  45%,
      rgba(0, 0, 0, 0.45) 80%,
      rgba(0, 0, 0, 0.75) 100%),
    /* Subtle accent tint from the brand color */
    radial-gradient(ellipse 60% 50% at 30% 60%,
      color-mix(in srgb, var(--accent, var(--c-brand)) 22%, transparent),
      transparent 70%);
  z-index: 1;
  pointer-events: none;
  transition: background var(--slide-fade) var(--ease-out);
}

/* ---------- Slide content (constrained by .container) ---------- */
.hero-slide__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding-block: clamp(6rem, 14vw, 9rem) clamp(7rem, 14vw, 9rem);
  color: var(--ink-0);
}

.hero-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
}

.hero-slide__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--c-brand));
  box-shadow: 0 0 12px var(--accent, var(--c-brand));
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.hero-slide__title {
  font-family: var(--font-display);
  font-size: var(--fs-900);
  font-weight: 700;
  max-width: 18ch;
  letter-spacing: var(--track-display);
  color: #ffffff;
  line-height: var(--lh-tight);
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.4);
  margin: 0;
}

.hero-slide__subtitle {
  font-size: var(--fs-500);
  color: rgb(255 255 255 / 0.88);
  max-width: 56ch;
  line-height: var(--lh-base);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.4);
  margin: 0;
}

.hero-slide__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  justify-content: center;
}

/* ---------- Per-product accent ---------- */
.hero:has(.hero-slide--fokus.is-active)   { --accent: var(--c-fokus);   }
.hero:has(.hero-slide--integra.is-active) { --accent: var(--c-integra); }
.hero:has(.hero-slide--monitor.is-active) { --accent: var(--c-monitor); }
.hero:has(.hero-slide--support.is-active) { --accent: var(--c-support); }
.hero:has(.hero-slide--ai.is-active)      { --accent: var(--c-ai);      }
.hero:has(.hero-slide--connect.is-active) { --accent: var(--c-connect); }

/* ---------- Child stagger animation (only on active slide) ---------- */
@keyframes hero-slide-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slide.is-active .hero-slide__content > * {
  animation: hero-slide-in var(--slide-fade) var(--ease-out) both;
}

.hero-slide.is-active .hero-slide__content > *:nth-child(1) { animation-delay: 80ms; }
.hero-slide.is-active .hero-slide__content > *:nth-child(2) { animation-delay: 180ms; }
.hero-slide.is-active .hero-slide__content > *:nth-child(3) { animation-delay: 280ms; }
.hero-slide.is-active .hero-slide__content > *:nth-child(4) { animation-delay: 380ms; }

/* ---------- Controls bar (constrained to container) ---------- */
.hero-slider__controls-wrap {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(4.5rem, 8vh, 6rem);
  z-index: 3;
  pointer-events: none;
}

/* .hero-scroll rules moved to components.css for reuse on sub-pages */

.hero-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  pointer-events: auto;
}

.hero-slider__arrow {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.hero-slider__arrow svg {
  width: 1rem;
  height: 1rem;
}

.hero-slider__arrow:hover {
  border-color: rgb(255 255 255 / 0.7);
  background: rgb(0 0 0 / 0.5);
}

.hero-slider__arrow:active {
  transform: scale(0.95);
}

.hero-slider__arrow:focus-visible {
  outline: 2px solid var(--accent, #ffffff);
  outline-offset: 3px;
}

/* ---------- Pagination dots ---------- */
.hero-slider__dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-slider__dot {
  position: relative;
  width: 32px;
  height: 4px;
  padding: 0;
  border: 0;
  background: rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-out),
              width var(--dur-base) var(--ease-out);
}

.hero-slider__dot:hover {
  background: rgb(255 255 255 / 0.5);
}

.hero-slider__dot:focus-visible {
  outline: 2px solid var(--accent, #ffffff);
  outline-offset: 4px;
}

.hero-slider__dot.is-active {
  width: 64px;
  background: rgb(255 255 255 / 0.25);
}

.hero-slider__dot-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: #ffffff;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-slider__dot.is-active .hero-slider__dot-fill {
  animation: hero-slider-progress var(--slider-duration) linear forwards;
}

.hero-slider.is-paused .hero-slider__dot.is-active .hero-slider__dot-fill {
  animation-play-state: paused;
}

@keyframes hero-slider-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Stats below the slider ---------- */
.hero__stats-wrap {
  padding-block: var(--space-10) var(--space-12);
}

/* ---------- Light-on-dark button variants ---------- */
.btn--primary-light {
  background: #ffffff;
  color: #000000;
}

.btn--primary-light:hover {
  background: #f5f5f7;
}

.btn--ghost-light {
  background: rgb(255 255 255 / 0.06);
  color: #ffffff;
  border-color: rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--ghost-light:hover {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.65);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .hero-slider {
    --slide-min-height: 80vh;
  }
  .hero-slide__title {
    max-width: 20ch;
  }
  .hero-slider__arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
  .hero-slider__dot {
    width: 24px;
  }
  .hero-slider__dot.is-active {
    width: 48px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: opacity 0.01ms;
  }
  .hero-slide__bg {
    transition: none;
    transform: none;
  }
  .hero-slide.is-active .hero-slide__content > * {
    animation: none;
  }
  .hero-slider__dot.is-active .hero-slider__dot-fill {
    animation: none;
    transform: scaleX(1);
  }
}

/* ---------- Pre-JS fallback ----------
   Without JS, only slide 1 is visible (already has .is-active in HTML).
   Hide controls until JS is ready. */
html:not(.js-ready) .hero-slider__controls-wrap {
  display: none;
}

/* ---------- Header on slider page ----------
   The slider has busy image backgrounds, so we apply the same glass
   backdrop as the scrolled state — at all times. The scroll handler still
   toggles `is-scrolled` to shrink the header height. */
body:has(.hero--slider) .header,
body:has(.hero--image) .header {
  background: color-mix(in srgb, var(--ink-1) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--ink-4);
}