#page-letter{background:linear-gradient(135deg,#fff0f6,#ffe4ec);position:relative;overflow:hidden;}

/* floating petals / glow layer, populated once the envelope opens */
#page-letter .letter-glow-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

/* ===== envelope ===== */
#page-letter .envelope{width:260px;height:170px;position:absolute;transition:.5s;perspective:900px;}
#page-letter .envelope-body{position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(160deg,#ffb8cf,#ff8fb3);
  box-shadow:0 20px 40px rgba(0,0,0,.15);}
#page-letter .envelope-body::before{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(160deg,#ff9dbd,#ff6fa0);clip-path:polygon(0 100%,50% 40%,100% 100%);opacity:.55;}
#page-letter .flap{position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(160deg,#ff9dbd,#ff6fa0);
  clip-path:polygon(0 0,50% 55%,100% 0);
  transform-origin:top center;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.6,-.2,.3,1.4);
  box-shadow:0 4px 10px rgba(0,0,0,.1);z-index:2;}
#page-letter .seal{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff5f8f,#c8134f 70%);
  color:#ffe1ea;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:bold;cursor:pointer;z-index:3;
  font-family:'Dancing Script','Caveat',cursive;
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 3px 4px rgba(255,255,255,.35);
  transition:transform .25s;}
#page-letter .seal:hover{transform:translate(-50%,-50%) scale(1.08);}
#page-letter .seal:active{transform:translate(-50%,-50%) scale(.92);}

#page-letter .envelope.opening .flap{transform:rotateX(180deg);}
#page-letter .envelope.opening .seal{animation:seal-crack .35s forwards;}
@keyframes seal-crack{
  50%{transform:translate(-50%,-50%) scale(1.3) rotate(15deg);}
  100%{transform:translate(-50%,-50%) scale(0) rotate(45deg);opacity:0;}
}

/* ===== letter / parchment paper ===== */
#page-letter .hidden{display:none;}
#page-letter .letter{position:absolute;z-index:1;}
#page-letter .letter.unfold{animation:letter-unfold .7s cubic-bezier(.34,1.2,.34,1);}
@keyframes letter-unfold{
  0%{transform:translateY(60px) scale(.55) rotateX(-45deg);opacity:0;}
  60%{transform:translateY(-8px) scale(1.02) rotateX(4deg);opacity:1;}
  100%{transform:translateY(0) scale(1) rotateX(0);opacity:1;}
}

#page-letter .letter-paper{
  position:relative;width:88vw;max-width:440px;padding:36px 32px;
  background:linear-gradient(#fbf3e2,#f5e8cf);
  color:#5a3d2b;font-family:'Caveat',cursive;
  box-shadow:0 25px 55px rgba(0,0,0,.25), inset 0 0 60px rgba(150,110,60,.1);
  clip-path:polygon(
    0% 3%,6% 0%,13% 2%,19% 0%,25% 2%,31% 0%,38% 2%,44% 0%,50% 2%,56% 0%,63% 2%,69% 0%,75% 2%,81% 0%,88% 2%,94% 0%,100% 3%,
    98% 10%,100% 18%,98% 26%,100% 34%,98% 42%,100% 50%,98% 58%,100% 66%,98% 74%,100% 82%,98% 90%,100% 97%,
    94% 100%,88% 98%,81% 100%,75% 98%,69% 100%,63% 98%,56% 100%,50% 98%,44% 100%,38% 98%,31% 100%,25% 98%,19% 100%,13% 98%,6% 100%,0% 97%,
    2% 90%,0% 82%,2% 74%,0% 66%,2% 58%,0% 50%,2% 42%,0% 34%,2% 26%,0% 18%,2% 10%
  );
}
#page-letter .letter-paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.45;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

#page-letter h2{color:#c8134f;margin-bottom:18px;font-size:28px;font-weight:700;position:relative;z-index:1;}
#page-letter .typing-lines{min-height:180px;position:relative;z-index:1;}
#page-letter .typed-line{font-size:26px;line-height:1.55;margin-bottom:8px;}
#page-letter .ink-caret{display:inline-block;width:2px;height:22px;background:#5a3d2b;vertical-align:middle;
  margin-left:1px;animation:caret-blink 1s steps(1) infinite;}
@keyframes caret-blink{50%{opacity:0;}}

#page-letter button{display:none;margin-top:18px;padding:14px 28px;border:none;border-radius:30px;
  background:#c8134f;color:white;font-size:16px;font-family:sans-serif;cursor:pointer;position:relative;z-index:1;}

/* ===== interactive ink-word tooltips ===== */
#page-letter .ink-word{position:relative;color:#c8134f;font-weight:700;cursor:pointer;
  border-bottom:1px dashed rgba(200,19,79,.45);}
#page-letter .ink-spark-icon{font-size:.55em;margin-left:2px;opacity:.7;display:inline-block;
  animation:ink-spark-pulse 1.4s ease-in-out infinite;}
@keyframes ink-spark-pulse{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
#page-letter .ink-tooltip-bubble{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  background:#2b2b3a;color:white;padding:8px 12px;border-radius:10px;font-family:sans-serif;font-size:12px;
  width:190px;max-width:60vw;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:5;
  animation:tooltip-in .25s ease;}
#page-letter .ink-tooltip-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#2b2b3a;}
@keyframes tooltip-in{from{opacity:0;transform:translateX(-50%) translateY(6px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* floating ink-spark particles from the pen tip while typing (appended to <body>) */
.ink-spark-particle{position:fixed;width:4px;height:4px;border-radius:50%;background:#c8134f;
  pointer-events:none;z-index:9997;animation:ink-spark-float .5s ease-out forwards;}
@keyframes ink-spark-float{to{transform:translateY(-14px) scale(0);opacity:0;}}

/* ===== hidden postscript ===== */
#page-letter #letterHeading{cursor:default;transition:.3s;display:flex;align-items:center;gap:4px;position:relative;z-index:1;}
#page-letter #letterHeading .ps-hint{display:inline-block;opacity:0;font-size:16px;transition:opacity .3s;}
#page-letter #letterHeading.has-secret{cursor:pointer;}
#page-letter #letterHeading.has-secret .ps-hint{opacity:.7;animation:ps-hint-bob 1.4s ease-in-out infinite;}
#page-letter #letterHeading.has-secret:hover{transform:scale(1.03);}
#page-letter #letterHeading.revealed .ps-hint{opacity:0;animation:none;}
@keyframes ps-hint-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
#page-letter .ps-note{margin-top:14px;padding:14px 16px;background:rgba(255,244,224,.85);border-left:4px solid #ffd447;
  border-radius:8px;font-family:sans-serif;font-style:italic;color:#8a6100;font-size:14px;line-height:1.6;
  position:relative;z-index:1;animation:ps-note-in .5s ease;}
@keyframes ps-note-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}

@media (max-width: 380px){
  #page-letter .envelope{width:220px;height:145px;}
  #page-letter .seal{width:46px;height:46px;font-size:20px;}
  #page-letter .letter-paper{padding:26px 20px;}
  #page-letter .typed-line{font-size:22px;}
  #page-letter h2{font-size:24px;}
}

/* Premium responsive */
*{box-sizing:border-box}img,video{max-width:100%;height:auto}body{overflow-x:hidden}
.container{width:min(92%,1100px);margin:auto}
h1{font-size:clamp(2rem,5vw,4rem)}h2{font-size:clamp(1.5rem,4vw,3rem)}p{font-size:clamp(1rem,2vw,1.1rem)}
button,.btn{min-height:48px;padding:.8rem 1.4rem;border-radius:14px}
@media(max-width:768px){section{padding:60px 16px}}