/* ════════════════════════════════════════════════════════════════
   MARSTALLER-UNIVERSUM — Scroll-FX (5.4.7)
   ────────────────────────────────────────────────────────────────
   1) Scroll-Indicator im Hero (Bounce-Pfeil)
   2) Scroll-basierte Hero-Typografie (sanftes Fade beim Scrollen)
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. SCROLL-INDICATOR ────────────────────────────────────── */
.mup-scroll-hint {
  position: absolute;
  bottom: max(1.75rem, env(safe-area-inset-bottom, 0px));
  left: 50%;
  translate: -50% 0;
  z-index: var(--mup-z-overlay);
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;

  opacity: 0.7;
  transition: opacity var(--mup-t-mid) var(--mup-ease-hover);
}

/* Verschwindet wenn User gescrollt hat */
body.mup-has-scrolled .mup-scroll-hint {
  opacity: 0;
}

/* Label */
.mup-scroll-hint__label {
  font-family: var(--mup-font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(248, 242, 230, 0.8);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

/* Pfeil-Linie */
.mup-scroll-hint__arrow {
  width: 1px;
  height: 32px;
  background: linear-gradient(
    to bottom,
    rgba(201, 168, 76, 0.9) 0%,
    rgba(201, 168, 76, 0.0) 100%
  );
  position: relative;
  animation: mup-scroll-line 1.8s var(--mup-ease) infinite;
  transform-origin: top center;
}

/* Pfeilspitze */
.mup-scroll-hint__arrow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  translate: -50% 0;
  width: 6px;
  height: 6px;
  border-right: 1px solid rgba(201, 168, 76, 0.9);
  border-bottom: 1px solid rgba(201, 168, 76, 0.9);
  rotate: 45deg;
  animation: mup-scroll-tip 1.8s var(--mup-ease) infinite;
}

@keyframes mup-scroll-line {
  0%   { transform: scaleY(0); opacity: 0; }
  20%  { transform: scaleY(1); opacity: 1; }
  80%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
@keyframes mup-scroll-tip {
  0%, 20%  { opacity: 0; }
  50%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* ── WOW-Hero Scroll-Hint (Position relativ zur Karte) ─────── */
.mup-wow-hero .mup-scroll-hint,
.mup-wow-header .mup-scroll-hint {
  /* Bei Karte unten: Hint sitzt oberhalb der Karte */
  bottom: auto;
  top: max(1.25rem, env(safe-area-inset-top, 0px));
}

/* ── Nur wenn nicht reduced-motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mup-scroll-hint__arrow,
  .mup-scroll-hint__arrow::after {
    animation: none;
    transform: none;
  }
  .mup-scroll-hint__arrow {
    opacity: 0.6;
    height: 24px;
  }
}

/* ─── 2. SCROLL-TYPOGRAFIE ───────────────────────────────────── */
/* JS setzt --mup-scroll (0→1) am Hero-Container via custom property.
   Nur auf Desktop wo der Effekt elegant wirkt — Mobile: keine Änderung. */

@media (min-width: 900px) {
  .mup-wow-hero__title,
  .gk-hero__title,
  .gm-hero__title,
  .ghz-hero__title,
  [class*="-hero__title"] {
    will-change: opacity, scale;
    opacity: calc(1 - var(--mup-scroll, 0) * 1.6);
    scale: calc(1 - var(--mup-scroll, 0) * 0.05);
    transition: none; /* kein transition — direkt per rAF */
  }

  /* Tagline/Lead: etwas schneller weg */
  .mup-wow-hero__sub,
  .gk-hero__tagline,
  [class*="-hero__tagline"],
  [class*="-hero__sub"] {
    opacity: calc(1 - var(--mup-scroll, 0) * 2.2);
    translate: 0 calc(var(--mup-scroll, 0) * -12px);
    transition: none;
  }

  /* Eyebrow am schnellsten */
  [class*="-eyebrow"] {
    opacity: calc(1 - var(--mup-scroll, 0) * 3);
    transition: none;
  }
}

/* ─── 3. HERO-PARALLAX BILD (leichter Depth-Effekt) ─────────── */
@media (min-width: 900px) {
  .wp-block-cover[class*="-hero"] .wp-block-cover__image-background,
  .mup-wow-hero .wp-block-cover__image-background {
    will-change: transform;
    transform: translateY(calc(var(--mup-scroll, 0) * 18px));
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [class*="-hero__title"],
  [class*="-hero__tagline"],
  [class*="-hero__sub"],
  [class*="-eyebrow"],
  .wp-block-cover[class*="-hero"] .wp-block-cover__image-background,
  .mup-wow-hero .wp-block-cover__image-background {
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 !important;
    transform: none !important;
  }
}