/* ==== 信封开场（抽取自 wyh/index.html） ==== */
#hljGate{position:fixed;inset:0;z-index:9000;overflow:hidden;font-family:"Noto Serif SC","Songti SC","PingFang SC",serif;color:var(--wy-ink);line-height:1.9;letter-spacing:.04em}
#hljGate,#hljGate *,#hljGate *::before,#hljGate *::after{box-sizing:border-box;margin:0}
#hljGate .letter-mini{
  padding-left:calc(var(--margin-x, 18px) + 1px + var(--pad-l, 16px)) !important;
  padding-right:6px !important;
}
#hljGate img{display:block;width:100%;height:auto}
:root{
  --wy-cream:#FFF8EE;
  --wy-ink:#4A241F;
  --wy-muted:#8F4E3E;
  --wy-quiet:#B07860;
  --wy-rose:#D12A2A;
  --wy-deep:#B01E1E;
  --wy-petal:#E85A4A;
  --wy-gold:#E0B84E;
  --wy-gold-deep:#C4922A;
  --wy-max:430px;
}
.xi-bg{
  position:fixed;inset:0;max-width:var(--wy-max);margin:0 auto;z-index:0;pointer-events:none;
  opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Ctext x='44' y='58' text-anchor='middle' font-size='42' font-family='serif' fill='%23B01E1E'%3E%E5%9B%8D%3C/text%3E%3C/svg%3E");
  background-size:88px 88px;
}

.flower{position:absolute;pointer-events:none;z-index:2;opacity:.95}
.flower svg{width:100%;height:100%;display:block}

.lantern{
  position:absolute;z-index:2;pointer-events:none;width:42px;text-align:center;
  animation:lanternSway 3.6s ease-in-out infinite;
}
.lantern.l{top:18px;left:14px}
.lantern.r{top:18px;right:14px;animation-delay:-1.8s}
.lantern .cap{height:8px;margin:0 auto;width:22px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#E8C45A,#C4922A)}
.lantern .body{
  margin:0 auto;width:34px;height:46px;border-radius:16px 16px 12px 12px;
  background:linear-gradient(160deg,#E84840,#C02020 55%,#9E1818);
  box-shadow:0 8px 16px rgba(160,30,25,.28), inset 0 0 0 1.5px rgba(232,196,90,.45);
  color:#FFE9A8;font-size:16px;line-height:46px;letter-spacing:.05em;
}
.lantern .tassel{width:2px;height:18px;margin:2px auto 0;background:linear-gradient(#E0B84E,transparent)}
@keyframes lanternSway{
  0%,100%{transform:rotate(-4deg)}
  50%{transform:rotate(4deg)}
}

.petals{
  position:fixed;inset:0;max-width:var(--wy-max);margin:0 auto;
  pointer-events:none;z-index:1;overflow:hidden;
  contain:strict;
}
.petal{
  position:absolute;top:-24px;width:10px;height:14px;border-radius:70% 0 70% 0;
  background:radial-gradient(circle at 30% 30%,#F0D070,#D12A2A);
  opacity:.65;animation:fall linear infinite;
}
@keyframes fall{
  0%{transform:translateY(0) rotate(0);opacity:0}
  12%{opacity:.6}
  100%{transform:translateY(110vh) rotate(360deg);opacity:0}
}

/* —— 封面：金边喜帖 + 红囍，未翻开不可下滑 —— */
.hero{
  position:fixed;top:0;left:0;right:0;bottom:0;
  max-width:var(--wy-max);margin:0 auto;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 18px 36px;
  background:
    radial-gradient(ellipse 110% 58% at 50% -5%,rgba(209,42,42,.34),transparent 52%),
    radial-gradient(ellipse 70% 42% at 0% 40%,rgba(224,184,78,.28),transparent 50%),
    linear-gradient(180deg,#F6D9C4,#EFC6A6 55%,#E5B08C);
}
.hero.gone{display:none}
.hero.revealed{
  position:relative;
  z-index:1;
  min-height:auto;
  height:auto;
  padding:28px 18px 12px;
  justify-content:flex-start;
}
.hero.revealed .book{cursor:default;pointer-events:none}
.book-wrap{
  width:min(78vw,268px);position:relative;z-index:3;
  perspective:1200px;overflow:visible;
}
.book{
  /* 竖信纸比例，避免矮胖 */
  width:100%;aspect-ratio:3/4;position:relative;cursor:pointer;
  border-radius:14px;-webkit-tap-highlight-color:transparent;
  transform-style:preserve-3d;
  box-shadow:0 18px 40px rgba(140,30,25,.22),0 0 0 1px rgba(224,184,78,.28);
  overflow:visible;
}
.book.opening,
.book.is-open{
  aspect-ratio:3/4;
}
.book-inner{
  --lh:18px;
  --margin-x:18px;
  --pad-r:12px;
  --pad-l:16px;
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  background-color:#F7F0E6;
  isolation:isolate;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  /* 上半格线略见，下半渐隐，修长但不显空行扎眼 */
  background-image:
    linear-gradient(180deg, transparent 58%, #F7F0E6 92%),
    linear-gradient(90deg,
      transparent 0 var(--margin-x),
      rgba(180,120,108,.28) var(--margin-x) calc(var(--margin-x) + 1px),
      transparent calc(var(--margin-x) + 1px)
    ),
    repeating-linear-gradient(
      180deg,
      #F7F0E6 0 calc(var(--lh) - 1px),
      rgba(198,168,148,.22) calc(var(--lh) - 1px) var(--lh)
    );
  display:flex;flex-direction:column;
  padding:calc(var(--lh) * 0.85) var(--pad-r) calc(var(--lh) * 1.1) 0;
  text-align:left;
  border:1.5px solid rgba(201,162,74,.34);
  box-sizing:border-box;
}
.book-inner::before{
  content:'';position:absolute;inset:5px;border-radius:10px;
  border:1px solid rgba(160,90,80,.08);pointer-events:none;z-index:0;
}
.book-inner::after{
  content:'囍';position:absolute;left:50%;bottom:18px;z-index:0;
  transform:translateX(-50%);
  font-size:48px;line-height:1;color:rgba(176,30,30,.06);
  pointer-events:none;font-family:"Noto Serif SC","Songti SC",serif;
}
.book-inner .letter-mini{
  position:relative;z-index:1;
  flex:0 1 auto;min-height:0;overflow:hidden;
  padding-left:calc(var(--margin-x) + 1px + var(--pad-l));
  padding-right:2px;
  font-size:11.5px;
  line-height:var(--lh);
  color:#5C3A32;
}
.book-inner .letter-mini .to,
.book-inner .letter-mini .open,
.book-inner .letter-mini .body p,
.book-inner .letter-mini .sign-off,
.book-inner .letter-mini .sign-off .from{
  margin:0;
  line-height:var(--lh);
  min-height:var(--lh);
}
.book-inner .letter-mini .to{
  text-align:left;font-size:12px;color:#A8584C;letter-spacing:.05em;
}
.book-inner .letter-mini .to b{
  font-size:13px;font-weight:600;color:#8A322C;letter-spacing:.04em;
}
.book-inner .letter-mini .open{
  font-size:12px;color:#8A322C;font-weight:600;
}
.book-inner .letter-mini .body p{
  text-indent:2em;font-size:11.5px;color:#5C3A32;
}
.book-inner .letter-mini .body p.meta{
  text-indent:0;font-size:11px;letter-spacing:.04em;color:#8A6254;
}
.book-inner .letter-mini .sign-off{
  margin-top:calc(var(--lh) * 0.3);
  text-align:right;font-size:11px;color:#8A6254;
}
.book-inner .letter-mini .sign-off .from{
  color:#8A322C;font-weight:600;letter-spacing:.06em;font-size:12px;
}

.book-front{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1.55s cubic-bezier(.33,.12,.18,1);
  z-index:2;box-shadow:6px 0 20px rgba(120,30,25,.16);
}
.book.opening .book-front{
  transform:rotateY(-152deg);
  box-shadow:2px 0 8px rgba(120,40,35,.06);
}
.book-face{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,rgba(255,230,180,.55),transparent 55%),
    radial-gradient(ellipse 80% 55% at 100% 100%,rgba(209,42,42,.16),transparent 55%),
    radial-gradient(ellipse 60% 45% at 0% 80%,rgba(224,184,78,.22),transparent 50%),
    linear-gradient(168deg,#FFF6E8,#F6DFC4 50%,#EFD0B0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;padding:28px 18px;text-align:center;
  border:2.5px solid rgba(224,184,78,.7);
  color:var(--wy-ink);
}
.book-face::before{
  content:'';position:absolute;inset:9px;border-radius:10px;
  border:1.5px solid rgba(209,42,42,.35);pointer-events:none;
}
.book-face::after{
  content:'囍';position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  font-size:120px;color:rgba(209,42,42,.06);line-height:1;pointer-events:none;z-index:0;
}
.book-face .corner{
  position:absolute;width:78px;height:46px;opacity:1;pointer-events:none;z-index:1;
}
.book-face .corner.tl{top:14px;left:12px}
.book-face .corner.tr{top:14px;right:12px;transform:scaleX(-1)}
.book-face .corner.bl{bottom:14px;left:12px;transform:scaleY(-1)}
.book-face .corner.br{bottom:14px;right:12px;transform:scale(-1)}
.book-face .xi{
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--wy-gold);
  display:grid;place-items:center;
  font-size:30px;color:#FFF4D8;line-height:1;
  background:radial-gradient(circle at 35% 30%,#E84840,#B01E1E 70%,#8E1616);
  box-shadow:0 8px 18px rgba(160,30,25,.28), inset 0 1px 0 rgba(255,220,160,.35);
  position:relative;z-index:1;
}
.book-face .bless{
  font-size:12px;letter-spacing:.36em;color:var(--wy-gold-deep);
  position:relative;z-index:1;
}
.book-face .names{
  font-size:19px;letter-spacing:.18em;color:var(--wy-deep);
  position:relative;z-index:1;font-weight:600;
}
.book-face .sub{
  font-size:13px;letter-spacing:.34em;color:var(--wy-rose);
  margin-top:-2px;position:relative;z-index:1;
}
.book-face .to-line{
  margin-top:4px;font-size:13px;letter-spacing:.12em;color:var(--wy-muted);
  position:relative;z-index:1;
}
.book-face .date-hint{
  margin-top:6px;font-size:12px;letter-spacing:.22em;color:var(--wy-gold-deep);
  position:relative;z-index:1;
}
.book-backface{
  position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(135deg,#F0D8B8,#E4C49A);
  transform:rotateY(180deg);backface-visibility:hidden;
  border:1px solid rgba(224,184,78,.4);
}
.tip{display:none !important}

/* ==== 接入适配 ==== */
#hljGate{--wy-max:100vw}
#hljGate .hero{z-index:9001}
#hljGate .hero.gone{display:none}
#hljGate.is-out{opacity:0;pointer-events:none;transition:opacity .6s ease}
html.hlj-gate-open,body.hlj-gate-open{overflow:hidden !important;height:100% !important;touch-action:none}
#hljGate .skip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:9002;
  padding:7px 20px;border-radius:999px;font-size:12px;letter-spacing:.24em;
  color:rgba(120,60,40,.75);background:rgba(255,252,246,.85);
  border:1px solid rgba(201,162,74,.5);cursor:pointer;
  box-shadow:0 4px 14px rgba(150,90,60,.12)}
#hljGate{background-color:#FFFCF6;
  background-image:url('../assets/qnm/FpYGvNqxas2NwnEYkVHIwMO_BsIF');
  background-repeat:repeat;background-size:375px auto}
#hljGate .hero{background:none}
/* 封面翻开后淡出，只留居中的信纸 */
#hljGate .book.opening .book-front{
  transition:transform 1.5s cubic-bezier(.33,.12,.18,1),opacity .7s ease 1.05s;
  opacity:0;
}
