/**
 * Handle: fenix-fx-scroll
 * Scroll-/Übergangs-Presets. Tokens: --fx-nav-bg, --fx-ember.
 * Header-Blur/Sticky/Schatten bleiben in fx-chrome / Experience.
 */

/* ---- header-shrink: gleiche Layer wie header.php, sonst verliert !important ---- */

html body.fenix-motion-scroll-header-shrink .fenix-site-header,
html body.fenix-motion-scroll-header-shrink .fenix-site-header.fx-bg-ink,
html body.fenix-motion-scroll-header-shrink .fenix-site-header.fx-bg-paper {
  transition:
    padding 180ms ease,
    border-color var(--fx-ease, 180ms ease),
    background-color var(--fx-ease, 180ms ease),
    box-shadow var(--fx-ease, 180ms ease);
}

html body.fenix-motion-scroll-header-shrink .fenix-site-header .fenix-site-header__mark,
html body.fenix-motion-scroll-header-shrink .fenix-site-header .fenix-site-header__logo-img,
html body.fenix-motion-scroll-header-shrink .fenix-site-header .fenix-site-header__wordmark {
  transition: height 180ms ease, max-height 180ms ease, width 180ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  @layer utilities {
    html body.fenix-motion-scroll-header-shrink.fenix-exp-density-comfortable .fenix-site-header.is-scrolled,
    html body.fenix-motion-scroll-header-shrink.fenix-exp-density-comfortable .fenix-site-header.fx-bg-ink.is-scrolled,
    html body.fenix-motion-scroll-header-shrink.fenix-exp-density-comfortable .fenix-site-header.fx-bg-paper.is-scrolled,
    html body.fenix-motion-scroll-header-shrink.fenix-exp-density-compact .fenix-site-header.is-scrolled,
    html body.fenix-motion-scroll-header-shrink.fenix-exp-density-compact .fenix-site-header.fx-bg-ink.is-scrolled,
    html body.fenix-motion-scroll-header-shrink .fenix-site-header.is-scrolled,
    html body.fenix-motion-scroll-header-shrink .fenix-site-header.fx-bg-ink.is-scrolled {
      padding-top: 0.2rem !important;
      padding-bottom: 0.2rem !important;
      border-bottom-color: color-mix(in srgb, var(--fx-ember, #cf9622) 30%, transparent) !important;
    }

    html body.fenix-motion-scroll-header-shrink .fenix-site-header.is-scrolled .fenix-site-header__mark,
    html body.fenix-motion-scroll-header-shrink .fenix-site-header.is-scrolled .fenix-site-header__mark--image,
    html body.fenix-motion-scroll-header-shrink .fenix-site-header.is-scrolled .fenix-site-header__logo-img {
      height: 1.85rem !important;
      max-height: 1.85rem !important;
    }
  }
}

/* ---- fade-up: erst nach JS-ready, sonst bleibt alles sichtbar ---- */

html.fenix-fx-scroll-ready body.fenix-motion-scroll-fade-up [data-fx-scroll-reveal]:not(.is-fx-in) {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

html.fenix-fx-scroll-ready body.fenix-motion-scroll-fade-up [data-fx-scroll-reveal].is-fx-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 420ms ease;
}

/* ---- parallax-subtle ---- */

html body.fenix-motion-scroll-parallax-subtle [data-fx-parallax] {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ---- page-fade ---- */

html.is-fx-page-leave body.fenix-motion-scroll-page-fade,
html.fenix-motion-scroll-page-fade.is-fx-page-leave body {
  opacity: 0;
  transition: opacity 140ms ease-out;
}

html.is-fx-page-enter body.fenix-motion-scroll-page-fade,
html.fenix-motion-scroll-page-fade.is-fx-page-enter body {
  animation: fx-scroll-page-in 180ms ease-out both;
}

@keyframes fx-scroll-page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.fenix-motion-scroll-header-shrink .fenix-site-header,
  html body.fenix-motion-scroll-header-shrink .fenix-site-header.is-scrolled,
  html body.fenix-motion-scroll-header-shrink .fenix-site-header .fenix-site-header__mark,
  html body.fenix-motion-scroll-header-shrink .fenix-site-header .fenix-site-header__logo-img,
  html body.fenix-motion-scroll-header-shrink .fenix-site-header .fenix-site-header__wordmark {
    transition: none !important;
    transform: none !important;
  }

  html.fenix-fx-scroll-ready body.fenix-motion-scroll-fade-up [data-fx-scroll-reveal],
  html.fenix-fx-scroll-ready body.fenix-motion-scroll-fade-up [data-fx-scroll-reveal]:not(.is-fx-in),
  html.fenix-fx-scroll-ready body.fenix-motion-scroll-fade-up [data-fx-scroll-reveal].is-fx-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html body.fenix-motion-scroll-parallax-subtle [data-fx-parallax] {
    transform: none !important;
    will-change: auto;
  }

  html.is-fx-page-leave body.fenix-motion-scroll-page-fade,
  html.is-fx-page-enter body.fenix-motion-scroll-page-fade,
  html.fenix-motion-scroll-page-fade.is-fx-page-leave body,
  html.fenix-motion-scroll-page-fade.is-fx-page-enter body {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  html.fenix-fx-scroll-ready body.fenix-motion-scroll-fade-up [data-fx-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}