/* Sociolla-style page motion: soft, short and mobile-friendly. */
:root {
  --sociolla-motion-fast: 160ms;
  --sociolla-motion: 260ms;
  --sociolla-ease: cubic-bezier(.22, .8, .25, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  animation: sociolla-page-enter 360ms var(--sociolla-ease) both;
}

body.sociolla-page-leaving {
  animation: sociolla-page-leave 180ms ease-in both;
  pointer-events: none;
}

@keyframes sociolla-page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sociolla-page-leave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5px); }
}

/* Smooth but restrained feedback for the common interactive surfaces. */
button, a, input, select, textarea,
.card, .surface, .panel, .kpi, .health, .method, .request,
.nav-item, .nav button, .side-link, .button-primary, .primary-btn,
.secondary-btn, .submit, .icon-button, .icon-btn, .quiet-btn,
.product-card, .home-product-card, .task-card, .status-badge, .pill {
  transition:
    background-color var(--sociolla-motion-fast) ease,
    border-color var(--sociolla-motion-fast) ease,
    color var(--sociolla-motion-fast) ease,
    box-shadow var(--sociolla-motion-fast) ease,
    opacity var(--sociolla-motion-fast) ease,
    transform var(--sociolla-motion-fast) var(--sociolla-ease);
}

button:hover:not(:disabled), a:hover,
.nav-item:hover, .nav button:hover, .side-link:hover,
.method:hover:not(:disabled), .request:hover {
  transform: translateY(-1px);
}

button:active:not(:disabled), a:active,
.method:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}

.card:hover, .surface:hover, .panel:hover,
.kpi:hover, .health:hover, .home-product-card:hover,
.product-card:hover, .task-card:hover {
  box-shadow: 0 14px 32px rgba(146, 53, 93, .11);
}

/* SPA sections and dashboard panels reveal without a jarring jump. */
.view.active, .page-section.active, .tab-panel.active {
  animation: sociolla-content-enter 300ms var(--sociolla-ease) both;
}

@keyframes sociolla-content-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Keep keyboard focus visible despite hover/transition effects. */
:focus-visible {
  outline: 3px solid rgba(216, 63, 120, .32);
  outline-offset: 3px;
}

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

@media (max-width: 720px) {
  body { animation-duration: 280ms; }
  button:hover:not(:disabled), a:hover,
  .nav-item:hover, .nav button:hover, .side-link:hover,
  .method:hover:not(:disabled), .request:hover { transform: none; }
}