/* =========================================================
   MALERPLUS • mp-landing-motion.css
   Apple-Level Scroll-Reveal + Micro-Interactions
   - GPU-freundlich (transform + opacity)
   - kein Layout-Reflow
   - Reduced-Motion respektiert
   ========================================================= */

/* ---- Reveal-Base ---- */
.mp-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 520ms cubic-bezier(.16,1,.3,1),
    transform 520ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.mp-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Varianten */
.mp-reveal-left  { transform: translate3d(-18px, 0, 0); }
.mp-reveal-right { transform: translate3d( 18px, 0, 0); }
.mp-reveal-zoom  { transform: scale(.98); }
.mp-reveal-left.is-in, .mp-reveal-right.is-in { transform: translate3d(0,0,0); }
.mp-reveal-zoom.is-in { transform: scale(1); }

/* Staffelung über Custom-Prop (max 120ms) */
.mp-reveal { transition-delay: var(--mp-reveal-delay, 0ms); }

/* ---- Parallax-Layer ---- */
/* body::before bewegt sich via --mp-parallax-y (in px), von JS gesetzt */
body::before {
  transform: translate3d(0, var(--mp-parallax-y, 0), 0) !important;
  will-change: transform;
}

/* ---- Micro-Interactions ---- */
.btn,
.feat-card,
.price-card,
.shot {
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    box-shadow 220ms cubic-bezier(.16,1,.3,1),
    border-color 220ms cubic-bezier(.16,1,.3,1) !important;
}
.btn:hover            { transform: translateY(-1px) scale(1.02); }
.btn-primary:hover    { box-shadow: 0 14px 34px rgba(43,176,255,.35); }
.feat-card:hover      { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(11,15,25,.05), 0 20px 48px rgba(11,15,25,.10); }
.price-card:hover     { transform: translateY(-2px); }
.shot:hover           { transform: translateY(-2px) scale(1.005); }

/* Buttons drücken sich beim Klick */
.btn:active { transform: translateY(0) scale(.99); }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mp-reveal,
  .mp-reveal-left,
  .mp-reveal-right,
  .mp-reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body::before { transform: none !important; }
  .btn:hover,
  .feat-card:hover,
  .price-card:hover,
  .shot:hover { transform: none !important; }
}