/* ============================================================
 * maklerverkaufen.de — Motion-System
 * Pattern-Adaption aus MaklerHaus, Farben auf MVK-Brand (Türkis #27C2D6 + Salbeigrün #7DA677).
 * Regel: GPU-only (transform + opacity), Distanzen ≤ 14px, Spring-Curves bevorzugt.
 * Reduced-Motion respektieren — alle Animations werden am Ende geblockt.
 * ============================================================ */

/* CSS Custom Properties — werden von /js/motion.js per requestAnimationFrame gesetzt */
:root {
  --scroll-pct: 0;
  --mvk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mvk-ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --mvk-glow-brand: rgba(39, 194, 214, 0.18);
  --mvk-glow-sage: rgba(125, 166, 119, 0.15);
}

/* ────────────────────────────────────────────────────────────
 * 1. Scroll-Progress-Bar
 *    fixed top, gradient von Türkis nach Salbeigrün,
 *    skaliert per --scroll-pct (0..1)
 * ──────────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, #27C2D6 0%, #7DA677 100%);
  transform-origin: left center;
  transform: scaleX(var(--scroll-pct));
  pointer-events: none;
  will-change: transform;
}

/* ────────────────────────────────────────────────────────────
 * 2. Reveal-Stagger
 *    Element startet 20px tiefer + opacity:0, IntersectionObserver
 *    fügt .is-visible an → snapt mit Spring-Curve ein.
 *    Optional .reveal[data-delay="100..600"] für Stagger.
 * ──────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 700ms var(--mvk-ease-out),
    transform 700ms var(--mvk-ease-out);
}

.reveal[data-delay="100"].is-visible { transition-delay: 100ms; }
.reveal[data-delay="200"].is-visible { transition-delay: 200ms; }
.reveal[data-delay="300"].is-visible { transition-delay: 300ms; }
.reveal[data-delay="400"].is-visible { transition-delay: 400ms; }
.reveal[data-delay="500"].is-visible { transition-delay: 500ms; }
.reveal[data-delay="600"].is-visible { transition-delay: 600ms; }

/* ────────────────────────────────────────────────────────────
 * 3. Magnetic-Button
 *    JS setzt --mx/--my (Pointer-Offset), max 8px.
 *    Wechselt fließend zurück bei pointerleave (transform → 0).
 * ──────────────────────────────────────────────────────────── */
.btn,
.magnetic {
  --mx: 0px;
  --my: 0px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
}

.btn:hover,
.magnetic:hover {
  transform: translate3d(var(--mx), var(--my), 0);
}

/* ────────────────────────────────────────────────────────────
 * 4. Card-Lift + Glow
 *    Karten heben sich 4px hoch, Glow in Brand-Türkis.
 *    Keine height/scale-Änderung — nur transform + box-shadow.
 * ──────────────────────────────────────────────────────────── */
.card,
.card-hover {
  transition:
    transform 220ms var(--mvk-ease-out),
    box-shadow 220ms var(--mvk-ease-out);
  will-change: transform;
}

.card:hover,
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(14, 20, 26, 0.04),
    0 12px 40px var(--mvk-glow-brand);
}

/* Variante mit Sage-Glow für sekundäre Karten */
.card-hover-sage:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(14, 20, 26, 0.04),
    0 12px 40px var(--mvk-glow-sage);
}

/* ────────────────────────────────────────────────────────────
 * 5. View-Transitions-API (Chromium-only) + Fallback
 *    document.startViewTransition() wrapped same-origin Navigation.
 *    Cross-Fade als Fallback — kein Slide, kein Bounce.
 * ──────────────────────────────────────────────────────────── */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: var(--mvk-ease-out);
  }
  ::view-transition-old(root) {
    animation-name: mvk-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: mvk-fade-in;
  }
}

@keyframes mvk-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes mvk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────
 * 6. Float — für Hero-Karten / floating Badges
 *    Sehr langsam (10s cycle), ±6px translateY, kein Rotation.
 *    Phase-Versatz via animation-delay an der Karte selbst.
 * ──────────────────────────────────────────────────────────── */
@keyframes mvk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.float {
  animation: mvk-float 10s ease-in-out infinite;
  will-change: transform;
}

.float-slow { animation-duration: 12s; }
.float-fast { animation-duration: 8s; }

/* ────────────────────────────────────────────────────────────
 * 7. HeroEnter — Initial-Reveal beim ersten Paint
 *    Wird vom Hero-Container per Klasse .hero-enter gestartet.
 *    Spring-Curve, 600ms, 14px Distanz.
 * ──────────────────────────────────────────────────────────── */
@keyframes mvk-hero-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-enter {
  animation: mvk-hero-enter 600ms var(--mvk-spring) both;
}

.hero-enter[data-delay="100"] { animation-delay: 100ms; }
.hero-enter[data-delay="200"] { animation-delay: 200ms; }
.hero-enter[data-delay="300"] { animation-delay: 300ms; }
.hero-enter[data-delay="400"] { animation-delay: 400ms; }

/* ────────────────────────────────────────────────────────────
 * 8. Hero-Parallax-Container
 *    JS setzt --px/--py per mousemove (max ±14px).
 * ──────────────────────────────────────────────────────────── */
.hero-parallax {
  --px: 0px;
  --py: 0px;
  transform: translate3d(var(--px), var(--py), 0);
  transition: transform 80ms linear; /* sehr kurzes lerp, kein Sprung */
  will-change: transform;
}

/* ────────────────────────────────────────────────────────────
 * 9. Reduced-Motion — alles aus.
 *    Greift bei System-Setting oder Force-Override über class.
 * ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }

  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn, .magnetic, .card, .card-hover, .card-hover-sage,
  .float, .float-slow, .float-fast,
  .hero-enter, .hero-parallax {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Force-Off-Class für JS-Toggle (z.B. Settings-Page) */
html.no-motion .scroll-progress { display: none; }
html.no-motion .reveal,
html.no-motion .reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.no-motion .btn,
html.no-motion .magnetic,
html.no-motion .card,
html.no-motion .card-hover,
html.no-motion .card-hover-sage,
html.no-motion .float,
html.no-motion .hero-enter,
html.no-motion .hero-parallax {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}