/* DriveBase: rörelsen (rorelse.js). Allt här rör bara opacitet, oskärpa, färg och dekor, aldrig layouten, så att
   mått och träffytor är desamma med och utan rörelse. html[data-rorelse="lugn"] (valet i kontot) och
   prefers-reduced-motion stänger av det. */

/* ================= Vyns intro ================= */
/* Delarna tonar fram i tur och ordning. Fyllningen gäller bara bakåt, under fördröjningen, så att ingen animation
   står kvar när den är klar. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rorelse="lugn"]) .intro-del {
    animation: intro-in var(--t-intro) var(--kurva) backwards;
    animation-delay: calc(min(var(--intro-i, 0), 5) * 40ms);
  }
}
@keyframes intro-in {
  from { opacity: 0; filter: blur(6px); }
}

/* ================= Ljuset på korten ================= */
/* En mjuk glans som följer pekaren (--ljus-x och --ljus-y sätts av rorelse.js). Ligger ovanpå kortets yta men under
   innehållet, och tar inga klick. */
.portal-platta, .konto-kort, .portal-samling__panel, .oversikt-panel, .system-panel, .personer-panel { isolation: isolate; }
.portal-platta::after,
.konto-kort::after,
.portal-samling__panel::after,
.oversikt-panel::after,
.system-panel::after,
.personer-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--ljus-x, 50%) var(--ljus-y, 0%), var(--pal-blagra-2-a55), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-lugn) var(--kurva);
}
.konto-kort, .portal-samling__panel, .oversikt-panel, .system-panel, .personer-panel { position: relative; }
@media (hover: hover) {
  html:not([data-rorelse="lugn"]) :is(.portal-platta, .konto-kort, .portal-samling__panel, .oversikt-panel, .system-panel, .personer-panel):hover::after { opacity: 1; }
}

/* ================= Knapparna ================= */
/* Ett kort tryck: knappen sjunker en aning medan den hålls ned */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rorelse="lugn"]) :is(.knapp, .portal-ljusknapp, .system-ljusknapp, .konto-knapp, .skal-flikar__punkt, .skal-anvandare__knapp, .skal-admin__flik, .skal-admin__knapp):active:not(:disabled) {
    scale: .97;
  }
}

/* ================= Menyerna ================= */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rorelse="lugn"]) .skal-anvandare__meny:not([hidden]) {
    animation: meny-in 180ms var(--kurva) backwards;
  }
}
@keyframes meny-in {
  from { opacity: 0; filter: blur(4px); }
}

/* ================= Lugnare rörelser ================= */
html[data-rorelse="lugn"] *,
html[data-rorelse="lugn"] *::before,
html[data-rorelse="lugn"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
}