:root {
  --motion-hover: 180ms;
  --motion-click: 110ms;
  --motion-popup: 200ms;
  --motion-page: 250ms;
  --motion-dropdown: 150ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-orange: #f97316;
}

html.motion-ready .app-content {
  animation: harplink-page-in var(--motion-page) var(--motion-ease) backwards;
}

html.motion-page-leaving .app-content {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

@keyframes harplink-page-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

/* Splash: shown once per browser session. */
.harplink-splash {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(249,115,22,.1), transparent 34%),
    var(--erp-bg, #f5f7fb);
}

html.motion-splash-active .harplink-splash {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.harplink-splash-mark {
  position: relative;
  width: 112px;
  height: 96px;
}

.honey-cell {
  position: absolute;
  width: 31px;
  height: 35px;
  opacity: 0;
  background: linear-gradient(145deg, #ffb11b, #f36b0b);
  clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  filter: drop-shadow(0 7px 9px rgba(249,115,22,.22));
  animation: honey-gather 760ms var(--motion-ease) forwards;
  transform: translate(var(--scatter-x), var(--scatter-y)) scale(.55) rotate(var(--scatter-r));
}

.cell-1 { left: 40px; top: 0; --scatter-x: -75px; --scatter-y: -42px; --scatter-r: -20deg; }
.cell-2 { left: 20px; top: 29px; --scatter-x: 82px; --scatter-y: -55px; --scatter-r: 18deg; animation-delay: 35ms; }
.cell-3 { left: 60px; top: 29px; --scatter-x: -90px; --scatter-y: 44px; --scatter-r: -16deg; animation-delay: 70ms; }
.cell-4 { left: 0; top: 58px; --scatter-x: 108px; --scatter-y: 28px; --scatter-r: 24deg; animation-delay: 105ms; }
.cell-5 { left: 40px; top: 58px; --scatter-x: -32px; --scatter-y: -82px; --scatter-r: -12deg; animation-delay: 140ms; }
.cell-6 { left: 80px; top: 58px; --scatter-x: 44px; --scatter-y: 76px; --scatter-r: 21deg; animation-delay: 175ms; }
.cell-7 { left: 80px; top: 0; --scatter-x: 75px; --scatter-y: -26px; --scatter-r: 17deg; animation-delay: 210ms; }

.harplink-splash-logo {
  width: 170px;
  max-height: 58px;
  object-fit: contain;
  opacity: 0;
  transform: translateY(6px);
  animation: splash-logo-in 320ms ease 720ms forwards;
}

html.motion-splash-closing .harplink-splash {
  opacity: 0;
  transition: opacity 180ms ease;
}

@keyframes honey-gather {
  0% { opacity: 0; transform: translate(var(--scatter-x), var(--scatter-y)) scale(.55) rotate(var(--scatter-r)); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}

@keyframes splash-logo-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Cards and application tiles */
.module-card,
.insight-card,
.workspace-row,
.animated-app,
.orbit-module,
.kpi-card,
.card-ui,
.report-card {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--motion-hover) var(--motion-ease),
    box-shadow var(--motion-hover) var(--motion-ease),
    border-color var(--motion-hover) ease,
    background-color var(--motion-hover) ease;
}

.module-card:hover,
.insight-card:hover,
.workspace-row:hover,
.animated-app:hover,
.kpi-card:hover,
.card-ui:hover,
.report-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--motion-orange) 35%, var(--erp-border)) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.1);
}

.module-card:hover .module-icon,
.insight-card:hover .insight-icon,
.workspace-row:hover > i:first-child,
.animated-app:hover .scene-main {
  transform: translateY(-2px) rotate(3deg) scale(1.05);
}

.module-icon,
.insight-icon,
.workspace-row > i:first-child,
.scene-main,
.menu-item i,
.inv-link i {
  transition: transform var(--motion-hover) var(--motion-ease);
}

.module-card:active,
.insight-card:active,
.workspace-row:active,
.animated-app:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15,23,42,.055);
  transition-duration: var(--motion-click);
}

.motion-ripple {
  position: absolute;
  z-index: 20;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: .28;
  pointer-events: none;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  animation: motion-ripple 480ms ease-out forwards;
}

@keyframes motion-ripple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

/* Buttons */
.btn,
button,
[role="button"] {
  transition:
    transform var(--motion-click) ease,
    filter var(--motion-hover) ease,
    box-shadow var(--motion-hover) ease,
    background-color var(--motion-hover) ease;
}

.btn:hover,
button:hover {
  filter: brightness(1.06);
}

.btn-primary:hover,
.erp-action-save:hover,
.dashboard-customize:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--motion-orange) 12%, transparent),
              0 10px 24px color-mix(in srgb, var(--motion-orange) 22%, transparent);
}

.btn:active,
button:active,
[role="button"]:active {
  transform: scale(.98);
}

/* Sidebar */
.menu-item,
.inv-link,
.hrm-sidebar a,
.crm-sidebar a,
.pmc-sidebar a,
.sfa-sidebar a,
.ops-sidebar a,
.service-sidebar a {
  position: relative;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.menu-item::before,
.inv-link::before,
.hrm-sidebar a::before,
.crm-sidebar a::before,
.pmc-sidebar a::before,
.sfa-sidebar a::before,
.ops-sidebar a::before,
.service-sidebar a::before {
  content: "";
  position: absolute;
  inset-block: 18%;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 99px;
  opacity: 0;
  background: var(--motion-orange);
  box-shadow: 0 0 14px color-mix(in srgb, var(--motion-orange) 70%, transparent);
  transform: scaleY(.2);
  transition: opacity 180ms ease, transform 180ms var(--motion-ease);
}

.menu-item.active::before,
.inv-link.active::before,
.hrm-sidebar a.active::before,
.crm-sidebar a.active::before,
.pmc-sidebar a.active::before,
.sfa-sidebar a.active::before,
.ops-sidebar a.active::before,
.service-sidebar a.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.menu-item.active i,
.inv-link.active i,
.hrm-sidebar a.active i,
.crm-sidebar a.active i,
.pmc-sidebar a.active i {
  transform: scale(1.08);
}

/* Tables, dialogs, dropdowns and fields */
tbody tr.motion-row {
  opacity: 0;
  transform: translateY(5px);
  animation: motion-row-in 220ms ease forwards;
  animation-delay: var(--motion-row-delay, 0ms);
}

@keyframes motion-row-in {
  to { opacity: 1; transform: translateY(0); }
}

.modal.fade .modal-dialog {
  opacity: 0;
  transform: scale(.95);
  transition: opacity var(--motion-popup) ease, transform var(--motion-popup) var(--motion-ease);
}

.modal.show .modal-dialog {
  opacity: 1;
  transform: scale(1);
}

.dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
  transition:
    visibility 0s linear var(--motion-dropdown),
    opacity var(--motion-dropdown) ease,
    transform var(--motion-dropdown) var(--motion-ease);
}

.dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.form-control,
.form-select,
input,
textarea,
select {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--motion-orange) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--motion-orange) 14%, transparent) !important;
}

form label:focus-within {
  color: var(--motion-orange);
  transition: color 160ms ease;
}

form label:focus-within > span:first-child,
form label:focus-within > .form-label {
  transform: translateY(-2px);
}

form label > span:first-child,
form label > .form-label {
  display: inline-block;
  transition: color 160ms ease, transform 160ms var(--motion-ease);
}

.motion-field-error {
  animation: motion-field-error 280ms ease;
}

@keyframes motion-field-error {
  25% { transform: translateX(4px); }
  50% { transform: translateX(-4px); }
  75% { transform: translateX(2px); }
}

.erp-message-alert {
  animation: motion-toast-in 220ms var(--motion-ease) both;
}

.erp-message-alert.alert-success::before {
  content: "✓";
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-inline-end: 7px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--erp-success);
  animation: motion-check 260ms var(--motion-ease) both;
}

@keyframes motion-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
}

@keyframes motion-check {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.erp-nav-icon-btn.motion-bell i {
  animation: motion-bell 420ms ease;
  transform-origin: 50% 0;
}

.dashboard-daily-message {
  display: flex;
  width: min(410px, 45%);
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--motion-orange) 20%, var(--erp-border));
  border-radius: var(--erp-radius);
  background: color-mix(in srgb, var(--motion-orange) 5%, var(--erp-surface));
  transition: opacity 300ms ease, transform 300ms var(--motion-ease);
}

.dashboard-daily-message.is-changing {
  opacity: 0;
  transform: translateY(4px);
}

.dashboard-daily-message > i {
  color: var(--motion-orange);
  font-size: 1.25rem;
}

.dashboard-daily-message div { display: grid; gap: 3px; }
.dashboard-daily-message small { color: var(--motion-orange); font-weight: 850; }
.dashboard-daily-message strong { color: var(--erp-text); font-size: .86rem; line-height: 1.65; }

@media (max-width: 760px) {
  .dashboard-daily-message { width: 100%; }
}

@keyframes motion-bell {
  20% { transform: rotate(7deg); }
  40% { transform: rotate(-6deg); }
  65% { transform: rotate(3deg); }
}

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

  .harplink-splash { display: none !important; }
  tbody tr.motion-row { opacity: 1; transform: none; }
}