:root { --ink:#3a3037; --muted:#8f7d87; --pink:#ee9ab2; --rose:#ca6b88; --pale:#fff0f3; --paper:#fffdfc; --line:#f0dce2; --yellow:#ffd477; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--ink); background:#fff7f8; font-family:"DM Sans",system-ui,sans-serif; overflow-x:hidden; }
body::before { position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 50% 10%, #fff 0, #fff9fa 50%, #fde8ee 100%); content:""; }
button:focus-visible { outline:3px solid var(--rose); outline-offset:4px; }
.birthday-shell { width:min(100% - 30px, 720px); min-height:100vh; margin:0 auto; padding:26px 0 22px; }
.card-header { display:flex; align-items:center; justify-content:center; gap:13px; color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; } .card-header__heart { color:var(--pink); font-size:17px; }
.hero { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:720px; padding:30px 0 60px; text-align:center; animation:rise .8s ease both; }
.kicker { margin:8px 0 14px; color:var(--rose); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; } h1,h2 { margin:0; color:var(--ink); font-family:"Playfair Display",Georgia,serif; font-weight:700; letter-spacing:-.05em; line-height:.98; } h1 { font-size:clamp(3.55rem,10vw,6.2rem); } h1 em,h2 em { color:var(--rose); font-style:italic; }
.hero__hint { max-width:330px; margin:24px 0 24px; color:var(--muted); font-size:13px; line-height:1.65; }
.open-button { border:0; border-radius:7px; padding:14px 20px; color:#fff; background:var(--pink); box-shadow:0 9px 19px rgba(202,107,136,.22); font-size:12px; font-weight:700; transition:transform .2s ease, background .2s ease; } .open-button span { margin-left:7px; font-size:16px; } .open-button:hover { background:#e286a3; transform:translateY(-2px); }
.cake { position:relative; width:205px; height:192px; margin:12px auto 0; } .cake__plate { position:absolute; bottom:8px; left:18px; width:169px; height:21px; border-radius:50%; background:#f4ccd6; box-shadow:0 5px 0 #e9b3c2; } .cake__base { position:absolute; bottom:28px; left:37px; width:132px; height:67px; border:2px solid #dc86a1; border-radius:9px 9px 24px 24px; background:repeating-linear-gradient(90deg,#f4b3c4 0 22px,#f9cad6 22px 44px); box-shadow:0 9px 0 rgba(202,107,136,.12); } .cake__cream { position:absolute; z-index:2; bottom:77px; left:29px; width:148px; height:32px; border-radius:50%; background:#fff; box-shadow:0 4px 0 #efb0c2; } .cake__top { position:absolute; z-index:3; bottom:92px; left:42px; width:122px; height:37px; border:2px solid #df8ba4; border-radius:50%; background:#f6bccb; } .cake__top::after { position:absolute; top:9px; left:24px; width:75px; height:7px; border-radius:50%; background:#fbe0e6; content:""; } .cake__candles { position:absolute; z-index:4; bottom:125px; left:58px; display:flex; gap:24px; } .cake__candles i { display:block; width:8px; height:35px; border-radius:4px 4px 2px 2px; background:repeating-linear-gradient(135deg,#fff 0 5px,#ee9ab2 5px 10px); } .cake__flames { position:absolute; z-index:5; bottom:157px; left:56px; display:flex; gap:24px; } .cake__flames i { display:block; width:12px; height:17px; border-radius:60% 40% 60% 40%; background:var(--yellow); box-shadow:0 0 14px rgba(255,212,119,.8); animation:flicker 1.2s ease-in-out infinite alternate; } .cake__flames i:nth-child(2){animation-delay:-.4s}.cake__flames i:nth-child(3){animation-delay:-.8s}
.letter { position:relative; margin:0 auto 55px; padding:clamp(28px,6vw,58px) clamp(21px,7vw,66px); border:1px solid var(--line); border-radius:14px; background:rgba(255,253,252,.92); box-shadow:0 20px 50px rgba(170,104,125,.12); animation:rise .6s ease both; } .letter::before { position:absolute; inset:10px; border:1px dashed #efcfd8; border-radius:8px; pointer-events:none; content:""; } .letter > * { position:relative; z-index:1; } .letter__top { display:flex; justify-content:space-between; color:var(--rose); font-family:"Playfair Display",Georgia,serif; font-size:17px; font-style:italic; } .letter__top span:last-child { color:var(--pink); font-family:"DM Sans",sans-serif; font-size:20px; font-style:normal; } h2 { margin:34px 0 30px; font-size:clamp(2.9rem,8vw,5.2rem); } .letter__body { color:#665963; font-size:14px; line-height:1.85; } .letter__body p { margin:0 0 20px; } .letter__signoff { margin-top:34px; color:var(--rose); font-family:"Playfair Display",Georgia,serif; font-size:18px; font-style:italic; line-height:1.4; } .letter__signoff strong { font-size:15px; font-weight:600; }
.birthday-footer { display:flex; justify-content:space-between; align-items:center; color:#b69ea7; font-size:10px; letter-spacing:.1em; text-transform:uppercase; } .birthday-footer span:nth-child(2) { color:var(--pink); font-size:18px; }
.sparkles { position:fixed; inset:0; z-index:-1; pointer-events:none; color:rgba(238,154,178,.55); } .sparkles span { position:absolute; animation:float 9s linear infinite; } .sparkles span:nth-child(1){left:12%;bottom:-20px}.sparkles span:nth-child(2){left:27%;bottom:-30px;animation-delay:-4s}.sparkles span:nth-child(3){left:51%;bottom:-25px;animation-delay:-7s}.sparkles span:nth-child(4){left:71%;bottom:-35px;animation-delay:-2s}.sparkles span:nth-child(5){left:87%;bottom:-20px;animation-delay:-6s}.sparkles span:nth-child(6){left:40%;bottom:-20px;animation-delay:-1s}
.confetti { position:fixed; inset:0; z-index:10; pointer-events:none; } .confetti-piece { position:absolute; top:50%; left:50%; color:var(--pink); font-size:20px; animation:burst 1.3s ease-out forwards; }
@keyframes rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } @keyframes flicker { from{transform:scale(.88) rotate(-4deg)} to{transform:scale(1.08) rotate(4deg)} } @keyframes float { 0%{opacity:0;transform:translateY(0) rotate(0)} 12%{opacity:1} 88%{opacity:.65} 100%{opacity:0;transform:translateY(-105vh) rotate(180deg)} } @keyframes burst { 0%{opacity:1;transform:translate(-50%,-50%) scale(.7)} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1.2)} }
@media (max-width:520px) { .birthday-shell { width:min(100% - 25px, 470px); padding-top:19px; } .hero { min-height:670px; padding-top:18px; } .cake { transform:scale(.88); margin-top:0; } .letter { padding:30px 23px; } .letter__body { font-size:13.5px; line-height:1.78; } .birthday-footer { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }