/* =============================================================================
   Feed The Feed — WordPress-Ergänzungen zum kompilierten Design-System.
   Ersetzt die frühere Framer-Motion-Logik durch CSS + IntersectionObserver.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1) Scroll-Einblendungen (ersetzt <Reveal>/<Stagger> aus React)
   Wichtig: Inhalte werden NUR versteckt, wenn JavaScript läuft (html.ftf-js).
   Fällt JS aus, ist alles sofort sichtbar — nie wieder eine "leere" Seite.
--------------------------------------------------------------------------- */
html.ftf-js .ftf-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   .5s cubic-bezier(.16, 1, .3, 1),
    transform .5s cubic-bezier(.16, 1, .3, 1);
}
html.ftf-js .ftf-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Verzögerungs-Stufen für gestaffelte Karten (JS vergibt data-Attribute) */
html.ftf-js [data-stagger] > .ftf-reveal { transition-delay: var(--ftf-delay, 0s); }

/* ---------------------------------------------------------------------------
   2) Hero-Eingangsanimation — reines CSS statt JavaScript.
   Läuft sofort beim Laden (kein Warten auf JS) → schnellerer LCP.
--------------------------------------------------------------------------- */
@keyframes ftf-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ftf-phone-in {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.ftf-hero-item  { animation: ftf-fade-up .75s cubic-bezier(.16, 1, .3, 1) both; }
.ftf-hero-phone { animation: ftf-phone-in .9s  cubic-bezier(.16, 1, .3, 1) both; animation-delay: .25s; }

/* ---------------------------------------------------------------------------
   3) Mobiles Menü (ersetzt AnimatePresence)
--------------------------------------------------------------------------- */
.ftf-menu { display: none; }
.ftf-menu.is-open { display: block; animation: ftf-menu-fade .25s ease both; }
@keyframes ftf-menu-fade { from { opacity: 0; } to { opacity: 1; } }
.ftf-menu.is-open li {
  animation: ftf-fade-up .45s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.05s + var(--i, 0) * .06s);
}

/* ---------------------------------------------------------------------------
   4) FAQ-Akkordeon (ersetzt Framer-Height-Animation)
--------------------------------------------------------------------------- */
/* Nur zuklappen, wenn JS läuft — ohne JS bleiben alle Antworten lesbar. */
html.ftf-js .ftf-faq-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height  .4s cubic-bezier(.16, 1, .3, 1),
    opacity .4s cubic-bezier(.16, 1, .3, 1);
}
html.ftf-js .ftf-faq-panel.is-open { opacity: 1; }

/* ---------------------------------------------------------------------------
   5) Kontaktformular: Erfolgs-/Formular-Umschaltung
--------------------------------------------------------------------------- */
.ftf-contact-success { display: none; }
.ftf-contact.is-success .ftf-contact-success { display: flex; animation: ftf-fade-up .4s ease both; }
.ftf-contact.is-success .ftf-contact-form    { display: none; }

/* ---------------------------------------------------------------------------
   6) "Bewegung reduzieren": Inhalte SOFORT zeigen (nichts ausblenden!),
   nur die Eingangs-Animationen überspringen. Laufband/Videos regelt app.css.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.ftf-js .ftf-reveal,
  .ftf-hero-item,
  .ftf-hero-phone {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}