/* ============================================================
 * 动效层:统一补充菜单、弹窗、按钮与列表的交互动效。
 * 仅添加 transition / animation,不改变现有配色、尺寸与布局;
 * 全部动效在 prefers-reduced-motion: reduce 下关闭。
 * ============================================================ */

.site-ui,
.login-page {
  --oe-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --oe-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --oe-t-fast: 0.16s;
  --oe-t-base: 0.26s;
  --oe-t-slow: 0.45s;
}

/* ---------- 关键帧 ---------- */
@keyframes oe-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes oe-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes oe-menu-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes oe-nav-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes oe-dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes oe-dialog-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.975); }
}
@keyframes oe-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes oe-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes oe-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes oe-check-pop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes oe-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---------- 顶部导航、菜单与抽屉 ---------- */
.site-ui .home-nav-actions {
  transition:
    opacity var(--oe-t-fast) var(--oe-ease-soft),
    transform 0.28s var(--oe-ease-out),
    visibility 0.28s;
}
.site-ui .home-nav-actions.is-open {
  animation: oe-nav-in 0.28s var(--oe-ease-out);
}

/* 后台标签页底部指示条(横向排列时) */
@media (min-width: 1200px) {
  .site-ui .oe-admin-tabs .home-nav-button { position: relative; }
  .site-ui .oe-admin-tabs .home-nav-button::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 4px;
    left: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0;
    transform: scaleX(0.3);
    transition:
      transform 0.28s var(--oe-ease-out),
      opacity 0.28s var(--oe-ease-out);
  }
  .site-ui .oe-admin-tabs .home-nav-button.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .site-ui .oe-admin-tabs .home-nav-button:not(.is-active):hover::after {
    opacity: 0.35;
    transform: scaleX(0.55);
  }
}

/* 移动端菜单项逐个落位 */
@media (max-width: 767px) {
  .site-ui .home-nav-actions.is-open > * {
    animation: oe-menu-item-in 0.3s var(--oe-ease-out) backwards;
  }
  .site-ui .home-nav-actions.is-open > :nth-child(2) { animation-delay: 0.03s; }
  .site-ui .home-nav-actions.is-open > :nth-child(3) { animation-delay: 0.06s; }
  .site-ui .home-nav-actions.is-open > :nth-child(4) { animation-delay: 0.09s; }
  .site-ui .home-nav-actions.is-open > :nth-child(n + 5) { animation-delay: 0.12s; }
}
@media (max-width: 1199px) {
  .site-ui.oe-admin-body .oe-admin-menu {
    transition:
      opacity var(--oe-t-fast) var(--oe-ease-soft),
      transform 0.28s var(--oe-ease-out),
      visibility 0.28s;
  }
  .site-ui.oe-admin-body .oe-admin-menu.is-open > * {
    animation: oe-menu-item-in 0.3s var(--oe-ease-out) backwards;
  }
  .site-ui.oe-admin-body .oe-admin-menu.is-open > :nth-child(2) { animation-delay: 0.03s; }
  .site-ui.oe-admin-body .oe-admin-menu.is-open > :nth-child(3) { animation-delay: 0.06s; }
  .site-ui.oe-admin-body .oe-admin-menu.is-open > :nth-child(4) { animation-delay: 0.09s; }
  .site-ui.oe-admin-body .oe-admin-menu.is-open > :nth-child(n + 5) { animation-delay: 0.12s; }
}

/* ---------- 按钮与表单控件反馈 ---------- */
.site-ui :is(.oe-input, textarea.oe-input, input[type="search"], input[type="text"], input[type="password"], input[type="number"]) {
  transition:
    box-shadow var(--oe-t-base) var(--oe-ease-soft),
    border-color var(--oe-t-base) var(--oe-ease-soft),
    background-color var(--oe-t-base) var(--oe-ease-soft);
}

.site-ui .oe-check input[type="checkbox"]:checked,
.site-ui .oe-qopt input[type="checkbox"]:checked {
  animation: oe-check-pop 0.26s var(--oe-ease-out);
}

/* ---------- 自定义下拉菜单 ---------- */
.site-ui .oe-select-option {
  transition: background-color var(--oe-t-fast) var(--oe-ease-soft), border-color var(--oe-t-fast) var(--oe-ease-soft), color var(--oe-t-fast) var(--oe-ease-soft);
}
.site-ui .oe-select-menu:not([hidden]) {
  animation: oe-menu-in 0.2s var(--oe-ease-out);
  transform-origin: top center;
}

/* ---------- 弹窗与遮罩 ---------- */
.site-ui .profile-dialog[open] {
  animation: oe-dialog-in 0.3s var(--oe-ease-out);
}
.site-ui .profile-dialog[open]::backdrop {
  animation: oe-backdrop-in 0.28s ease-out;
}
.site-ui .profile-dialog.is-closing {
  animation: oe-dialog-out 0.19s ease-in both;
  pointer-events: none;
}
.site-ui .profile-dialog.is-closing::backdrop {
  animation: oe-backdrop-out 0.19s ease-in both;
}
/* Height is animated by LegacyLayout's spring; hide scrollbars so grow/shrink stays smooth. */
.site-ui .profile-dialog.is-resizing {
  overflow: hidden;
}

/* ---------- 卡片与列表 ---------- */
.site-ui .home-course-section .course-card--loading {
  animation: oe-breathe 1.6s ease-in-out infinite;
}

/* ---------- 表格 ---------- */
.site-ui .data-table tbody td {
  transition: background-color 0.18s var(--oe-ease-soft);
}
.site-ui .data-table tbody tr:hover > td {
  background-color: color-mix(in srgb, var(--accent) 7%, transparent);
}
/* ---------- 试卷手风琴 ---------- */
.site-ui .chapter-chevron {
  transition: transform 0.25s var(--oe-ease-out);
}
.site-ui .chapter-band.is-collapsed .chapter-chevron {
  transform: rotate(-45deg);
}
.site-ui .chapter-band__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s var(--oe-ease-out);
}
.site-ui .chapter-band.is-collapsed .chapter-band__body {
  grid-template-rows: 0fr;
}
.site-ui .chapter-band__body > .chapter-section-list {
  min-height: 0;
  overflow: hidden;
}
.site-ui .chapter-band__heading {
  transition: background-color var(--oe-t-fast) var(--oe-ease-soft), border-color var(--oe-t-fast) var(--oe-ease-soft);
}

/* ---------- 考试页 ---------- */
.site-ui .oe-exam-nav.is-open {
  animation: oe-nav-in 0.26s var(--oe-ease-out);
}

.site-ui.practice-page .question .option-item {
  transition:
    background-color 0.2s var(--oe-ease-soft),
    border-color 0.2s var(--oe-ease-soft),
    box-shadow 0.25s var(--oe-ease-soft),
    color 0.2s var(--oe-ease-soft);
}
.site-ui.practice-page .question .option-item > .oe-qopt__key {
  transition: transform 0.2s var(--oe-ease-out), color 0.2s var(--oe-ease-soft), background-color 0.2s var(--oe-ease-soft), border-color 0.2s var(--oe-ease-soft);
}
.site-ui.practice-page .question .option-item:hover > .oe-qopt__key {
  transform: scale(1.08);
}

/* ---------- 登录页 ---------- */
.login-page #loginTwoFactor { animation: oe-rise-in 0.3s var(--oe-ease-out); }
.login-page .auth-input {
  transition:
    box-shadow 0.25s var(--oe-ease-out),
    border-color 0.2s var(--oe-ease-soft),
    background-color 0.2s var(--oe-ease-soft),
    color 0.2s var(--oe-ease-soft);
}
.login-page .auth-field-error:not([hidden]) {
  animation: oe-shake 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
/* ---------- 降低动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-ui *,
  .site-ui *::before,
  .site-ui *::after,
  .login-page *,
  .login-page *::before,
  .login-page *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}