:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.11);
  --fx-shadow-strong: 0 16px 36px rgba(15, 23, 42, 0.18);
  --fx-ring: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

@keyframes fxFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

@keyframes fxShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

body {
  background-image:
    radial-gradient(1200px 500px at -10% -10%, rgba(59, 130, 246, 0.05), transparent 60%),
    radial-gradient(900px 400px at 110% 0%, rgba(244, 63, 94, 0.04), transparent 62%);
  background-attachment: fixed;
}

button,
input,
select,
.bg-white.border-slate-200,
.bg-slate-50.border-slate-200 {
  transition:
    transform 0.18s var(--fx-ease),
    box-shadow 0.18s var(--fx-ease),
    border-color 0.18s var(--fx-ease),
    background-color 0.18s var(--fx-ease),
    color 0.18s var(--fx-ease);
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  box-shadow: var(--fx-ring) !important;
}

.bg-white.border-slate-200:hover,
.bg-slate-50.border-slate-200:hover {
  box-shadow: var(--fx-shadow-soft);
}

#app-side-menu-toggle {
  box-shadow: var(--fx-shadow-soft);
}

#app-side-menu.open #app-side-menu-toggle {
  box-shadow: var(--fx-shadow-strong);
}

#app-side-menu-panel {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-home-brand {
  background-size: 200% 200%;
  background-image: linear-gradient(90deg, #ffffff 0%, #f8fafc 40%, #ffffff 100%);
  animation: fxShimmer 3.5s linear infinite;
}

.app-home-logo-wrap {
  animation: fxFloat 4s ease-in-out infinite;
}

.attendance-quickbar button[data-toggle-matrix="1"] {
  background-image: linear-gradient(90deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  color: #fff !important;
  border-color: #0f172a !important;
}

.members-filter-bar input,
.members-filter-bar select,
#attendance-search-input {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 6px rgba(15, 23, 42, 0.06);
}

@media (max-width: 760px) {
  button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}