/*
 * Tahfeezm shared motion system v2
 *
 * One motion language for the legacy PHP application. Content never depends
 * on JavaScript to become visible; motion remains a progressive enhancement.
 */

@import url("./design_system.css");
@import url("./legacy_token_bridge.css");
@import url("./component_contracts.css");
@import url("./legacy_page_overrides.css");
@import url("./admin_form_contracts.css");
@import url("./admin_directory_contracts.css");
@import url("./admin_session_contracts.css");
@import url("./learning_flow_contracts.css");
@import url("./student_shell_contracts.css");
@import url("./student_dashboard_contracts.css");
@import url("./student_sections_contracts.css");
@import url("./student_feature_contracts.css");
@import url("./student_workspace_contracts.css");
@import url("./student_account_contracts.css");
@import url("./student_mushaf_contracts.css");
@import url("./legacy_motion.css");

:root {
  --site-motion-instant: 90ms;
  --site-motion-fast: var(--tz-fast, 140ms);
  --site-motion-base: var(--tz-base, 220ms);
  --site-motion-slow: var(--tz-slow, 360ms);
  --site-motion-ease: var(--tz-ease, cubic-bezier(0.22, 1, 0.36, 1));
  --site-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

.animate__animated {
  --animate-duration: var(--site-motion-base) !important;
  --animate-delay: 0ms !important;
  animation-duration: var(--site-motion-base) !important;
  animation-timing-function: var(--site-motion-ease) !important;
}

.animate__slow,
.animate__slower {
  --animate-duration: var(--site-motion-slow) !important;
}

.animate__fast,
.animate__faster {
  --animate-duration: var(--site-motion-fast) !important;
}

body .site-motion-reveal,
body .site-motion-item,
body .site-motion-reveal.is-site-visible,
body [data-site-motion-group] > .site-motion-item,
body [data-site-motion-new] {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.site-motion-soft-enter {
  animation: site-motion-soft-enter var(--site-motion-base) var(--site-motion-ease) both;
  animation-delay: var(--site-motion-soft-delay, 0ms);
}

@keyframes site-motion-soft-enter {
  from {
    opacity: 0.72;
    transform: translate3d(0, 7px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes site-motion-dialog-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes site-motion-menu-enter {
  from {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

:where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(
  .btn,
  button,
  [role="button"],
  .ui-button,
  .ui-compat-button,
  [data-ui-button],
  .lp-button,
  .lp-card-button,
  .admin-icon-button,
  .admin-account-button,
  .nav-link,
  .admin-shell-nav-link,
  .sb-link,
  .dropdown-item,
  .page-link
) {
  transition:
    color var(--site-motion-fast) var(--site-motion-ease-standard),
    background-color var(--site-motion-fast) var(--site-motion-ease-standard),
    border-color var(--site-motion-fast) var(--site-motion-ease-standard),
    box-shadow var(--site-motion-fast) var(--site-motion-ease-standard),
    transform var(--site-motion-fast) var(--site-motion-ease);
}

:where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(
  input,
  select,
  textarea,
  .form-control,
  .form-select,
  .form-check-input,
  .ui-input,
  .ui-select,
  .ui-textarea,
  [data-ui-field]
) {
  transition:
    border-color var(--site-motion-fast) var(--site-motion-ease-standard),
    box-shadow var(--site-motion-fast) var(--site-motion-ease-standard),
    background-color var(--site-motion-fast) var(--site-motion-ease-standard);
}

:where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(
  .card,
  .ui-card,
  [data-ui-card],
  [data-site-motion-surface],
  .hd-panel,
  .hd-stat-card,
  .lp-group,
  .lp-teacher,
  .stat-card,
  .metric-card,
  .kpi-card
) {
  transition:
    box-shadow var(--site-motion-base) var(--site-motion-ease-standard),
    border-color var(--site-motion-base) var(--site-motion-ease-standard),
    background-color var(--site-motion-base) var(--site-motion-ease-standard),
    transform var(--site-motion-base) var(--site-motion-ease);
}

:where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(.table, table) tbody tr {
  transition: background-color var(--site-motion-fast) var(--site-motion-ease-standard);
}

.dropdown-menu.show {
  animation: site-motion-menu-enter var(--site-motion-fast) var(--site-motion-ease) both;
  transform-origin: top right;
}

.modal.show .modal-dialog,
.offcanvas.show {
  animation: site-motion-dialog-enter var(--site-motion-base) var(--site-motion-ease) both;
}

.toast.show,
.toast-notification.show,
.alert.site-motion-soft-enter {
  animation: site-motion-dialog-enter var(--site-motion-base) var(--site-motion-ease) both;
}

@media (hover: hover) and (pointer: fine) {
  :where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(
    .btn,
    .ui-button,
    .ui-compat-button,
    [data-ui-button],
    .lp-button,
    .lp-card-button
  ):not(:disabled, [aria-disabled="true"]):hover {
    transform: translate3d(0, -1px, 0);
  }

  :where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(
    .card,
    .ui-card,
    [data-ui-card],
    [data-site-motion-surface],
    .hd-panel,
    .hd-stat-card,
    .lp-group,
    .lp-teacher,
    .stat-card,
    .metric-card,
    .kpi-card
  ):hover {
    border-color: var(--tz-border-strong, #cbd7ce);
    box-shadow: var(--tz-shadow-sm, 0 8px 24px rgba(23, 37, 30, 0.065));
  }

  :where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(.table, table) tbody tr:hover {
    background-color: var(--tz-brand-50, #eef8f3);
  }
}

:where(body.site-motion-enabled, body[data-site-motion-root], body:has([data-site-motion-root])) :where(
  .btn,
  button,
  [role="button"],
  .ui-button,
  [data-ui-button],
  .lp-button,
  .lp-card-button
):not(:disabled, [aria-disabled="true"]):active {
  transform: translate3d(0, 0, 0) scale(0.985);
  transition-duration: var(--site-motion-instant);
}

@media (max-width: 767.98px) {
  :root {
    --site-motion-base: 180ms;
    --site-motion-slow: 280ms;
  }

  @keyframes site-motion-soft-enter {
    from {
      opacity: 0.82;
      transform: translate3d(0, 3px, 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media print, (prefers-reduced-motion: reduce) {
  :root {
    --site-motion-instant: 0.01ms;
    --site-motion-fast: 0.01ms;
    --site-motion-base: 0.01ms;
    --site-motion-slow: 0.01ms;
  }

  *,
  *::before,
  *::after,
  .animate__animated,
  .site-motion-soft-enter,
  .site-motion-reveal,
  .site-motion-item,
  [data-site-motion-new] {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}