/* =========================================================
   KokuuSkin 后台 · 流畅动画系统
   由 kokuu-ui 插件注入（*）。Apple 风格：细腻、丝滑、有物理感。
   统一缓动：--a-ease(cubic-bezier .4,0,.2,1) / --a-ease-out(cubic-bezier .16,1,.3,1)
   全部尊重 prefers-reduced-motion。
   ========================================================= */

/* =========================================================
   一、页面进场：内容整体淡入上移
   ========================================================= */
@keyframes kokuuApplePageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
body.kokuu-apple .content-wrapper {
  animation: kokuuApplePageIn .5s cubic-bezier(.16, 1, .3, 1) both;
}
body.kokuu-apple .content-header {
  animation: kokuuApplePageIn .55s cubic-bezier(.16, 1, .3, 1) .04s both;
}

/* =========================================================
   二、卡片入场：stagger 渐次浮现（由 rebuild.js 加 .kokuu-in）
   ========================================================= */
@keyframes kokuuAppleCardIn {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
body.kokuu-apple .kokuu-in {
  animation: kokuuAppleCardIn .6s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--kokuu-in-delay, 0s);
}

/* 网格卡片逐个浮现 */
body.kokuu-apple .d-flex.flex-wrap > .card.kokuu-in,
body.kokuu-apple .d-flex.flex-wrap > a > .card.kokuu-in { will-change: transform, opacity; }

/* =========================================================
   三、导航交互：侧栏项 / 顶栏项 精细反馈
   ========================================================= */
body.kokuu-apple .nav-sidebar .nav-link {
  position: relative;
  overflow: hidden;
}
body.kokuu-apple .nav-sidebar .nav-link::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--k-rain, #0FA3A3);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
body.kokuu-apple .nav-sidebar .nav-link.active::before { transform: scaleY(1); }

/* 侧栏项悬停微滑 */
body.kokuu-apple .nav-sidebar .nav-link:hover { transform: translateX(2px); }
body.kokuu-apple .nav-sidebar .nav-link,
body.kokuu-apple .nav-sidebar .nav-link:hover {
  transition: background .18s cubic-bezier(.4,0,.2,1),
              color .18s cubic-bezier(.4,0,.2,1),
              transform .22s cubic-bezier(.16,1,.3,1);
}

/* 顶栏图标悬停轻微旋转/缩放（Apple 图标手感） */
body.kokuu-apple .main-header .nav-link i,
body.kokuu-apple .main-header .nav-link .fas,
body.kokuu-apple .main-header .nav-link .far {
  display: inline-block;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
body.kokuu-apple .main-header .nav-link:hover i { transform: scale(1.12); }

/* =========================================================
   四、卡片 / 列表项悬停浮起 + 光晕
   ========================================================= */
body.kokuu-apple .card,
body.kokuu-apple .d-flex.flex-wrap > .card,
body.kokuu-apple .d-flex.flex-wrap > a > .card {
  will-change: transform;
}
body.kokuu-apple .d-flex.flex-wrap > .card:hover,
body.kokuu-apple .d-flex.flex-wrap > a > .card:hover {
  transform: translateY(-4px);
}

/* 表格行悬停左侧微高亮 */
body.kokuu-apple .table-hover tbody tr {
  position: relative;
  transition: background .18s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   五、按钮 / 表单微交互
   ========================================================= */
body.kokuu-apple .btn { will-change: transform; }
body.kokuu-apple .btn:hover { transform: translateY(-1px); }
body.kokuu-apple .btn:active { transform: scale(.96); }

/* =========================================================
   六、Modal / Toast 入场
   ========================================================= */
@keyframes kokuuAppleModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
body.kokuu-apple .modal.show .modal-dialog { animation: kokuuAppleModalIn .38s cubic-bezier(.16,1,.3,1) both; }
body.kokuu-apple .modal.fade .modal-dialog { transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s; }

@keyframes kokuuAppleToastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
body.kokuu-apple .toast { animation: kokuuAppleToastIn .4s cubic-bezier(.16,1,.3,1) both; }

/* =========================================================
   七、皮肤预览图轻微缩放（悬停时"活"起来）
   ========================================================= */
body.kokuu-apple .d-flex.flex-wrap > .card:hover .card-img-top,
body.kokuu-apple .d-flex.flex-wrap > a > .card:hover .card-img-top {
  transform: scale(1.04);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
body.kokuu-apple .card .card-img-top { transition: transform .4s cubic-bezier(.16,1,.3,1); }

/* =========================================================
   八、加载遮罩呼吸
   ========================================================= */
body.kokuu-apple .overlay { animation: kokuuAppleFade .3s ease both; }
@keyframes kokuuAppleFade { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   九、降低动效偏好：全部关闭
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  body.kokuu-apple .content-wrapper,
  body.kokuu-apple .content-header,
  body.kokuu-apple .kokuu-in,
  body.kokuu-apple .modal.show .modal-dialog,
  body.kokuu-apple .toast {
    animation: none !important;
  }
  body.kokuu-apple *,
  body.kokuu-apple *::before,
  body.kokuu-apple *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  body.kokuu-apple .d-flex.flex-wrap > .card:hover,
  body.kokuu-apple .nav-sidebar .nav-link:hover,
  body.kokuu-apple .btn:hover { transform: none !important; }
}

/* =========================================================
   加载骨架（react-loading-skeleton）KokuuSkin 化
   ---------------------------------------------------------
   内核用 react-loading-skeleton 的默认灰色脉冲块作加载占位。
   该默认样式在 Apple 扁平主题下显得脏乱、易被误认为「错误页」。
   这里不改内核代码，只用 CSS 覆盖为品牌化的呼吸微光。

   选择器说明：
     .react-loading-skeleton        每个脉冲块
     .react-loading-skeleton__text  文本占位（无背景，需单独处理）
   ========================================================= */
body.kokuu-apple .react-loading-skeleton {
  background: linear-gradient(
    100deg,
    var(--a-surface-2) 20%,
    rgba(15, 163, 163, .10) 42%,
    var(--a-surface-2) 64%
  ) !important;
  background-size: 320% 100% !important;
  border-radius: 8px !important;
  animation: kokuu-skeleton-sweep 1.5s ease-in-out infinite !important;
  opacity: 1 !important;
}

/* 骨架卡片本体：与真实卡片同尺寸，避免加载完成时布局跳动 */
body.kokuu-apple .card:has(> .card-body > .react-loading-skeleton),
body.kokuu-apple .card:has(> .card-body:empty) {
  border-radius: var(--a-radius) !important;
  box-shadow: var(--a-shadow) !important;
  border: 1px solid var(--a-sep) !important;
  overflow: hidden;
}

/* 文字占位：库默认给的是灰底块，这里给细长条 */
body.kokuu-apple .react-loading-skeleton__text {
  background: rgba(60, 60, 67, .09) !important;
  border-radius: 5px !important;
  animation: kokuu-skeleton-pulse 1.5s ease-in-out infinite !important;
  height: 10px !important;
  margin: 6px 0 !important;
}

@keyframes kokuu-skeleton-sweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
@keyframes kokuu-skeleton-pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* 暗色态 */
body.kokuu-apple.dark-mode .react-loading-skeleton {
  background: linear-gradient(
    100deg,
    #1C1C1E 20%,
    rgba(79, 227, 208, .12) 42%,
    #1C1C1E 64%
  ) !important;
}
body.kokuu-apple.dark-mode .react-loading-skeleton__text {
  background: rgba(255, 255, 255, .10) !important;
}

/* 尊重系统「减弱动效」 */
@media (prefers-reduced-motion: reduce) {
  body.kokuu-apple .react-loading-skeleton,
  body.kokuu-apple .react-loading-skeleton__text {
    animation: none !important;
  }
}

/* ---- 衣柜：修正内核骨架溢出遮挡标签栏 ----
   内核 LoadingClosetItem 的 .card-body 为空且骨架块以绝对定位渲染，
   在 Apple 主题下会溢出到卡片头部、遮住「披风」等标签文字。
   这里约束骨架只在 card-body 内显示，并保证标签栏在上层。 */
body.kokuu-apple #closet-list .card-body {
  position: relative;
  overflow: hidden;
}
body.kokuu-apple #closet-list .card-header,
body.kokuu-apple #closet-list .nav-tabs {
  position: relative;
  z-index: 2;
}
/* 骨架卡片的可点区域按钮在加载中不响应 */
body.kokuu-apple #closet-list .react-loading-skeleton {
  pointer-events: none;
}