/* ── Pool Buddy Motion System ────────────────────────────────────────────── */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-xfast: 120ms;
  --dur-fast:  200ms;
  --dur-base:  300ms;
  --dur-slow:  460ms;
}

/* Tailwind-Defaults aufwerten */
.transition-all        { transition-timing-function: var(--ease-out-quart) !important; transition-duration: var(--dur-base) !important; }
.transition-transform  { transition-timing-function: var(--ease-out-quart) !important; transition-duration: var(--dur-base) !important; }
.transition-opacity    { transition-timing-function: var(--ease-out-expo)  !important; transition-duration: var(--dur-base) !important; }
.transition-colors     { transition-timing-function: var(--ease-soft)      !important; transition-duration: var(--dur-fast) !important; }

/* Tap-Feedback: kurz & federnd */
[class*="active:scale-"] { transition-property: transform, background-color, box-shadow, border-color; transition-timing-function: var(--ease-out-quart); transition-duration: var(--dur-fast); }
[class*="active:scale-"]:active { transition-duration: 90ms; }

/* Cards: weicher Hover/Press */
.profile-card, .diagnosis-card {
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart),
              background-color var(--dur-fast) var(--ease-soft) !important;
}
.diagnosis-card:active { transform: scale(0.97); }
.profile-card:active   { transform: scale(0.98); }

/* Snackbar – federnder Eintritt */
#snackbar {
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-spring) !important;
}

/* Bottom Sheets */
#maint-sheet, #edit-sheet, #recommendation-sheet, #idx-maint-sheet, #wcs-sheet,
[id$="-sheet"] {
  transition: transform var(--dur-slow) var(--ease-out-expo) !important;
  will-change: transform;
}
#maint-overlay, #edit-overlay, #recommendation-overlay, #idx-maint-overlay, #wcs-overlay,
[id$="-overlay"] {
  transition: opacity var(--dur-base) var(--ease-out-expo) !important;
}


/* Bottom-Sheets auf kleinen Displays scrollbar machen.
   Fix: Bestätigungsbuttons (z. B. „Alle Daten löschen“) dürfen nicht unter dem Viewport verschwinden. */
#maint-sheet, #edit-sheet, #recommendation-sheet, #idx-maint-sheet, #wcs-sheet,
#reset-sheet, #fb-sheet, #level-sheet, #exp-sheet,
[id$="-sheet"] {
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - 16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#reset-actions {
  position: sticky;
  bottom: 0;
  background: #f8f9ff;
  padding-top: 12px;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}

/* Diagnose-Stepper */
#view-cards, #view-stepper {
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-quart) !important;
}
#view-cards.exiting  { opacity: 0; transform: translateX(-24px); pointer-events: none; }
#view-stepper.exiting{ opacity: 0; transform: translateX(24px);  pointer-events: none; }

/* Progress-Bar */
.progress-fill { transition: width var(--dur-slow) var(--ease-out-expo) !important; }

/* Page-Entrance Stagger */
@keyframes pp-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pp-pop-in {
  0%   { opacity: 0; transform: scale(0.92) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.pp-enter {
  opacity: 0;
  animation: pp-fade-up var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: calc(var(--pp-i, 0) * 70ms);
}

/* Stepper Frage rein */
@keyframes pp-step-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step-in { animation: pp-step-in var(--dur-base) var(--ease-out-expo) both; }

/* Antwort-Auswahl Pulse */
@keyframes pp-pick {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.answer-btn.selected { animation: pp-pick 260ms var(--ease-out-quart); }

/* Notification-Badge Puls */
@keyframes pp-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(186,26,26,0.55); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 7px rgba(186,26,26,0); }
}
#notif-badge:not(.hidden) {
  animation: pp-pulse 1.8s var(--ease-in-out) infinite;
  transform-origin: center;
}

/* Hero-Wave: sanftes Driften */
@keyframes pp-wave-drift {
  0%, 100% { transform: translateX(0)   scaleY(1); }
  50%      { transform: translateX(12px) scaleY(1.04); }
}
.wave { animation: pp-wave-drift 7s var(--ease-in-out) infinite; will-change: transform; }

/* Icon-Container sanftes Atmen (Empfehlungsleiste) */
@keyframes pp-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
#recommendation-icon-bg { animation: pp-breathe 4s var(--ease-in-out) infinite; }

/* ── Page-Transitions ────────────────────────────────────────────────────── */

/* Native cross-document View Transitions (Chrome/Edge/Safari) */
@view-transition { navigation: auto; }

@keyframes pp-vt-fade-out  { to { opacity: 0; } }
@keyframes pp-vt-fade-in   { from { opacity: 0; } }
@keyframes pp-vt-slide-out-left  { to   { transform: translateX(-32px); opacity: 0; } }
@keyframes pp-vt-slide-in-right  { from { transform: translateX(32px);  opacity: 0; } }
@keyframes pp-vt-slide-out-right { to   { transform: translateX(32px);  opacity: 0; } }
@keyframes pp-vt-slide-in-left   { from { transform: translateX(-32px); opacity: 0; } }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-out-expo);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: pp-vt-slide-out-left; }
::view-transition-new(root) { animation-name: pp-vt-slide-in-right; }

html[data-pp-dir="right"]::view-transition-old(root) { animation-name: pp-vt-slide-out-right; }
html[data-pp-dir="right"]::view-transition-new(root) { animation-name: pp-vt-slide-in-left; }

/* Fallback (Firefox & ältere Browser): JS-gesteuerter Fade */
@keyframes pp-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pp-page-out-left  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-18px); } }
@keyframes pp-page-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(18px); } }

/* Anti-Flash: nur im Fallback-Pfad body anfangs ausblenden */
html.pp-fallback body { opacity: 0; }

/* WICHTIG: Keine transform-Animation auf <body>!
   Ein transformierter body wird zum Containing Block für position:fixed –
   die Bottom-Nav löst sich dann vom Viewport und landet am Dokumentende.
   Deshalb: body animiert nur die Opacity, die Bewegung läuft auf <main>. */
@keyframes pp-body-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-body-fade-out { from { opacity: 1; } to { opacity: 0; } }

html.pp-fallback.pp-page-in body        { animation: pp-body-fade-in 340ms var(--ease-out-expo) both; opacity: 1; }
html.pp-fallback.pp-page-in body > main { animation: pp-page-in 340ms var(--ease-out-expo) both; }
html.pp-fallback.pp-page-out-left body         { animation: pp-body-fade-out 160ms var(--ease-out-quart) both; }
html.pp-fallback.pp-page-out-left body > main  { animation: pp-page-out-left 160ms var(--ease-out-quart) both; }
html.pp-fallback.pp-page-out-right body        { animation: pp-body-fade-out 160ms var(--ease-out-quart) both; }
html.pp-fallback.pp-page-out-right body > main { animation: pp-page-out-right 160ms var(--ease-out-quart) both; }
html.pp-fallback body > nav.fixed { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ── UI-Polish (Juli 2026) ───────────────────────────────────────────────── */

/* Bottom-Navigation: Glas-Effekt, Safe-Area-Abstand, weichere Kante */
body > nav.fixed {
  background: rgba(248, 249, 255, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(190, 200, 210, 0.35);
  box-shadow: 0 -8px 28px -12px rgba(0, 60, 90, 0.18);
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* Aktiver Tab: Markenverlauf, weißes Icon, weicher Schein */
body > nav.fixed a[aria-current="page"] {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 60%, #006591 100%);
  box-shadow: 0 6px 16px -4px rgba(14, 165, 233, 0.45);
  border-radius: 3rem; /* wie .rounded-xl – Absicherung, falls die Klasse fehlt */
  color: #fff;
}
body > nav.fixed a[aria-current="page"] .icon { filter: brightness(0) invert(1); }

/* Sticky-Header: dezenter Glas-Effekt */
body > header.sticky {
  background: rgba(248, 249, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Primäre Buttons/CTAs: Markenverlauf statt Flachfarbe */
button.bg-primary-container, a.bg-primary-container {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 55%, #006591 130%);
  box-shadow: 0 8px 20px -8px rgba(2, 132, 199, 0.55);
}

/* Karten: etwas mehr Tiefe, feinere Kante */
.soft-glow {
  box-shadow: 0 1px 2px rgba(11, 28, 48, 0.05), 0 10px 28px -12px rgba(2, 132, 199, 0.22) !important;
}

/* Eingabefelder: Fokus-Ring in Markenfarbe */
.pool-input:focus, .dose-input:focus {
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
}

/* ── Desktop-Layout: zentrierte App-Spalte statt gestreckter Mobilansicht ── */
@media (min-width: 900px) {
  /* Inhalte in eine zentrierte Spalte fassen */
  body > main {
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Header-Inhalt an derselben Spalte ausrichten */
  body > header > div {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Bottom-Navigation als schwebendes Dock */
  body > nav.fixed {
    max-width: 520px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 18px;
    border-radius: 9999px;
    border: 1px solid rgba(190, 200, 210, 0.45);
    padding-bottom: 12px;
    box-shadow: 0 12px 36px -12px rgba(0, 60, 90, 0.28);
  }
  /* FAB (Schnellaktion) an der Inhaltsspalte ausrichten statt am Bildschirmrand */
  div.fixed.z-\[56\] { right: calc(50% - 300px) !important; }
}

/* Reduced Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}