/* Bevægelse »B · Glidende« (Steffen 28/10): lag, dæmpning, skelet og stille tilstand for alle sider (design 8.2).
   Tallene skal svare præcist til EkbMotion.T i ds/motion.js (testet). Kun --ekb-ink-rgb, --ekb-sage og --ekb-sunken fra
   brand.css, så filen virker på de selvstændige sider uden ds-tokens.css. Hovedafbryderen: ds/motion-switch.js (html.m-off). */
:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --m-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --m-panel-in: 320ms;  --m-panel-out: 220ms;
  --m-fade-in: 320ms;   --m-fade-out: 220ms;
  --m-pop-in: 220ms;    --m-pop-out: 160ms;
  --m-menu-in: 160ms;   --m-menu-out: 120ms;
  --m-dim: rgba(var(--ekb-ink-rgb), 0.08);
  --m-scrim: rgba(var(--ekb-ink-rgb), 0.40);
  --m-panel-shadow: -18px 0 40px rgba(var(--ekb-ink-rgb), 0.08);
}

/* Lag styres af data-open="true"/"false". Elementet indsættes åbent; ved luk sættes "false", og elementet fjernes efter
   EkbMotion.ms(kind, 'out'). Ind-keyframes har kun "from", ud kun "to". Sæt aldrig en m-klasse på noget, der skjules og
   vises af andre grunde end at åbne og lukke: animationen starter forfra, hver gang elementet bliver synligt. */
.m-from-right[data-open="true"]   { animation: m-in-right var(--m-panel-in) var(--m-ease-panel) backwards; }
.m-from-right[data-open="false"]  { animation: m-out-right var(--m-panel-out) var(--m-ease-in) forwards; }
.m-from-bottom[data-open="true"]  { animation: m-in-up var(--m-panel-in) var(--m-ease-panel) backwards; }
.m-from-bottom[data-open="false"] { animation: m-out-up var(--m-panel-out) var(--m-ease-in) forwards; }
.m-pop[data-open="true"], .m-pop:not([data-open]) { animation: m-pop-in var(--m-pop-in) var(--m-ease) backwards; }
.m-pop[data-open="false"]         { animation: m-pop-out var(--m-pop-out) var(--m-ease-in) forwards; }
.m-menu[data-open="true"]         { animation: m-fade-in var(--m-menu-in) var(--m-ease) backwards; }
.m-menu[data-open="false"]        { animation: m-fade-out var(--m-menu-out) var(--m-ease-in) forwards; }
.m-scrim { background: var(--m-scrim); }
.m-dim   { position: absolute; inset: 0; z-index: 40; background: var(--m-dim); pointer-events: none; }
.m-scrim[data-open="true"], .m-dim[data-open="true"]   { animation: m-fade-in var(--m-fade-in) ease-out backwards; }
.m-scrim[data-open="false"], .m-dim[data-open="false"] { animation: m-fade-out var(--m-fade-out) linear forwards; }
.m-panel { position: relative; z-index: 41; box-shadow: var(--m-panel-shadow); }
/* Det lukkende panel forlader flowet med det samme og glider ud oven på indholdet, så listen bag det kun ændrer bredde én
   gang, ved klikket, og ikke springer, når udglidningen er færdig (forælderen er position: relative) */
.m-panel[data-open="false"] { position: absolute; top: 0; right: 0; bottom: 0; }
.m-from-right[data-open="false"], .m-from-bottom[data-open="false"], .m-pop[data-open="false"],
.m-menu[data-open="false"], .m-scrim[data-open="false"] { pointer-events: none; }

@keyframes m-in-right { from { transform: translateX(100%); } }
@keyframes m-out-right { to { transform: translateX(100%); } }
@keyframes m-in-up { from { transform: translateY(100%); } }
@keyframes m-out-up { to { transform: translateY(100%); } }
@keyframes m-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes m-pop-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes m-fade-in { from { opacity: 0; } }
@keyframes m-fade-out { to { opacity: 0; } }

/* Pladsholder: samme form som indholdet; skæret kører 3 runder og står så stille. Første baggrund er til iOS før 16.2 */
.m-skel { position: relative; overflow: hidden; border-radius: 8px;
  background: var(--ekb-sunken);
  background: color-mix(in srgb, var(--ekb-sage) 22%, transparent); }
.m-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ekb-sage) 26%, transparent) 50%, transparent 100%);
  animation: m-skel 1.3s ease-in-out 3; }
@keyframes m-skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Kun for skærmlæsere, fx den gamle »Henter …«-tekst ved et skelet */
.m-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Stille og færdig: systemindstillingen og hovedafbryderen gør det samme. Som ds-tokens.css på app-siderne, så også de
   sider uden den (de gamle kundesider) står stille */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .m-from-right, .m-from-bottom, .m-pop, .m-menu, .m-scrim, .m-dim, .m-skel::after { animation: none !important; }
  .m-skel::after { display: none; }
  .m-from-right[data-open="false"], .m-from-bottom[data-open="false"], .m-pop[data-open="false"],
  .m-menu[data-open="false"], .m-scrim[data-open="false"], .m-dim[data-open="false"] { visibility: hidden; }
}
/* Hovedafbryderen rammer al bevægelse som ds-tokens.css ved reduceret bevægelse, undtagen filmkornet (body::before) og
   pigmentet, som har deres egen pause (M13) */
html.m-off { scroll-behavior: auto !important; }
html.m-off :not(.ekb-pigment, .ekb-pigment *),
html.m-off :not(body, .ekb-pigment, .ekb-pigment *)::before,
html.m-off :not(.ekb-pigment, .ekb-pigment *)::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.m-off .m-from-right, html.m-off .m-from-bottom, html.m-off .m-pop, html.m-off .m-menu,
html.m-off .m-scrim, html.m-off .m-dim, html.m-off .m-skel::after { animation: none !important; }
html.m-off .m-skel::after { display: none; }
html.m-off [data-open="false"]:is(.m-from-right, .m-from-bottom, .m-pop, .m-menu, .m-scrim, .m-dim) { visibility: hidden; }