/* An open composition: the copy and 3D heart share one atmosphere, not a card. */
.app{display:block;padding:0;background:radial-gradient(circle at 72% 34%,rgba(255,255,255,.94) 0 5%,transparent 31%),linear-gradient(145deg,#fffafb 0,#f9e9ed 56%,#edc4cf 100%)}
.card{position:absolute;z-index:4;left:max(6vw,env(safe-area-inset-left));bottom:max(7vh,calc(env(safe-area-inset-bottom) + 2rem));width:min(40rem,47vw);padding:0;filter:none}
.heart-scene{opacity:.62;filter:drop-shadow(0 18px 38px rgba(133,30,64,.18))}.aurora{opacity:.32;mix-blend-mode:soft-light}.eyebrow{letter-spacing:.18em}.title-trigger{padding-bottom:.8rem}h1{max-width:12ch;font-size:clamp(3.2rem,6vw,6.4rem);line-height:.86}.lede{margin-bottom:1.25rem;color:#72505c}.touch-controls{margin-bottom:1.6rem}.recipient-signature{width:min(100%,34rem);margin:0;font-size:1.3rem}
.romance-trace{position:fixed;z-index:1;inset:0;overflow:hidden;pointer-events:none}.romance-trace::before{content:"";position:absolute;right:-7vw;top:12%;width:min(58vw,48rem);aspect-ratio:1;border:1px solid rgba(158,21,62,.12);border-radius:48% 52% 61% 39%/43% 47% 53% 57%;transform:rotate(-14deg);animation:romanceOrbit 14s ease-in-out infinite alternate}.romance-trace i{position:absolute;top:-2rem;width:.42rem;height:.7rem;border-radius:80% 15% 75% 20%;background:rgba(190,49,91,.32);filter:blur(.15px);animation:petalDrift 11s linear infinite}.romance-trace i:nth-child(1){left:18%;animation-delay:-3s}.romance-trace i:nth-child(2){left:58%;width:.3rem;height:.55rem;animation-delay:-8s;animation-duration:14s}.romance-trace i:nth-child(3){left:84%;animation-delay:-5s;animation-duration:17s}
.cosmic-portal,.fireworks-portal{will-change:opacity,transform;opacity:0;transform:scale(1.035);pointer-events:none;transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}.cosmic-portal{z-index:44}.fireworks-portal{position:fixed;z-index:45;inset:0;overflow:hidden;background:radial-gradient(circle at var(--firework-x,75%) var(--firework-y,75%),rgba(255,210,225,.3),transparent 28%),linear-gradient(145deg,#210916,#09030a 72%)}.fireworks-portal::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--firework-x,75%) var(--firework-y,75%),rgba(255,247,250,.56),transparent 18%);opacity:0;transform:scale(.86);transition:opacity .85s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}.fireworks-portal i{position:absolute;left:var(--firework-x,75%);top:var(--firework-y,75%);width:2px;height:2px;border-radius:50%;background:#ffe8ef;box-shadow:0 0 8px rgba(255,126,173,.7);opacity:0}.fireworks-portal i:nth-child(1){--spark-x:5rem;--spark-y:-4rem}.fireworks-portal i:nth-child(2){--spark-x:-5rem;--spark-y:-3rem}.fireworks-portal i:nth-child(3){--spark-x:6rem;--spark-y:3rem}.fireworks-portal i:nth-child(4){--spark-x:-4rem;--spark-y:5rem}.fireworks-portal i:nth-child(5){--spark-x:1rem;--spark-y:-6rem}.cosmic-departure .cosmic-portal,.fireworks-departure .fireworks-portal{opacity:1;transform:scale(1)}.fireworks-departure .fireworks-portal::before{opacity:1;transform:scale(1)}.fireworks-departure .fireworks-portal i{animation:departureSpark 1s ease-out forwards}.cosmic-departure .card,.fireworks-departure .card{opacity:0;transform:translateY(-.35rem) scale(.99)}.cosmic-departure .heart-scene,.fireworks-departure .heart-scene{opacity:0;transform:scale(1.018)}
@keyframes romanceOrbit{to{transform:rotate(-4deg) scale(1.04)}}@keyframes petalDrift{to{transform:translate(9vw,110vh) rotate(420deg);opacity:0}}@keyframes departureSpark{20%{opacity:1}to{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.25)}}
@media(max-width:47.99rem){.app{background:radial-gradient(circle at 64% 22%,rgba(255,255,255,.9),transparent 34%),linear-gradient(160deg,#fffafb,#f7e4e9 62%,#ebbecb)}.card{left:max(1.5rem,env(safe-area-inset-left));right:max(1.5rem,env(safe-area-inset-right));bottom:max(5vh,calc(env(safe-area-inset-bottom) + 1rem));width:auto}.heart-scene{opacity:.46}h1{max-width:11ch;font-size:clamp(2.55rem,12vw,4.2rem)}.lede{max-width:29ch}.touch-controls{margin-bottom:1.35rem}.romance-trace::before{right:-34vw;top:4%;width:108vw}.recipient-signature{font-size:1.12rem}}
@media(max-height:43.75rem) and (max-width:30rem){.card{bottom:max(1rem,env(safe-area-inset-bottom))}.touch-controls{margin-bottom:.85rem}h1{font-size:clamp(2.05rem,9.5vw,2.8rem)}.lede{margin-bottom:.65rem;font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.romance-trace i,.romance-trace::before{animation:none}.cosmic-portal,.fireworks-portal{transition-duration:.16s}.fireworks-departure .fireworks-portal i{animation:none}}
.experience-overlay{position:fixed;z-index:80;inset:0;background:#02030b;opacity:1;transition:opacity .45s ease}.experience-overlay[hidden]{display:none}.experience-overlay iframe{display:block;width:100%;height:100%;border:0;background:#02030b}.experience-close{position:absolute;z-index:3;top:max(.75rem,env(safe-area-inset-top));right:max(.75rem,env(safe-area-inset-right));display:grid;place-items:center;width:48px;min-height:48px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(5,4,15,.36);color:#fff;font:300 1.5rem/1 system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(12px)}.experience-close:focus-visible{outline:3px solid #ff9cbd;outline-offset:3px}.experience-open{overflow:hidden}@media(prefers-reduced-motion:reduce){.experience-overlay{transition:none}}