/* Chapter 01 only. The hero and Chapters 02–06 keep their existing styles. */
#invitation.birthday-hero>#invitation-note.letter-chapter{position:relative;isolation:isolate;display:block;width:100%;max-width:none;margin:0;padding:26px 0 28px;border:0;border-radius:0;box-shadow:none;overflow:hidden;animation:none;background:radial-gradient(ellipse at 50% 29%,#fff8f0 0,#fff0ee 25%,#f5d1db88 57%,transparent 78%),linear-gradient(120deg,#e8b0c5,#f8d3dc 50%,#e7a8c1);color:#792844;direction:rtl;scroll-margin-top:20px}
#invitation-note .letter-heading{position:relative;z-index:20;text-align:center;padding:0 18px}
#invitation-note .letter-indicator{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0 auto;padding:4px 25px;border:1px solid #dcae99;border-radius:999px;background:linear-gradient(160deg,#fff6f0,#f8d1de);box-shadow:0 2px 5px #9f42661c,inset 0 1px 2px #fff5e8;color:#8a2e50;font:500 16px/1.8 var(--sans)}
#invitation-note .letter-title{display:flex;align-items:center;justify-content:center;gap:25px;margin:14px 0 0;color:#92264f;font:600 clamp(39px,3.6vw,54px)/1.5 var(--serif);letter-spacing:0}
#invitation-note .letter-title>span{font:400 60px/1 Georgia,serif;color:#d26e91;transform:rotate(-12deg)}
#invitation-note .letter-title>span:last-child{transform:rotate(12deg)}
.letter-scene{--env-width:min(740px,68vw);--env-height:calc(var(--env-width) * .54);--env-top:105px;position:relative;z-index:4;height:calc(var(--env-top) + var(--env-height) + 85px);max-width:1660px;margin:auto;direction:ltr}
.letter-definitions{position:absolute;overflow:hidden}
.letter-envelope-position{position:absolute;left:50%;top:var(--env-top);width:var(--env-width);height:var(--env-height);transform:translateX(-50%);perspective:1400px;z-index:10}
.letter-envelope{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:letter-float 8s ease-in-out infinite;filter:drop-shadow(0 9px 10px #ac53752b)}
.letter-envelope-back{position:absolute;inset:0;border-radius:7px;background:linear-gradient(140deg,#d58aa6,#efb0c7 50%,#c97699);border:1px solid #e9b4c4;box-shadow:inset 0 2px 3px #fff2ebaa}
.letter-envelope-front{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.letter-flap{position:absolute;left:0;right:0;top:0;height:61%;z-index:8;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.25,1)}
.letter-flap-face{position:absolute;inset:0;backface-visibility:hidden}.letter-flap-face>svg{display:block;width:100%;height:100%}.flap-inside{transform:rotateY(180deg)}
.letter-window{position:absolute;left:0;right:0;top:-450px;bottom:0;z-index:4;overflow:hidden;pointer-events:none}
#invitation-note .letter-sheet{position:absolute;top:450px;left:6%;width:88%;height:385px;box-sizing:border-box;padding:42px 38px 30px;border:1px solid #dbab91;border-radius:9px;background:radial-gradient(#bd9c8e1c .5px,transparent .9px) 0 0/3px 3px,linear-gradient(130deg,#fff9ee,#fff0e5 80%);box-shadow:0 4px 10px #aa537126;opacity:0;transform:translate3d(0,0,0);transition:transform .6s cubic-bezier(.2,.7,.25,1),opacity .4s;pointer-events:auto;direction:rtl;text-align:center;outline:none}
.letter-sheet:before{content:'';position:absolute;inset:12px;border:1px solid #d9a17a;border-radius:5px;pointer-events:none}
.letter-sheet:after{content:'';position:absolute;top:18px;right:18px;width:24px;height:24px;border-top:2px solid #c79273;border-right:2px solid #c79273;border-radius:0 7px 0 0;pointer-events:none}
.letter-paper-heart{position:absolute;top:9px;left:calc(50% - 14px);padding:0 6px;color:#d57a93;background:#fff3e8;font:25px/1 Georgia,serif;z-index:1}
#invitation-note .letter-copy p{color:#662c40;font:500 clamp(25px,2.05vw,32px)/1.85 var(--sans);margin:7px 0;letter-spacing:0;text-wrap:pretty}
#invitation-note .letter-copy .letter-remembered{display:table;margin:13px auto 0;padding:3px 17px 5px;background:linear-gradient(93deg,transparent,#f4b3c47a 9%,#f4b3c47a 92%,transparent);color:#923354;font-weight:700}
.letter-paper-rose{display:block;width:105px;height:52px;margin:7px auto 0}
.letter-satin{position:absolute;inset:0;z-index:8;pointer-events:none}
.letter-bow{position:absolute;top:53%;width:25%;height:18%;border:2px solid #ffe5ec;border-radius:65% 15% 35% 50%;background:linear-gradient(160deg,#a84570,#ee9dba 22%,#ffe2e8 41%,#da7a9f 52%,#b84977 89%);box-shadow:inset 3px 2px 8px #f9c7da,inset 0 -5px 8px #a23c6255,0 4px 6px #92385b30;transition:transform .8s ease,opacity .5s}
.bow-first{left:25%;transform:rotate(10deg)}.bow-second{right:25%;transform:scaleX(-1) rotate(10deg)}
.letter-bow-tail{position:absolute;top:66%;height:30%;width:12%;background:linear-gradient(100deg,#be557c,#f1b2ca 36%,#ffe2e8 48%,#d986a8 64%,#b75d83);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);filter:drop-shadow(1px 3px 2px #92385b23)}
.tail-first{left:36%;transform:rotate(30deg);transform-origin:top right}.tail-second{right:36%;transform:rotate(-30deg);transform-origin:top left}
.letter-wax{position:absolute;z-index:9;width:16%;height:auto;left:50%;top:62%;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 3px #9b315c55);transition:opacity .3s,transform .45s}
.letter-envelope-trigger{position:absolute;z-index:15;inset:0;width:100%;height:100%;border:0;border-radius:10px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.letter-envelope-trigger:hover{box-shadow:0 0 25px #ffe9d947}.letter-envelope-trigger:focus-visible{outline:3px solid #7b2448;outline-offset:8px}.letter-envelope-trigger:disabled{cursor:wait}
.letter-opening-sparkles{position:absolute;inset:0;z-index:17;pointer-events:none}.letter-opening-sparkles>i{position:absolute;left:50%;top:61%;width:5px;height:5px;border-radius:50%;background:#fff0cc;box-shadow:0 0 8px 2px #fff5d6;opacity:0}
#invitation-note:is(.is-unsealing,.is-open) .letter-envelope{animation:none}
.letter-chapter.is-unsealing .letter-wax{animation:letter-wax-glow .3s ease-out both}
#invitation-note:is(.is-flap-opening,.is-open) .letter-wax{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(-12deg)}
#invitation-note:is(.is-flap-opening,.is-open) .letter-flap{transform:rotateX(110deg)}
#invitation-note:is(.is-rising,.is-open) .letter-flap{z-index:2}
#invitation-note:is(.is-rising,.is-open) .letter-sheet{opacity:1;transform:translate3d(0,-105px,0)}
#invitation-note:is(.is-reading,.is-open) .letter-window{z-index:12;overflow:visible}
#invitation-note:is(.is-reading,.is-open) .letter-sheet{transform:translate3d(0,-78px,60px) rotate(-1deg) scale(1.025);box-shadow:0 12px 23px #a34b7733}
.letter-chapter.is-unsealing .bow-first{transform:translateX(-10px) rotate(-3deg)}.letter-chapter.is-unsealing .bow-second{transform:translateX(10px) scaleX(-1) rotate(-3deg)}
.letter-chapter.is-reading .letter-opening-sparkles>i{animation:letter-spark-burst 1s ease-out both;animation-delay:var(--delay)}
.letter-pedestal{position:absolute;z-index:5;left:50%;top:calc(var(--env-top) + var(--env-height) - 55px);width:calc(var(--env-width) * 1.36);transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 14px 16px #a14b692b)}
.letter-pedestal>img{display:block;width:100%;height:auto}
.letter-side-roses{position:absolute;left:-110px;bottom:85px;width:clamp(330px,28vw,430px);z-index:3;transform:rotate(3deg);pointer-events:none}.letter-side-roses>img{display:block;width:100%;height:auto;filter:drop-shadow(3px 7px 8px #a3577724)}
.letter-small-present{position:absolute;z-index:5;pointer-events:none}.letter-small-present>img{display:block;width:100%;height:auto}.present-first{left:8%;bottom:68px;width:180px;rotate:-6deg}.present-second{right:13%;bottom:90px;width:105px;rotate:7deg;opacity:.8}
.letter-candle-group{position:absolute;z-index:6;right:3%;bottom:83px;width:230px;height:290px;pointer-events:none}
.letter-candle{position:absolute;bottom:0;border-radius:48% 48% 12% 12% / 12% 12% 9% 9%;background:linear-gradient(90deg,#aa66476b,#f8dca29c 22%,#fff7d18c 48%,#d7955b9c 72%,#aa66476b);border:1px solid #d9a26e;box-shadow:inset 0 -7px 8px #cc8c5a6b,3px 8px 13px #a35c7125}
.letter-candle:before{content:'';position:absolute;inset:7px 0 0;border-radius:inherit;background:repeating-linear-gradient(70deg,transparent 0 13px,#fcebc280 14px 16px,transparent 17px 29px);opacity:.7}
.letter-candle:after{content:'';position:absolute;top:1px;left:2%;width:96%;height:15px;border:1px solid #f7d8a4;border-radius:50%;background:radial-gradient(ellipse,#fff5cb,#e9ad69);box-shadow:0 0 22px #fff4bf80}
.candle-tall{width:77px;height:179px;right:8px;bottom:42px;opacity:.85}.candle-gold{width:105px;height:136px;left:8px}
.letter-candle>span{position:absolute;z-index:2;left:26%;top:39%;color:#fff7d3;font:48px/1 Georgia,serif;text-shadow:0 0 14px #fff7cc}
.letter-candle>i{position:absolute;z-index:3;top:-53px;left:calc(50% - 9px);width:18px;height:50px;border-radius:80% 35% 70% 40%;background:radial-gradient(ellipse at 50% 85%,#fffde7 20%,#fff5bf 60%,#eeac6b);box-shadow:0 0 29px 7px #fff5c980;transform-origin:50% 100%;animation:letter-flame 2s ease-in-out infinite alternate}
.candle-tall>i{animation-delay:-.8s}.letter-light-heart{position:absolute;z-index:2;right:4%;top:58px;width:250px;height:310px;opacity:.85;filter:drop-shadow(0 0 6px #fff2b4);pointer-events:none}
.letter-ambient,.letter-petals,.letter-twinkles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.letter-ambient>span{position:absolute;inset:-10% 12% 15%;border-radius:50%;background:radial-gradient(ellipse,#fffbe980,transparent 67%);animation:letter-ambient 8s ease-in-out infinite alternate}
.letter-ambient>span+span{inset:25% -25% -20% 20%;background:radial-gradient(ellipse,#fbc4dd80,transparent 70%);animation-delay:-4s}
.letter-petal{position:absolute;top:0;left:var(--left);width:var(--size);height:calc(var(--size) * 1.4);border-radius:80% 20% 70% 20%;background:radial-gradient(ellipse at 30% 20%,#ffeaf0,#e997b5 70%,#ca7097);opacity:.55;animation:letter-petal-fall var(--duration) linear infinite;animation-delay:var(--delay)}
.letter-spark{position:absolute;left:var(--left);top:var(--top);width:5px;height:5px;background:#fff5d2;box-shadow:0 0 9px 2px #fff7de;border-radius:50%;animation:letter-twinkle var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.letter-spark:nth-child(3n):before{content:'';position:absolute;width:1px;height:15px;left:2px;top:-5px;background:#fff5d2}.letter-spark:nth-child(3n):after{content:'';position:absolute;width:15px;height:1px;left:-5px;top:2px;background:#fff5d2}
.letter-chapter.letter-sleeping :is(.letter-ambient>span,.letter-petal,.letter-spark,.letter-envelope,.letter-candle>i){animation-play-state:paused!important}
.letter-actions{position:relative;z-index:20;display:grid;place-items:center;min-height:78px;padding:0 18px;margin-top:-5px}
#invitation-note .letter-actions>.button{grid-area:1/1;font-family:var(--sans);font-weight:700;font-size:clamp(21px,1.85vw,27px);line-height:1.65;min-width:330px;min-height:68px;max-width:100%;margin:0;padding:12px 34px;border:1.5px solid #e4b782;border-radius:999px;color:#fffaf2;background:linear-gradient(175deg,#eb7a9f,#cd4579 30%,#a92a58);box-shadow:inset 0 2px 4px #ffdeeb99,0 0 0 3px #ffe9d547,0 10px 24px #a83b6130;transition:transform .2s,box-shadow .2s}
#invitation-note .letter-actions>.button:hover{transform:translateY(-2px);box-shadow:inset 0 2px 4px #ffdeeb99,0 0 0 4px #fff0d96b,0 14px 28px #a83b613b}
#invitation-note .letter-actions>.button:disabled{cursor:wait;opacity:.8;transform:none}
#invitation-note .letter-actions>.button:focus-visible{outline:3px solid #742444;outline-offset:7px}
@keyframes letter-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes letter-flame{from{transform:rotate(-4deg) scale(.96)}to{transform:rotate(4deg) scale(1.03)}}
@keyframes letter-ambient{from{opacity:.45;transform:scale(.96)}to{opacity:.95;transform:scale(1.04)}}
@keyframes letter-petal-fall{0%{opacity:0;transform:translate3d(0,-50px,0) rotate(0)}9%{opacity:.6}90%{opacity:.5}100%{opacity:0;transform:translate3d(var(--drift),1050px,0) rotate(390deg)}}
@keyframes letter-twinkle{from{opacity:.15;scale:.7}to{opacity:.85;scale:1.1}}
@keyframes letter-wax-glow{0%{filter:drop-shadow(0 0 0 #ffe0c2)}100%{filter:drop-shadow(0 0 19px #fff1c8);transform:translate(-50%,-50%) scale(1.1)}}
@keyframes letter-spark-burst{0%{opacity:0;transform:translate(0,0) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.3)}}
@media(min-width:1700px){.letter-side-roses{left:-40px}.letter-candle-group{right:7%}.letter-light-heart{right:8%}}
@media(min-width:701px) and (max-width:1100px){.letter-scene{--env-width:70vw;--env-top:120px}.letter-side-roses{width:290px;left:-140px}.present-first{width:140px;left:2%}.letter-candle-group{right:-25px;width:170px}.letter-light-heart{width:190px;right:0}.present-second{right:8%;width:85px}#invitation-note .letter-sheet{height:360px;padding:37px 28px 25px}#invitation-note .letter-copy p{font-size:26px}.letter-paper-rose{width:85px;height:43px}}
@media(max-width:700px){
  #invitation.birthday-hero>#invitation-note.letter-chapter{padding-top:25px;padding-bottom:28px}
  #invitation-note .letter-indicator{font-size:15px;padding:4px 20px}
  #invitation-note .letter-title{display:block;font-size:clamp(31px,7.8vw,42px);line-height:1.65;margin-top:15px}
  #invitation-note .letter-title>span{display:none}
  .letter-scene{--env-width:min(520px,calc(100vw - 32px));--env-height:calc(var(--env-width) * .58);--env-top:165px;height:calc(var(--env-top) + var(--env-height) + 140px)}
  #invitation-note .letter-sheet{height:320px;padding:35px 20px 24px;left:5%;width:90%;border-radius:7px}
  #invitation-note .letter-copy p{font-size:21px;line-height:1.85;margin:7px 0}
  #invitation-note .letter-copy .letter-remembered{font-size:21px;padding:2px 8px 3px;margin-top:12px}
  .letter-paper-rose{width:76px;height:38px;margin-top:6px}
  .letter-sheet:before{inset:10px}.letter-sheet:after{font-size:28px;top:9px;right:12px}.letter-paper-heart{font-size:22px;top:7px}
  #invitation-note:is(.is-rising,.is-open) .letter-sheet{transform:translate3d(0,-152px,0)}
  #invitation-note:is(.is-reading,.is-open) .letter-sheet{transform:translate3d(0,-123px,25px) rotate(-1deg)}
  .letter-flap{height:61%}.letter-bow{border-width:1px}.letter-wax{width:18%}
  .letter-pedestal{width:calc(var(--env-width) * 1.26);top:calc(var(--env-top) + var(--env-height) - 35px)}
  .letter-side-roses{width:190px;left:-117px;bottom:85px}.present-first{width:110px;left:-20px;bottom:66px}.present-second{width:70px;right:-17px;bottom:98px}
  .letter-candle-group{right:-66px;bottom:69px;width:155px;height:220px}.candle-tall{width:58px;height:133px;right:7px;bottom:30px}.candle-gold{width:70px;height:105px;left:12px}.letter-candle>i{width:12px;height:34px;top:-36px;left:calc(50% - 6px)}.letter-candle>span{font-size:34px}
  .letter-light-heart{width:120px;height:180px;right:-35px;top:110px;opacity:.6}
  .letter-actions{min-height:78px;padding:0 17px;margin-top:0}
  #invitation-note .letter-actions>.button{min-width:0;min-height:60px;width:auto;padding:13px 25px;font-size:21px;line-height:1.6}
}
@media(max-width:360px){#invitation-note .letter-title{font-size:30px}#invitation-note .letter-sheet{height:323px;padding-left:17px;padding-right:17px}#invitation-note .letter-copy p,#invitation-note .letter-copy .letter-remembered{font-size:20px}.letter-paper-rose{width:65px;height:33px}.letter-actions{padding-left:12px;padding-right:12px}#invitation-note .letter-actions>.button{font-size:19px;padding-left:23px;padding-right:23px}}
@media(prefers-reduced-motion:reduce){.letter-chapter *,.letter-chapter *:before,.letter-chapter *:after{animation:none!important;transition:none!important}.letter-chapter .letter-petals{display:none}}
