/* ShiftFlow v0.6 – ruhige, Apple-inspirierte Bewegung */

:root {
  --motion-fast: 180ms;
  --motion-normal: 420ms;
  --motion-slow: 720ms;
  --motion-page: 900ms;
  --ease-apple: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-behavior: smooth;
}

to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal,
.motion-reveal {
  opacity: 0;
  transform: translateY(18px) scale(.992);
  transition:
    opacity var(--motion-slow) var(--ease-soft),
    transform var(--motion-slow) var(--ease-soft);
  will-change: transform, opacity;
}

.reveal.visible,
.motion-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.motion-delay-1 { transition-delay: 80ms; }
.motion-delay-2 { transition-delay: 150ms; }
.motion-delay-3 { transition-delay: 220ms; }
.motion-delay-4 { transition-delay: 290ms; }

.button,
.icon-button,
.day-card,
.feature-card,
.dashboard-widget,
.settings-card,
.template-grid button,
.choice-grid button,
.week-list button {
  transition:
    transform var(--motion-fast) var(--ease-apple),
    box-shadow var(--motion-normal) var(--ease-soft),
    border-color var(--motion-normal) var(--ease-soft),
    background var(--motion-normal) var(--ease-soft),
    color var(--motion-fast) ease;
}

.button:hover,
.icon-button:hover,
.template-grid button:hover,
.choice-grid button:hover {
  transform: translateY(-2px);
}

.button:active,
.icon-button:active,
.template-grid button:active,
.choice-grid button:active {
  transform: scale(.985);
}

.day-card:hover,
.feature-card:hover,
.dashboard-widget:hover,
.settings-card:hover {
  transform: translateY(-4px);
}

.modal-motion {
  animation: modalIn 520ms var(--ease-soft) both;
  transform-origin: center;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.calendar-slide-next {
  animation: calendarNext 520ms var(--ease-soft) both;
}

.calendar-slide-previous {
  animation: calendarPrevious 520ms var(--ease-soft) both;
}

@keyframes calendarNext {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes calendarPrevious {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.saved-pulse {
  animation: savedPulse 760ms var(--ease-soft);
}

@keyframes savedPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

.toast.show {
  animation: toastIn 420ms var(--ease-soft) both;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 14px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

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


/* v0.9 – kein Flash beim Neuladen */
body {
  opacity: 1 !important;
  transform: none !important;
}

html.shiftflow-loading body {
  visibility: visible;
}

.page-transition-cover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: var(--app-bg-1, #111428);
  transition: opacity 260ms ease;
}

.page-transition-cover.active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-cover {
    display: none;
  }
}


/* ShiftFlow 1.2 – direkte, leichte Seitenwechsel */
.page-transition-cover {
  display: none !important;
}

.app-main,
.planner-main,
.calendar-main,
.vacation-main,
.salary-main,
.assistant-main,
.settings-page {
  opacity: 1;
  transform: translateY(0);
}

html.page-is-leaving .app-main,
html.page-is-leaving .planner-main,
html.page-is-leaving .calendar-main,
html.page-is-leaving .vacation-main,
html.page-is-leaving .salary-main,
html.page-is-leaving .assistant-main,
html.page-is-leaving .settings-page {
  opacity: .94;
  transform: translateY(2px);
  transition:
    opacity 90ms linear,
    transform 90ms ease-out;
}

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


/* ShiftFlow 1.5.1 – ruhige Animationen ohne Aufpoppen */

:root {
  --motion-clean-fast: 150ms;
  --motion-clean-normal: 260ms;
  --motion-clean-slow: 420ms;
  --ease-clean: cubic-bezier(.22, .61, .36, 1);
}

/* Seiten und Bereiche nur leicht einblenden und verschieben */
.sf-page-enter,
.motion-reveal,
.reveal,
.modal-motion,
.calendar-slide-next,
.calendar-slide-previous {
  transform: translateY(0) !important;
  scale: 1 !important;
}

.sf-page-enter {
  animation: sfCleanPageEnter 360ms var(--ease-clean) both !important;
}

@keyframes sfCleanPageEnter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.motion-reveal,
.reveal {
  opacity: 0;
  transform: translateY(8px) !important;
  transition:
    opacity var(--motion-clean-slow) var(--ease-clean),
    transform var(--motion-clean-slow) var(--ease-clean) !important;
}

.motion-reveal.visible,
.reveal.visible {
  opacity: 1;
  transform: translateY(0) !important;
}

/* Modale und Seitenleisten erscheinen ohne Zoom */
.modal-motion {
  animation: sfCleanModal 280ms var(--ease-clean) both !important;
}

@keyframes sfCleanModal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Monatswechsel nur horizontal, ohne Skalierung */
.calendar-slide-next {
  animation: sfCleanNext 320ms var(--ease-clean) both !important;
}

.calendar-slide-previous {
  animation: sfCleanPrevious 320ms var(--ease-clean) both !important;
}

@keyframes sfCleanNext {
  from {
    opacity: .35;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sfCleanPrevious {
  from {
    opacity: .35;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hover nur minimal anheben, niemals vergrößern */
.dashboard-widget:hover,
.feature-card:hover,
.settings-card:hover,
.day-card:hover,
.calendar-day:hover,
.quick-action-grid a:hover,
.button:hover,
.icon-button:hover,
.template-grid button:hover,
.choice-grid button:hover {
  transform: translateY(-2px) !important;
  scale: 1 !important;
}

/* Klickfeedback bleibt klein und direkt */
.button:active,
button:active,
nav a:active,
.quick-action-grid a:active,
.template-grid button:active,
.choice-grid button:active {
  transform: translateY(0) !important;
  scale: .99 !important;
}

/* Gespeichert-Puls ohne Größenänderung */
.saved-pulse {
  animation: sfCleanSaved 420ms ease-out !important;
}

@keyframes sfCleanSaved {
  0% { opacity: .78; }
  100% { opacity: 1; }
}

/* Schwebende Werkzeuge öffnen ohne Zoom */
.sf-floating-panel {
  transform: translateY(8px) !important;
}

.sf-floating-panel.open {
  transform: translateY(0) !important;
}

/* Chatnachrichten gleiten nur leicht ein */
.message {
  animation: sfCleanMessage 260ms var(--ease-clean) both !important;
}

@keyframes sfCleanMessage {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}