/* Lokavio professional motion layer: small, safe, layout-stable animations. */
:root {
  --motion-fast: 120ms;
  --motion-med: 220ms;
  --motion-slow: 360ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-spring: cubic-bezier(.16, 1, .3, 1);
  --motion-shadow: 0 14px 34px rgba(15, 23, 42, .10);
  --motion-shadow-strong: 0 22px 54px rgba(15, 23, 42, .16);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .container > *,
  .staff-main > *,
  .card,
  .panel,
  .note,
  .message-card,
  .tile,
  .action-card,
  .item {
    animation: lokavio-soft-enter var(--motion-slow) var(--motion-spring) both;
  }

  .container > *:nth-child(2), .staff-main > *:nth-child(2) { animation-delay: 25ms; }
  .container > *:nth-child(3), .staff-main > *:nth-child(3) { animation-delay: 50ms; }
  .container > *:nth-child(4), .staff-main > *:nth-child(4) { animation-delay: 75ms; }

  @keyframes lokavio-soft-enter {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

:where(.btn, button, .page-link, .pill, .badge, .nav-badge, .menu-muted, .invite-code-copy),
:where(.input, .textarea, .in, select, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="date"], textarea),
:where(.card, .panel, .note, .message-card, .tile, .action-card, .item, .menu-item, .nav-item, .nav-sub-item, .staff-table tbody tr, .table tbody tr),
:where(.search-btn, .lang-btn, .hdr-link, .staff-nav-toggle, .staff-sidebar-close, .menu-close, .staff-topbar-logout, .menu-logout-btn) {
  transition:
    background-color var(--motion-med) var(--motion-ease),
    border-color var(--motion-med) var(--motion-ease),
    box-shadow var(--motion-med) var(--motion-ease),
    color var(--motion-med) var(--motion-ease),
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-spring),
    filter var(--motion-med) var(--motion-ease);
}

:where(.btn, button, .page-link, .search-btn, .lang-btn, .hdr-link, .staff-nav-toggle, .staff-sidebar-close, .menu-close, .staff-topbar-logout, .menu-logout-btn, .invite-code-copy) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(.btn, button, .page-link, .search-btn, .lang-btn, .hdr-link, .staff-nav-toggle, .staff-sidebar-close, .menu-close, .staff-topbar-logout, .menu-logout-btn, .invite-code-copy):hover {
  transform: translate3d(0, -1px, 0);
  filter: brightness(1.02);
}

:where(.btn, button, .page-link, .search-btn, .lang-btn, .hdr-link, .staff-nav-toggle, .staff-sidebar-close, .menu-close, .staff-topbar-logout, .menu-logout-btn, .invite-code-copy):active {
  transform: translate3d(0, 0, 0) scale(.975);
  filter: brightness(.98);
}

:where(.btn, button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(11, 79, 138, .24);
  outline-offset: 3px;
}

:where(.input, .textarea, .in, select, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="date"], textarea):focus {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 0 0 4px rgba(11, 79, 138, .12), 0 12px 30px rgba(15, 23, 42, .08);
}

:where(.card, .message-card, .tile, .action-card, .item):hover {
  box-shadow: var(--motion-shadow);
}

:where(.tile, .action-card, .menu-item, .nav-item):hover {
  transform: translate3d(0, -2px, 0);
}

:where(.staff-table tbody tr, .table tbody tr):hover {
  background-color: rgba(11, 79, 138, .035);
}

.badge,
.pill,
.nav-badge,
.menu-muted:not(.menu-badge-hidden) {
  animation: lokavio-chip-in var(--motion-med) var(--motion-spring) both;
}

@keyframes lokavio-chip-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

/* Public menu drawer */
.menu-overlay {
  backdrop-filter: blur(0);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    backdrop-filter var(--motion-med) var(--motion-ease);
}

body.menu-open .menu-overlay {
  backdrop-filter: blur(3px);
}

.menu-drawer {
  transition:
    transform var(--motion-slow) var(--motion-spring),
    box-shadow var(--motion-slow) var(--motion-ease);
}

body.menu-open .menu-drawer {
  box-shadow: var(--motion-shadow-strong);
}

.burger,
.burger::before,
.burger::after,
.staff-nav-toggle__icon,
.staff-nav-toggle__icon::before,
.staff-nav-toggle__icon::after {
  transition:
    transform var(--motion-med) var(--motion-spring),
    opacity var(--motion-med) var(--motion-ease),
    top var(--motion-med) var(--motion-spring),
    background-color var(--motion-med) var(--motion-ease);
}

body.menu-open .burger {
  background: transparent;
}

body.menu-open .burger::before {
  top: 0;
  transform: rotate(45deg);
}

body.menu-open .burger::after {
  top: 0;
  transform: rotate(-45deg);
}

.menu-list .menu-item {
  transform-origin: right center;
}

body.menu-open .menu-list .menu-item {
  animation: lokavio-menu-item-in var(--motion-slow) var(--motion-spring) both;
}

body.menu-open .menu-list .menu-item:nth-child(2) { animation-delay: 20ms; }
body.menu-open .menu-list .menu-item:nth-child(3) { animation-delay: 40ms; }
body.menu-open .menu-list .menu-item:nth-child(4) { animation-delay: 60ms; }
body.menu-open .menu-list .menu-item:nth-child(5) { animation-delay: 80ms; }
body.menu-open .menu-list .menu-item:nth-child(6) { animation-delay: 100ms; }

@keyframes lokavio-menu-item-in {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Staff sidebar */
.staff-sidebar-overlay {
  backdrop-filter: blur(0);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    backdrop-filter var(--motion-med) var(--motion-ease),
    visibility 0s linear var(--motion-med);
}

body.staff-nav-open .staff-sidebar-overlay {
  backdrop-filter: blur(3px);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    backdrop-filter var(--motion-med) var(--motion-ease),
    visibility 0s;
}

.staff-sidebar {
  transition:
    transform var(--motion-slow) var(--motion-spring),
    box-shadow var(--motion-slow) var(--motion-ease),
    border-color var(--motion-med) var(--motion-ease);
}

body.staff-nav-open .staff-sidebar {
  box-shadow: var(--motion-shadow-strong);
}

body.staff-nav-open .staff-nav .nav-item,
body.staff-nav-open .staff-nav .nav-section-title,
body.staff-nav-open .staff-nav .nav-divider,
body.staff-nav-open .staff-brand {
  animation: lokavio-menu-item-in var(--motion-slow) var(--motion-spring) both;
}

.staff-nav .nav-item.is-active,
.staff-nav .nav-sub-item.is-active {
  transform: translate3d(0, 0, 0);
}

.staff-nav .nav-item.is-active::before {
  transition: opacity var(--motion-med) var(--motion-ease), transform var(--motion-med) var(--motion-spring);
}

.staff-nav .nav-item:hover::before {
  opacity: .9;
  transform: scaleY(.96);
}

/* Search and language overlays */
.search-overlay,
.lang-overlay {
  transition:
    opacity var(--motion-med) var(--motion-ease),
    visibility 0s linear var(--motion-med),
    transform var(--motion-slow) var(--motion-spring),
    backdrop-filter var(--motion-med) var(--motion-ease);
}

body.search-open .search-overlay,
body.lang-open .lang-overlay {
  transition:
    opacity var(--motion-med) var(--motion-ease),
    visibility 0s,
    transform var(--motion-slow) var(--motion-spring),
    backdrop-filter var(--motion-med) var(--motion-ease);
}

.search-overlay__bar,
.search-overlay__dropdown,
.lang-overlay-inner {
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-slow) var(--motion-spring);
}

.search-item,
.lang-item {
  transition:
    background-color var(--motion-med) var(--motion-ease),
    color var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-spring),
    box-shadow var(--motion-med) var(--motion-ease);
}

.search-item:hover,
.lang-item:hover {
  transform: translate3d(0, -1px, 0);
}

/* Loader: smooth in/out without blocking layout. */
#page-loader {
  transition:
    opacity var(--motion-med) var(--motion-ease),
    visibility 0s linear var(--motion-med),
    backdrop-filter var(--motion-med) var(--motion-ease);
}

#page-loader.is-on {
  transition:
    opacity var(--motion-med) var(--motion-ease),
    visibility 0s,
    backdrop-filter var(--motion-med) var(--motion-ease);
}

.spinner {
  animation-duration: .72s;
  animation-timing-function: cubic-bezier(.5, 0, .5, 1);
}

/* Flash messages and dynamic blocks. */
.flash-message-card,
.compose-alert,
.activate-error,
.helpcontact-detail,
.detail-sign-box,
.message-sign-shell,
.message-sign-box {
  animation: lokavio-soft-pop var(--motion-slow) var(--motion-spring) both;
}

@keyframes lokavio-soft-pop {
  from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Keep mobile interactions smooth and safe. */
@media (max-width: 720px) {
  :where(.btn, button, .page-link, .search-btn, .lang-btn, .hdr-link, .staff-nav-toggle, .menu-close):hover {
    transform: none;
  }

  :where(.card, .message-card, .tile, .action-card, .item):hover {
    box-shadow: var(--shadow, 0 8px 30px rgba(0,0,0,.06));
  }

  .menu-drawer,
  .staff-sidebar {
    transition-duration: 300ms;
  }
}