:root { --ink:#5a3450; --rose:#f470a0; --pink:#ffe4ee; --cream:#fffaf5; --gold:#f6b84d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; overflow-x:hidden; font-family:"DM Sans",sans-serif; color:var(--ink); background:radial-gradient(circle at 15% 15%,#fff7c8 0 4%,transparent 18%),radial-gradient(circle at 80% 85%,#ffd2e1 0 6%,transparent 24%),linear-gradient(135deg,#ffe9f0,#fbd5e3 55%,#ffddec); }
.card-shell { position:relative; isolation:isolate; width:min(94vw,900px); height:min(780px,92vh); margin:24px auto; overflow:hidden; border:8px solid rgba(255,255,255,.7); border-radius:30px; box-shadow:0 22px 60px #9f547644; background:linear-gradient(135deg,#fffdf8,#ffeaf1); }
.page { height:100%; min-height:0; padding:clamp(34px,7vw,80px); display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; position:relative; z-index:1; animation:appear .65s ease both; }
.page[hidden] { display:none; }
.page::before,.page::after { content:""; position:absolute; width:170px; aspect-ratio:1; border-radius:50%; background:#ffd1e155; filter:blur(1px); z-index:-1; }.page::before{top:-70px;left:-65px}.page::after{right:-80px;bottom:-75px;background:#ffebae88}
.ribbon { position:absolute; top:27px; right:-42px; transform:rotate(42deg); width:190px; padding:7px; color:#fff; font-size:12px; letter-spacing:.06em; background:var(--rose); }
.eyebrow { margin:0 0 9px; font-weight:700; font-size:clamp(.7rem,1.5vw,.85rem); letter-spacing:.18em; text-transform:uppercase; color:var(--rose); }
h1,h2 { margin:0; font-size:clamp(2.7rem,7vw,5.7rem); line-height:.9; letter-spacing:-.05em; } h1 span,h2 span { font-family:"Great Vibes",cursive; font-weight:400; font-size:1.18em; letter-spacing:0; color:var(--rose); }
.message { width:min(100%,600px); margin:25px 0 0; font-size:clamp(.94rem,2vw,1.07rem); line-height:1.72; }.signoff{font-weight:700;margin:14px 0 0;color:#ba5277}
button { font:inherit; cursor:pointer; transition:transform .2s,box-shadow .2s; }.next-button { margin-top:29px; border:0; border-radius:999px; padding:13px 19px 13px 24px; color:white; background:var(--rose); font-weight:700; box-shadow:0 8px 18px #d95f8a55; }.next-button span{font-size:1.3em;margin-left:8px}.next-button:hover,.next-button:focus-visible{transform:translateY(-3px);box-shadow:0 12px 22px #d95f8a77}
.cake { position:relative; width:124px; height:91px; margin:25px 0 0; border-radius:13px 13px 22px 22px; background:repeating-linear-gradient(90deg,#f9aac1 0 16px,#ffd7e3 16px 30px); box-shadow:inset 0 -13px #e9769d; }.cake::before{content:"";position:absolute;inset:-10px -4px auto;height:21px;border-radius:50%;background:#fff5ed;box-shadow:0 4px #f6b84d}.cake i{position:absolute;width:6px;height:29px;background:#fff4b8;top:-34px}.cake i:nth-of-type(1){left:29px}.cake i:nth-of-type(2){left:58px}.cake i:nth-of-type(3){left:88px}.flame{position:absolute;top:-48px;width:10px;height:16px;border-radius:100% 0 100% 100%;background:#ff9d52;transform:rotate(45deg)}.flame:nth-child(1){left:27px}.flame:nth-child(2){left:56px}.flame:nth-child(3){left:86px}
.photos { width:min(100%,650px); display:grid; grid-template-columns:1fr 50px 1fr; align-items:center; gap:clamp(7px,2vw,18px); margin:29px 0 0; }.photo{margin:0}.photo img{display:block;width:100%;aspect-ratio:1/1.12;object-fit:cover;padding:8px;background:white;box-shadow:0 10px 22px #a95b7b35}.first img{transform:rotate(-3deg)}.latest img{transform:rotate(3deg)}figcaption{margin-top:13px;font-size:clamp(.7rem,1.7vw,.88rem);font-weight:700;color:#a45c7b}.memory-line{height:3px;background:#efafc6;position:relative}.memory-line span{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:5px;background:#fff0f5;color:var(--rose)}.back-button{margin-top:27px;border:0;background:transparent;color:#b14f75;font-weight:700}.back-button:hover{text-decoration:underline}.music-button{position:fixed;right:18px;bottom:18px;z-index:4;border:1px solid #ffffffaa;border-radius:999px;padding:10px 14px;background:#fffafbdd;color:#9d4b6b;box-shadow:0 5px 18px #88405c30}.music-button span{font-size:1.25rem;margin-right:6px}.music-button em{font-style:normal;font-weight:700;font-size:.8rem}
.confetti::before,.confetti::after{content:"✦  ·  ✧  ·  ✦  ·  ✧  ·  ✦";position:absolute;width:100%;top:25px;left:0;color:#f3ae41aa;font-size:25px;letter-spacing:18px;white-space:nowrap;transform:rotate(-7deg)}.confetti::after{top:auto;bottom:15px;color:#ee8bb1aa;transform:rotate(7deg)}
@keyframes appear {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:520px){.card-shell{width:100vw;height:100svh;margin:0;border:0;border-radius:0}.page{height:100%;min-height:0;padding:58px 25px 42px}.photos{grid-template-columns:1fr 28px 1fr;gap:5px}.photo img{padding:5px}.memory-line span{font-size:.8rem}.ribbon{top:19px;right:-55px}.message{line-height:1.6}.music-button{right:12px;bottom:12px}}
@media (max-height:650px) and (min-width:650px){.card-shell{min-height:570px}.page{min-height:554px;padding:28px}.cake{margin-top:15px;transform:scale(.8)}.message{margin-top:14px}.next-button{margin-top:18px}.photos{margin-top:15px;width:min(100%,490px)}.page-memories .message{margin-top:13px}}

/* Closed greeting-card cover */
.card-shell{perspective:1800px}.card-cover,.page-message.turning{position:absolute;inset:0;transform-origin:left center;box-shadow:12px 0 24px #71334855;transition:transform 1.15s cubic-bezier(.65,.03,.22,.98),visibility 0s linear 1.15s;backface-visibility:hidden}.card-cover{z-index:5;background:linear-gradient(135deg,#f66f9d,#eb8ab0 50%,#df6592);color:#fff9f5}.cover-inside{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px;background:radial-gradient(circle at 20% 16%,#fff2aa44 0 4%,transparent 20%),radial-gradient(circle at 87% 84%,#fff0f544 0 5%,transparent 22%)}.cover-inside::before{content:"";position:absolute;inset:22px;border:1px solid #fff8;border-radius:16px}.cover-eyebrow{position:relative;margin:0 0 13px;font-size:clamp(.75rem,1.7vw,.95rem);font-weight:700;letter-spacing:.17em;text-transform:uppercase}.cover-inside h1{position:relative;font-family:"Great Vibes",cursive;font-size:clamp(4.6rem,13vw,8.7rem);font-weight:400;letter-spacing:0;line-height:.85;text-shadow:0 3px 0 #b54d7344}.cover-flower{position:relative;margin:28px 0;color:#ffed9f;font-size:3.5rem;text-shadow:0 2px 0 #b65273}.cover-hint{position:relative;margin:0;font-size:.86rem;font-weight:700;letter-spacing:.08em}.card-shell.open .card-cover,.page-message.turning{transform:rotateY(-165deg);visibility:hidden}.card-shell.open .page-message{animation:contentAppear .5s .38s ease both}.page-message.turning{z-index:3;background:linear-gradient(135deg,#fffdf8,#ffeaf1);animation:none}@keyframes contentAppear{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* Staggered greeting and memory reveals */
.page.revealing>*{animation:riseIn .56s ease both}.page.revealing>*:nth-child(2){animation-delay:.08s}.page.revealing>*:nth-child(3){animation-delay:.16s}.page.revealing>*:nth-child(4){animation-delay:.24s}.page.revealing>*:nth-child(5){animation-delay:.32s}@keyframes riseIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

/* The message page uses the cover's same physical fold to reveal memories. */
.page-message{transform-origin:left center;transition:transform 1.15s cubic-bezier(.65,.03,.22,.98),visibility 0s linear 1.15s;backface-visibility:hidden}.page-message.turning{position:absolute;z-index:3;inset:0;transform:rotateY(-165deg);box-shadow:12px 0 24px #71334855;visibility:hidden;animation:none}

/* The birthday message is the front leaf of the second greeting card. */
.page-message.turning{background:linear-gradient(135deg,#fffdf8,#ffeaf1);transform-style:preserve-3d}.page-memories{z-index:1}

/* During the fold, no entrance animation may override the cover transform. */
.card-shell.open .page-message.turning{animation:none}

/* Turning back folds the current memory leaf from its right-hand hinge. */
.page-memories{transform-origin:right center;transition:transform 1.15s cubic-bezier(.65,.03,.22,.98),visibility 0s linear 1.15s;backface-visibility:hidden}.page-memories.turning-back{position:absolute;z-index:3;inset:0;transform:rotateY(165deg);box-shadow:-12px 0 24px #71334855;visibility:hidden;animation:none}

/* Returning to the cover closes the front leaf over the message. */
.card-shell.closing .card-cover{visibility:visible;transition:transform 1.15s cubic-bezier(.65,.03,.22,.98),visibility 0s}