/* Motion-Layer: weiche, dezente Uebergaenge fuer alle OptiGate-Seiten (nur transform/opacity/box-shadow/Farben) */
:root{--ease:cubic-bezier(.2,.75,.2,1);--ease-glide:cubic-bezier(.3,.9,.3,1);--dur-fast:.18s;--dur-med:.32s;--dur-slow:.45s;--stagger:50ms}
@keyframes mo-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mo-row{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes mo-glow{0%,55%{box-shadow:0 0 0 rgba(240,200,90,0)}82%{box-shadow:0 0 14px rgba(240,200,90,.55)}100%{box-shadow:0 0 0 rgba(240,200,90,0)}}

/* (1) Seiteneintritt gestaffelt: Setup-Abschnitte, Dateiliste, Overlay-Zeilen */
body.mo-stagger>*{animation:mo-in var(--dur-med) var(--ease) both}
body.mo-stagger>:nth-child(2){animation-delay:calc(var(--stagger)*1)}
body.mo-stagger>:nth-child(3){animation-delay:calc(var(--stagger)*2)}
body.mo-stagger>:nth-child(4){animation-delay:calc(var(--stagger)*3)}
body.mo-stagger>:nth-child(5){animation-delay:calc(var(--stagger)*4)}
body.mo-stagger>:nth-child(n+6){animation-delay:calc(var(--stagger)*5)}
#flist>.row,.file-overlay-list>.file-overlay-row,.list-row-in{animation:mo-row var(--dur-med) var(--ease) both}
#flist>.row:nth-child(2),.file-overlay-list>:nth-child(2){animation-delay:40ms}
#flist>.row:nth-child(3),.file-overlay-list>:nth-child(3){animation-delay:80ms}
#flist>.row:nth-child(4),.file-overlay-list>:nth-child(4){animation-delay:120ms}
#flist>.row:nth-child(n+5),.file-overlay-list>:nth-child(n+5){animation-delay:160ms}

/* (2) Hover/Fokus/Press: weiche Uebergaenge, max. 2px Anhebung, Press leicht skaliert */
:where(.panel,.card,.row,.file-overlay-row,.peer,.top-item,.chip,.badge,a.back,.back){transition:box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),background-color var(--dur-med) var(--ease),color var(--dur-fast) ease,transform var(--dur-med) var(--ease)}
:where(.row,.file-overlay-row):hover{transform:translateX(2px)}
:where(.chip,.top-item):hover{transform:translateY(-1px)}
:where(a.back,.back):hover{transform:translateX(-2px)}
:where(.btn,.btn-gold,.uw-btn,.tab,.subtab,button.x,.x):not(:disabled):active{transform:scale(.97)}
:where(.btn,.btn-gold,.uw-btn,.tab,.subtab,.x,input,select,textarea,a):focus-visible{transition:outline-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
:where(input,select,textarea){transition:border-color var(--dur-fast) ease,box-shadow var(--dur-med) var(--ease),background-color var(--dur-fast) ease}
:where(a){transition:color var(--dur-fast) ease}

/* (3) Dialoge/Overlays: Fade + leichter Scale auch beim Ausblenden ([hidden] via display allow-discrete) */
.updwin,.file-overlay,dialog,.modal,.mo-pop{transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease),display var(--dur-med) allow-discrete,overlay var(--dur-med) allow-discrete}
.updwin[hidden],.modal[hidden],.mo-pop[hidden]{opacity:0}
.file-overlay[hidden]{opacity:0;transform:translateY(-10px)}
dialog:not([open]){opacity:0;transform:scale(.97)}
.updwin[hidden] .uw-box{transform:scale(.96);transition:transform var(--dur-med) var(--ease)}
@starting-style{.updwin:not([hidden]),.modal:not([hidden]),.mo-pop:not([hidden]){opacity:0}.file-overlay:not([hidden]){opacity:0;transform:translateY(-10px)}dialog[open]{opacity:0;transform:scale(.97)}}
dialog::backdrop{transition:opacity var(--dur-med) ease,display var(--dur-med) allow-discrete,overlay var(--dur-med) allow-discrete}
dialog:not([open])::backdrop{opacity:0}
@starting-style{dialog[open]::backdrop{opacity:0}}

/* (4) Listen: Zeilen weich ein- (Animation) und ausblenden ([hidden]/.is-leaving) */
.mo-list>*{animation:mo-row var(--dur-med) var(--ease) both}
.mo-leave,.is-leaving{opacity:0;transform:translateX(-6px);transition:opacity var(--dur-med) ease,transform var(--dur-med) var(--ease);pointer-events:none}

/* (5) Pillen, Balken, Zahlen, Statustext */
:where(.badge,.chip,.pill,.status,.sys-live i){transition:color var(--dur-med) ease,background-color var(--dur-med) ease,border-color var(--dur-med) ease,box-shadow var(--dur-med) ease,opacity var(--dur-med) ease}
:where(.bar-fill,.progress>i,.progress-fill,progress){transition:width .6s var(--ease),background .4s ease}
:where([data-count],.if-count,.mo-num){transition:opacity var(--dur-fast) ease,transform var(--dur-med) var(--ease),color var(--dur-med) ease}
.mo-num.is-changed{animation:mo-glow .5s ease-out}

/* (6) Gleiter fuer weitere Umschalter: JS in motion.js (nur .glider-host[data-glide]) */
.glider-host{position:relative;isolation:isolate}
.glide{position:absolute;left:0;top:0;z-index:0;pointer-events:none;width:0;height:0;border-radius:99px;background:linear-gradient(150deg,#f7e6ac,var(--gold-2) 42%,var(--gold) 68%,#8a6a1c);opacity:0}
.glide.ready{opacity:1;transition:transform .36s var(--ease-glide),width .36s var(--ease-glide),height .36s var(--ease-glide)}

/* (7) Reduced motion: alles aus */
@media (prefers-reduced-motion:reduce){
  body.mo-stagger>*,#flist>.row,.file-overlay-list>.file-overlay-row,.list-row-in,.mo-list>*,.mo-num.is-changed{animation:none!important}
  .updwin,.file-overlay,dialog,.modal,.mo-pop,dialog::backdrop,.updwin .uw-box,.glide.ready,.mo-leave,.is-leaving,
  :where(.panel,.card,.row,.file-overlay-row,.peer,.top-item,.chip,.badge,a.back,.back,.bar-fill,input,select,textarea,a){transition:none!important}
  :where(.row,.file-overlay-row,.chip,.top-item,a.back,.back):hover,:where(.btn,.btn-gold,.uw-btn,.tab,.subtab,.x):active{transform:none}
}

/* ---- Erweiterung: weitere Pop-ups, Menues, Toasts, Akkordeons ---- */
:root{interpolate-size:allow-keywords}
@keyframes mo-leave{to{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes mo-leave-fade{to{opacity:0}}
/* Minecraft-Modals (.modal.open) und Karten */
.modal{transition:opacity var(--dur-med) var(--ease),display var(--dur-med) allow-discrete}
.modal:not(.open){opacity:0}
.modal .modal-card{transition:transform var(--dur-med) var(--ease),opacity var(--dur-med) var(--ease)}
.modal:not(.open) .modal-card{transform:translateY(8px) scale(.97);opacity:0}
@starting-style{.modal.open{opacity:0}.modal.open .modal-card{transform:translateY(8px) scale(.97);opacity:0}}
/* Update-Widget, Tooltips, Conflict-Dialog */
.opt-update-panel,.opt-update-chip,.item-tooltip{transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease),display var(--dur-med) allow-discrete}
.opt-update-panel[hidden],.opt-update-chip[hidden],.item-tooltip[hidden]{opacity:0}
.opt-update-chip[hidden]{transform:translateY(-6px)}
.opt-update-panel[hidden] .opt-update-card{transform:scale(.96)}
.opt-update-card{transition:transform var(--dur-med) var(--ease)}
@starting-style{.opt-update-panel:not([hidden]),.item-tooltip:not([hidden]){opacity:0}.opt-update-chip:not([hidden]){opacity:0;transform:translateY(-6px)}}
.ofi-conflict{transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease),display var(--dur-med) allow-discrete,overlay var(--dur-med) allow-discrete}
.ofi-conflict:not([open]){opacity:0;transform:scale(.96)}
.ofi-conflict::backdrop{transition:opacity var(--dur-med) ease,display var(--dur-med) allow-discrete,overlay var(--dur-med) allow-discrete}
.ofi-conflict:not([open])::backdrop{opacity:0}
@starting-style{.ofi-conflict[open]{opacity:0;transform:scale(.96)}.ofi-conflict[open]::backdrop{opacity:0}}
/* Toast: weiches Gleiten */
.toast{transition:opacity var(--dur-med) var(--ease),margin-bottom var(--dur-med) var(--ease)}
.toast:not(.show){margin-bottom:-8px}
/* Auf-/Zuklappen: details und .collapsible (Height-Morph) */
details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size var(--dur-med) var(--ease),opacity var(--dur-med) ease,content-visibility var(--dur-med) allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
summary{transition:color var(--dur-fast) ease}
/* Von motion.js ausgeblendete, entfernte Knoten */
.mo-leaving{pointer-events:none!important;animation:mo-leave var(--dur-med) var(--ease) both!important}
.modal.mo-leaving,.opt-update-panel.mo-leaving,dialog.mo-leaving,.ofi-conflict.mo-leaving{animation-name:mo-leave-fade!important}
@media (prefers-reduced-motion:reduce){
  .modal,.modal .modal-card,.opt-update-panel,.opt-update-chip,.item-tooltip,.opt-update-card,.ofi-conflict,.ofi-conflict::backdrop,.toast,summary,details::details-content{transition:none!important}
  .mo-leaving{animation:none!important}
}