/* ================================================================
   style.css — Classoos 网站 UI 增强
   卡片 hover 动画 / 四角 SVG 装饰 / 遮罩层聚光 / Crimson Text 字体
   ================================================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.loli.net/css2?family=Crimson+Text:ital,wght@1,400&display=swap');

/* ---- 字体工具类 ---- */
.font-crimson-italic {
  font-family: 'Crimson Text', Georgia, serif;
  font-style: italic;
}


/* ================================================================
   四角 SVG 装饰
   每个角 = position:fixed 的容器 + 内部两层不规则多边形 SVG
   CSS filter:blur(3px) 半柔化边缘
   ================================================================ */
.corner-deco {
  position: fixed;
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 0;
}
.corner-deco svg {
  width: 100%;
  height: 100%;
  filter: blur(3px);
}
.corner-tl { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner-br { bottom: 0; right: 0; transform: scale(-1, -1); }


/* ================================================================
   遮罩层 — 全屏半透明黑，hover 卡片时淡入
   z-index: 50，低于 hover 卡片的 100
   ================================================================ */
.dim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.dim-overlay.active {
  opacity: 1;
}


/* ================================================================
   书籍卡片 hover 动画（桌面端）
   结构: <a class="column"> > <div class="book-wrap"> > .shadow-block × 3 + .card
   ================================================================ */

/* ---- hover 时打开父容器溢出（防止封面放大被裁剪） ---- */
.columns:has(.book-wrap:hover),
.columns:has(.book-wrap:hover) .column,
.columns:has(.book-wrap:hover) .column > a {
  overflow: visible !important;
}

/* ---- book-wrap 容器 ---- */
.book-wrap {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 4px;
  transition: z-index 0s;
}
.book-wrap:hover {
  z-index: 100;
  overflow: visible !important;
}
.book-wrap:hover .card {
  overflow: visible !important;
}

/* ---- 三个阴影方块 ---- */
.book-wrap .shadow-block {
  position: absolute;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translate(10px, -10px) scale(0.92);
  transition: all 0.5s cubic-bezier(.25, .8, .25, 1);
  pointer-events: none;
  z-index: 60;
}

/* ---- 封面图片 ---- */
.book-wrap .card-image {
  overflow: visible;
  position: relative;
  z-index: 3;
  border-radius: 4px;
  transition: border-radius 0.5s ease;
}
.book-wrap .card-image figure {
  overflow: visible;
}
.book-wrap .card-image img {
  border-radius: 4px;
  transition: transform 0.5s cubic-bezier(.25, .8, .25, 1),
              border-radius 0.5s ease;
  transform-origin: center center;
}

/* ---- 文本框（card-content） ---- */
.book-wrap .card-content {
  background: #fff;
  border: 1px solid #eee;
  border-top: none;
  border-radius: 4px;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(.25, .8, .25, 1),
              transform 0.5s cubic-bezier(.25, .8, .25, 1),
              border-radius 0.5s ease,
              box-shadow 0.5s ease;
}
.book-wrap .card-content .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp 0s;
}
.book-wrap .card-content .subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Hover 动画 ---- */
.book-wrap:hover .card-image {
  border-radius: 12px;
}
.book-wrap:hover .card-image img {
  transform: translate(-6px, 6px) scale(1.1);
  border-radius: 12px;
}
.book-wrap:hover .card-content {
  transform: translateY(30px);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 阴影弹出 */
.book-wrap:hover .shadow-block {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.book-wrap:hover .shadow-block.s2 {
  transition-delay: 0.06s;
}
.book-wrap:hover .shadow-block.s3 {
  transition-delay: 0.12s;
}


/* ================================================================
   show.php MORE 推荐卡片 — 同样的动画效果
   结构: <a class="column"> > <div class="book-wrap"> > .shadow-block × 3 + .card
   ================================================================ */
/* 与上方共用样式，无需额外规则 */


/* ================================================================
   翻页跳转输入框
   ================================================================ */
.page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 20px;
  font-size: 0.9em;
}
.page-jump input[type="number"] {
  width: 58px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9em;
  text-align: center;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  -moz-appearance: textfield;
}
.page-jump input::-webkit-outer-spin-button,
.page-jump input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.page-jump input:focus {
  border-color: #6c8cff;
}
.page-jump input.valid {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.page-jump input.invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
}
.page-jump button {
  padding: 5px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafafa;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s;
}
.page-jump button:hover {
  background: #eee;
}
.page-jump .page-total {
  color: #aaa;
  font-size: 0.82em;
}


/* ================================================================
   移动端适配（暂不启用动画，保留基础圆角）
   ================================================================ */
@media screen and (max-width: 768px) {
  .book-wrap {
    margin: 0;
    padding: 0;
  }
  .book-wrap .shadow-block {
    display: none;
  }
  .corner-deco {
    width: 150px;
    height: 150px;
  }
}