/* ════════════════════════════════════════════════════════════════
   SCHOONGENOEG — Smooth Transitions v1.0
   Doel: Alle schokkerige overgangen vervangen door vloeiende
   animaties. Splash fade-out, login slide-in, sectie-wisselingen,
   knop-feedback, modal-animaties, sidebar-scroll.
   ════════════════════════════════════════════════════════════════ */

/* ─── GPU-acceleratie voor animaties ─── */
.splash,
.screen,
.login-card,
.modal,
.sidebar,
.section-content {
  will-change: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════
   SPLASH — vloeiende fade + logo pulse
   ════════════════════════════════════════ */
.splash {
  transition: opacity .6s cubic-bezier(.4,0,.2,1), visibility .6s !important;
}
.splash.fade-out {
  opacity: 0 !important;
  pointer-events: none;
}

/* Splash logo: zachte pulse-animatie tijdens laden */
.splash-logo img,
.splash-logo .sg-logo-wrap {
  animation: splashLogoPulse 2.4s ease-in-out infinite;
}
@keyframes splashLogoPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.04); opacity: .9; }
}

/* Splash loader: vloeiendere balk */
.splash-loader div {
  animation: splashLoad 1.8s cubic-bezier(.4,0,.2,1) infinite !important;
}
@keyframes splashLoad {
  0%   { width: 0%;    opacity: 1; }
  65%  { width: 100%;  opacity: 1; }
  85%  { width: 100%;  opacity: .3; }
  100% { width: 100%;  opacity: 0; }
}

/* Splash tekst: fade-in bij start */
.splash-sub {
  animation: splashSubFadeIn 1s ease forwards;
}
@keyframes splashSubFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   LOGIN SCREEN — vloeiende intrede
   ════════════════════════════════════════ */

/* Achtergrond: subtiele animerende orbs */
@keyframes orb1Move {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(4%, 3%) scale(1.08); }
  66%       { transform: translate(-3%, 2%) scale(.96); }
}
@keyframes orb2Move {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-5%, -4%) scale(1.1); }
  70%       { transform: translate(3%, -2%) scale(.94); }
}
.login-bg::before {
  animation: orb1Move 14s ease-in-out infinite;
}
.login-bg::after {
  animation: orb2Move 18s ease-in-out infinite;
}

/* Login-kaart: slide-up + fade-in bij verschijnen */
#loginScreen:not(.hidden) .login-card {
  animation: loginCardIn .55s cubic-bezier(.22,.68,0,1.15) both;
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Login-kaart: subtiele hover-lift */
.login-card {
  transition: box-shadow .3s ease !important;
}

/* Input fields: vloeiendere focus */
.lc-input {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.lc-input:focus {
  transform: none; /* geen jitter */
}

/* Login knop: soepele press-animatie */
.lc-login-btn {
  transition: background .2s ease, transform .15s cubic-bezier(.34,1.56,.64,1),
              box-shadow .2s ease, opacity .2s ease !important;
  position: relative;
  overflow: hidden;
}
/* Ripple effect op klik */
.lc-login-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.15);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0);
  transition: transform .4s ease, opacity .4s ease;
}
.lc-login-btn:active::after {
  transform: scale(1);
  opacity: 1;
  transition: none;
}
.lc-login-btn:not(:disabled):hover {
  transform: translateY(-2px) !important;
}
.lc-login-btn:not(:disabled):active {
  transform: scale(.97) translateY(0) !important;
}

/* Account-rijen: vloeiende hover */
.lc-account-row {
  transition: background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1) !important;
}
.lc-account-row:hover {
  transform: translateX(3px) !important;
  background: #f1f5f9 !important;
}
.lc-account-row:active {
  transform: scale(.98) !important;
}

/* ════════════════════════════════════════
   SECTIE-WISSELING — fade-in per sectie
   ════════════════════════════════════════ */
.section-content,
.content-section,
[id$="-section"],
.main-content > div {
  animation: sectionFadeIn .3s ease both;
}
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   NAVIGATIE — vloeiendere sidebar-items
   ════════════════════════════════════════ */
.nav-item,
.sidebar-item,
.bottom-nav-item {
  transition: background .18s ease, color .18s ease, transform .15s ease !important;
}
.nav-item:hover,
.sidebar-item:hover {
  transform: translateX(2px);
}
.nav-item.active,
.sidebar-item.active {
  transition: background .25s ease, color .25s ease !important;
}

/* Bottom nav icoontjes: bounce bij selectie */
.bottom-nav-item.active i,
.bottom-nav-item:active i {
  animation: navIconBounce .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes navIconBounce {
  from { transform: scale(.8) translateY(2px); }
  to   { transform: scale(1) translateY(0); }
}

/* ════════════════════════════════════════
   KNOPPEN — universele vloeiende feedback
   ════════════════════════════════════════ */
button:not(.lc-login-btn):not([disabled]) {
  transition: background .18s ease, color .18s ease,
              transform .15s cubic-bezier(.34,1.56,.64,1),
              box-shadow .18s ease, opacity .18s ease;
}
button:not(.lc-login-btn):not([disabled]):active {
  transform: scale(.96);
}

/* Primaire actie-knoppen */
.btn-primary,
.btn-action,
[class*="btn-primary"],
[class*="action-btn"] {
  transition: background .2s ease, transform .15s cubic-bezier(.34,1.56,.64,1),
              box-shadow .2s ease !important;
}
.btn-primary:not([disabled]):hover,
.btn-action:not([disabled]):hover {
  transform: translateY(-1px);
}
.btn-primary:not([disabled]):active,
.btn-action:not([disabled]):active {
  transform: scale(.97) translateY(0);
}

/* ════════════════════════════════════════
   MODALS — vloeiende open/dicht
   ════════════════════════════════════════ */
.modal,
[id*="Modal"],
[id*="-modal"],
[class*="modal-overlay"] {
  transition: opacity .3s ease, visibility .3s ease !important;
}
/* Modal inhoud: slide-up */
.modal > div,
[id*="Modal"] > div,
.modal-card,
.modal-content {
  animation: modalSlideIn .35s cubic-bezier(.22,.68,0,1.15) both;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════
   CARDS — hover-lift
   ════════════════════════════════════════ */
.card,
.project-card,
.stat-card,
[class*="-card"]:not(.login-card):not(.modal-card) {
  transition: box-shadow .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.card:hover,
.project-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

/* ════════════════════════════════════════
   TOAST / NOTIFICATIES — slide-in rechts
   ════════════════════════════════════════ */
.toast,
.notification-toast,
[class*="toast"],
.sg-toast {
  animation: toastSlideIn .35s cubic-bezier(.22,.68,0,1.15) both;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(24px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast.hide,
.toast.removing {
  animation: toastFadeOut .3s ease forwards;
}
@keyframes toastFadeOut {
  to { opacity: 0; transform: translateX(12px) scale(.95); }
}

/* ════════════════════════════════════════
   BADGES & PILLS — pop-in
   ════════════════════════════════════════ */
.badge,
.notif-badge,
[class*="-badge"]:not([class*="text-"]) {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
/* Badge verschijnt met pop */
.badge:not(:empty),
.notif-badge:not(:empty) {
  animation: badgePop .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ════════════════════════════════════════
   SCROLL — vloeiend op de hele pagina
   ════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}
/* Vloeiende scroll voor alle scrollbare containers */
.login-card,
.sidebar,
.modal,
.content-scroll,
[class*="scroll"],
[style*="overflow-y: auto"],
[style*="overflow-y:auto"] {
  scroll-behavior: smooth;
}

/* Scrollbar verfijnd */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.25);
}

/* ════════════════════════════════════════
   LAAD-SPINNER — vloeiend
   ════════════════════════════════════════ */
.fa-spinner.fa-spin,
.spinner {
  animation: smoothSpin .7s linear infinite !important;
}
@keyframes smoothSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════
   SKELETON LOADER (placeholder)
   ════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease infinite;
  border-radius: 6px;
}
@keyframes skeletonPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════
   OVERIG — kleine verbeteringen
   ════════════════════════════════════════ */

/* Link hover: vloeiend */
a { transition: color .18s ease, opacity .18s ease; }

/* Select / dropdown: zachte focus */
select:focus,
textarea:focus,
input:not(.lc-input):focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  transition: box-shadow .2s ease;
}

/* Tabel rijen hover */
tr {
  transition: background .15s ease;
}

/* Iconen in knoppen: geen jitter */
button i, a i {
  pointer-events: none;
}

/* Focus ring: vloeiend voor toegankelijkheid */
:focus-visible {
  outline: 2px solid rgba(37,99,235,.5);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-color .2s ease;
}