/* ================================================================
   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 装饰
   corner-wrap = 固定于视口的容器（完整定义见下方"四角装饰容器"节）
   corner-deco = background-image 引用外部 SVG
   ================================================================ */
.corner-deco {
  position: absolute;
  width: 150px;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
}
.corner-tl { top: 0; left: 0; background-image: url('./corners/tl.svg'); }
.corner-tr { top: 0; right: 0; background-image: url('./corners/tr.svg'); }
.corner-bl { bottom: 0; left: 0; background-image: url('./corners/bl.svg'); }
.corner-br { bottom: 0; right: 0; background-image: url('./corners/br.svg'); }


/* ================================================================
   遮罩层 — 全屏半透明黑，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: 2;
}

/* ---- 封面图片 ---- */
.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: #1F5C47;
  box-shadow: 0 0 0 2px rgba(31,92,71,0.15);
}
.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: 1.5px solid #1F5C47;
  border-radius: 4px;
  background: #1F5C47;
  color: #fff;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s;
}
.page-jump button:hover {
  background: #174a39;
}
.page-jump .page-total {
  color: #aaa;
  font-size: 0.82em;
}

/* ---- Bulma 分页按钮配色 ---- */
.pagination-link.is-current {
  background-color: #1F5C47 !important;
  border-color: #1F5C47 !important;
  color: #fff !important;
}
.pagination-link:hover {
  border-color: #1F5C47;
  color: #1F5C47;
}
.pagination-previous:hover,
.pagination-next:hover {
  border-color: #1F5C47;
  color: #1F5C47;
}


/* ---- 搜索页分类标签（胶囊按钮） ---- */
.filter-tag {
  display: inline-block;
  padding: 5px 14px;
  margin: 3px 2px;
  font-size: 13px;
  color: #3d9579;
  background: #e8f3ec;
  border: 1.5px solid #c8e0d1;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.filter-tag:hover {
  background: #3d9579;
  color: #fff;
  border-color: #3d9579;
}


/* ---- footer — Deep Green #1F5C47 背景 ---- */
.footer { background: #1F5C47; color: rgba(255,255,255,0.7); }
.footer a { color: rgba(255,255,255,0.9); }
.footer strong { color: #fff; }


/* ================================================================
   页面背景 — 纯白
   浅绿渐变已移至 corner-wrap，使其位于四角装饰之上
   ================================================================ */
body {
  background: #fff;
}


/* ================================================================
   入场动画 — Fade Reveal（淡入 + 上滑）
   用于 "New Update" / "Hot" / "MORE" 标题
   通过 Intersection Observer 触发，每页只播放一次
   ================================================================ */
.curtain-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(.25,.8,.25,1),
              transform 0.9s cubic-bezier(.25,.8,.25,1);
}
.curtain-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   标题下划线 — Deep Green #1F5C47
   ================================================================ */
.heading-underline {
  position: relative;
  display: inline-block;
}
.heading-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #1F5C47;
  border-radius: 2px;
  opacity: 0.5;
}


/* ================================================================
   分隔线 — Accent gradient #E8765A
   用于 New Update 和 Hot 之间
   ================================================================ */
.accent-divider {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #E8765A, transparent);
  margin: 24px 0;
  opacity: 0.5;
}


/* ================================================================
   "I want it!" 按钮 — Accent #E8765A
   ================================================================ */
.btn-i-want {
  padding: 10px 32px !important;
  margin-top: 10px;
  font-weight: 700;
  background: #E8765A !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-i-want:hover {
  background: #d96a50 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,118,90,0.3);
}


/* ================================================================
   "Connect me" 按钮 — Accent 描边风格
   ================================================================ */
.btn-connect {
  background: transparent !important;
  color: #E8765A !important;
  border: 2px solid #E8765A !important;
  border-radius: 6px !important;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.btn-connect:hover {
  background: #E8765A !important;
  color: #fff !important;
}


/* ================================================================
   搜索按钮 — Deep Green #1F5C47
   ================================================================ */
.btn-search-green {
  background: #1F5C47 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  transition: background 0.2s;
}
.btn-search-green:hover {
  background: #174a39 !important;
}


/* ================================================================
   输入框 focus — Deep Green
   ================================================================ */
.input-green-focus:focus {
  border-color: #1F5C47 !important;
  box-shadow: 0 0 0 3px rgba(31,92,71,0.12) !important;
}


/* ================================================================
   导航栏底线装饰 — Accent #E8765A
   ================================================================ */
.navbar-accent-border {
  border-bottom: 2px solid #E8765A;
}


/* ================================================================
   四角装饰容器 — 含浅绿渐变背景层
   corner-wrap 的 background 位于四角 SVG 之上（z-index: 0 内部层级）
   实现：浅绿渐变覆盖四角装饰，而非四角浮于渐变之上
   ================================================================ */
.corner-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(31,92,71,0.06) 0%, transparent 10%, transparent 90%, rgba(31,92,71,0.06) 100%);
}


/* ================================================================
   四角滚动变色叠层
   使用 SVG mask-image，颜色仅覆盖叶片图案区域，空白部分不变色
   白色叠层（mix-blend-mode: multiply）：白色 × 任何颜色 = 保持原色
   绿色叠层：深绿 #1F5C47 填充叶片形状
   opacity 由 JS scroll 事件动态控制
   ================================================================ */
.corner-overlay-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.corner-overlay {
  position: absolute;
  width: 150px;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.15s ease-out;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
/* 白色叠层：multiply 模式让白色不影响下方绿色叶片 */
.corner-overlay-white {
  background-color: #fff;
  mix-blend-mode: multiply;
  opacity: 1;
}
/* 绿色叠层：深绿填充叶片形状 */
.corner-overlay-green {
  background-color: #1F5C47;
  opacity: 0;
}
/* 位置 */
.corner-overlay.tl { top: 0; left: 0; }
.corner-overlay.tr { top: 0; right: 0; }
.corner-overlay.bl { bottom: 0; left: 0; }
.corner-overlay.br { bottom: 0; right: 0; }
/* 左上角 SVG mask */
.corner-overlay.tl {
  -webkit-mask-image: url(./corners/tl.svg);
  mask-image: url(./corners/tl.svg);
}
/* 右上角 SVG mask */
.corner-overlay.tr {
  -webkit-mask-image: url(./corners/tr.svg);
  mask-image: url(./corners/tr.svg);
}
/* 左下角 SVG mask */
.corner-overlay.bl {
  -webkit-mask-image: url(./corners/bl.svg);
  mask-image: url(./corners/bl.svg);
}
/* 右下角 SVG mask */
.corner-overlay.br {
  -webkit-mask-image: url(./corners/br.svg);
  mask-image: url(./corners/br.svg);
}


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