/* MASAR FIELD — restrained application motion.
   Only transform and opacity animate; no ambient loops or glass effects. */
:root {
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .16s;
  --dur-2: .24s;
  --dur-3: .32s;
  --glass: #ffffff;
   --glass-line: var(--line);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes section-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes section-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modal-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes skeleton-breathe { from { opacity: .55; } to { opacity: 1; } }
.login-card, .login-side-inner { animation: section-in .32s var(--ease-out) both; }
.view-exit { opacity: 0; pointer-events: none; }
.view-enter { animation: fade-in .2s var(--ease-out) both; }
#section-container.section-anim { animation: section-in .22s var(--ease-out) both; }
.section-switching #section-container { animation: section-out .14s var(--ease-out) both; }
.reveal { animation: section-in .24s var(--ease-out) both; }
.modal-backdrop { animation: fade-in .16s ease-out both; }
.modal { animation: modal-in .2s var(--ease-out) both; }
.modal-backdrop.closing { animation: fade-out .16s ease-out both; }
.modal-backdrop.closing .modal { animation: modal-out .16s ease-out both; }
.toast { animation: toast-in .2s var(--ease-out) both; }
.skeleton {
  min-height: 90px; border-radius: var(--radius);
   background: var(--line);
  animation: skeleton-breathe .9s ease-in-out infinite alternate;
}
.splash {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px;
  background: var(--bg); color: var(--ink-900);
  animation: fade-out .24s ease-out 1.05s both;
}
.splash img { width: 84px; }
.splash .splash-app { font-size: 26px; font-weight: 700; }
.splash .splash-user { color: var(--ink-500); }
.splash .splash-bar { width: 180px; height: 3px; background: var(--line); overflow: hidden; }
.splash .splash-bar i {
  display: block; width: 100%; height: 100%; background: var(--green-600);
  transform-origin: left; animation: splash-fill 1s ease-out both;
}
@keyframes splash-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
::selection { background: var(--green-100); color: var(--green-900); }
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500); margin-inline-end: 7px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .splash { display: none; }
}