/* ============================================================
   运营素材 · 作品展示页（纯展示，不做说明）
   深色底 + 每类素材一块全宽展板，点击任意素材放大
   全部作用域在 .materials-case 下
   ============================================================ */

.materials-case {
  --mt-bg: #0e0a1c;
  --mt-fg: #f4f0ff;
  --mt-dim: rgba(244, 240, 255, .55);
  --mt-line: rgba(244, 240, 255, .14);
  --mt-wrap: min(1120px, calc(100% - 48px));
  background: var(--mt-bg);
  color: var(--mt-fg);
  font-family: var(--font-sans);
}
.materials-case ::selection { background: #8f6bf0; color: #fff; }
.materials-case img { display: block; height: auto; }
.materials-case .mt-main { overflow: hidden; }
.materials-case .gnav { background: rgba(255, 255, 255, .9); }

/* 用作展品的按钮：清掉分段控件的默认外观 */
.materials-case .mt-piece {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: zoom-in;
}
.materials-case .mt-piece:hover { color: inherit; }
.materials-case .mt-piece:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 6px; }

/* reveal */
.js .materials-case .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.js .materials-case .reveal.is-in { opacity: 1; transform: none; }

/* ============ 首屏 ============ */
.materials-case .mt-hero {
  position: relative;
  padding: 150px 0 110px;
  background:
    radial-gradient(700px 520px at 78% 40%, rgba(143, 107, 240, .45), rgba(143, 107, 240, 0) 70%),
    radial-gradient(600px 460px at 12% 85%, rgba(232, 92, 150, .28), rgba(232, 92, 150, 0) 70%),
    radial-gradient(500px 380px at 40% 0%, rgba(240, 180, 76, .16), rgba(240, 180, 76, 0) 70%),
    var(--mt-bg);
}
.materials-case .mt-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.4px);
  background-size: 120px 120px;
  opacity: .18;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.materials-case .mt-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; width: var(--mt-wrap); margin: 0 auto; }
.materials-case .mt-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--mt-dim); font-family: var(--jakarta); font-size: var(--fs-small); font-weight: 700; letter-spacing: .16em; }
.materials-case .mt-hero h1 {
  margin: 22px 0 8px;
  background: linear-gradient(100deg, #ffffff 10%, #d9c8ff 50%, #ffc9dc 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.materials-case .mt-hero-en {
  color: transparent;
  font-family: var(--jakarta);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.02em;
  line-height: .95;
  -webkit-text-stroke: 1.5px rgba(244, 240, 255, .5);
}
.materials-case .mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.materials-case .mt-chips a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--mt-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.materials-case .mt-chips a:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.materials-case .mt-chips b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: #24163f; font-family: var(--jakarta); font-size: var(--fs-caption); font-weight: 800; }

/* 首屏叠放的素材：缓慢浮动，悬停散开 */
.materials-case .mt-stack { position: relative; aspect-ratio: 1 / .92; }
.materials-case .mt-stack img { position: absolute; transition: transform .8s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.materials-case .mt-stack-b1 { top: 2%; right: -2%; width: 60%; border-radius: 16px; transform: rotate(7deg); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8); }
.materials-case .mt-stack-b2 { bottom: 2%; left: -4%; width: 58%; border-radius: 16px; transform: rotate(-6deg); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8); }
.materials-case .mt-stack-p1 { top: 12%; left: 6%; width: 33%; transform: rotate(-10deg); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }
.materials-case .mt-stack-p3 { top: 30%; right: 4%; width: 33%; transform: rotate(9deg); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }
.materials-case .mt-stack-p2 { top: 16%; left: 31%; width: 37%; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .55)); animation: mt-float 6s ease-in-out infinite; }
.materials-case .mt-stack:hover .mt-stack-b1 { transform: translate(4%, -6%) rotate(11deg); }
.materials-case .mt-stack:hover .mt-stack-b2 { transform: translate(-4%, 6%) rotate(-10deg); }
.materials-case .mt-stack:hover .mt-stack-p1 { transform: translate(-14%, -2%) rotate(-15deg); }
.materials-case .mt-stack:hover .mt-stack-p3 { transform: translate(14%, 2%) rotate(14deg); }

/* ============ 展板 ============ */
.materials-case .mt-board { position: relative; padding: 120px 0 130px; scroll-margin-top: 40px; }
.materials-case .mt-board-inner { width: var(--mt-wrap); margin: 0 auto; }
.materials-case .mt-board-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 20px; margin-bottom: 64px; padding-bottom: 22px; border-bottom: 1px solid var(--mt-line); }
.materials-case .mt-board-no { color: var(--mt-dim); font-family: var(--jakarta); font-size: var(--fs-small); font-weight: 800; letter-spacing: .14em; }
.materials-case .mt-board-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0; }
.materials-case .mt-en { font-family: var(--jakarta); font-size: clamp(36px, 5.6vw, 72px); font-weight: 800; font-style: italic; letter-spacing: -.03em; line-height: .95; }
.materials-case .mt-cn { color: var(--mt-dim); font-size: var(--fs-lead); font-weight: 600; letter-spacing: .08em; }
.materials-case .mt-board-count { font-family: var(--jakarta); font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; line-height: 1; opacity: .35; }

.materials-case .mt-wall { list-style: none; }
.materials-case .mt-piece img { transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s, filter .5s; }

/* 弹窗：一排五张，错落旋转，悬停摆正抬起 */
.materials-case .mt-wall--pop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; align-items: end; }
.materials-case .mt-wall--pop li:nth-child(odd) { transform: translateY(-26px); }
.materials-case .mt-piece--pop img { width: 100%; filter: drop-shadow(0 34px 34px rgba(90, 30, 40, .28)); }
.materials-case .mt-wall--pop li:nth-child(1) img { transform: rotate(-3deg); }
.materials-case .mt-wall--pop li:nth-child(2) img { transform: rotate(2deg); }
.materials-case .mt-wall--pop li:nth-child(3) img { transform: rotate(-2deg); }
.materials-case .mt-wall--pop li:nth-child(4) img { transform: rotate(3deg); }
.materials-case .mt-wall--pop li:nth-child(5) img { transform: rotate(-2deg); }
.materials-case .mt-wall--pop .mt-piece:hover img { transform: translateY(-12px) scale(1.04) rotate(0); filter: drop-shadow(0 46px 40px rgba(90, 30, 40, .36)); }

/* Banner：两列，右列下沉形成错落 */
.materials-case .mt-wall--banner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; max-width: 1000px; margin: 0 auto; }
.materials-case .mt-wall--stagger li:nth-child(even) { transform: translateY(90px); }
.materials-case .mt-wall--stagger { padding-bottom: 20px; }
.materials-case .mt-piece--banner img { width: 100%; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 70px -36px rgba(0, 0, 0, .85); }
.materials-case .mt-piece--banner:hover img { transform: translateY(-8px) scale(1.02); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 56px 80px -36px rgba(0, 0, 0, .9); }

/* 各展板的底色 */
.materials-case .mt-board--popup {
  color: #2a1220;
  background:
    radial-gradient(800px 500px at 15% 10%, #ffe0cf, rgba(255, 224, 207, 0) 70%),
    radial-gradient(800px 500px at 90% 90%, #ead9ff, rgba(234, 217, 255, 0) 70%),
    #fff4ee;
}
.materials-case .mt-board--popup .mt-board-head { border-color: rgba(42, 18, 32, .12); }
.materials-case .mt-board--popup .mt-board-no,
.materials-case .mt-board--popup .mt-cn { color: rgba(42, 18, 32, .5); }
.materials-case .mt-board--popup .mt-en { background: linear-gradient(90deg, #e2452c, #d9578f 55%, #7a4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; }
.materials-case .mt-board--pick { background: radial-gradient(900px 600px at 80% 0%, #2c3f9a 0%, rgba(44, 63, 154, 0) 70%), radial-gradient(700px 500px at 0% 100%, #3a1c78 0%, rgba(58, 28, 120, 0) 70%), #0b1033; }
.materials-case .mt-board--love { background: radial-gradient(900px 600px at 10% 10%, #6b1424 0%, rgba(107, 20, 36, 0) 70%), radial-gradient(700px 500px at 100% 100%, #4a1f6e 0%, rgba(74, 31, 110, 0) 70%), #1a0710; }
.materials-case .mt-board--draw { background: radial-gradient(900px 600px at 50% 0%, #8a4c9e 0%, rgba(138, 76, 158, 0) 70%), radial-gradient(600px 400px at 50% 100%, rgba(212, 175, 106, .35), rgba(212, 175, 106, 0) 70%), #22102f; }
.materials-case .mt-board--draw .mt-en { background: linear-gradient(90deg, #f7d58b, #fff 60%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; }

/* ============ 底部滚动带 ============ */
.materials-case .mt-marquee { padding: 72px 0; overflow: hidden; background: var(--mt-bg); }
.materials-case .mt-marquee-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: mt-marquee 70s linear infinite; }
.materials-case .mt-marquee:hover .mt-marquee-track { animation-play-state: paused; }
.materials-case .mt-marquee img { flex: 0 0 auto; width: auto; height: 190px; }
.materials-case .mt-marquee img.is-banner { border-radius: 14px; }
.materials-case .mt-marquee img.is-pop { height: 210px; }
.materials-case .mt-end { display: flex; justify-content: flex-end; width: var(--mt-wrap); margin: 0 auto; padding: 8px 0 72px; }
.materials-case .content-footer { border-color: var(--mt-line); color: var(--mt-dim); }

/* ============ 灯箱 ============ */
.mt-lb {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 6, 22, .94);
  color: #fff;
}
.mt-lb::backdrop { background: rgba(10, 6, 22, .7); backdrop-filter: blur(6px); }
.mt-lb[open] { display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; align-items: center; animation: mt-fade .3s ease; }
.mt-lb-stage { display: grid; place-items: center; height: 100dvh; margin: 0; padding: 72px 0; }
.mt-lb-stage img { width: auto; max-width: 100%; max-height: calc(100dvh - 144px); object-fit: contain; }
.mt-lb.is-banner .mt-lb-stage img { width: min(100%, 640px); height: auto; border-radius: 20px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9); }
.mt-lb.is-pop .mt-lb-stage img { height: min(calc(100dvh - 144px), 560px); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)); }
.mt-lb.is-swap .mt-lb-stage img { animation: mt-swap .35s ease; }
.mt-lb .ui-icon-button { width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font-size: 18px; }
.mt-lb .ui-icon-button:hover { background: rgba(255, 255, 255, .18); }
.mt-lb-arrow { justify-self: center; }
.mt-lb-close { position: absolute; top: 20px; right: 20px; z-index: 2; }
.mt-lb-count { position: absolute; bottom: 24px; left: 50%; color: rgba(255, 255, 255, .6); font-family: var(--jakarta); font-size: var(--fs-small); font-weight: 700; letter-spacing: .14em; transform: translateX(-50%); }
html.mt-locked { overflow: hidden; }

@keyframes mt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes mt-marquee { to { transform: translateX(-50%); } }
@keyframes mt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-swap { from { opacity: .2; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ============ 响应式 ============ */
@media (max-width: 1020px) {
  .materials-case .mt-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .materials-case .mt-stack { width: min(100%, 560px); justify-self: center; }
  .materials-case .mt-wall--pop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
  .materials-case .mt-wall--pop li:nth-child(odd) { transform: none; }
}
@media (max-width: 767px) {
  .materials-case { --mt-wrap: calc(100% - 32px); }
  .materials-case .mt-hero { padding: 112px 0 72px; }
  .materials-case .mt-chips { margin-top: 28px; }
  .materials-case .mt-board { padding: 72px 0 80px; }
  .materials-case .mt-board-head { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 36px; }
  .materials-case .mt-board-no { display: none; }
  .materials-case .mt-wall--pop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .materials-case .mt-wall--banner { grid-template-columns: 1fr; gap: 20px; }
  .materials-case .mt-wall--stagger li:nth-child(even) { transform: none; }
  .materials-case .mt-wall--stagger { padding-bottom: 0; }
  .materials-case .mt-piece--banner img { border-radius: 14px; }
  .materials-case .mt-marquee { padding: 48px 0; }
  .materials-case .mt-marquee img { height: 130px; }
  .materials-case .mt-marquee img.is-pop { height: 150px; }
  .mt-lb[open] { grid-template-columns: 1fr; }
  .mt-lb-stage { padding: 72px 16px 96px; }
  .mt-lb-arrow { position: absolute; bottom: 20px; }
  .mt-lb-prev { left: 20px; }
  .mt-lb-next { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .materials-case .mt-stack-p2, .materials-case .mt-marquee-track, .mt-lb[open], .mt-lb.is-swap .mt-lb-stage img { animation: none; }
  .materials-case .mt-stack img, .materials-case .mt-piece img { transition: none; }
}