/* ============================================================
   SCHWERELOS – Motion
   Leichte Animationen, ergänzend zu den Reveals aus base.css.
   Alles wird bei prefers-reduced-motion abgeschaltet.
   ============================================================ */

:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes slUp     { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes slFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slZoom   { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes slDrift  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2.5%); } }
@keyframes slBreath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ------ Hero-Intro: Inhalte gestaffelt einblenden ------ */
.hero__content > *,
.page-hero__inner > *,
.about-hero__inner > *,
.leistungen-hero__inner > *,
.simple-hero .container > *,
.termin-hero .container > *,
.kontakt-info > * {
  animation: slUp 0.95s var(--ease-out) backwards;
}
:is(.hero__content, .page-hero__inner, .about-hero__inner, .leistungen-hero__inner, .simple-hero .container, .termin-hero .container, .kontakt-info) > :nth-child(1) { animation-delay: 0.10s; }
:is(.hero__content, .page-hero__inner, .about-hero__inner, .leistungen-hero__inner, .simple-hero .container, .termin-hero .container, .kontakt-info) > :nth-child(2) { animation-delay: 0.22s; }
:is(.hero__content, .page-hero__inner, .about-hero__inner, .leistungen-hero__inner, .simple-hero .container, .termin-hero .container, .kontakt-info) > :nth-child(3) { animation-delay: 0.36s; }
:is(.hero__content, .page-hero__inner, .about-hero__inner, .leistungen-hero__inner, .simple-hero .container, .termin-hero .container, .kontakt-info) > :nth-child(4) { animation-delay: 0.48s; }
:is(.hero__content, .page-hero__inner, .about-hero__inner, .leistungen-hero__inner, .simple-hero .container, .termin-hero .container, .kontakt-info) > :nth-child(n+5) { animation-delay: 0.58s; }

.kontakt-section .form-card { animation: slUp 1s var(--ease-out) 0.4s backwards; }

/* Hero-Bild: sanft aus leichtem Zoom, dann ruhiges Schweben */
.hero__visual,
.page-hero__img {
  animation: slZoom 1.8s var(--ease-out) backwards, heroFloat 9s ease-in-out 1.8s infinite;
  will-change: transform;
}
/* Parallax per JS: --sl-shift wird beim Scrollen gesetzt */
.hero__visual,
.page-hero__img { translate: 0 var(--sl-shift, 0px); }

/* ------ Section-Titel: weicher Fokus + Akzentlinie ------ */
.section__title.reveal {
  filter: blur(6px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.9s var(--ease-out);
}
.section__title.reveal.is-visible { filter: none; }
.section__title::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.28;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) 0.35s;
}
.next-events .section__title::after { margin-left: 0; transform-origin: left; }
.section__title.is-visible::after,
.reveal-stagger .section__title::after { transform: scaleX(1); }

/* ------ Karten: Icons reagieren auf Hover ------ */
:is(.pillar__icon, .offer-card__icon, .value-item__icon, .format-card__icon, .ablauf-step__icon) svg {
  transition: transform 0.5s var(--ease-out);
}
:is(.pillar, .offer-card, .value-item, .format-card, .ablauf-step):hover :is(.pillar__icon, .offer-card__icon, .value-item__icon, .format-card__icon, .ablauf-step__icon) svg {
  transform: translateY(-3px) rotate(-6deg) scale(1.08);
}

/* Weicher Lichtschein auf farbigen Karten */
:is(.pillar, .offer-card, .value-item, .format-card, .angebot-card, .topic-item, .leistung-row) {
  position: relative;
  isolation: isolate;
}
:is(.pillar, .offer-card, .value-item, .format-card, .angebot-card, .topic-item, .leistung-row)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.16), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
:is(.pillar, .offer-card, .value-item, .format-card, .angebot-card, .topic-item, .leistung-row):hover::before { opacity: 1; }
.topic-item { transition: transform 0.35s var(--ease-out); }
.topic-item:hover { transform: translateY(-4px); }

/* Links mit Pfeil */
.pillar__link::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.35s var(--ease-out);
}
.pillar:hover .pillar__link::after { transform: translateX(5px); }

/* Ablauf-Schritte: Nummer wächst ein */
.ablauf-step__num { transition: color 0.35s ease, transform 0.45s var(--ease-out); transform-origin: left bottom; }
.ablauf-step:hover .ablauf-step__num { transform: scale(1.12); color: var(--ernaehrung-mid); }

/* Vorteile: Icon „atmet“ leicht, nacheinander versetzt */
.benefits-list.is-visible .benefit-item__icon { animation: slBreath 3.6s ease-in-out infinite; }
.benefits-list .benefit-item:nth-child(2n) .benefit-item__icon { animation-delay: 0.6s; }
.benefits-list .benefit-item:nth-child(3n) .benefit-item__icon { animation-delay: 1.2s; }

/* Termin-Listen */
.termin-item__date, .next-event-item__date { transition: color 0.3s ease; }
.termin-item:hover .termin-item__date,
.next-event-item:hover .next-event-item__date { color: var(--black); }
.termin-tag { transition: transform 0.35s var(--ease-out); }
:is(.termin-item, .next-event-item):hover .termin-tag { transform: translateX(-4px); }

/* Service-Karten: Tags schieben sich minimal */
.service-card .tag { transition: transform 0.35s var(--ease-out), background 0.3s ease; }
.service-card:hover .tag { transform: translateY(-2px); }

/* ------ Porträt: Bild öffnet sich nach oben (Overlay statt clip-path,
   damit der IntersectionObserver das Element weiterhin „sieht“) ------ */
.about-portrait { overflow: hidden; }
.about-portrait.reveal { transform: none; opacity: 1; }
.about-portrait.reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  transform-origin: 50% 0;
  transition: transform 1.3s var(--ease-out) 0.1s;
}
.about-portrait.reveal.is-visible::after { transform: scaleY(0); }

/* ------ Zitat ------ */
.parallax-section__text blockquote::before { transition: transform 1.2s var(--ease-out) 0.2s, opacity 1.2s ease 0.2s; }
.parallax-section__text.reveal:not(.is-visible) blockquote::before { transform: translate(-50%, 18px); opacity: 0; }
.parallax-section__text cite { transition: width 1s var(--ease-out) 0.5s; }
.parallax-section__text.reveal:not(.is-visible) cite { width: 0; }

/* ------ Buttons: taktiles Feedback ------ */
.btn { transition: all var(--transition), transform 0.25s var(--ease-out); }
.btn:active { transform: translateY(0) scale(0.97); }

/* Formularfelder: Fokus-Glow */
.form-group input, .form-group select, .form-group textarea { transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { box-shadow: 0 0 0 4px rgba(113,146,134,0.14); }

/* ------ Footer-Wortmarke driftet langsam ------ */
.footer::before { animation: slDrift 28s ease-in-out infinite; }

/* ------ Scroll-Fortschritt (CI-Farbverlauf) ------ */
.sl-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 101;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--sl-progress, 0));
  background: linear-gradient(90deg, var(--ernaehrung-mid), var(--coaching-mid), var(--fitness-mid), var(--workshops-mid));
}
.admin-bar .sl-progress { top: 32px; }

/* ------ Barrierefreiheit: keine Bewegung, wenn gewünscht ------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > *, .section__title.reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .about-portrait.reveal::after { display: none; }
  .hero__visual, .page-hero__img { translate: none !important; }
  .sl-progress, body::after { display: none; }
}