.hero-intro-animation-page{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg,#FAFAF7);
}

.hero-intro-animation-page.entry-prep{
  overflow:hidden;
}

.hero-intro-sandbox{
  min-height:100vh;
}

.hero-intro-animation-page #intro{
  min-height:100vh;
  overflow:hidden;
  background:var(--bg,#FAFAF7);
  --entry-glow:rgba(140,120,255,.34);
}

.hero-bg-wash{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 26%, rgba(194,123,78,.09), transparent 30%),
    radial-gradient(circle at 78% 38%, rgba(90,142,124,.12), transparent 34%),
    var(--bg);
  opacity:0;
  will-change:opacity;
}

.hero-intro-animation-page.animation-done #intro{
  background:var(--bg);
}

.hero-intro-animation-page #intro::after{
  transition:opacity .7s ease;
}

.hero-intro-animation-page.entry-prep #intro::after{
  opacity:.12;
}

.hero-intro-animation-page .hero-left,
.hero-intro-animation-page .hero-right{
  opacity:1;
  transform:none;
  animation:none;
  overflow:visible;
}

.hero-intro-animation-page.entry-prep #intro .v7-kicker-row,
.hero-intro-animation-page.entry-prep #intro .v7-title,
.hero-intro-animation-page.entry-prep #intro .v7-subtitle,
.hero-intro-animation-page.entry-prep #intro .v7-actions,
.hero-intro-animation-page.entry-prep #intro .v7-summary,
.hero-intro-animation-page.entry-prep #intro .hero-right,
.hero-intro-animation-page.entry-prep #intro .lanyard-card{
  opacity:0;
}

/* ─── 导航栏在入场动画期间隐藏，由 GSAP 在拖拽结束后滑入 ─── */
.hero-intro-animation-page .nav{
  transition: none;
}
.hero-intro-animation-page.entry-prep .nav{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}

.hero-intro-animation-page .v7-summary{
  transform-origin:center center;
  text-align:left;
}

.hero-intro-animation-page .v7-subtitle{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  letter-spacing:.035em;
  color:rgba(122,59,34,.72);
}

.magnetic-char{
  display:inline-block;
  will-change:transform,opacity;
}

/* ─── 手势容器：外层 wrapper 由 GSAP 定位，内层 svg 由颤动系统控制 ─── */
.drag-gesture-wrapper{
  position:absolute;
  left:0;
  top:38%;
  z-index:20;
  pointer-events:none;
  will-change:transform;
}

.drag-gesture{
  display:block;
  width:180px;
  height:168px;
  pointer-events:none;
  overflow:visible;
  will-change:transform;
  filter:
    drop-shadow(0 2px 8px rgba(29,40,59,.12))
    drop-shadow(0 0 18px rgba(140,120,255,.10));
}

.drag-gesture path{
  stroke:none;
}

/* ─── 抓取接触闪光点（极细强光） ─── */
.drag-contact-flare{
  position:absolute;
  z-index:21;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 0 4px 1px rgba(255,255,255,.9),
    0 0 12px 3px rgba(200,190,255,.7),
    0 0 28px 6px rgba(140,120,255,.35);
  pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:0;
  will-change:opacity,transform;
}

/* ─── 画布前沿辉光条（垂直紫色光柱） ─── */
.canvas-edge-glow{
  position:absolute;
  top:0;
  bottom:0;
  width:48px;
  z-index:18;
  pointer-events:none;
  opacity:0;
  will-change:opacity,left;
  background:linear-gradient(
    90deg,
    rgba(140,120,255,0) 0%,
    rgba(140,120,255,.06) 18%,
    rgba(160,148,255,.18) 40%,
    rgba(180,170,255,.28) 50%,
    rgba(160,148,255,.18) 60%,
    rgba(140,120,255,.06) 82%,
    rgba(140,120,255,0) 100%
  );
  mix-blend-mode:screen;
}

.canvas-edge-glow::before{
  content:'';
  position:absolute;
  top:10%;
  bottom:10%;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(
    180deg,
    rgba(200,190,255,0) 0%,
    rgba(200,190,255,.5) 20%,
    rgba(220,215,255,.7) 50%,
    rgba(200,190,255,.5) 80%,
    rgba(200,190,255,0) 100%
  );
  border-radius:1px;
}

.canvas-edge-glow::after{
  content:'';
  position:absolute;
  top:20%;
  bottom:20%;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.3);
  border-radius:1px;
  filter:blur(0.5px);
}

/* ─── 画布拖入时的页边阴影（模拟抽纸感） ─── */
.canvas-paper-shadow{
  position:absolute;
  top:0;
  bottom:0;
  width:24px;
  z-index:17;
  pointer-events:none;
  opacity:0;
  will-change:opacity,left;
  background:linear-gradient(
    90deg,
    rgba(29,40,59,.12) 0%,
    rgba(29,40,59,.04) 40%,
    rgba(29,40,59,0) 100%
  );
}

.hero-intro-animation-page .lanyard-card{
  transform-origin:top center;
  will-change:transform,opacity;
  animation:none;
}

.hero-intro-animation-page .research-board{
  overflow-x:auto;
  overflow-y:hidden;
}

.hero-intro-animation-page .research-flow-arrows path{
  animation:none;
  opacity:1;
  will-change:stroke-dashoffset,opacity;
}

.hero-intro-animation-page .research-flow-arrows{
  z-index:8;
  pointer-events:none;
}

.hero-intro-animation-page .lanyard-grid{
  z-index:4;
}

.hero-intro-animation-page.entry-prep .research-flow-arrows path{
  opacity:0;
}

@media (prefers-reduced-motion: reduce){
  .hero-intro-animation-page.entry-prep{
    overflow-x:hidden;
    overflow-y:auto;
  }

  .hero-intro-animation-page.entry-prep #intro .v7-kicker-row,
  .hero-intro-animation-page.entry-prep #intro .v7-title,
  .hero-intro-animation-page.entry-prep #intro .v7-subtitle,
  .hero-intro-animation-page.entry-prep #intro .v7-actions,
  .hero-intro-animation-page.entry-prep #intro .v7-summary,
  .hero-intro-animation-page.entry-prep #intro .hero-right,
  .hero-intro-animation-page.entry-prep #intro .lanyard-card{
    opacity:1!important;
    transform:none!important;
  }

  .drag-gesture-wrapper,
  .drag-contact-flare,
  .canvas-edge-glow,
  .canvas-paper-shadow{
    display:none!important;
  }
}