:root{
  --bg-1:#03030a; --bg-2:#070712; --text:rgba(220,220,235,0.85);
  --overlay-bg:rgba(2,2,6,0.85);
  --clip-width-initial:6px; --clip-width-open:120vw;
  --clip-open-dur:3000ms; --clip-close-dur:1000ms;
}


.reveal-overlay{position:fixed;inset:0;z-index:1200;pointer-events:none;background:transparent;transition:background 1s cubic-bezier(.22,.9,.17,1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.reveal-overlay.active{background:var(--overlay-bg);pointer-events:auto}
.reveal-image-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1210;pointer-events:none}
.reveal-clip{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:92vh;width:var(--clip-width-initial);overflow:hidden;border-radius:6px;will-change:width,transform;mix-blend-mode:normal;transition:width var(--clip-open-dur) cubic-bezier(.19,.98,.02,.99);
  box-shadow:0 0 40px rgba(255,170,80,0.45), 0 0 220px rgba(255,110,60,0.12) inset;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(0.6px)
}
.reveal-overlay.active .reveal-clip{width:var(--clip-width-open)}
.reveal-overlay.closing .reveal-clip{transition-duration:var(--clip-close-dur)}
.img-layer{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;display:block;transform-origin:center center;opacity:0;transition:opacity 3800ms cubic-bezier(.22,.86,.2,1), transform 3000ms ease}
.img-core{filter:contrast(1.05) saturate(1.15) brightness(1.02) blur(0.3px);transform:scale(0.98)}
.img-r{mix-blend-mode:lighten;opacity:0.9;transform:translateX(-6px) scale(0.98);filter:blur(1px) hue-rotate(-8deg) saturate(1.15)}
.img-b{mix-blend-mode:lighten;opacity:0.85;transform:translateX(6px) scale(0.98);filter:blur(1.4px) hue-rotate(12deg) saturate(1.1)}
.reveal-overlay.active .img-layer{opacity:1;transform:scale(1.06)}
.reveal-clip > .img-layer:nth-child(1){transition-delay:480ms;transform:translateX(6px) scale(1)}
.reveal-clip > .img-layer:nth-child(2){transition-delay:560ms;transform:translateX(0px) scale(1)}
.reveal-clip > .img-layer:nth-child(3){transition-delay:640ms;transform:translateX(-6px) scale(1)}
.reveal-overlay.closing .img-layer{transition:transform 1000ms cubic-bezier(.22,.86,.2,1), opacity 300ms ease;transform:scale(0.92) translateX(0);opacity:0}
.glow-container{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:92vh;width:6px;pointer-events:none;z-index:1220;display:flex;align-items:center;justify-content:center}
.glow-core,.glow-mid,.glow-outer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleX(0.01);height:8px;width:6px;border-radius:999px;mix-blend-mode:screen;will-change:transform}
.glow-core{height:8px;transition:transform 3000ms cubic-bezier(.19,.98,.02,.99)}
.glow-mid{height:48px;transition:transform 4400ms cubic-bezier(.19,.98,.02,.99)}
.glow-outer{height:140vh;transition:transform 5200ms cubic-bezier(.15,.98,.03,.99)}
.reveal-overlay.active .glow-core,.reveal-overlay.active .glow-mid,.reveal-overlay.active .glow-outer{transform:translate(-50%,-50%) scaleX(1)}
.center-flare{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;z-index:1230;pointer-events:none;opacity:0}
.center-flare .core{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,220,140,0.9) 25%, rgba(255,120,40,0.12) 50%, rgba(255,80,0,0) 100%);filter:blur(10px);box-shadow:0 0 80px rgba(255,200,120,0.95),0 0 220px rgba(255,120,40,0.2)}
.reveal-overlay.active .center-flare{animation:centerPulse 3200ms cubic-bezier(.22,.86,.25,1) 650ms both}
@keyframes centerPulse{0%{opacity:0;transform:translate(-50%,-50%) scale(0.35)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.bloom-layer{position:absolute;inset:0;z-index:1205;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1100ms ease}
.reveal-overlay.active .bloom-layer{opacity:1;transition-delay:900ms}
.bloom-layer .blob{position:absolute;border-radius:50%;filter:blur(100px) saturate(1.6);opacity:0.9;animation:blobFloat 9000ms ease-in-out infinite}
.blob.a{width:80vmax;height:80vmax;left:-15%;top:10%;background:linear-gradient(135deg, rgba(255,200,140,0.28), rgba(255,120,220,0.22));animation-delay:0ms}
.blob.b{width:70vmax;height:70vmax;right:-10%;bottom:10%;background:linear-gradient(225deg, rgba(100,220,255,0.18), rgba(180,120,255,0.22));animation-delay:400ms}
.blob.c{width:60vmax;height:60vmax;left:30%;bottom:-20%;background:linear-gradient(45deg, rgba(255,180,120,0.12), rgba(120,255,200,0.12));animation-delay:1200ms}
@keyframes blobFloat{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6%) rotate(6deg)}100%{transform:translateY(0) rotate(0deg)}}
.gloss{position:absolute;inset:0;pointer-events:none;z-index:1240;mix-blend-mode:screen;opacity:0;transition:opacity 700ms}
.reveal-overlay.active .gloss{opacity:1}
.gloss::before{content:"";position:absolute;left:-30%;top:8%;width:36%;height:140%;transform:rotate(-20deg);background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.28), rgba(255,255,255,0.06));filter:blur(40px);animation:glossMove 5200ms linear 900ms both}
@keyframes glossMove{0%{left:-50%}100%{left:120%}}
#fxCanvas{position:absolute;inset:0;z-index:1250;pointer-events:none;mix-blend-mode:screen}
.controls{position:fixed;right:18px;bottom:18px;z-index:1300}
/*.btn{background:linear-gradient(90deg,#ffba76,#ff76c3);border:none;padding:12px 18px;border-radius:12px;color:#111;font-weight:800;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,0.6)}*/
.btn{
  background: linear-gradient(90deg,#ffba76,#ff76c3);
  border: none;
  padding: 12px 18px;
  border-radius: 12px;
  color: #111;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  /*!* 新增：上间距 10px，水平居中 *!*/
  /*display: block;*/
  /*width: fit-content;     !* 让按钮宽度随内容 *!*/
  /*margin: 10px auto 0;    !* 上 10px，左右自动居中，下 0 *!*/
}

@media (max-width:720px){h1{font-size:28px}.glow-outer::before{filter:blur(100px)}.glow-mid::before{filter:blur(24px)}}
@media (prefers-reduced-motion: reduce){
  .reveal-overlay,.reveal-clip,.img-layer,.glow-core,.glow-mid,.glow-outer{transition:none!important;animation:none!important}
}

/* iframe 预览样式（用于在收缩中显示目标页面） */
.reveal-clip iframe.page-preview {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  opacity:0;
  transform:translateZ(0);
  pointer-events:none; /* 不捕获事件，直到真正导航/替换 */
  transition:opacity 220ms ease;
  z-index:20000;
}
/* 当 overlay 进入 closing 状态，iframe 渐显（在收缩过程中显示目标页面） */
.reveal-overlay.closing .reveal-clip iframe.page-preview {
  opacity:1;
}