/* ==========================================================================
   围巾 · 开场（2D 与 3D 版共用）
   取自实拍围巾：马海毛斜向色带 —— 暖白 / 浅灰 / 天蓝 / 中蓝 / 灰蓝 / 炭灰
   两翼共用同一张视口尺寸贴图并做坐标对齐，中缝处像素连续，
   看上去是「一条围巾，中间一道折痕」而不是两片拼起来。
   ========================================================================== */

.veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #dfe6ea;
  transition: opacity 0.9s ease 0.35s;
}

.veil__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 62% at 50% 46%, #eef3f5 0%, #cbd6dc 74%);
}

.veil__wing {
  position: absolute;
  top: -8%;
  width: 57%;
  height: 116%;
  transition: transform 1.35s cubic-bezier(0.76, 0, 0.24, 1);
  backface-visibility: hidden;
}

.veil__wing--l {
  left: -3%;
  transform-origin: left center;
}

.veil__wing--r {
  right: -3%;
  transform-origin: right center;
}

/* ---------- 织物 ---------- */
/* 贴图按 100vw × 100vh 铺满视口，两翼各自偏移到自己的视口位置：
   左翼起点 -3vw → 偏移 +3vw；右翼起点 46vw → 偏移 -46vw。
   于是 46vw–54vw 的重叠区两片内容完全一致，接缝不可见。 */
.scarf {
  --px: 0vw;
  position: absolute;
  inset: 0;
  background-color: #8fb3c9;
  background-image:
    /* 顺着色带的针织棱线 */
    repeating-linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      rgba(12, 26, 38, 0.11) 1px 2px,
      rgba(255, 255, 255, 0.02) 2px 5px,
      rgba(255, 255, 255, 0) 5px 9px
    ),
    /* 竖向绒毛 */
    repeating-linear-gradient(
      92deg,
      rgba(255, 255, 255, 0.07) 0 1px,
      rgba(255, 255, 255, 0) 1px 3px,
      rgba(12, 26, 38, 0.05) 3px 4px,
      rgba(255, 255, 255, 0) 4px 7px
    ),
    url("../img/scarf.svg");
  background-size: auto, auto, 100vw 100vh;
  background-position: 0 0, 0 0, var(--px) 8vh;
  background-repeat: repeat, repeat, no-repeat;
  background-blend-mode: soft-light, soft-light, normal;
}

.scarf--l {
  --px: 3vw;
}

.scarf--r {
  --px: -46vw;
}

/* 清掉 paper.css 里旧的米色内阴影与中缝毛边（会在接缝处露出暖色） */
.scarf {
  box-shadow: none;
}

.veil__wing::after {
  content: none;
}

/* base.css 里遗留的流苏（会落在中缝上像拉链），一并去掉 */
.scarf--l::after,
.scarf--r::after {
  content: none;
}

/* 整体受光：顶部亮、底部压暗，两翼同一条竖直渐变，接缝处不断 */
.scarf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 26%,
    rgba(10, 24, 36, 0) 52%,
    rgba(10, 24, 36, 0.18) 84%,
    rgba(10, 24, 36, 0.3) 100%
  );
}

/* 中缝折痕 + 四周暗角（整屏一层，避免两翼各画一圈造成接缝） */
.veil::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      rgba(16, 30, 42, 0) calc(50% - 150px),
      rgba(16, 30, 42, 0.14) calc(50% - 64px),
      rgba(16, 30, 42, 0.26) calc(50% - 14px),
      rgba(16, 30, 42, 0.32) 50%,
      rgba(16, 30, 42, 0.26) calc(50% + 14px),
      rgba(16, 30, 42, 0.14) calc(50% + 64px),
      rgba(16, 30, 42, 0) calc(50% + 150px)
    ),
    radial-gradient(
      118% 96% at 50% 48%,
      rgba(12, 26, 38, 0) 44%,
      rgba(12, 26, 38, 0.26) 100%
    );
}

/* ---------- 中间的结 ---------- */
.veil__knot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 34px 46px;
  color: #1e2c36;
  text-align: center;
  background: radial-gradient(
    66% 58% at 50% 50%,
    rgba(242, 248, 250, 0.66) 0%,
    rgba(242, 248, 250, 0.34) 46%,
    rgba(242, 248, 250, 0) 78%
  );
  border: 0;
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.veil__knot::before,
.veil__knot::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 26, 34, 0.5));
}

.veil__knot::before {
  right: 100%;
}

.veil__knot::after {
  left: 100%;
  transform: scaleX(-1);
}

.veil__tag {
  font-family: var(--serif, "Songti SC", "Noto Serif SC", serif);
  font-size: clamp(30px, 4.4vw, 46px);
  letter-spacing: 0.26em;
  color: #0f1a22;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.5);
}

.veil__hint {
  font-size: 11px;
  letter-spacing: 0.34em;
  color: rgba(12, 22, 30, 0.74);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
  animation: hintPulse 2.6s ease-in-out infinite;
}

@keyframes hintPulse {
  0%,
  100% {
    opacity: 0.42;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- 解开 ---------- */
.veil.is-open .veil__wing--l {
  transform: translateX(-108%) rotate(-3.5deg);
}

.veil.is-open .veil__wing--r {
  transform: translateX(108%) rotate(3.5deg);
}

.veil.is-open .veil__knot {
  opacity: 0;
  transform: scale(0.9);
}

/* 两翼滑走后不能再留一张苍白空页：底色、中缝阴影一起撤掉，直接透出下面的桌子 */
.veil.is-open {
  background: transparent;
}

.veil.is-open .veil__shade {
  opacity: 0;
  transition: opacity 0.55s ease 0.05s;
}

.veil.is-open::after {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.veil.is-gone {
  display: none;
}


/* ---------- 揭开之后：下面的世界从雾里浮出来 ---------- */
body.is-unveiled #main,
body.is-unveiled #stage {
  animation: unveil-rise 1.45s cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

@keyframes unveil-rise {
  0% {
    opacity: 0.12;
    filter: blur(11px) saturate(0.72) brightness(1.07);
  }
  55% {
    opacity: 0.86;
    filter: blur(3px) saturate(0.94) brightness(1.02);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

/* 一道暖光从缝里掠过 */
.veil::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    54% 44% at 50% 47%,
    rgba(255, 226, 190, 0.42),
    rgba(255, 208, 160, 0) 74%
  );
}

.veil.is-open::before {
  animation: veil-flash 1.7s cubic-bezier(0.3, 0.8, 0.3, 1) 0.15s both;
}

@keyframes veil-flash {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  38% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: scale(1.26);
  }
}

@media (max-width: 720px) {
  /* 窄屏：贴图加宽、中心对齐，避免色带被压成竖条 */
  .scarf {
    background-size: auto, auto, 190vw 110vh;
    background-position: 0 0, 0 0, calc(var(--px) - 45vw) -5vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .veil__wing,
  .veil__shade {
    transition-duration: 0.3s;
  }
  .veil__hint {
    animation: none;
    opacity: 0.8;
  }
}