/* ==========================================================================
   public/css/animations.css - 方案 A：Apple 高阶阻尼与 50% 黑遮罩预览引擎 (完整版)
   ========================================================================== */

/* 1. 核心物理缓动曲线 */
:root {
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15); /* 🎯 方案 A：Apple 物理阻尼弹性曲线 */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 🎯 详情页：分栏响应式平滑回缩系统 */
#detail-left-column,
#detail-media-column,
#detail-markdown-column,
#detail-toc-column,
#ai-col-wrapper-design {
  transition: width 0.4s var(--ease-apple), 
              flex-basis 0.4s var(--ease-apple), 
              max-width 0.4s var(--ease-apple), 
              opacity 0.3s ease,
              padding 0.4s var(--ease-apple),
              transform 0.4s var(--ease-apple) !important;
  will-change: width, flex-basis, max-width, opacity;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.layout-panel-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: none !important;
}

.layout-panorama-left-hidden {
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0% !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* 3. 🎯 详情弹窗进出场：外层纯透明淡入 + 内容微升 (无全屏缩放闪烁) */
#view-detail {
  transition: opacity 0.35s var(--ease-apple), visibility 0.35s ease !important;
  will-change: opacity, visibility;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

#view-detail.modal-inactive,
#view-detail.hidden,
#view-detail[style*="display: none"] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#view-detail.modal-active,
#view-detail:not(.hidden):not(.modal-inactive):not([style*="display: none"]) {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#detail-main-wrapper {
  transition: transform 0.35s var(--ease-apple), opacity 0.35s ease !important;
  will-change: transform, opacity;
  transform: translateZ(0);
}

#view-detail.modal-inactive #detail-main-wrapper {
  transform: translateY(12px) !important;
  opacity: 0 !important;
}

#view-detail.modal-active #detail-main-wrapper {
  transform: translateY(0px) !important;
  opacity: 1 !important;
}

/* 4. 🎯 方案 A 核心：所有卡片 -8px 高阶物理阻尼微浮起 + 深度弥散立体投影 */
.card-shadow-box,
.note-card-panel {
  transform: translateY(0) translateZ(0) !important;
  transition: transform 0.45s var(--ease-spring), 
              box-shadow 0.45s var(--ease-apple), 
              border-color 0.35s ease !important;
  will-change: transform, box-shadow;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* 亮色模式悬停：-8px 浮起 + 软弥散深空阴影 */
.card-shadow-box:hover,
.note-card-panel:hover {
  transform: translateY(-8px) translateZ(0) !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.16), 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* 暗黑模式悬停：-8px 浮起 + 极光环境弥散高亮投影 */
body.dark-theme .card-shadow-box:hover,
body.dark-theme .note-card-panel:hover,
html.dark .card-shadow-box:hover,
html.dark .note-card-panel:hover {
  transform: translateY(-8px) translateZ(0) !important;
  box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.85), 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 5. 🎯 400px 设计大卡片：全幅视频悬停 100% 播放 */
.card-img-media {
  transition: transform 0.75s var(--ease-apple) !important;
  will-change: transform;
  transform: scale(1.001);
}
.card-shadow-box:hover .card-img-media {
  transform: scale(1.05) !important;
}

.card-video-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0;
  z-index: 10 !important;
  transition: opacity 0.45s var(--ease-apple) !important;
  pointer-events: none !important;
}

.card-shadow-box:hover .card-video-preview {
  opacity: 1 !important;
}

.card-overlay-gradient {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.85) 100%) !important;
  opacity: 0 !important;
  padding: 30px 28px !important;
  transition: opacity 0.4s var(--ease-apple) !important;
}
.card-shadow-box:hover .card-overlay-gradient {
  opacity: 1 !important;
}

.card-tag-text {
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.4s var(--ease-apple) 0.02s, opacity 0.4s var(--ease-apple) 0.02s !important;
}
.card-title-text {
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.45s var(--ease-apple) 0.05s, opacity 0.45s var(--ease-apple) 0.05s !important;
}
.card-shadow-box:hover .card-tag-text,
.card-shadow-box:hover .card-title-text {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* 6. 🎯 280px 卡片：50% 纯黑遮罩全铺预览系统 (无渐变) */
.note-card-media-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: 24px !important;
  opacity: 0;
  transform: scale(1.04) translateZ(0);
  transition: opacity 0.4s var(--ease-apple), transform 0.4s var(--ease-apple) !important;
  will-change: opacity, transform;
}

.note-card-panel:hover .note-card-media-preview {
  opacity: 1 !important;
  transform: scale(1) translateZ(0) !important;
}

.note-preview-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

.note-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important;
  opacity: 0;
  background-color: transparent !important;
  transition: opacity 0.4s var(--ease-apple) !important;
}

.note-card-panel:hover .note-preview-video {
  opacity: 1 !important;
}

/* 🎯 纯正 50% 纯黑遮罩层 */
.note-preview-black-mask {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 悬停时文字自动高亮为纯白 */
.note-card-panel:hover h3,
.note-card-panel:hover p,
.note-card-panel:hover .card-heading-text,
.note-card-panel:hover .card-desc-text {
  color: #ffffff !important;
}

/* 7. 视图通用进场 */
@keyframes animateReveal {
  0% { 
    opacity: 0; 
    transform: translateY(8px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}
.animate-reveal {
  animation: animateReveal 0.35s var(--ease-apple) forwards !important;
  will-change: opacity, transform;
}

@keyframes ai-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ai-loading-spinner {
  border: 2.5px solid rgba(0, 0, 0, 0.05);
  border-top: 2.5px solid #7e22ce;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: ai-spin 0.8s linear infinite;
}