/* 开场屏：手账贴纸视觉（牛皮纸底纹 + washi 胶带 + 信封摆动 + 封蜡 bob + 贴纸按钮）
 * 逐行移植 prototype opening-B.html 的 <style>，色值全部经 tokens.css 的 var() 引用。
 * 手账元素（washi 胶带 / 锯齿边 / 红章）只出现在开场 + 片单票根，不扩散到糖果屏。
 */

.screen-opening {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* 牛皮纸横线底纹 */
  background:
    repeating-linear-gradient(
      to bottom,
      var(--cream) 0,
      var(--cream) 30px,
      var(--line) 30px,
      var(--line) 31.5px
    );
}

/* 牛皮纸颗粒 */
.screen-opening::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--grain) 1px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* ---- washi 胶带 ---- */
.tape {
  position: absolute;
  width: 110px;
  height: 32px;
  opacity: .9;
  box-shadow: var(--shadow-tape);
  z-index: 5;
}
.tape::before,
.tape::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background: inherit;
  clip-path: polygon(0 0, 100% 8%, 0 16%, 100% 26%, 0 34%, 100% 44%, 0 52%, 100% 62%, 0 70%, 100% 80%, 0 88%, 100% 96%, 0 100%);
}
.tape::before { left: -3px; transform: scaleX(-1); }
.tape::after  { right: -3px; }

.tape-tl { background: var(--tape-pink);   top: 26px; left: -18px; transform: rotate(-38deg); }
.tape-tr { background: var(--tape-yellow); top: 26px; right: -18px; transform: rotate(38deg); }
.tape-bl { background: var(--tape-blue);   bottom: 30px; left: -20px; transform: rotate(32deg); width: 96px; }
.tape-br { background: var(--tape-pink);   bottom: 30px; right: -20px; transform: rotate(-32deg); width: 96px; }

/* ---- 涂鸦 ---- */
.doodle {
  position: absolute;
  z-index: 2;
  animation: floaty var(--dur-float) var(--ease-inout) infinite;
  pointer-events: none;
}
.d-star  { top: 108px; left: 34px; animation-delay: -1s; }
.d-heart { top: 150px; right: 40px; animation-delay: -2.5s; }
.d-arrow { bottom: 250px; left: 30px; animation-delay: -0.5s; }
.d-squig { bottom: 190px; right: 26px; animation-delay: -3s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-7px) rotate(var(--r, 0deg)); }
}

/* ---- 日期头 ---- */
.page-head {
  margin-top: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.page-head .date-box {
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  padding: 6px 14px;
  font-family: var(--font-candy);
  font-size: 14px;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink-shadow);
  transform: rotate(-2deg);
  letter-spacing: 1px;
}

/* ---- 贴在纸上的信封 ---- */
.env-wrap {
  margin-top: 52px;
  position: relative;
  width: 230px;
  height: 165px;
  transform: rotate(-3deg);
  animation: envSway var(--dur-env) var(--ease-inout) infinite;
  z-index: 3;
}
@keyframes envSway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-6px); }
}

/* 固定信封的胶带 */
.env-tape {
  position: absolute;
  width: 92px;
  height: 28px;
  background: var(--tape-yellow);
  box-shadow: var(--shadow-tape);
  z-index: 6;
}
.env-tape::before,
.env-tape::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: inherit;
  clip-path: polygon(0 0, 100% 12%, 0 24%, 100% 38%, 0 50%, 100% 64%, 0 76%, 100% 90%, 0 100%);
}
.env-tape::before { left: -2px; transform: scaleX(-1); }
.env-tape::after  { right: -2px; }
.env-tape.t1 { top: -10px; left: -16px; transform: rotate(-30deg); background: var(--tape-pink); }
.env-tape.t2 { top: -10px; right: -16px; transform: rotate(30deg); background: var(--tape-blue); }

.env-paper {
  position: absolute;
  inset: 0;
  background: var(--envelope-light);
  border: 3px solid var(--ink);
  border-radius: var(--radius-env);
  box-shadow: 5px 6px 0 var(--ink-shadow);
  overflow: hidden;
}

/* 露出的信纸 */
.env-letter {
  position: absolute;
  left: 20px;
  top: 8px;
  width: 184px;
  height: 100px;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  z-index: 1;
}
.env-letter::before,
.env-letter::after {
  content: '';
  position: absolute;
  left: 18px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.env-letter::before { top: 20px; width: 55%; }
.env-letter::after  { top: 38px; width: 80%; }
.env-letter .mini-heart {
  position: absolute;
  bottom: 14px;
  right: 16px;
  width: 22px;
  height: 22px;
}

/* 信封正面 */
.env-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 122px;
  background: var(--yellow-soft);
  border: 3px solid var(--ink);
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
.env-front::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0 0 10px 10px;
  background:
    linear-gradient(to top right, transparent 49.3%, var(--ink) 49.3%, var(--ink) 50.3%, transparent 50.3%),
    linear-gradient(to top left, transparent 49.3%, var(--ink) 49.3%, var(--ink) 50.3%, transparent 50.3%);
  opacity: .8;
}

/* 封蜡 */
.env-seal {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%) rotate(6deg);
  width: 52px;
  height: 52px;
  z-index: 4;
  filter: drop-shadow(2px 3px 0 var(--ink-shadow));
  animation: sealBob var(--dur-seal) var(--ease-inout) infinite;
}
@keyframes sealBob {
  0%, 100% { transform: translateX(-50%) rotate(6deg) scale(1); }
  50%      { transform: translateX(-50%) rotate(10deg) scale(1.05); }
}

/* ---- 标题 ---- */
.headline {
  margin-top: 46px;
  position: relative;
  font-family: var(--font-candy);
  font-size: 44px;
  color: var(--ink);
  letter-spacing: 3px;
  z-index: 3;
  text-shadow: 2px 2px 0 var(--candy-glow);
  animation: floaty 3.5s var(--ease-inout) infinite;
}
.headline svg.wavy {
  position: absolute;
  left: 4%;
  bottom: -16px;
  width: 92%;
  height: 18px;
  overflow: visible;
}

.note {
  margin-top: 30px;
  font-family: var(--font-candy);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 2.5px solid var(--ink);
  padding: 8px 20px;
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink-shadow);
  transform: rotate(1.5deg);
  z-index: 3;
  letter-spacing: 1px;
}

/* ---- 贴纸按钮 ---- */
.cta {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 40px;
  z-index: 3;
}

.btn {
  border: none;
  background: none;
  font-family: var(--font-candy);
  cursor: pointer;
  position: relative;
  padding: 0;
  min-width: 44px;   /* a11y P7：触控目标 ≥44px */
  min-height: 44px;
  transition: transform .12s var(--ease-bounce);
}
.btn:active { transform: scale(.86) rotate(var(--btn-r, 0deg)) !important; }

.btn-yes {
  transform: rotate(-4deg);
  --btn-r: -4deg;
  animation: stickerBob var(--dur-sticker) var(--ease-inout) infinite;
}
.btn-yes svg { display: block; filter: drop-shadow(4px 5px 0 var(--candy-shadow)); }

@keyframes stickerBob {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-5px); }
}

.btn-no {
  transform: rotate(3.5deg);
  --btn-r: 3.5deg;
  animation: stickerBob2 2.6s var(--ease-inout) infinite;
}
.btn-no svg { display: block; filter: drop-shadow(3px 4px 0 var(--mint-shadow)); }

@keyframes stickerBob2 {
  0%, 100% { transform: rotate(3.5deg) translateY(0); }
  50%      { transform: rotate(4.5deg) translateY(-4px); }
}

.footer {
  position: absolute;
  bottom: 30px;
  font-family: var(--font-candy);
  font-size: 12px;               /* a11y P7：装饰小字 ≥12px */
  color: var(--ink-faint);
  letter-spacing: 2px;
  z-index: 3;
  transform: rotate(-1deg);
}