:root {
  --pink:#eaf7ff; --pink2:#d8efff; --rose:#6eaed4; --deep:#315f7c; --gold:#e7b95f; --ink:#365d75; --muted:#7898aa; --white:#f8fdff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden;background:linear-gradient(145deg,#f4fbff,#dff2ff 48%,#f7fcff)}
button{font:inherit}
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 22%,rgba(255,255,255,.98),transparent 52%),radial-gradient(ellipse at 15% 75%,rgba(255,255,255,.55),transparent 35%),linear-gradient(180deg,#bfe7ff 0%,#d9f0ff 48%,#f1faff 100%)}
.cloud{position:absolute;width:260px;height:65px;border-radius:60px;background:rgba(255,255,255,.62);filter:blur(2px)}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud:before{width:105px;height:105px;left:45px;top:-48px}.cloud:after{width:130px;height:130px;right:35px;top:-66px}
.cloud-one{top:28%;left:-110px}.cloud-two{top:66%;right:-120px;transform:scale(.8)}
.hanging-balloons{position:absolute;inset:0 0 auto;height:280px}
.hang{position:absolute;top:-8px;font-size:clamp(34px,5vw,58px);transform-origin:top center;filter:drop-shadow(0 7px 5px #c9829a30);animation:sway 5s ease-in-out infinite}
.hang:after{content:"";position:absolute;top:48px;left:50%;height:110px;border-left:1px solid #c98da3aa}
.h1{left:3%;animation-delay:-1s}.h2{left:16%;top:-18px;animation-delay:-3s}.h3{left:31%;top:-27px;animation-delay:-2s}.h4{left:48%;top:-14px;animation-delay:-4s}.h5{right:31%;top:-26px;animation-delay:-1.5s}.h6{right:17%;top:-15px;animation-delay:-3.5s}.h7{right:4%;animation-delay:-2.5s}.h8{left:64%;top:-38px;animation-delay:-.5s}
.stars{position:absolute;inset:0;background-image:radial-gradient(#ffffff 1.3px,transparent 1.5px),radial-gradient(#fff 1.8px,transparent 2px);background-size:83px 91px,127px 113px;background-position:12px 15px,45px 40px;opacity:.42;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes twinkle{to{opacity:.8}}
.envelope-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 20px 45px;transition:opacity .7s,transform .7s}
.envelope-screen.leaving{opacity:0;transform:scale(1.04);pointer-events:none}
.intro-copy .tiny-label,.eyebrow,.section-kicker,.closing-overline{font-size:10px;font-weight:700;letter-spacing:.25em;color:#5485a3}
.intro-copy h1{font:500 clamp(40px,7vw,66px)/1.13 "Playfair Display",serif;margin:18px 0 10px;color:#315f7c}
.intro-copy h1 em{font-family:"Great Vibes",cursive;color:#4f9bc8;font-size:1.2em;font-weight:400}
.intro-copy p{font-size:13px;color:#6f94aa;margin:0 0 34px}
.envelope-button{position:relative;width:min(340px,82vw);height:220px;border:0;background:none;cursor:pointer;perspective:900px;filter:drop-shadow(0 22px 22px #9c61752c);transition:transform .3s}
.envelope-button:hover{transform:translateY(-6px) rotate(-1deg)}
.envelope-back{position:absolute;inset:28px 0 0;background:#9bcdec;border-radius:9px}
.letter{position:absolute;z-index:1;left:8%;right:8%;top:12px;height:170px;background:#fffdf9;border-radius:6px;padding:27px 10px;color:#a65f7b;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform 1s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 15px #9c61751c}
.letter-sparkle{color:#d4a35d;font-size:20px}.letter-title{font:30px "Great Vibes",cursive}.letter-subtitle{font-size:10px;color:#b18a99}
.envelope-front{position:absolute;z-index:3;bottom:0;left:0;width:100%;height:145px;background:#b8def3;clip-path:polygon(0 0,50% 63%,100% 0,100% 100%,0 100%);border-radius:0 0 9px 9px}
.envelope-flap{position:absolute;z-index:4;top:28px;left:0;width:100%;height:125px;background:#d2ecfa;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s ease;backface-visibility:hidden}
.seal{position:absolute;z-index:5;left:calc(50% - 18px);top:115px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#5f9fc4;color:#ffffff;border:2px solid #e9f7ff;box-shadow:0 3px 9px #8c52652c;transition:opacity .3s}
.envelope-button.open .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope-button.open .letter{transform:translateY(-125px);transition-delay:.25s}.envelope-button.open .seal{opacity:0}
.tap-hint{font-size:9px;letter-spacing:.22em;color:#5d8eaa;margin-top:30px}.tap-hint span{color:#70a9ca;font-size:15px}
.page-shell{width:min(1080px,calc(100% - 42px));margin:auto;opacity:1;transition:opacity .9s}.page-shell.hidden{display:none;opacity:0}.page-shell.visible{animation:appear 1.1s both}
@keyframes appear{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.topbar{height:75px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d99eb333}
.brand{color:#9b6078;text-decoration:none;font-size:10px;letter-spacing:.2em;font-weight:700}.brand span{color:#d49a62;font-size:17px;margin-right:8px}.topbar-note{font-size:11px;color:#ad8797}
.hero{min-height:670px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:65px 0 55px}
.eyebrow{display:flex;align-items:center;gap:13px}.eyebrow span{width:28px;height:1px;background:#dba7b8}
.floating-decor{position:absolute;color:#d9a65e;font-size:27px;animation:float 4s ease-in-out infinite}.decor-left{left:13%;top:27%}.decor-right{right:14%;top:40%;animation-delay:-2s}
.cake-wrap{position:relative;width:150px;height:112px;margin:22px 0 0;filter:drop-shadow(0 9px 10px #9e5c7620)}
.cake{position:absolute;bottom:13px;left:20px;width:110px;height:65px}.cake-layer{position:absolute;bottom:0;width:110px;height:47px;border-radius:9px 9px 13px 13px;background:repeating-linear-gradient(90deg,#f5b9c9 0 18px,#f9d0d9 18px 36px);border:2px solid #85badb}
.cake-base{position:absolute;bottom:-2px;left:-4px;width:118px;height:10px;border-radius:50%;background:#f7fdff;border:1px solid #b7dced}
.icing{position:absolute;z-index:1;top:8px;left:-2px;width:114px;height:17px;border-radius:50%;background:#ffffff;border:1px solid #b8dcec}
.cake-plate{position:absolute;bottom:7px;left:8px;width:134px;height:12px;border-radius:50%;background:#f8fdff;border:1px solid #b5d8e9}
.cake-candles{position:absolute;z-index:2;top:0;left:51px;display:flex;gap:13px}.cake-candles i{height:25px;width:5px;border-radius:3px;background:repeating-linear-gradient(45deg,#d78ca4 0 4px,#fff3f4 4px 8px);position:relative}.cake-candles i:before{content:"";position:absolute;width:9px;height:12px;border-radius:80% 0 80% 80%;background:#ffc66e;top:-13px;left:-2px;transform:rotate(45deg);box-shadow:0 0 12px #ffc66e99;animation:flicker .8s infinite alternate}
@keyframes flicker{to{transform:rotate(35deg) scale(.8);opacity:.75}}
.pre-title{margin:18px 0 0;color:#628ba4;font-size:13px;letter-spacing:.08em}
.hero h1{font:600 clamp(78px,15vw,150px)/1.05 "Playfair Display",serif;letter-spacing:-.06em;margin:0;color:#315f7c;text-shadow:0 9px 28px #bd82901b}.hero h1 span{color:#e4ad4e}
.birthday-rule{display:flex;align-items:center;gap:13px;color:#d39a62;margin:13px 0 20px}.birthday-rule span{height:1px;width:56px;background:#dfb8c2}
.hero-message{font:26px "Playfair Display",serif;color:#4c91b8;margin:0 0 10px}.hero-subtitle{font-size:13px;line-height:1.9;color:#6e8fa3;margin:0}
.surprise-button,.replay-button{margin-top:30px;padding:14px 21px;border:1px solid #88bddd;background:#f8fdffcc;color:#397da5;font-size:11px;font-weight:700;letter-spacing:.07em;cursor:pointer;display:inline-flex;gap:24px;align-items:center;transition:.3s;box-shadow:0 7px 20px #c47f9820}
.surprise-button:hover,.replay-button:hover{transform:translateY(-3px);background:#fff}
.scroll-hint{position:absolute;bottom:14px;color:#b58c9b;font-size:9px;letter-spacing:.2em}
.message-section,.wishes-section{padding:80px 0 55px;text-align:center}.message-card{max-width:720px;margin:30px auto 0;padding:52px 65px;background:#f8fdffcc;border:1px solid #b7dced;box-shadow:0 20px 65px #4e9bc414;position:relative;border-radius:4px}
.message-card:before,.message-card:after{content:"✧";position:absolute;color:#d6a36e;font-size:20px}.message-card:before{top:15px;left:18px}.message-card:after{bottom:15px;right:18px}
.quote-mark{font:65px "Playfair Display",serif;color:#6daed2;height:42px}.message-card h2{font:500 clamp(32px,5vw,46px)/1.2 "Playfair Display",serif;margin:12px 0 22px;color:#315f7c}.message-card h2 em,.closing-section h2 em{color:#4f9bc8}
.message-card p{max-width:540px;margin:0 auto 14px;color:#987e8c;font-size:13px;line-height:2}.signature{margin-top:27px;color:#477f9e;font:italic 16px "Playfair Display",serif}.signature span{color:#d4a05f;margin-left:8px}
.wish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:35px}.wish-card{padding:30px 22px;border:1px solid #bfdeef;background:#f8fdffb8;transition:.3s;border-radius:5px}.wish-card:hover{transform:translateY(-6px);box-shadow:0 15px 30px #bd82901a}.wish-card>span{font-size:25px;color:#d49a68}.wish-card h3{font:22px "Playfair Display",serif;font-weight:500;margin:15px 0 9px;color:#3f7391}.wish-card p{color:#7898aa;font-size:12px;line-height:1.8;margin:0}
.closing-section{text-align:center;padding:100px 0 90px}.closing-star{font-size:26px;color:#e2ad50;margin-bottom:20px;animation:twinkle 1.5s infinite alternate}.closing-section h2{font:500 clamp(46px,8vw,78px)/1.1 "Playfair Display",serif;color:#81566b;margin:20px 0 14px}.closing-section>p:not(.closing-overline){color:#6e8fa3;font-size:13px}
footer{border-top:1px solid #d99eb333;min-height:70px;display:flex;justify-content:center;align-items:center;gap:17px;color:#7799ad;font-size:9px;letter-spacing:.2em}footer span:nth-child(2){color:#e2ad50}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:13px 20px;border:1px solid #b8dced;background:#f8fdff;color:#397da5;font-size:12px;opacity:0;pointer-events:none;transition:.35s;z-index:20;white-space:nowrap;box-shadow:0 10px 30px #a9687b22}.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;top:-15px;width:8px;height:13px;z-index:15;pointer-events:none;animation:fall linear forwards;border-radius:2px}
@keyframes fall{to{transform:translate3d(var(--drift),110vh,0) rotate(720deg);opacity:.2}}
.fireworks{position:fixed;inset:0;pointer-events:none;z-index:14;overflow:hidden}.burst{position:absolute;width:5px;height:5px;border-radius:50%;animation:burst 1.1s ease-out forwards;box-shadow:0 0 8px currentColor}
@keyframes burst{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--x),var(--y)) scale(0);opacity:0}}
@media(max-width:700px){.page-shell{width:calc(100% - 32px)}.topbar{height:65px}.topbar-note{font-size:9px}.hero{min-height:630px;padding-top:50px}.hang:after{height:75px}.h2,.h5,.h8{display:none}.decor-left{left:4%}.decor-right{right:4%}.message-section,.wishes-section{padding:65px 0 40px}.message-card{padding:45px 23px}.wish-grid{grid-template-columns:1fr;gap:11px}.wish-card{padding:25px 20px}.closing-section{padding:80px 0 70px}.desktop-break{display:none}footer{gap:10px;font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Responsive layout refinements for phones, tablets, and short laptop screens. */
@media (max-width: 700px) {
  .envelope-screen { min-height: 100vh; min-height: 100svh; padding: 48px 18px 32px; }
  .intro-copy .tiny-label { font-size: 9px; letter-spacing: .18em; }
  .intro-copy h1 { font-size: clamp(38px, 10vw, 54px); }
  .intro-copy p { margin-bottom: 26px; }
  .envelope-button { width: min(320px, 84vw); height: 200px; }
  .envelope-front { height: 132px; }
  .envelope-flap { height: 112px; }
  .seal { top: 105px; }
  .envelope-button.open .letter { transform: translateY(-112px); }
  .tap-hint { font-size: 8px; letter-spacing: .16em; }
  .hero { min-height: min(700px, calc(100svh - 65px)); padding: 40px 4px 55px; }
  .hero h1 { font-size: clamp(68px, 21vw, 112px); }
  .hero-message { max-width: 100%; font-size: clamp(20px, 6vw, 25px); }
  .hero-subtitle { max-width: 34em; font-size: 12px; }
  .eyebrow { gap: 8px; font-size: 8px; letter-spacing: .18em; }
  .eyebrow span { width: 18px; }
  .floating-decor { font-size: 20px; }
  .decor-left { left: 1%; top: 25%; }
  .decor-right { right: 1%; top: 38%; }
  .bottom-balloons { height: 90px; bottom: -28px; opacity: .45; }
  .bottom-balloons span { font-size: clamp(24px, 8vw, 38px); }
  .toast { width: calc(100% - 32px); max-width: 420px; text-align: center; white-space: normal; }
  .message-card { padding: 42px 22px; }
}

@media (max-width: 380px) {
  .page-shell { width: calc(100% - 24px); }
  .brand { font-size: 8px; letter-spacing: .14em; }
  .topbar-note { font-size: 8px; }
  .hero h1 { font-size: 66px; }
  .hero-message { font-size: 19px; }
  .surprise-button, .replay-button { padding: 13px 15px; gap: 14px; }
  footer { letter-spacing: .12em; }
}

@media (min-width: 701px) and (max-height: 760px) {
  .hero { min-height: 590px; padding-top: 42px; padding-bottom: 48px; }
  .cake-wrap { margin-top: 12px; }
  .pre-title { margin-top: 10px; }
}

@media (min-width: 1400px) {
  .page-shell { width: min(1160px, calc(100% - 80px)); }
  .hero { min-height: 720px; }
}

/* Sky-blue party atmosphere: fuller balloon canopy and floor clusters */
.hanging-balloons{height:310px}
.hang{filter:drop-shadow(0 8px 9px #377da52c);font-size:clamp(38px,5.2vw,64px)}
.hang:after{border-left:1px solid #6dabc888;height:135px}
.h9{left:9%;top:62px;animation-delay:-2.8s}.h10{left:40%;top:34px;animation-delay:-1.2s}
.h11{right:40%;top:76px;animation-delay:-3.8s}.h12{right:8%;top:58px;animation-delay:-.8s}
.bottom-balloons{position:fixed;left:0;right:0;bottom:-24px;height:155px;display:flex;align-items:flex-end;justify-content:space-around;pointer-events:none;z-index:0;opacity:.86}
.bottom-balloons span{font-size:clamp(32px,4.5vw,54px);filter:drop-shadow(0 5px 7px #377da52a);animation:bottomFloat 4.5s ease-in-out infinite}
.bottom-balloons span:nth-child(2n){animation-delay:-1.3s;transform:translateY(-12px)}
.bottom-balloons span:nth-child(3n){animation-delay:-2.6s;transform:translateY(-22px)}
@keyframes bottomFloat{0%,100%{translate:0 0}50%{translate:0 -18px}}
/* Make the cake feel softly illuminated */
.cake-wrap{filter:drop-shadow(0 0 13px #ffd66d88) drop-shadow(0 10px 14px #438db633)}
.cake-candles i:before{box-shadow:0 0 12px #ffc66e,0 0 28px #ffc66eaa,0 0 45px #ffdc91aa}
.cake-plate{box-shadow:0 0 24px #fff8c9aa,0 0 42px #a8dfff66}
.cake-layer{box-shadow:inset 0 4px 10px #ffffff88,0 0 16px #f7c86b55}

/* A shared twilight party scene, visible before and after the envelope opens. */
:root {
  --ink: #f3e8ff;
  --muted: #c0afd9;
}
body {
  color: var(--ink);
  background: linear-gradient(145deg, #090d24, #171238 52%, #101a38);
}
.sky {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(104, 78, 173, .25), transparent 52%),
    radial-gradient(ellipse at 12% 78%, rgba(43, 134, 171, .18), transparent 38%),
    linear-gradient(180deg, #080d24 0%, #111632 55%, #171431 100%);
}
.cloud { background: rgba(140, 157, 208, .10); filter: blur(14px); }
.stars {
  opacity: .7;
  background-image:
    radial-gradient(#fff8d7 1.3px, transparent 1.8px),
    radial-gradient(#b8ddff 1.8px, transparent 2.4px),
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.6px);
  background-size: 83px 91px, 127px 113px, 59px 67px;
  background-position: 12px 15px, 45px 40px, 23px 31px;
  filter: drop-shadow(0 0 5px #a6d8ff);
}
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 22% 28%, #fffbd9 0 1px, transparent 3px),
    radial-gradient(circle at 78% 36%, #d8eaff 0 1.5px, transparent 4px),
    radial-gradient(circle at 65% 72%, #fff3c4 0 1.5px, transparent 4px),
    radial-gradient(circle at 35% 84%, #d5e9ff 0 1px, transparent 3px);
  opacity: .65;
  animation: starGlow 2.8s ease-in-out infinite alternate;
}
@keyframes starGlow { to { opacity: 1; filter: brightness(1.5); } }
.hang { filter: drop-shadow(0 0 9px rgba(212, 190, 255, .36)); }
.hang:nth-child(3n + 1), .bottom-balloons span:nth-child(3n + 1) { filter: hue-rotate(235deg) saturate(1.15) drop-shadow(0 0 9px #cf9bff66); }
.hang:nth-child(3n + 2), .bottom-balloons span:nth-child(3n + 2) { filter: hue-rotate(145deg) saturate(1.2) drop-shadow(0 0 9px #89e5ff66); }
.hang:nth-child(3n), .bottom-balloons span:nth-child(3n) { filter: hue-rotate(300deg) saturate(1.15) drop-shadow(0 0 9px #ff9ec866); }
.envelope-screen { color: #f4eaff; }
.intro-copy .tiny-label, .tap-hint { color: #c2acd9; }
.intro-copy h1 { color: #fff4e2; text-shadow: 0 0 24px #b992ff42; }
.intro-copy h1 em { color: #e2b9ff; }
.intro-copy p { color: #c7b9df; }
.envelope-back { background: #56386e; }
.envelope-front { background: linear-gradient(135deg, #77518e, #4a4e86); }
.envelope-flap { background: linear-gradient(145deg, #ad77a2, #6b659f); }
.envelope-button { filter: drop-shadow(0 18px 32px #050615aa); }
.seal { background: #e9ad73; color: #302044; border-color: #ffe4b7; box-shadow: 0 0 22px #ffc87e99; }
.tap-hint span { color: #f2c278; }
.topbar { border-color: #c8a9ff30; }
.brand, .topbar-note { color: #c5b2dc; }
.brand span { color: #ffd27d; }
.eyebrow, .section-kicker, .closing-overline { color: #d0b8ec; }
.eyebrow span, .birthday-rule span { background: #b9a0d35c; }
.hero h1 { color: #fff5e6; text-shadow: 0 0 34px #a47be533; }
.hero h1 span, .birthday-rule, .floating-decor, .closing-star { color: #ffd27c; }
.pre-title, .hero-subtitle, .scroll-hint, .closing-section > p:not(.closing-overline) { color: #c6badb; }
.hero-message { color: #e9c6ff; }
.surprise-button, .replay-button {
  border-color: #c5a5e8;
  background: #211d3dcc;
  color: #f6e8ff;
  box-shadow: 0 0 24px #a783dc26;
}
.surprise-button:hover, .replay-button:hover { background: #34274e; }
.message-card, .wish-card {
  background: rgba(24, 25, 53, .82);
  border-color: #c2a4e548;
  box-shadow: 0 18px 65px #02030b55;
}
.message-card h2, .wish-card h3 { color: #f4e8ff; }
.message-card p, .wish-card p { color: #c7b9d9; }
.quote-mark { color: #d4aeff; }
.message-card:before, .message-card:after, .wish-card > span, .signature span { color: #ffd27c; }
.signature { color: #e6d2f5; }
.closing-section h2 { color: #fff0e0; }
.message-card h2 em, .closing-section h2 em { color: #e1b9ff; }
footer { border-color: #c8a9ff30; color: #c5b2dc; }
.toast { background: #211d3d; border-color: #c5a5e8; color: #f6e8ff; box-shadow: 0 10px 30px #02030b88; }
.cake-wrap { filter: drop-shadow(0 0 16px #ffd66d99) drop-shadow(0 10px 14px #08091899); }
.cake-candles i:before { box-shadow: 0 0 14px #ffc66e, 0 0 32px #ffc66ecc, 0 0 52px #ffdc91bb; }
.cake-plate { box-shadow: 0 0 26px #fff1a899, 0 0 48px #a8a0ff77; }
@media (max-width: 700px) {
  .bottom-balloons { opacity: .75; }
}
.party-balloons, .night-sparkles, .smiley-stars, .diya-row { position: absolute; inset: 0; pointer-events: none; }
.party-balloons { position: fixed; overflow: hidden; z-index: 0; }
.party-balloons span {
  position: absolute;
  bottom: -14vh;
  left: var(--left);
  font-size: clamp(25px, 4vw, 48px);
  opacity: .8;
  filter: drop-shadow(0 0 12px #d89bff99);
  animation: balloonRise var(--duration) linear var(--delay) infinite;
}
.party-balloons span:nth-child(1) { --left: 3%; --duration: 19s; --delay: -4s; }
.party-balloons span:nth-child(2) { --left: 9%; --duration: 23s; --delay: -16s; }
.party-balloons span:nth-child(3) { --left: 15%; --duration: 17s; --delay: -9s; }
.party-balloons span:nth-child(4) { --left: 21%; --duration: 25s; --delay: -2s; }
.party-balloons span:nth-child(5) { --left: 27%; --duration: 20s; --delay: -13s; }
.party-balloons span:nth-child(6) { --left: 33%; --duration: 22s; --delay: -7s; }
.party-balloons span:nth-child(7) { --left: 39%; --duration: 18s; --delay: -15s; }
.party-balloons span:nth-child(8) { --left: 45%; --duration: 24s; --delay: -5s; }
.party-balloons span:nth-child(9) { --left: 51%; --duration: 19s; --delay: -11s; }
.party-balloons span:nth-child(10) { --left: 57%; --duration: 26s; --delay: -19s; }
.party-balloons span:nth-child(11) { --left: 63%; --duration: 18s; --delay: -3s; }
.party-balloons span:nth-child(12) { --left: 69%; --duration: 23s; --delay: -14s; }
.party-balloons span:nth-child(13) { --left: 75%; --duration: 20s; --delay: -8s; }
.party-balloons span:nth-child(14) { --left: 81%; --duration: 25s; --delay: -17s; }
.party-balloons span:nth-child(15) { --left: 87%; --duration: 18s; --delay: -6s; }
.party-balloons span:nth-child(16) { --left: 93%; --duration: 22s; --delay: -12s; }
.party-balloons span:nth-child(17) { --left: 37%; --duration: 21s; --delay: -10s; }
.party-balloons span:nth-child(18) { --left: 73%; --duration: 24s; --delay: -18s; }
.party-balloons span:nth-child(3n + 1) { filter: hue-rotate(235deg) drop-shadow(0 0 12px #d89bff99); }
.party-balloons span:nth-child(3n + 2) { filter: hue-rotate(145deg) drop-shadow(0 0 12px #89e5ff99); }
.party-balloons span:nth-child(3n) { filter: hue-rotate(300deg) drop-shadow(0 0 12px #ff9ec899); }
@keyframes balloonRise {
  0% { transform: translate3d(0, 0, 0) rotate(-10deg); opacity: 0; }
  10% { opacity: .78; }
  50% { transform: translate3d(15px, -58vh, 0) rotate(9deg); }
  90% { opacity: .72; }
  100% { transform: translate3d(-8px, -118vh, 0) rotate(-8deg); opacity: 0; }
}
.night-sparkles span {
  position: absolute;
  color: #fff2b7;
  font-size: clamp(34px, 6vw, 78px);
  opacity: .72;
  text-shadow: 0 0 9px #fff4b8, 0 0 25px #e3baff, 0 0 50px #9fcfff;
  animation: starPulse 2.4s ease-in-out infinite alternate;
}
.night-sparkles span:nth-child(1) { left: 8%; top: 18%; }
.night-sparkles span:nth-child(2) { left: 28%; top: 47%; font-size: clamp(26px, 4vw, 52px); }
.night-sparkles span:nth-child(3) { left: 82%; top: 21%; }
.night-sparkles span:nth-child(4) { left: 92%; top: 56%; font-size: clamp(28px, 5vw, 62px); }
.night-sparkles span:nth-child(5) { left: 66%; top: 78%; }
.night-sparkles span:nth-child(6) { left: 18%; top: 82%; font-size: clamp(25px, 4vw, 52px); }
.night-sparkles span:nth-child(n + 7) { display: none; }
@keyframes starPulse { to { transform: scale(1.25) rotate(16deg); opacity: 1; } }
.smiley-stars span {
  position: absolute;
  left: var(--left);
  top: var(--top);
  font-size: clamp(17px, 2.6vw, 34px);
  opacity: .28;
  filter: drop-shadow(0 0 12px #ffd878);
  animation: smileyFloat 5s ease-in-out infinite alternate;
}
.smiley-stars span:nth-child(1) { --left: 4%; --top: 42%; }
.smiley-stars span:nth-child(2) { --left: 13%; --top: 67%; }
.smiley-stars span:nth-child(3) { --left: 24%; --top: 12%; }
.smiley-stars span:nth-child(4) { --left: 35%; --top: 78%; }
.smiley-stars span:nth-child(5) { --left: 44%; --top: 24%; }
.smiley-stars span:nth-child(6) { --left: 56%; --top: 62%; }
.smiley-stars span:nth-child(7) { --left: 67%; --top: 10%; }
.smiley-stars span:nth-child(8) { --left: 76%; --top: 48%; }
.smiley-stars span:nth-child(9) { --left: 88%; --top: 72%; }
.smiley-stars span:nth-child(10) { --left: 96%; --top: 31%; }
.smiley-stars span:nth-child(11) { --left: 8%; --top: 8%; }
.smiley-stars span:nth-child(12) { --left: 19%; --top: 54%; }
.smiley-stars span:nth-child(13) { --left: 31%; --top: 35%; }
.smiley-stars span:nth-child(14) { --left: 40%; --top: 88%; }
.smiley-stars span:nth-child(15) { --left: 51%; --top: 13%; }
.smiley-stars span:nth-child(16) { --left: 63%; --top: 42%; }
.smiley-stars span:nth-child(17) { --left: 79%; --top: 88%; }
.smiley-stars span:nth-child(18) { --left: 92%; --top: 14%; }
@keyframes smileyFloat { to { transform: translateY(-10px) rotate(9deg); opacity: .48; } }
.diya-row {
  position: fixed;
  inset: auto 0 5px;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  align-items: end;
}
.diya-row span {
  font-size: clamp(23px, 3.5vw, 39px);
  filter: drop-shadow(0 0 9px #ffb43e) drop-shadow(0 0 22px #ff7b2d99);
  animation: diyaFlicker 1.1s ease-in-out infinite alternate;
}
.diya-row span:nth-child(even) { animation-delay: -.55s; }
@keyframes diyaFlicker { to { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 0 14px #ffe26e) drop-shadow(0 0 30px #ff792dcc); } }
.always-smile {
  margin: 18px auto !important;
  color: #ffe28c !important;
  font: 700 clamp(24px, 4vw, 38px)/1.2 "DM Sans", sans-serif !important;
  letter-spacing: .04em;
  text-shadow: 0 0 12px #ffcc6966, 0 0 30px #ed96ff55;
}
.fireworks { z-index: 14; }
.burst { width: 6px; height: 6px; box-shadow: 0 0 10px currentColor, 0 0 22px currentColor; }
@media (max-width: 700px) {
  .party-balloons span { font-size: 27px; }
  .night-sparkles span:nth-child(2), .night-sparkles span:nth-child(4) { display: none; }
  .smiley-stars span { font-size: 18px; }
  .diya-row { bottom: 2px; }
  .diya-row span { font-size: 24px; }
}

.surprise-button {
  position: relative;
  border-color: #ffe29c;
  color: #fff4d3;
  background: linear-gradient(120deg, #45315f, #725083, #45315f);
  background-size: 200% 100%;
  box-shadow: 0 0 12px #ffcb7188, 0 0 28px #d89aff77, inset 0 0 14px #fff5cf24;
  text-decoration: none;
  animation: buttonGlow 2.2s ease-in-out infinite alternate;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.surprise-button:hover, .surprise-button:focus-visible {
  color: #fff;
  background-position: 100% 0;
  outline: 2px solid #ffe8b1;
  outline-offset: 4px;
  box-shadow: 0 0 18px #ffcb71bb, 0 0 42px #d89affaa;
}
@keyframes buttonGlow {
  to { box-shadow: 0 0 18px #ffcb71bb, 0 0 42px #d89aff99, inset 0 0 16px #fff5cf35; }
}
.birthday-note-screen { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; }
.birthday-note-screen.hidden { display: none; }
.birthday-note-page {
  width: min(780px, calc(100% - 36px));
  min-height: 100vh;
  margin: auto;
  padding: 36px 0 90px;
  position: relative;
  z-index: 1;
}
.note-back {
  display: inline-block;
  color: #e4cff7;
  font-size: 13px;
  text-decoration: none;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.note-back span { margin-right: 8px; color: #ffdb8a; font-size: 1.35em; vertical-align: -1px; }
.note-back:hover { color: #ffe29c; }
.birthday-note-card {
  position: relative;
  margin: clamp(28px, 8vh, 80px) auto 30px;
  padding: clamp(34px, 7vw, 68px);
  text-align: center;
  background: rgba(24, 25, 53, .9);
  border: 1px solid #d3b2f277;
  border-radius: 12px;
  box-shadow: 0 0 28px #aa82db2b, 0 25px 90px #02030b88;
}
.note-card-star { color: #ffdb8a; font-size: 32px; text-shadow: 0 0 22px #ffdf8a; }
.birthday-note-card .section-kicker { margin: 18px 0; }
.birthday-note-card h1 { color: #fff4e2; font: 500 clamp(42px, 8vw, 68px)/1.15 "Playfair Display", serif; margin: 12px 0 18px; }
.birthday-note-card > p:not(.section-kicker) { color: #d4c6e3; font-size: 15px; line-height: 1.95; }
.birthday-note-card .always-smile { margin: 26px 0 !important; }
.birthday-note-card .note-signoff { margin-top: 34px; color: #ffe29c; font-size: 13px; letter-spacing: .12em; line-height: 2; }
.birthday-note-card .note-signoff strong { color: #fff0c9; font-size: clamp(15px, 3vw, 19px); text-shadow: 0 0 16px #ffce7a66; }
.note-stars span {
  position: absolute;
  color: #fff2b7;
  font-size: clamp(30px, 6vw, 66px);
  text-shadow: 0 0 12px #fff4b8, 0 0 35px #c49bff;
  animation: starPulse 2.6s ease-in-out infinite alternate;
}
.note-stars span:nth-child(1) { left: 9%; top: 18%; }
.note-stars span:nth-child(2) { right: 12%; top: 32%; }
.note-stars span:nth-child(3) { left: 18%; bottom: 20%; }
.note-stars span:nth-child(4) { right: 20%; bottom: 12%; }
.note-diyas {
  position: fixed;
  bottom: 4px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: clamp(24px, 4vw, 40px);
  filter: drop-shadow(0 0 14px #ffad43);
}
@media (prefers-reduced-motion: reduce) {
  .surprise-button { animation: none; }
}

.envelope-button {
  filter: drop-shadow(0 0 16px #c99affaa) drop-shadow(0 22px 28px #040617cc);
  transition: transform .32s ease, filter .32s ease;
}
.envelope-button:hover,
.envelope-button:focus-visible {
  transform: scale(1.09) translateY(-5px);
  filter: drop-shadow(0 0 24px #e6c2ff) drop-shadow(0 0 48px #a276ffbb) drop-shadow(0 24px 28px #040617cc);
  outline: none;
}
.envelope-button:focus-visible .envelope-back {
  box-shadow: 0 0 22px #ffe4b7aa, inset 0 0 16px #fff8;
}
.envelope-glow {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse, #dbaaff55 0%, #b586ff22 48%, transparent 72%);
  filter: blur(13px);
  opacity: .7;
  animation: envelopeGlow 2s ease-in-out infinite alternate;
}
@keyframes envelopeGlow { to { opacity: 1; transform: scale(1.13); } }
.tap-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 2px solid #ffe29c;
  border-radius: 5px;
  color: #fff0c9;
  font-size: clamp(13px, 2.3vw, 17px);
  font-weight: 800;
  letter-spacing: .2em;
  background: rgba(30, 23, 55, .55);
  box-shadow: 0 0 12px #ffcb7188, inset 0 0 12px #d89aff33;
  text-shadow: 0 0 8px #ffe29c, 0 0 20px #d89affcc, 0 0 36px #9f7cff99;
  animation: hintGlow 1.8s ease-in-out infinite alternate;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.tap-hint:hover, .tap-hint:focus-visible {
  border-color: #fff6c9;
  box-shadow: 0 0 18px #ffe29c, 0 0 38px #d89affcc, inset 0 0 18px #ffe29c44;
  transform: scale(1.04);
  outline: none;
}
.tap-hint span { color: #ffe29c; font-size: 1.3em; text-shadow: 0 0 12px #ffe29c; }
@keyframes hintGlow { to { text-shadow: 0 0 12px #ffe29c, 0 0 28px #d89aff, 0 0 46px #9f7cffcc; } }
@media (prefers-reduced-motion: reduce) {
  .envelope-glow, .tap-hint { animation: none; }
}

/* Touch and safe-area support for current iOS Safari and Android Chrome. */
html { -webkit-text-size-adjust: 100%; }
body, button { -webkit-tap-highlight-color: transparent; }
button, .surprise-button { touch-action: manipulation; }
.envelope-screen {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: max(48px, calc(48px + env(safe-area-inset-top)));
  padding-bottom: max(32px, calc(32px + env(safe-area-inset-bottom)));
}
.birthday-note-screen { min-height: 100vh; min-height: 100svh; }
.birthday-note-page {
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}
.diya-row { bottom: max(3px, env(safe-area-inset-bottom)); }
.surprise-button, .replay-button, .note-back { min-height: 48px; }
.surprise-button, .replay-button { justify-content: center; }
.surprise-button:active, .replay-button:active, .note-back:active { transform: scale(.98); }
.note-back:focus-visible, .replay-button:focus-visible {
  outline: 2px solid #ffe8b1;
  outline-offset: 4px;
}
@media (max-width: 430px) {
  .page-shell { width: calc(100% - 28px); }
  .hero { padding-inline: 2px; }
  .surprise-button {
    width: min(100%, 360px);
    padding: 13px 14px;
    gap: 12px;
    line-height: 1.45;
    letter-spacing: .07em;
  }
  .birthday-note-page { width: calc(100% - 28px); }
  .birthday-note-card { padding: 30px 22px; }
  .birthday-note-card > p:not(.section-kicker) { font-size: 14px; }
  .birthday-note-card .note-signoff { letter-spacing: .07em; }
  .party-balloons { opacity: .62; }
  .diya-row span { font-size: clamp(21px, 7vw, 28px); }
}
@media (max-width: 350px) {
  .page-shell { width: calc(100% - 22px); }
  .birthday-note-page { width: calc(100% - 24px); }
  .birthday-note-card { padding: 26px 16px; }
  .brand { font-size: 7px; }
  .topbar-note { font-size: 8px; }
  .party-balloons span:nth-child(even) { display: none; }
}
@media (max-height: 650px) {
  .envelope-screen { justify-content: flex-start; }
  .hero { min-height: 600px; }
}

/* Keep the decorative backdrop visually steady on touch devices. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .sky { isolation: isolate; }
  .hang,
  .stars,
  .stars::after,
  .bottom-balloons span,
  .party-balloons span,
  .night-sparkles span,
  .note-stars span,
  .smiley-stars span,
  .diya-row span {
    animation: none !important;
  }
  .hang { transform: none; }
  .stars { opacity: .7; }
  .stars::after { opacity: .8; }
  .bottom-balloons span { translate: none; }
  .bottom-balloons span:nth-child(2n),
  .bottom-balloons span:nth-child(3n) { transform: none; }
  .party-balloons span {
    bottom: auto;
    top: 17%;
    opacity: .55;
    transform: none;
  }
  .party-balloons span:nth-child(even) { top: 68%; }
  .night-sparkles span,
  .note-stars span,
  .smiley-stars span { transform: none; }
  .diya-row span { transform: none; }
}

/* Reduce clutter and sticky hover states on compact touch screens. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .party-balloons,
  .bottom-balloons { display: none; }
  .hang { display: none; }
  .h1, .h4, .h7 { display: block; }
  .night-sparkles span { display: none; }
  .night-sparkles span:nth-child(1),
  .night-sparkles span:nth-child(3) { display: block; font-size: 30px; opacity: .5; }
  .smiley-stars span { display: none; }
  .smiley-stars span:nth-child(1),
  .smiley-stars span:nth-child(7),
  .smiley-stars span:nth-child(10),
  .smiley-stars span:nth-child(18) { display: block; opacity: .2; font-size: 17px; }
  .diya-row span:nth-child(n + 4) { display: none; }
  .note-stars span:nth-child(n + 3) { display: none; }
  .diya-row { bottom: max(5px, env(safe-area-inset-bottom)); }
  .envelope-screen {
    padding: max(28px, calc(28px + env(safe-area-inset-top))) 16px
      max(24px, calc(24px + env(safe-area-inset-bottom)));
  }
  .intro-copy h1 { font-size: clamp(36px, 10vw, 50px); }
  .envelope-button { width: min(300px, 80vw); height: 190px; }
  .tap-hint {
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    gap: 7px;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 1.45;
  }
  .tap-hint span { flex: 0 0 auto; }
  .hero { min-height: 620px; padding: 38px 2px 60px; }
  .envelope-button:hover,
  .envelope-button:focus-visible,
  .wish-card:hover,
  .surprise-button:hover,
  .replay-button:hover {
    transform: none;
  }
  .envelope-button:hover { filter: drop-shadow(0 0 16px #c99affaa) drop-shadow(0 22px 28px #040617cc); }
  .surprise-button:hover, .replay-button:hover { background-position: 0 0; }
}