/*
 * Hochfrequenter Monatswechsel
 *
 * Nur die große Monatskarte wird gerastert und auf dem Compositor bewegt.
 * Toolbar, Navigation und Status bleiben live und reagieren auch während des
 * Vorladens unmittelbar. Tabellenlayout und Farben werden nicht pro Frame neu
 * berechnet. Der Fallback verwendet dieselben GPU-freundlichen Eigenschaften.
 */

:root {
  --month-motion-duration: 340ms;
  --month-motion-ease: cubic-bezier(.22, 1, .36, 1);
  view-transition-name: none;
}

/*
 * Bewegt wird die Dienstplantabelle, nicht die ganze Karte.
 *
 * Bevor eine View Transition animieren kann, muss der Browser den alten Zustand
 * des benannten Elements aufnehmen. Die gesamte Glaskarte trägt Verlaufsflächen,
 * zwei Pseudoelemente, weiche Schlagschatten und eine endlos laufende
 * Lichtreflexion — ihre Aufnahme kostete mehrere Bilder, in denen sich noch
 * nichts bewegte. Die Tabellenfläche ist deutlich kleiner, hat bereits
 * `contain: paint` und ist genau das, was beim Monatswechsel wandern soll.
 * Kopfzeile, Werkzeugleiste und Plakette bleiben dadurch ruhig stehen.
 */
#printArea {
  view-transition-name: month-sheet;
}

::view-transition-group(month-sheet) {
  animation-duration: var(--month-motion-duration);
  animation-timing-function: var(--month-motion-ease);
}

::view-transition-image-pair(month-sheet) {
  isolation: isolate;
}

::view-transition-old(month-sheet),
::view-transition-new(month-sheet) {
  animation-duration: var(--month-motion-duration);
  animation-timing-function: var(--month-motion-ease);
  animation-fill-mode: both;
  backface-visibility: hidden;
  mix-blend-mode: normal;
  transform-origin: 50% 18%;
}

html[data-month-motion-direction="forward"]::view-transition-old(month-sheet) {
  animation-name: month-motion-old-forward;
}

html[data-month-motion-direction="forward"]::view-transition-new(month-sheet) {
  animation-name: month-motion-new-forward;
}

html[data-month-motion-direction="backward"]::view-transition-old(month-sheet) {
  animation-name: month-motion-old-backward;
}

html[data-month-motion-direction="backward"]::view-transition-new(month-sheet) {
  animation-name: month-motion-new-backward;
}

/*
 * Kein Mischbild: Die abgehende Karte ist bereits verschwunden, bevor die neue
 * sichtbar wird. Beide Monate behalten dadurch ihre eigene Farbe; es entsteht
 * zu keinem Zeitpunkt eine Zwischenfarbe aus beiden Paletten. Bewegt werden
 * ausschließlich `opacity` und `transform` — beides läuft auf dem Compositor.
 */
@keyframes month-motion-old-forward {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  42% { opacity: 0; transform: translate3d(-18px, 0, 0); }
  100% { opacity: 0; transform: translate3d(-18px, 0, 0); }
}

@keyframes month-motion-new-forward {
  0% { opacity: 0; transform: translate3d(22px, 0, 0); }
  30% { opacity: 0; transform: translate3d(16px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes month-motion-old-backward {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  42% { opacity: 0; transform: translate3d(18px, 0, 0); }
  100% { opacity: 0; transform: translate3d(18px, 0, 0); }
}

@keyframes month-motion-new-backward {
  0% { opacity: 0; transform: translate3d(-22px, 0, 0); }
  30% { opacity: 0; transform: translate3d(-16px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.month-motion-fallback-snapshot,
.month-motion-fallback-live {
  transform-origin: 50% 18%;
  backface-visibility: hidden;
}

.month-motion-fallback-snapshot {
  contain: layout paint style;
  box-sizing: border-box;
}

html[data-month-motion-state="preloading"] .month-selector {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  :root { --month-motion-duration: 1ms; }

  ::view-transition-old(month-sheet),
  ::view-transition-new(month-sheet) {
    animation-name: none !important;
  }
}

@media print {
  ::view-transition-group(month-sheet),
  ::view-transition-old(month-sheet),
  ::view-transition-new(month-sheet),
  .month-motion-fallback-snapshot {
    display: none !important;
  }
}

/*
 * Spektrum-Lichtwelle
 *
 * Begleitet den Farbverlauf des Monatswechsels. Bewegt werden ausschließlich
 * `opacity` und `transform`; die Ebene liegt auf einem eigenen Compositor-Layer
 * und erzeugt dadurch keine zusätzliche Layout- oder Style-Last.
 */
.month-spectrum-sweep {
  position: fixed;
  inset: -10vh -12vw;
  z-index: 2147482000;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
  contain: strict;
  /* Ein schmales Lichtband statt einer flächigen Wäsche: Es begleitet den
     Wechsel, überdeckt die frisch gesetzte Monatsfarbe aber nicht. */
  background: linear-gradient(100deg, transparent 34%, var(--sweep-color, transparent) 50%, transparent 66%);
}

@media (prefers-reduced-motion: reduce) {
  .month-spectrum-sweep { display: none !important; }
}

@media print {
  .month-spectrum-sweep { display: none !important; }
}