/* fn-transition — shared, app-wide soft transition (generalised from the menu transition).
   Blazor: put a changing @key on the element so it is recreated → the animation auto-plays.
   Vanilla JS: window.fnTransition.replay(el) re-plays it via a forced reflow. Tokens-only. */
:root {
    --fn-anim-dur: .30s;
    --fn-anim-ease: cubic-bezier(.22, .61, .36, 1);
}

@keyframes fnFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes fnStripUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* Schliessen-Animation (Gegenstueck zu .fn-enter): fuer Fenster/Dialoge, die vor dem Entfernen
   noch sanft ausblenden sollen. 'forwards' haelt den End-Zustand, bis das Element entfernt wird. */
@keyframes fnFadeOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(8px); }
}

.fn-enter { animation: fnFadeUp var(--fn-anim-dur) var(--fn-anim-ease); }
.fn-enter-strip { animation: fnStripUp calc(var(--fn-anim-dur) + .06s) var(--fn-anim-ease); }
.fn-exit { animation: fnFadeOut var(--fn-anim-dur) var(--fn-anim-ease) forwards; }

/* Vendor-Datepicker-Popup (.fdc-popup, Klassenname vendor-fixiert) opt-in zentral hier: blendet beim
   Öffnen sanft ein (display:none -> sichtbar startet die Animation). Kein Eingriff in die Vendor-Datei. */
.fdc-popup:not(.hidden) { animation: fnFadeUp var(--fn-anim-dur) var(--fn-anim-ease); }

@media (prefers-reduced-motion: reduce) {
    .fn-enter,
    .fn-enter-strip,
    .fn-exit,
    .fdc-popup:not(.hidden) { animation: none; }
}

/* Crossfade-Scope für die View-Transitions-API (opt-in über window.fnTransition.begin / run
   bzw. IPageTransitionService): nur der Inhaltsbereich blendet über, die Sidebar bleibt ruhig.
   Greift NUR, während eine Transition läuft — ohne Aufruf ändert sich nichts. Tokens-only.
   prefers-reduced-motion ist in der JS-Engine (active()) bereits berücksichtigt. */
.fn-app-main { view-transition-name: fn-main; }
::view-transition-group(root) { animation-duration: 1ms; }
::view-transition-old(fn-main),
::view-transition-new(fn-main) { animation-duration: var(--fn-anim-dur); animation-timing-function: var(--fn-anim-ease); }