/**
 * AsherLab · Universal Page Transition & Opening Cinematic System
 * 通用转场与主界面跳转动画系统 (V2 - 绝无错位·高帧率丝滑优化版)
 */

/* ==========================================================================
   1. Universal Transition Overlay (通用转场全屏遮罩)
   ========================================================================== */
.universal-transition {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0a1417; /* 纯色深度科技墨黑背景 */
  transform: translateY(0);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s;
  visibility: visible;
  overflow: hidden;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

/* 微妙环境底纹，增强质感同时保持纯色感 */
.universal-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 50% 45%, rgba(29, 107, 105, 0.18), transparent 60%),
    linear-gradient(rgba(216, 244, 92, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 244, 92, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
  opacity: 0.8;
  pointer-events: none;
}

/* 核心内容容器：方框 Logo 与下方 loading 小字 */
.ut-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  perspective: 800px;
  will-change: transform, opacity;
}

/* 方框容器：带极简科技外框与四角定位 */
.ut-box-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 旋转的方框主体：启用 GPU 硬件加速 */
.ut-logo-box {
  width: 66px;
  height: 66px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(216, 244, 92, 0.75);
  background: rgba(29, 107, 105, 0.14);
  box-shadow: 
    0 0 24px rgba(216, 244, 92, 0.18),
    inset 0 0 16px rgba(29, 107, 105, 0.35);
  transform-style: preserve-3d;
  animation: utBoxSpin 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform;
}

/* 四角科技刻度标记 */
.ut-corner {
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: #d8f45c;
  pointer-events: none;
}
.ut-corner.tl { top: -2px; left: -2px; border-top: 2px solid #d8f45c; border-left: 2px solid #d8f45c; }
.ut-corner.tr { top: -2px; right: -2px; border-top: 2px solid #d8f45c; border-right: 2px solid #d8f45c; }
.ut-corner.bl { bottom: -2px; left: -2px; border-bottom: 2px solid #d8f45c; border-left: 2px solid #d8f45c; }
.ut-corner.br { bottom: -2px; right: -2px; border-bottom: 2px solid #d8f45c; border-right: 2px solid #d8f45c; }

/* 方框内的网站 Logo: A/ */
.ut-logo-mark {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #d8f45c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(14px);
  text-shadow: 0 0 14px rgba(216, 244, 92, 0.45);
  animation: utLogoPulse 2.6s ease-in-out infinite alternate;
}

.ut-logo-mark span {
  color: #f27b51;
}

/* 下方一行小字 loading */
.ut-loading-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: lowercase;
  color: #8c9c9b;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.30em;
}

/* 动态跳动的省略号点 */
.ut-dots {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.1em;
}

.ut-dot {
  display: inline-block;
  opacity: 0.2;
  animation: utDotPulse 1.4s infinite;
}

.ut-dot:nth-child(1) { animation-delay: 0s; }
.ut-dot:nth-child(2) { animation-delay: 0.25s; }
.ut-dot:nth-child(3) { animation-delay: 0.5s; }

/* --- 通用转场动画关键帧 --- */
@keyframes utBoxSpin {
  0% {
    transform: rotate(0deg) rotateY(0deg);
  }
  50% {
    transform: rotate(180deg) rotateY(180deg) scale(1.04);
  }
  100% {
    transform: rotate(360deg) rotateY(360deg);
  }
}

@keyframes utLogoPulse {
  0% {
    opacity: 0.85;
    transform: translateZ(14px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateZ(18px) scale(1.04);
  }
}

@keyframes utDotPulse {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    color: #d8f45c;
    transform: translateY(-2px);
  }
}

/* --- 转场退场（加载结束揭开页面）状态 --- */
.universal-transition.ut-out {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}

.universal-transition.ut-out .ut-content {
  opacity: 0;
  transform: scale(0.85) translateY(-24px);
}

/* --- 转场进场（点击链接切换页面）状态 --- */
.universal-transition.ut-in-start {
  transform: translateY(100%);
  visibility: visible;
  transition: none;
}

.universal-transition.ut-in-start .ut-content {
  opacity: 0;
  transform: scale(0.85) translateY(24px);
}

.universal-transition.ut-in-active {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.universal-transition.ut-in-active .ut-content {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.35s ease 0.15s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

/* ==========================================================================
   2. 绝对坐标保全原则 (Preserve Original Absolute Positions)
   注意：.showcase-wordmark 均带有 left: 50%; transform: translateX(-50%)！
   动画过程中必须严格保留 translateX(-50%)，严禁覆盖！
   ========================================================================== */

/* --------------------------------------------------------------------------
   (A) 项目档案 (Projects) - 扑克牌飞牌扫过与弹性归位
   -------------------------------------------------------------------------- */

/* 扑克牌卡片硬件加速与丝滑过渡 */
#poker-stage .poker-card {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 初始准备位：所有卡片整排从屏幕右侧之外候命 (距离适度，避免超长重排) */
body.deck-intro-pending #poker-stage .poker-card {
  transform: translate(120vw, 18%) rotate(22deg) scale(0.92) !important;
  opacity: 0 !important;
}

/* 扫过并就位动画：适当放慢加长时间至 1.4s，展现更从容潇洒的飞牌入场 */
body.deck-intro-active #poker-stage .poker-card {
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.2s ease, opacity 0.9s ease !important;
}

body.deck-intro-active #poker-stage .poker-card[data-poker-index="0"] { transition-delay: 0.04s !important; }
body.deck-intro-active #poker-stage .poker-card[data-poker-index="1"] { transition-delay: 0.14s !important; }
body.deck-intro-active #poker-stage .poker-card[data-poker-index="2"] { transition-delay: 0.24s !important; }
body.deck-intro-active #poker-stage .poker-card[data-poker-index="3"] { transition-delay: 0.34s !important; }
body.deck-intro-active #poker-stage .poker-card[data-poker-index="4"] { transition-delay: 0.44s !important; }

/* 右侧下一张辅助指示牌协同出场 */
body.deck-intro-pending .poker-next-card {
  opacity: 0;
  transform: rotate(10deg) translate(160%, -28%) scale(0.85);
}
body.deck-intro-active .poker-next-card {
  opacity: 1;
  transform: rotate(10deg) translate(160%, -28%) scale(1);
  transition: opacity 1.2s ease 0.45s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

/* PROJECTS 背景艺术字：严格保留 translateX(-50%) 居中定位！ */
body.deck-intro-pending .showcase-wordmark {
  opacity: 0;
  transform: translateX(-50%) translateY(22px);
  pointer-events: none;
  will-change: transform, opacity;
}

body.deck-intro-active .showcase-wordmark {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

/* 顶部导航与底部操作栏 */
body.deck-intro-pending .subpage-top-bar,
body.deck-intro-pending .poker-bottom-bar,
body.deck-intro-pending .site-footer {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

body.deck-intro-active .subpage-top-bar,
body.deck-intro-active .poker-bottom-bar,
body.deck-intro-active .site-footer {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
body.deck-intro-active .subpage-top-bar { transition-delay: 0.6s; }
body.deck-intro-active .poker-bottom-bar { transition-delay: 0.75s; }
body.deck-intro-active .site-footer { transition-delay: 0.85s; }

/* --------------------------------------------------------------------------
   (B) 技术教程 (Tutorials) - 指南针中心弹出、指针寻北、辐射归位
   -------------------------------------------------------------------------- */

/* 1. 中心指南针设备：严格保留其 translate(-50%, -50%) 居中定位！ */
body.compass-intro-pending .compass-device-wrap {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35) rotate(-25deg);
  will-change: transform, opacity;
}

body.compass-intro-device .compass-device-wrap {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition: transform 1.1s cubic-bezier(0.34, 1.35, 0.64, 1), opacity 0.8s ease;
  will-change: transform, opacity;
}

/* 2. 四张教程卡片：各自包含 translate(-50%, -50%)，动画时严禁覆盖丢失居中！ */
body.compass-intro-pending .compass-card {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
  pointer-events: none;
  will-change: transform, opacity;
}

body.compass-intro-cards .compass-card {
  opacity: 0.78;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.95s ease;
  will-change: transform, opacity;
}

/* 激活的卡片维持其 scale(1.10) 悬浮姿态 */
body.compass-intro-cards .compass-card.is-active {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.10) translateY(-6px) !important;
}

body.compass-intro-cards #compass-card-north { transition-delay: 0.05s; }
body.compass-intro-cards #compass-card-east  { transition-delay: 0.16s; }
body.compass-intro-cards #compass-card-south { transition-delay: 0.27s; }
body.compass-intro-cards #compass-card-west  { transition-delay: 0.38s; }

/* TUTORIALS 艺术字：严格保留 translateX(-50%)！ */
body.compass-intro-pending .showcase-wordmark.tutorial-wordmark {
  opacity: 0;
  transform: translateX(-50%) translateY(22px);
  pointer-events: none;
  will-change: transform, opacity;
}

body.compass-intro-cards .showcase-wordmark.tutorial-wordmark {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* 顶部导航与其它组件 */
body.compass-intro-pending .subpage-top-bar,
body.compass-intro-pending .compass-controls-bar,
body.compass-intro-pending .tutorials-editorial-wrap,
body.compass-intro-pending .site-footer {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

body.compass-intro-cards .subpage-top-bar,
body.compass-intro-cards .compass-controls-bar,
body.compass-intro-cards .tutorials-editorial-wrap,
body.compass-intro-cards .site-footer {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
body.compass-intro-cards .subpage-top-bar { transition-delay: 0.45s; }
body.compass-intro-cards .compass-controls-bar { transition-delay: 0.55s; }
body.compass-intro-cards .tutorials-editorial-wrap { transition-delay: 0.65s; }
body.compass-intro-cards .site-footer { transition-delay: 0.75s; }

/* --------------------------------------------------------------------------
   (C) 技术笔记 (Notes) - 书本体态充实、一本书移过来并翻开
   -------------------------------------------------------------------------- */

/* 补充书本体态：精致布面硬壳飘口、弧形书脊压痕、侧边千层纸张立体切面 */
.nb-book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 2400px;
}

/* 精装书飘口与外凸立体硬壳 */
.nb-cloth-cover {
  position: absolute;
  inset: -10px -14px -18px;
  border-radius: 12px 16px 16px 12px;
  background: linear-gradient(135deg, #1d6b69 0%, #154e4c 100%);
  border: 1px solid rgba(10, 20, 23, 0.35);
  box-shadow: 
    0 24px 46px rgba(10, 20, 23, 0.22),
    0 8px 16px rgba(10, 20, 23, 0.12),
    inset 0 0 0 2px rgba(250, 246, 238, 0.16);
  transform: translateZ(-16px);
}

/* 书脊立体感：中央装订脊柱微隆起与压痕槽 */
.nb-cloth-cover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 15px);
  width: 30px;
  background: linear-gradient(90deg, 
    rgba(10, 20, 23, 0.32) 0%, 
    rgba(255, 255, 255, 0.12) 48%, 
    rgba(10, 20, 23, 0.38) 100%);
  border-radius: 4px;
  pointer-events: none;
}

/* 充实书本侧边纸张厚度切面（Fore-edge & Tail-edge） */
.nb-page-stack {
  position: absolute;
  top: 6px;
  bottom: -10px;
  width: calc(50% - 2px);
  background: repeating-linear-gradient(
    to bottom,
    #cfc4b0 0px,
    #cfc4b0 1px,
    #faf5ec 1px,
    #faf5ec 3.5px
  );
  border: 1px solid rgba(10, 20, 23, 0.14);
  box-shadow: 
    0 6px 14px rgba(10, 20, 23, 0.12),
    inset -2px 0 6px rgba(10, 20, 23, 0.08);
  transform: translateZ(-7px);
}

.nb-stack-left {
  left: -4px;
  border-radius: 8px 1px 1px 11px;
}

.nb-stack-right {
  right: -5px;
  border-radius: 1px 8px 11px 1px;
}

/* 书本滑移与翻开动画流程：整本书从右侧平滑移入书桌中央 */
body.book-intro-pending .nb-book-scene {
  transform: translate3d(40vw, 15px, 60px) rotateY(-22deg) scale(0.9);
  opacity: 0;
  will-change: transform, opacity;
}

body.book-intro-moving .nb-book-scene {
  transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  opacity: 1;
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
  will-change: transform, opacity;
}

/* 打开阶段：左页内文与书签舒展开，平铺两页完全就绪，绝不扰乱内部叶片数据 */
body.book-intro-pending .nb-left-page,
body.book-intro-pending .nb-stack-left,
body.book-intro-pending .nb-ribbon {
  opacity: 0;
  transform: rotateY(35deg);
  transform-origin: right center;
}

body.book-intro-opening .nb-left-page,
body.book-intro-opening .nb-stack-left,
body.book-intro-opening .nb-ribbon {
  opacity: 1;
  transform: rotateY(0deg);
  transition: opacity 0.85s ease 0.15s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

/* NOTES 背景艺术字：严格保留 translateX(-50%)！ */
body.book-intro-pending .showcase-wordmark {
  opacity: 0;
  transform: translateX(-50%) translateY(22px);
  pointer-events: none;
  will-change: transform, opacity;
}

body.book-intro-done .showcase-wordmark {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

/* 顶部导航与翻页控制栏 */
body.book-intro-pending .subpage-top-bar,
body.book-intro-pending .nb-book-controls,
body.book-intro-pending .nb-view-all,
body.book-intro-pending .site-footer {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

body.book-intro-done .subpage-top-bar,
body.book-intro-done .nb-book-controls,
body.book-intro-done .nb-view-all,
body.book-intro-done .site-footer {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
body.book-intro-done .subpage-top-bar { transition-delay: 0.2s; }
body.book-intro-done .nb-book-controls { transition-delay: 0.35s; }
body.book-intro-done .nb-view-all { transition-delay: 0.45s; }
body.book-intro-done .site-footer { transition-delay: 0.55s; }

/* --------------------------------------------------------------------------
   (D) ME&LIFE - 旋转照片先出现，之后 Asher 和 helloworld 出现，其他组件归位
   -------------------------------------------------------------------------- */

/* 1. 画布旋转照片群 */
body.life-intro-pending #cylinder-canvas {
  opacity: 0;
  transform: scale(0.72) rotate(-10deg);
  will-change: transform, opacity;
}

body.life-intro-photos #cylinder-canvas {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

/* 2. 居中签名 Asher & Hello world：严格保留 translate(-50%, -50%)！ */
body.life-intro-pending .life-signature {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) translateY(24px);
  will-change: transform, opacity;
}

body.life-intro-pending .life-signature span,
body.life-intro-pending .life-signature small {
  opacity: 0;
  transform: translateY(12px);
}

body.life-intro-signature .life-signature {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

body.life-intro-signature .life-signature span {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s ease 0.15s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

body.life-intro-signature .life-signature small {
  opacity: 0.85;
  transform: translateY(0);
  letter-spacing: 0.22em;
  transition: opacity 0.75s ease 0.35s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, letter-spacing 0.9s ease;
}

/* 3. ME&LIFE 背景艺术字：严格保留 translateX(-50%)！ */
body.life-intro-pending .showcase-wordmark.life-wordmark {
  opacity: 0;
  transform: translateX(-50%) translateY(22px);
  pointer-events: none;
  will-change: transform, opacity;
}

body.life-intro-done .showcase-wordmark.life-wordmark {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

/* 顶部筛选标签、搜索框、碎碎念杂志 */
body.life-intro-pending .subpage-top-bar,
body.life-intro-pending .cylinder-top-actions,
body.life-intro-pending .cylinder-subtle-hint,
body.life-intro-pending .musings-section,
body.life-intro-pending .site-footer {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

body.life-intro-done .subpage-top-bar,
body.life-intro-done .cylinder-top-actions,
body.life-intro-done .cylinder-subtle-hint,
body.life-intro-done .musings-section,
body.life-intro-done .site-footer {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
body.life-intro-done .subpage-top-bar { transition-delay: 0.3s; }
body.life-intro-done .cylinder-top-actions { transition-delay: 0.45s; }
body.life-intro-done .cylinder-subtle-hint { transition-delay: 0.55s; }
body.life-intro-done .musings-section { transition-delay: 0.65s; }
body.life-intro-done .site-footer { transition-delay: 0.75s; }

/* ==========================================================================
   3. Reduced Motion 兼容处理 (Accessibility)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .universal-transition,
  .door-curtain-solid,
  .door-strip-panel {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .universal-transition.ut-out,
  .door-transition.door-strips-opening {
    opacity: 0 !important;
    transform: none !important;
  }
  .ut-logo-box,
  .ut-logo-mark,
  .ut-dot {
    animation: none !important;
  }
  body.deck-intro-pending #poker-stage .poker-card,
  body.compass-intro-pending .compass-device-wrap,
  body.book-intro-pending .nb-book-scene,
  body.life-intro-pending #cylinder-canvas,
  body.life-intro-pending .life-signature {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   4. Ordinary Door Transition (普通转场：门向左关上，4个横向长条依次向右打开)
   ========================================================================== */
/* 非 5 大主界面默认不展示通用转场遮罩（防止直接访问非主界面时闪现通用遮罩） */
body:not(.home-page):not(.home-showcase):not(.ce-projects):not(.ce-tutorials):not(.ce-notes):not(.ce-life) #universal-transition {
  display: none !important;
}

.door-transition {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999998;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.door-transition.is-active {
  visibility: visible;
  pointer-events: auto;
}

/* 关门阶段：浅色纯色背景像单扇平移门一样向左关上 */
.door-curtain-solid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #ede5d6; /* 浅色温润暖沙纸质纯色背景 */
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  z-index: 2;
}

.door-curtain-edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1d6b69; /* AsherLab 标识冷杉青描边 */
  box-shadow: -6px 0 22px rgba(10, 20, 23, 0.22);
}

.door-transition.door-closing .door-curtain-solid {
  transform: translateX(0);
}

/* 开门阶段：浅色背景分成 4 个横向长条，依次向右打开 */
.door-strips-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.door-strip-item {
  position: absolute;
  left: 0;
  right: 0;
  width: 100vw;
  height: calc(100vh / 4 + 1.5px);
  top: calc(var(--strip-idx) * (100vh / 4));
  overflow: hidden;
  pointer-events: none;
}

.door-strip-panel {
  width: 100%;
  height: 100%;
  background-color: #ede5d6; /* 浅色温润暖沙纸质纯色背景 */
  border-bottom: 1px solid rgba(10, 20, 23, 0.12);
  box-shadow: 0 4px 14px rgba(10, 20, 23, 0.08);
  transform: translateX(0);
  will-change: transform;
}

/* 最上面先向右打开，过0.1s第二个条再向右打开，以此类推 */
.door-transition.door-strips-opening .door-strip-panel {
  transform: translateX(101%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--strip-idx) * 0.1s);
}

@media (prefers-reduced-motion: reduce) {
  .universal-transition,
  .universal-transition *,
  .door-transition,
  .door-transition * {
    animation: none !important;
    transition: none !important;
  }
}