/*
 * Leichte Animationen für Startseite, Fragebögen und Onboarding. Alles nur Dekoration und ausschließlich
 * für Besucher, die Bewegung nicht abgeschaltet haben (Systemeinstellung "Bewegung reduzieren").
 * Es werden nur opacity/translate/scale animiert (flüssig, kein Layout-Springen).
 */
@media (prefers-reduced-motion: no-preference) {

  @keyframes m-fade-up { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes m-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes m-drop-in { from { opacity: 0; translate: 0 26px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes m-step-fwd { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes m-step-back { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes m-pop { 0% { scale: 1; } 45% { scale: 1.035; } 100% { scale: 1; } }
  @keyframes m-bar-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes m-shake { 0%, 100% { translate: 0 0; } 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
  @keyframes m-badge-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

  /* ---- Startseite / öffentliche Seiten ---- */
  .hero > * { animation: m-fade-up 650ms var(--ease-out) backwards; }
  .hero > :nth-child(2) { animation-delay: 80ms; }
  .hero > :nth-child(3) { animation-delay: 160ms; }
  .hero > :nth-child(4) { animation-delay: 240ms; }
  .hero > .hero-polaroids { animation: none; }
  .polaroid { animation: m-drop-in 750ms var(--ease-out) backwards; transition: translate 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
  .polaroid-1 { animation-delay: 60ms; }
  .polaroid-2 { animation-delay: 160ms; }
  .polaroid-3 { animation-delay: 260ms; }

  .btn { transition: background var(--dur) var(--ease-standard), filter var(--dur) var(--ease-standard), translate var(--dur) var(--ease-standard), scale var(--dur-fast) var(--ease-standard); }
  .btn:active { scale: .985; translate: 0 0; }
  .btn svg { transition: translate var(--dur) var(--ease-out); }

  .occasion-card { transition: box-shadow 220ms var(--ease-standard), translate 220ms var(--ease-out); }
  .occasion-thumb img, .occasion-thumb .photo-img { transition: scale 500ms var(--ease-out); }

  /* Beim Scrollen einblenden (motion.js setzt die Klassen nur für Elemente unterhalb des ersten Bildschirms) */
  .m-reveal { opacity: 0; translate: 0 22px; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: var(--m-delay, 0ms); }
  .m-reveal.is-in { opacity: 1; translate: 0 0; }

  /* ---- Fragebögen und Onboarding: Schrittwechsel ---- */
  .fx-step.is-active .fx-shell > *, .fx-landing .fx-shell > * { animation: m-step-fwd 380ms var(--ease-out) backwards; }
  .funnel-form[data-dir="back"] .fx-step.is-active .fx-shell > * { animation-name: m-step-back; }
  .fx-step.is-active .fx-shell > :nth-child(2), .fx-landing .fx-shell > :nth-child(2) { animation-delay: 50ms; }
  .fx-step.is-active .fx-shell > :nth-child(3), .fx-landing .fx-shell > :nth-child(3) { animation-delay: 100ms; }
  .fx-step.is-active .fx-shell > :nth-child(4), .fx-landing .fx-shell > :nth-child(4) { animation-delay: 150ms; }
  .fx-landing .fx-shell > :nth-child(n+5) { animation-delay: 200ms; }

  .fx-continue-bar { animation: m-bar-in 300ms var(--ease-out); }
  .fx-step.is-active .fx-shell > .fx-error { animation: m-shake 420ms var(--ease-standard), m-fade-in 200ms var(--ease-standard); }

  .ob-step.is-active .ob-shell > * { animation: m-fade-up 480ms var(--ease-out) backwards; }
  .ob-step.is-active .ob-shell > :nth-child(2) { animation-delay: 60ms; }
  .ob-step.is-active .ob-shell > :nth-child(3) { animation-delay: 120ms; }
  .ob-step.is-active .ob-shell > :nth-child(4) { animation-delay: 190ms; }
  .ob-step.is-active .ob-badge { animation: m-badge-in 420ms var(--ease-out) backwards; }
  .ob-media { animation: m-fade-in 600ms var(--ease-standard) 200ms backwards; }
  .ob-dots span { transition: background var(--dur) var(--ease-standard), scale var(--dur) var(--ease-out); }

  /* ---- Auswahl-Kacheln und Zeilen: Rückmeldung beim Antippen ---- */
  .tile-card { transition: border-color var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard), translate var(--dur) var(--ease-out), scale var(--dur-fast) var(--ease-standard); }
  .tile:active .tile-card { scale: .98; }
  .tile:has(input:checked) .tile-card { animation: m-pop 320ms var(--ease-out); }
  .tile-radio > span { scale: 0; transition: scale var(--dur) var(--ease-out), background var(--dur) var(--ease-standard); }
  .tile:has(input:checked) .tile-radio > span { scale: 1; }
  .tile-check svg { animation: m-badge-in 220ms var(--ease-out); }
  .choice-row:has(input:checked) .row-check { animation: m-pop 300ms var(--ease-out); }

  .field input:focus, .field select:focus, .field textarea:focus { transition: border-color var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard); }
  .accordion-panel:not([hidden]) { animation: m-fade-up 260ms var(--ease-out); }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .polaroid:hover { translate: 0 -6px; }
  .btn-primary:hover { translate: 0 -1px; }
  .btn:hover svg:last-child { translate: 3px 0; }
  .occasion-card:hover { translate: 0 -2px; }
  .occasion-card:hover .occasion-thumb img, .occasion-card:hover .occasion-thumb .photo-img { scale: 1.05; }
  .tile:hover .tile-card { translate: 0 -2px; box-shadow: 0 6px 18px rgba(23, 23, 23, .08); }
}