/* === cover.css · 拆信封动效（信封即入口） === */

/* 局部更平滑的曲线：单段缓动，无 overshoot/弹簧感 */
.envelope {
  --env-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- 高级淡绿信封配色（sage / 茶绿） --- */
  --env-inner: #7C8A6A;      /* 内壁 · 翻盖下方露出 · 深苔绿 */
  --env-flap: #CED8B7;       /* 翻盖正面 · 淡茶绿（最浅，受光面） */
  --env-pocket-side: #BCC9A0;/* 口袋左右三角 · 中绿 */
  --env-pocket-base: #ADBA94;/* 口袋底三角 · 折痕加深 · 鼠尾草 */
  --env-edge-soft: rgba(31, 31, 31, 0.05);
  --env-paper: #FAF6EB;      /* 信纸纸色 · 暖象牙 */
  /* 信封后方背景 · 暖灰，避开绿色调以突出信封 */
  --env-bg: #e7e6e0;

  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--env-bg);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 700ms var(--env-ease),
    visibility 700ms var(--env-ease),
    background-color 1800ms linear 2700ms;
  overflow: hidden;
}

.envelope.is-active {
  opacity: 1;
  visibility: visible;
}

/* 信纸开始全屏时，背景同步过渡到页面色，
   让 slide-up 后露出的背景与落地页无缝衔接 */
.envelope.is-open {
  background-color: var(--bg);
}

/* idle：可点击 + 鼠标悬停放大并加投影（无晃动） */
.envelope.is-idle {
  pointer-events: auto;
}
.envelope.is-idle .envelope__scene {
  cursor: pointer;
  /* 只让 transform 走过渡；filter 直接切换，避免 drop-shadow 在 transition 中
     反复重栅格化导致内部 SVG 看起来比纸张"慢一拍" */
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.envelope.is-idle .envelope__scene:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 14px 28px rgba(31, 31, 31, 0.12))
          drop-shadow(0 3px 8px rgba(31, 31, 31, 0.06));
}
.envelope.is-idle:focus-visible .envelope__scene {
  outline: 2px solid var(--fg);
  outline-offset: 10px;
  border-radius: 8px;
}

/* 信封上方标题 */
.envelope__title {
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  transition: opacity 400ms var(--env-ease);
  pointer-events: none;
}
.envelope:not(.is-idle) .envelope__title {
  opacity: 0;
}

/* 提示文案，位于信封下方 */
.envelope__hint {
  position: absolute;
  bottom: 12vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--fg-2);
  text-align: center;
  white-space: nowrap;
  transition: opacity 400ms var(--env-ease);
  pointer-events: none;
}
.envelope:not(.is-idle) .envelope__hint {
  opacity: 0;
}

/* --- 信封舞台：固定像素尺寸，便于 border 三角形几何 ---
   scene 仅作布局容器；信封背面交给 .envelope__flap--back，与其他几何同步动画 */
.envelope__scene {
  --env-w: 320px;
  --env-h: 200px;
  --env-half-w: 160px;
  --env-flap-h: 108px;     /* flap 三角高 = (env-h/2) + 8 */
  --env-pocket-h: 100px;   /* pocket 半高 */
  position: relative;
  width: var(--env-w);
  height: var(--env-h);
  /* perspective 下放到 scene；不开 preserve-3d 以保留 z-index 排序 */
  perspective: 1400px;
}

@media (max-width: 480px) {
  .envelope__scene {
    --env-w: 260px;
    --env-h: 162px;
    --env-half-w: 130px;
    --env-flap-h: 89px;
    --env-pocket-h: 81px;
  }
}

/* --- 背板：已移除，改由 .envelope__flap--back 代替 --- */

/* --- 翻盖基本几何（border 三角，顶部铰链） ---
   两层共用几何：--back 静态在信纸下方；--front 点击旋转，后随 5 个三角一起下沉 */
.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: var(--env-half-w) solid transparent;
  border-right: var(--env-half-w) solid transparent;
  border-bottom: calc(var(--env-h) / 2 - 8px) solid transparent;
  border-top: var(--env-flap-h) solid var(--env-flap);
  pointer-events: none;
  will-change: transform, opacity;
}

/* 下层翻盖：位于信纸背面。上层旋转走后，它保持“闭合姿态”填补几何，
   随后与其他一起下沉淡出 */
.envelope__flap--back {
  z-index: 1;
  transform: translateY(0);
  transition:
    transform 1500ms var(--env-ease),
    opacity 1350ms var(--env-ease);
}

/* 上层翻盖：位于信纸上方，点击后由 @keyframes 驱动“旋转 → 下沉淡出” */
.envelope__flap--front {
  z-index: 5;
  transform-origin: top center;
  transform: rotateX(0deg) translateY(0);
}

/* --- 口袋：V 形（上半三角透明，下半两侧 + 底部填色） --- */
.envelope__pocket {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: var(--env-half-w) solid var(--env-pocket-side);
  border-right: var(--env-half-w) solid var(--env-pocket-side);
  border-bottom: var(--env-pocket-h) solid var(--env-pocket-base);
  border-top: var(--env-pocket-h) solid transparent;
  z-index: 4;
  pointer-events: none;
  transition:
    transform 900ms var(--env-ease),
    opacity 800ms var(--env-ease);
}

/* --- 信纸 ---
   颜色同页面背景，无边框/阴影 — 信纸全屏后与页面是同一层
   container-type: inline-size，使内文字号随信纸宽度同步缩放 */
.envelope__letter {
  position: absolute;
  left: 6%;
  top: 6%;
  width: 88%;
  height: 88%;
  background: var(--bg);
  /* 保持 z-index 低于 pocket（z:4），让信纸被左/右/底三角遮挡 */
  z-index: 2;
  transform: translateY(0);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
}

/* 信纸上的文字（始终可见，从小信纸到全屏一直存在） */
.envelope__letter-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2cqw, 22px);
  text-align: center;
  padding: 0 6cqw;
  max-width: 100%;
}

.envelope__letter-mark {
  display: block;
  /* 36cqw 与 landing__brand 的 36vw 对齐，让信纸全屏时 SVG 尺寸正好等于落地页 brand 尺寸 */
  width: clamp(120px, 36cqw, 560px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- 状态：is-open（上层翻盖旋转 → 5 个三角同步下沉 + 信纸抽出） ---------- */

/* 上层翻盖的两段动画：
   0–44.4%（1200/2700）：从闭合翻转到点朝上（rotateX -180°）
   44.4–100%（1200–2700ms）：挪到信纸后方 + 下沉 + 淡出
   注意：经 rotateX(-180°) 后局部 Y 轴反向，所以 translateY 取负值才能视觉向下 */
@keyframes envFlapOpen {
  0% {
    transform: rotateX(0deg) translateY(0);
    opacity: 1;
    z-index: 5;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  44.39% {
    transform: rotateX(-180deg) translateY(0);
    opacity: 1;
    z-index: 5;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  44.4% {
    /* 翻转完成的瞬间切到信纸下方（letter z:2，pocket z:4） */
    transform: rotateX(-180deg) translateY(0);
    opacity: 1;
    z-index: 1;
  }
  100% {
    transform: rotateX(-180deg) translateY(-28px);
    opacity: 0;
    z-index: 1;
  }
}

.envelope.is-open .envelope__flap--front {
  animation: envFlapOpen 2700ms forwards;
}

/* 信纸抽出（位移），不改 z-index——
   pocket 的左/右/底三个三角继续遮挡信纸下半 */
.envelope.is-open .envelope__letter {
  transform: translateY(-58%);
  transition: transform 1500ms var(--env-ease) 1200ms;
}

/* 下层翻盖：与口袋同步下沉 + 淡出（等上层旋转完才启动） */
.envelope.is-open .envelope__flap--back {
  transform: translateY(28px);
  opacity: 0;
  transition:
    transform 1500ms var(--env-ease) 1200ms,
    opacity 1350ms var(--env-ease) 1350ms;
}

/* 口袋（含三个三角）：同步下沉 + 淡出 */
.envelope.is-open .envelope__pocket {
  transform: translateY(28px);
  opacity: 0;
  transition:
    transform 1500ms var(--env-ease) 1200ms,
    opacity 1350ms var(--env-ease) 1350ms;
}

/* Reduced motion：跳过整套动效 */
@media (prefers-reduced-motion: reduce) {
  .envelope.is-idle .envelope__scene:hover {
    animation: none;
  }
  .envelope__scene,
  .envelope__flap,
  .envelope__pocket,
  .envelope__letter,
  .envelope__letter-text {
    transition: none !important;
    animation: none !important;
  }
}