/* XIAOXUE — WebGL 炫酷图片切换特效 v3 */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Noto Serif SC','STSong','Songti SC',serif;
  color:#F0EBE3;
  background:#0A0A0E;
  overflow-x:hidden;
  line-height:1.8;
}

#js-status{position:fixed;top:0;left:0;width:100%;height:2px;background:#e74c3c;z-index:9999;transition:background .3s}

/* 背景层 */
.bg-gradient{
  position:fixed;inset:0;z-index:-3;
  background:radial-gradient(ellipse at 50% 30%,#12121a 0%,#0A0A0E 60%,#060608 100%);
}
.bg-grain{
  position:fixed;inset:0;z-index:-2;opacity:.03;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.bg-vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.4) 100%);
}

/* ==========================================
   Hero — 全屏液态变形轮播
   ========================================== */
.hero{position:relative;height:100vh;overflow:hidden;background:#0A0A0E}
.hero-carousel{position:absolute;inset:0;z-index:1}
.hero-liquid-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* 光扫过层 */
.hero-light-sweep{
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  z-index:4;pointer-events:none;
  background:linear-gradient(
    135deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.12) 48%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.12) 52%,
    transparent 58%,
    transparent 100%
  );
  opacity:0;
  mix-blend-mode:screen;
}

/* 图片上的柔光叠加 */
.hero-carousel::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,10,14,.35) 0%,rgba(10,10,14,.1) 40%,rgba(10,10,14,.15) 70%,rgba(10,10,14,.6) 100%);
}

/* Hero 左右切换按钮 */
.hero-nav{
  position:absolute;
  top:50%;
  z-index:10;
  transform:translateY(-50%);
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:200;
  color:rgba(240,235,227,.75);
  background:rgba(10,10,14,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(240,235,227,.18);
  border-radius:50%;
  cursor:pointer;
  transition:all .5s cubic-bezier(0.22,1,0.36,1);
  user-select:none;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.hero-nav:hover{
  color:rgba(212,185,140,1);
  background:rgba(10,10,14,.6);
  border-color:rgba(212,185,140,.4);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 0 30px rgba(212,185,140,.2),0 4px 20px rgba(0,0,0,.3);
}
.hero-nav-prev{left:clamp(16px,3vw,40px)}
.hero-nav-next{right:clamp(16px,3vw,40px)}

.hero-content{
  position:relative;z-index:5;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;
}

.hero-title{
  font-family:'Playfair Display','Noto Serif SC',serif;
  font-size:clamp(3rem,10vw,7rem);
  font-weight:200;letter-spacing:.2em;
  color:#F0EBE3;
  text-shadow:0 0 80px rgba(212,185,140,.15);
  margin-bottom:1.2rem;
}
.hero-sub{
  font-size:clamp(.85rem,1.4vw,1.1rem);
  color:rgba(240,235,227,.55);letter-spacing:.6em;
  margin-bottom:2.5rem;font-weight:300;
}
.hero-typing{
  font-size:clamp(.95rem,1.8vw,1.2rem);
  color:rgba(240,235,227,.85);min-height:1.8em;
  letter-spacing:.15em;font-weight:300;
}
.hero-start{
  margin-top:3.5rem;padding:1rem 4rem;
  font-family:'Noto Serif SC',serif;font-size:.85rem;font-weight:300;
  color:#F0EBE3;background:transparent;
  border:1px solid rgba(212,185,140,.4);cursor:pointer;
  letter-spacing:.6em;transition:all .8s cubic-bezier(0.22,1,0.36,1);
}
.hero-start:hover{
  border-color:rgba(212,185,140,.9);color:#D4B98C;
  letter-spacing:.7em;box-shadow:0 0 50px rgba(212,185,140,.12);
}

.hero-thumbs{
  position:absolute;bottom:7rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.6rem;z-index:5;
}
.hero-thumb{
  width:44px;height:44px;background-size:cover;background-position:center;
  cursor:pointer;transition:all .8s cubic-bezier(0.22,1,0.36,1);
  opacity:.35;border:1px solid rgba(240,235,227,.08);filter:grayscale(.3);
}
.hero-thumb.active{
  opacity:1;transform:scale(1.12);
  border-color:rgba(212,185,140,.5);
  box-shadow:0 0 16px rgba(212,185,140,.2);filter:grayscale(0);
}
.hero-thumb:hover{opacity:.7}

.hero-hint{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  color:rgba(240,235,227,.35);font-size:.65rem;letter-spacing:.5em;z-index:5;
  animation:hintPulse 4s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.25}50%{opacity:.55}}

/* ==========================================
   场景通用
   ========================================== */
.scene{
  position:relative;width:100vw;height:100vh;overflow:hidden;
  background:#0A0A0E;display:flex;align-items:center;justify-content:center;
}
.scene-header{position:absolute;top:3.5rem;left:3.5rem;z-index:20;pointer-events:none}
.scene-num{
  font-family:'Playfair Display',serif;font-size:.75rem;font-weight:300;
  color:rgba(212,185,140,.55);letter-spacing:.5em;margin-bottom:.6rem;
}
.scene-name{font-size:clamp(.65rem,.9vw,.8rem);color:rgba(240,235,227,.4);letter-spacing:.6em;font-weight:300}
.scene-caption{
  position:absolute;bottom:3.5rem;left:50%;transform:translateX(-50%);
  z-index:20;text-align:center;
  font-size:clamp(.95rem,1.8vw,1.3rem);color:rgba(240,235,227,.9);
  letter-spacing:.15em;font-weight:300;max-width:75vw;
  text-shadow:0 2px 40px rgba(0,0,0,.9);pointer-events:none;line-height:1.8;
}

/* ==========================================
   舞台通用
   ========================================== */
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.curtain-stage,.perspective-stage,.luminance-stage,
.pixel-stage,.liquid-stage,.glitch-stage,.bloom-stage,
.scene-stage{
  position:relative;width:min(88vw,1100px);height:min(72vh,750px);
  overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6);
  background:#0A0A0E;margin:auto;
}

/* 全屏场景 */
.scene-stage-full{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  box-shadow:none!important;
}

/* 画廊式相框 — 竖图专属 */
.gallery-stage{
  position:relative;
  height:min(78vh,760px);
  aspect-ratio:2/3;
  max-width:90vw;
  overflow:hidden;
  background:linear-gradient(145deg,#0D0D14 0%,#0A0A0E 50%,#07070A 100%);
  margin:auto;
  border:1px solid rgba(212,185,140,.4);
  border-radius:2px;
  box-shadow:
    0 0 0 10px #0A0A0E,
    0 0 0 11px rgba(212,185,140,.18),
    0 0 60px rgba(212,185,140,.08),
    0 60px 140px rgba(0,0,0,.85),
    inset 0 0 80px rgba(0,0,0,.4);
}

/* 画廊四角 L 形装饰 */
.gallery-stage::before{
  content:'';
  position:absolute;
  inset:14px;
  pointer-events:none;
  z-index:20;
  background:
    linear-gradient(to right,rgba(212,185,140,.6) 24px,transparent 24px) top left/100% 1px no-repeat,
    linear-gradient(to bottom,rgba(212,185,140,.6) 24px,transparent 24px) top left/1px 100% no-repeat,
    linear-gradient(to left,rgba(212,185,140,.6) 24px,transparent 24px) top right/100% 1px no-repeat,
    linear-gradient(to bottom,rgba(212,185,140,.6) 24px,transparent 24px) top right/1px 100% no-repeat,
    linear-gradient(to right,rgba(212,185,140,.6) 24px,transparent 24px) bottom left/100% 1px no-repeat,
    linear-gradient(to top,rgba(212,185,140,.6) 24px,transparent 24px) bottom left/1px 100% no-repeat,
    linear-gradient(to left,rgba(212,185,140,.6) 24px,transparent 24px) bottom right/100% 1px no-repeat,
    linear-gradient(to top,rgba(212,185,140,.6) 24px,transparent 24px) bottom right/1px 100% no-repeat;
}

/* 画廊图说 */
.gallery-stage .scene-caption,
.scene .scene-caption{
  position:absolute;
  bottom:-3.5rem;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  text-align:center;
  font-size:.85rem;
  letter-spacing:.15em;
  color:rgba(212,185,140,.7);
  font-weight:300;
  white-space:nowrap;
}

/* ==========================================
   双图并排画廊（DualGalleryScene）
   ========================================== */
.dual-stage{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 2.5vw, 36px);
  background:#0A0A0E;
}
.dual-half{
  position:relative;
  height:clamp(55vh, 80vh, 800px);
  width:auto;
  aspect-ratio:2/3;
  flex-shrink:1;
  background:linear-gradient(145deg,#0D0D14 0%,#0A0A0E 50%,#07070A 100%);
  border:1px solid rgba(212,185,140,.35);
  border-radius:2px;
  box-shadow:
    0 0 0 4px #0A0A0E,
    0 0 0 5px rgba(212,185,140,.10),
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 60px rgba(0,0,0,.3);
  overflow:hidden;
}
.dual-half canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
/* 双图相框四角金线（继承 gallery-stage 风格） */
.dual-half::before{
  content:'';
  position:absolute;
  inset:10px;
  pointer-events:none;
  z-index:20;
  background:
    linear-gradient(to right,rgba(212,185,140,.55) 20px,transparent 20px) top left/100% 1px no-repeat,
    linear-gradient(to bottom,rgba(212,185,140,.55) 20px,transparent 20px) top left/1px 100% no-repeat,
    linear-gradient(to left,rgba(212,185,140,.55) 20px,transparent 20px) top right/100% 1px no-repeat,
    linear-gradient(to bottom,rgba(212,185,140,.55) 20px,transparent 20px) top right/1px 100% no-repeat,
    linear-gradient(to right,rgba(212,185,140,.55) 20px,transparent 20px) bottom left/100% 1px no-repeat,
    linear-gradient(to top,rgba(212,185,140,.55) 20px,transparent 20px) bottom left/1px 100% no-repeat,
    linear-gradient(to left,rgba(212,185,140,.55) 20px,transparent 20px) bottom right/100% 1px no-repeat,
    linear-gradient(to top,rgba(212,185,140,.55) 20px,transparent 20px) bottom right/1px 100% no-repeat;
}
.dual-half .stage-btn,
.dual-half .stage-dots{display:none}

/* 每半区独立的图片配文 */
.half-caption{
  position:absolute;
  bottom:4.5rem;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  text-align:center;
  font-size:clamp(.72rem,.9vw,.85rem);
  color:rgba(240,235,227,.85);
  letter-spacing:.12em;
  font-weight:300;
  text-shadow:0 2px 16px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.8);
  pointer-events:none;
  line-height:1.6;
  z-index:24;
  font-style:italic;
}

/* 每半区独立的切换控件（左右按钮分开 + 底部圆点） */
.half-controls{
  position:absolute;inset:0;z-index:25;
  pointer-events:none;
}
.half-nav-left,.half-nav-right{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(10,10,14,.4);border:1px solid rgba(240,235,227,.12);
  color:rgba(240,235,227,.55);cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);font-size:1rem;
  transition:all .5s cubic-bezier(0.22,1,0.36,1);
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.half-nav-left{left:clamp(6px,1vw,14px)}
.half-nav-right{right:clamp(6px,1vw,14px)}
.half-nav-left:hover,.half-nav-right:hover{
  color:rgba(212,185,140,.9);
  background:rgba(10,10,14,.55);
  border-color:rgba(212,185,140,.35);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 0 16px rgba(212,185,140,.18);
}
/* 底部圆点 */
.half-dots{
  position:absolute;
  bottom:1rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.35rem;
  pointer-events:auto;
}
.half-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(240,235,227,.3);
  cursor:pointer;
  transition:all .4s ease;
}
.half-dot:hover{background:rgba(240,235,227,.6);}
.half-dot.active{
  background:rgba(212,185,140,.95);
  transform:scale(1.5);
  box-shadow:0 0 6px rgba(212,185,140,.5);
}

.stage-controls{
  position:absolute;inset:0;z-index:25;
  pointer-events:none;
}
/* 全屏场景左右导航按钮 */
.stage-nav-left,.stage-nav-right{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(10,10,14,.4);border:1px solid rgba(240,235,227,.12);
  color:rgba(240,235,227,.65);cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);font-size:1.2rem;
  transition:all .5s cubic-bezier(0.22,1,0.36,1);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.stage-nav-left{left:clamp(12px,2.5vw,32px)}
.stage-nav-right{right:clamp(12px,2.5vw,32px)}
.stage-nav-left:hover,.stage-nav-right:hover{
  color:rgba(212,185,140,.9);
  background:rgba(10,10,14,.55);
  border-color:rgba(212,185,140,.3);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 0 20px rgba(212,185,140,.15);
}
/* 全屏场景底部圆点 */
.stage-dots{
  position:absolute;
  bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.6rem;
  pointer-events:auto;
}
.stage-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(240,235,227,.2);cursor:pointer;
  transition:all .5s cubic-bezier(0.22,1,0.36,1);
}
.stage-dot.active{background:#D4B98C;transform:scale(1.6);box-shadow:0 0 8px rgba(212,185,140,.4)}

/* ==========================================
   3D 透视旋转
   ========================================== */
.perspective-container{
  position:absolute;inset:0;perspective:1200px;overflow:hidden;
}
.perspective-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
}
.perspective-old{z-index:1}
.perspective-new{z-index:2}
.perspective-glow{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  width:60%;left:20%;opacity:0;
  transform:translateX(-100%);
}

/* ==========================================
   终局
   ========================================== */
.finale{
  height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 2rem;position:relative;
  background:radial-gradient(ellipse at center,#141420 0%,#0A0A0E 70%);
}
.finale-text{
  font-size:clamp(1.4rem,4.5vw,3rem);font-weight:200;letter-spacing:.15em;
  color:#F0EBE3;text-shadow:0 0 60px rgba(212,185,140,.2);
}
.finale-sub{
  margin-top:2.5rem;font-size:clamp(.75rem,1.2vw,1rem);
  color:rgba(240,235,227,.4);letter-spacing:.6em;font-weight:300;
}

.scroll-progress{
  position:fixed;top:0;left:0;height:1px;
  background:linear-gradient(90deg,#D4B98C,rgba(212,185,140,.3));
  z-index:1000;transform-origin:0 0;transform:scaleX(0);
}

@media(max-width:768px){
  .hero-thumbs{bottom:8rem}
  .hero-thumb{width:34px;height:34px}
  .curtain-stage,.perspective-stage,.luminance-stage,
  .pixel-stage,.liquid-stage,.glitch-stage,.bloom-stage,
  .scene-stage{width:94vw;height:58vh}
  .stage-controls{bottom:1.5rem;right:1.5rem}
  .scene-header{top:2rem;left:2rem}
  .scene-caption{bottom:2rem;font-size:clamp(.85rem,1.5vw,1.1rem)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}