/* =========================================================================
   VistaFront — lp-motion.css
   Motion-Layer für lokale Landingpages: kinematischer Hero (Wort-für-Wort-
   Reveal, 3D-Browser-Entrance, Pin-Drops, Orb-Parallax), Scroll-Reveals,
   Stats-Count-Up. Alle Hidden-States greifen NUR wenn html.lp-motion
   gesetzt ist (JS aktiv + kein prefers-reduced-motion) — ohne JS bleibt
   die Seite vollständig sichtbar.
   ========================================================================= */

/* ── Hero: Headline Wort-Reveal ─────────────────────────────────────── */
html.lp-motion .vf-hero__copy { animation: none; }

html.lp-motion .vf-display .lpw {
  display: inline-block;
  white-space: pre;
}
html.lp-motion .vf-display .lpw__i {
  display: inline-block;
  animation: lp-word 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0.35s);
  will-change: transform, opacity, filter;
}
@keyframes lp-word {
  from {
    opacity: 0;
    transform: translateY(0.65em) rotate(2.5deg) scale(0.98);
    filter: blur(10px);
  }
  60% { filter: blur(0); }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
    filter: blur(0);
  }
}

/* Akzent-Wörter (em): kurzer Farb-Sweep nach dem Reveal */
html.lp-motion .vf-display em .lpw__i {
  background: linear-gradient(100deg, var(--ink-soft) 0%, var(--accent) 45%, var(--accent-2) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lp-word 1s cubic-bezier(0.22, 1, 0.36, 1) both,
             lp-em-sweep 1.6s ease-out both;
  animation-delay: var(--d, 0.35s), calc(var(--d, 0.35s) + 0.45s);
}
@keyframes lp-em-sweep {
  from { background-position: 120% 0; }
  to   { background-position: 0% 0; }
}

/* ── Hero: Begleit-Elemente gestaffelt ──────────────────────────────── */
html.lp-motion .vf-hero .lp-badge,
html.lp-motion .vf-hero__copy .vf-lede,
html.lp-motion .vf-hero__ctas,
html.lp-motion .vf-hero__proof li {
  animation: lp-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.lp-motion .vf-hero .lp-badge { animation-delay: 0.12s; }
html.lp-motion .vf-hero__copy .vf-lede { animation-delay: 1.15s; }
html.lp-motion .vf-hero__ctas { animation-delay: 1.3s; }
html.lp-motion .vf-hero__proof li:nth-child(1) { animation-delay: 1.45s; }
html.lp-motion .vf-hero__proof li:nth-child(2) { animation-delay: 1.55s; }
html.lp-motion .vf-hero__proof li:nth-child(3) { animation-delay: 1.65s; }
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Ribbon + Nav sanft von oben */
html.lp-motion .vf-ribbon { animation: lp-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.lp-motion .vf-nav { animation: lp-drop 0.7s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lp-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero: Browser-Mockup 3D-Entrance + Float ───────────────────────── */
html.lp-motion .vf-hero__viz {
  animation: none;
  perspective: 1400px;
}
html.lp-motion .vf-browser {
  transform-style: preserve-3d;
  animation: lp-viz-in 1.3s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both,
             lp-viz-float 7s 2.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes lp-viz-in {
  from {
    opacity: 0;
    transform: translateY(54px) rotateX(10deg) rotateY(-8deg) scale(0.94);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0) rotateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes lp-viz-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* SERP-Pins: nacheinander eindroppen, Pin 1 pulsiert */
html.lp-motion .vf-serp__pin {
  animation: lp-pin 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
html.lp-motion .vf-serp__pin--1 { animation-delay: 1.5s; }
html.lp-motion .vf-serp__pin--2 { animation-delay: 1.68s; }
html.lp-motion .vf-serp__pin--3 { animation-delay: 1.84s; }
@keyframes lp-pin {
  from { opacity: 0; transform: rotate(-45deg) scale(0) translateY(-18px); }
  to   { opacity: 1; transform: rotate(-45deg) scale(1) translateY(0); }
}
html.lp-motion .vf-serp__pin--1::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50% 50% 50% 0;
  border: 2px solid rgba(31, 111, 235, 0.55);
  animation: lp-pin-pulse 2.4s 2.3s ease-out infinite;
}
@keyframes lp-pin-pulse {
  0%   { opacity: 0.9; transform: scale(0.8); }
  70%  { opacity: 0;   transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* SERP-Ergebniszeilen einsliden */
html.lp-motion .vf-serp__results li {
  animation: lp-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.lp-motion .vf-serp__results li:nth-child(1) { animation-delay: 1.7s; }
html.lp-motion .vf-serp__results li:nth-child(2) { animation-delay: 1.85s; }
html.lp-motion .vf-serp__results li:nth-child(3) { animation-delay: 2s; }

/* ── Hero: Orbs — langsamer Drift + Maus-Parallax (JS setzt --mx/--my) ─ */
html.lp-motion .vf-hero__orb {
  animation: lp-orb-drift 16s ease-in-out infinite alternate;
  transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  translate: calc(var(--mx, 0) * 28px) calc(var(--my, 0) * 20px);
  will-change: translate;
}
html.lp-motion .vf-hero__orb--2 {
  animation-delay: -8s;
  translate: calc(var(--mx, 0) * -20px) calc(var(--my, 0) * -14px);
}
@keyframes lp-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-36px, 26px) scale(1.12); }
}

/* ── Scroll-Reveals (JS vergibt data-lpr + --lpd) ───────────────────── */
html.lp-motion [data-lpr] {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--lpd, 0s);
}
html.lp-motion [data-lpr].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── Micro-Interactions: Karten-Lift ────────────────────────────────── */
html.lp-motion .vf-service,
html.lp-motion .vf-testi__card,
html.lp-motion .lp-compare__card {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
html.lp-motion .vf-service:hover,
html.lp-motion .vf-testi__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-2);
}
html.lp-motion .lp-compare__card:hover { transform: translateY(-3px); }

/* Stats-Zahlen: leichter Pop beim Count-Up */
html.lp-motion .vf-stats__value.is-counting {
  animation: lp-stat-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lp-stat-pop {
  from { transform: scale(0.82); opacity: 0.4; }
  to   { transform: scale(1); opacity: 1; }
}

/* Reduced Motion: globale Regel in styles.css nullt Dauer/Delay bereits;
   zusätzlich entfernen wir hier alle Initial-Verstecke sicherheitshalber. */
@media (prefers-reduced-motion: reduce) {
  html.lp-motion .vf-display .lpw__i,
  html.lp-motion .vf-hero .lp-badge,
  html.lp-motion .vf-hero__copy .vf-lede,
  html.lp-motion .vf-hero__ctas,
  html.lp-motion .vf-hero__proof li,
  html.lp-motion .vf-browser,
  html.lp-motion .vf-serp__pin,
  html.lp-motion .vf-serp__results li,
  html.lp-motion [data-lpr] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}