/* Exploreca homepage: premium motion- en designlaag.
   Alles gescoped op body.page-home; werkt bovenop explorea-beacon.css. */

body.page-home {
  --home-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* —— Hero: Ken Burns + volledige entrance —— */
@media (prefers-reduced-motion: no-preference) {
  body.page-home .beacon-hero__bg {
    animation: homeKenBurns 18s var(--home-ease-out) forwards;
  }

  @keyframes homeKenBurns {
    from {
      transform: scale(1.12);
    }
    to {
      transform: scale(1.03);
    }
  }

  body.page-home .beacon-hero__kicker,
  body.page-home .beacon-hero__lead,
  body.page-home .beacon-hero__cta-row {
    opacity: 0;
    transform: translateY(16px);
    animation: homeHeroFade 0.7s var(--home-ease-out) forwards;
  }

  body.page-home .beacon-hero__kicker {
    animation-delay: 0s;
  }

  body.page-home .beacon-hero__lead {
    animation-delay: 0.42s;
  }

  body.page-home .beacon-hero__cta-row {
    animation-delay: 0.55s;
  }

  @keyframes homeHeroFade {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* —— Scroll cue onderin de hero —— */
.home-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: color-mix(in srgb, var(--beacon-zilver) 85%, white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
}

.home-scroll-cue__line {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(180deg, var(--beacon-mint), transparent);
  overflow: hidden;
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .home-scroll-cue {
    animation: homeHeroFade 0.8s var(--home-ease-out) 1.1s forwards;
  }

  .home-scroll-cue__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, #fff 50%, transparent);
    animation: homeCueDrop 2.2s var(--beacon-ease-io) infinite;
  }

  @keyframes homeCueDrop {
    0% {
      transform: translateY(-100%);
    }
    60%,
    100% {
      transform: translateY(100%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-scroll-cue {
    opacity: 0.8;
  }
}

@media (max-height: 620px) {
  .home-scroll-cue {
    display: none;
  }
}

/* —— Scroll reveals (home-modern.js zet hrv-on op body) —— */
body.page-home.hrv-on .home-showcase-root,
body.page-home.hrv-on .home-lower-support {
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-home.hrv-on [data-hreveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s var(--home-ease-out), transform 0.75s var(--home-ease-out);
    transition-delay: var(--hd, 0s);
  }

  body.page-home.hrv-on [data-hreveal="left"] {
    transform: translateX(-36px);
  }

  body.page-home.hrv-on [data-hreveal="right"] {
    transform: translateX(36px);
  }

  body.page-home.hrv-on [data-hreveal="scale"] {
    transform: scale(0.94);
  }

  body.page-home.hrv-on [data-hreveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Gestaffelde groepen: container krijgt data-hreveal-group, kinderen volgen */
  body.page-home.hrv-on [data-hreveal-group] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s var(--home-ease-out), transform 0.65s var(--home-ease-out);
  }

  body.page-home.hrv-on [data-hreveal-group].is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  body.page-home.hrv-on [data-hreveal-group].is-visible > *:nth-child(2) {
    transition-delay: 0.09s;
  }

  body.page-home.hrv-on [data-hreveal-group].is-visible > *:nth-child(3) {
    transition-delay: 0.18s;
  }

  body.page-home.hrv-on [data-hreveal-group].is-visible > *:nth-child(4) {
    transition-delay: 0.27s;
  }

  body.page-home.hrv-on [data-hreveal-group].is-visible > *:nth-child(5) {
    transition-delay: 0.36s;
  }

  body.page-home.hrv-on [data-hreveal-group].is-visible > *:nth-child(6) {
    transition-delay: 0.45s;
  }
}

/* —— Stats: mint-lijn groeit open zodra in beeld —— */
@media (prefers-reduced-motion: no-preference) {
  body.page-home.hrv-on .beacon-stats__rule {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 1.1s var(--home-ease-out) 0.3s;
  }

  body.page-home.hrv-on .beacon-stats.is-visible .beacon-stats__rule {
    transform: scaleX(1);
  }
}

/* —— Magazine-showcase: van vlakke slabs naar premium kaarten —— */
body.page-home .home-magazine .d-md-flex {
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

body.page-home .home-magazine .text-bg-exploreca {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem) !important;
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--beacon-donkergroen) 94%, white) 0%,
    color-mix(in srgb, var(--beacon-donkergroen) 72%, var(--beacon-rich)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--beacon-mint) 14%, transparent);
  transition: border-color 250ms var(--home-ease-out), box-shadow 250ms var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.page-home .home-magazine .text-bg-exploreca:hover {
    border-color: color-mix(in srgb, var(--beacon-mint) 38%, transparent);
    box-shadow: 0 24px 60px rgba(10, 12, 10, 0.18);
  }
}

body.page-home .home-magazine .display-5 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.18;
  color: #f4fff8;
}

body.page-home .home-magazine .lead {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--beacon-zilver) 90%, white);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

body.page-home .home-magazine .gif-container {
  overflow: hidden;
  border-radius: 21px 21px 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-home .home-magazine img.gif--defer {
    transition: opacity 0.38s ease, transform 0.6s var(--home-ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    body.page-home .home-magazine .gif-container:hover img.gif--defer {
      transform: scale(1.03);
    }
  }
}

body.page-home .magnifier-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(10, 12, 10, 0.55);
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  transition: background-color 200ms var(--home-ease-out), transform 200ms var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.page-home .home-magazine .gif-container:hover .magnifier-icon {
    background-color: color-mix(in srgb, var(--beacon-mint) 80%, black);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* —— Intelligence-teaser: levende glow + zwevend woordmerk —— */
@media (prefers-reduced-motion: no-preference) {
  body.page-home .home-intelligence-teaser__glow {
    animation: homeTeaserGlow 12s ease-in-out infinite;
  }

  @keyframes homeTeaserGlow {
    0%,
    100% {
      opacity: 0.7;
      transform: translateX(0);
    }
    50% {
      opacity: 1;
      transform: translateX(2%);
    }
  }

  body.page-home .home-intelligence-teaser__wordmark {
    animation: homeWordmarkFloat 7s ease-in-out infinite;
  }

  @keyframes homeWordmarkFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-7px);
    }
  }
}

/* —— Bento: zachtere hoeken en diepere hover —— */
body.page-home .ob-bento__item {
  transition: transform 250ms var(--home-ease-out), box-shadow 250ms var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.page-home .ob-bento__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  }
}