@font-face{font-family:Apricots;src:url('assets/Apricots.woff2')}@font-face{font-family:Best;src:url('assets/Best_Light_Script.woff2')}@font-face{font-family:Josefin;src:url('assets/JosefinSans-Regular.woff2')}@font-face{font-family:Scripter;src:url('assets/Scripter-Regular14454434880295605532.woff2')}
:root{color-scheme:light;--purple:#8850b9;--aqua:#83f5f8}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:#d6c5f2;color:var(--purple);font-family:Josefin,sans-serif;overflow-x:hidden}.ocean{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(110deg,#a5edf1b0,#eed3f188),url('assets/art-0.png') center/auto 115%;}.ocean:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 20%,#b7cbec55 90%)}.light-rays{position:absolute;inset:-60%;background:repeating-conic-gradient(from 160deg at 50% 0%,transparent 0deg 10deg,#fff5 13deg,transparent 20deg 28deg);filter:blur(20px);animation:rays 18s ease-in-out infinite alternate}.invitation{position:relative;width:min(100vw,56.25svh);min-width:320px;aspect-ratio:9/16;isolation:isolate;background:url('assets/art-0.png') center/100% 100%;container-type:inline-size;box-shadow:0 0 100px #9b76c23b;animation:arrive 1.2s ease-out both}.paper{position:absolute;inset:32.8% 1.8% 9.7%;background:url('assets/art-1.png') center/100% 100%;z-index:-1}.top-friends{position:absolute;inset:0;pointer-events:none}.friend{position:absolute;object-fit:contain;animation:float 5s ease-in-out infinite;will-change:transform}.turtle{width:32%;left:5.5%;top:5.7%;animation-delay:-1.5s}.mermaid{width:38%;left:30%;top:1.4%;z-index:2;animation-duration:6s}.whale{width:43%;right:0;top:7.6%;--flip:-1;animation-delay:-3s}.ribbon{position:absolute;top:22.9%;left:0;width:100%;height:18%;background:url('assets/art-2.png') center/100% 100%;z-index:3;pointer-events:none}.page{position:absolute;inset:0;z-index:4}.page[hidden]{display:none}h1{position:absolute;top:24.7%;left:0;width:100%;margin:0;text-align:center;font-family:Apricots,cursive;font-weight:400;font-size:17cqw;line-height:1.15;color:#72f8fa;-webkit-text-stroke:.7cqw #8c50b5;paint-order:stroke fill;text-shadow:0 2px 1px #aa79d9;animation:shine 5s ease-in-out infinite}.age{position:absolute;top:34.2%;width:100%;margin:0;text-align:center;font-family:Best,cursive;font-size:12cqw;line-height:1.2}.message{position:absolute;top:41.1%;width:100%;margin:0;text-align:center;font-size:4.25cqw;line-height:1.25}.details{position:absolute;top:51.8%;left:12.5%;width:73%;height:11.4%;display:flex;justify-content:space-between;gap:13%}.details p{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:43.5%;border:.3cqw solid #e5c3ff;background:var(--aqua);border-radius:4.5cqw;font-family:Scripter,sans-serif;font-size:4.8cqw;line-height:1;text-align:center}.dolphin{width:34%;left:33%;top:46.6%;z-index:5;pointer-events:none;animation-delay:-2s}.actions{position:absolute;top:65.1%;left:13.5%;width:72%;display:flex;justify-content:space-between;align-items:flex-start;gap:4%}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button,a{touch-action:manipulation}.actions a,.actions button,.back{border:0;padding:0;background:none;color:var(--purple);text-decoration:none;text-align:center;font-family:Scripter,sans-serif;font-size:2.6cqw;line-height:1.1;display:flex;align-items:center;flex-direction:column;gap:1cqw;width:28%}.round{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:50%;padding:18%;border:.7cqw solid transparent;background:linear-gradient(#e7c1ff,#e7c1ff) padding-box,linear-gradient(#7bf4ef,#9e71bf) border-box;box-shadow:0 1cqw 4cqw #a383ad26;transition:transform .25s,box-shadow .25s}.round img{width:100%;height:100%;object-fit:contain}.actions a:hover .round,.actions button:hover .round,.back:hover .round{transform:translateY(-5px) rotate(-5deg);box-shadow:0 2cqw 5cqw #9c70b64a}.actions a:focus-visible,.actions button:focus-visible,.back:focus-visible,.tools button:focus-visible{outline:3px solid #8850b9;outline-offset:5px;border-radius:10px}.bottom-friends{position:absolute;inset:0;z-index:2;pointer-events:none}.jellyfish{width:23%;left:0%;bottom:-1%;animation-delay:-2s;animation-duration:6.5s}.octopus{width:35%;left:29%;bottom:-1%;animation-delay:-4s}.little-mermaid{width:32%;right:-1%;bottom:1%;animation-duration:7s}.tools{position:fixed;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));display:flex;gap:8px;z-index:20}.tools button{border:1px solid #ffffffb0;background:#fff9;color:#71439a;backdrop-filter:blur(12px);min-height:44px;min-width:44px;padding:8px 13px;border-radius:30px;box-shadow:0 3px 16px #9165a31a;font-size:20px}.tools span{font:14px Josefin,sans-serif}.tools button:hover{background:#fff}.tools button[aria-pressed=true]{background:#e6d1ff}.seaweed{position:absolute;bottom:-30px;width:17vw;max-width:210px;opacity:.65;transform-origin:50% 100%;animation:sway 7s ease-in-out infinite alternate}.seaweed.left{left:3%}.seaweed.right{right:3%;animation-delay:-4s}.bubble{position:absolute;bottom:-100px;left:var(--x);width:var(--size);height:var(--size);border:1px solid #ffffffb0;border-radius:50%;background:radial-gradient(circle at 28% 25%,#ffffffb0,transparent 25%,transparent 65%,#fff5);box-shadow:inset 2px -3px 9px #fff5;animation:rise var(--duration) linear infinite;animation-delay:var(--delay)}h2{position:absolute;top:24.3%;width:100%;margin:0;font:8.6cqw/1 Scripter,sans-serif;color:#76f5fa;-webkit-text-stroke:.45cqw #8850b9;paint-order:stroke fill;text-align:center;transform:rotate(-3deg)}/* Explicit circle dimensions prevent portrait artwork from stretching a bubble. */
.gift-list{position:absolute;top:39%;left:13%;width:74%;display:grid;gap:3cqw}
.gift-row{--delay:.12s;display:grid;grid-template-columns:18cqw minmax(0,1fr);align-items:center;height:18cqw;position:relative;isolation:isolate;animation:gift-arrive .8s cubic-bezier(.16,1,.3,1) var(--delay) both}
.gift-row:nth-child(2){--delay:.28s}.gift-row:nth-child(3){--delay:.44s}
.gift-row>span{width:18cqw;height:18cqw;min-width:0;min-height:0;aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;display:grid;place-items:center;padding:2.3cqw;z-index:1;border:.55cqw solid transparent;background:radial-gradient(circle at 30% 20%,#f8eaff,#e7c2ff 65%) padding-box,linear-gradient(145deg,#91f2ef,#d4b4fa 65%,#b18bd5) border-box;box-shadow:inset 0 .6cqw 1.4cqw #fff8,0 .8cqw 2cqw #a97bc322}
.gift-row>span:after{content:'';position:absolute;top:9%;left:15%;width:25%;height:12%;border-radius:50%;background:#fff8;transform:rotate(-35deg);pointer-events:none}
.gift-row img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;animation:gift-bob 4s ease-in-out var(--delay) infinite;transform-origin:center}
.gift-row p{font:4.5cqw/1.08 Scripter,sans-serif;margin:0 0 0 -3cqw;border:.3cqw solid #e5c9fb;background:linear-gradient(110deg,#f8eaff,#fbf3ff);border-radius:0 8cqw 8cqw 0;padding:1.5cqw 3cqw 1.5cqw 5cqw;height:14cqw;min-width:0;display:flex;flex-direction:column;justify-content:center;box-shadow:0 .7cqw 1.8cqw #ae83c010}
@keyframes gift-arrive{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gift-bob{0%,100%{transform:translateY(.3cqw) rotate(-3deg)}50%{transform:translateY(-.4cqw) rotate(3deg)}}
.back{position:absolute;top:73.3%;left:40%;width:20%;font-size:2.6cqw}.show-gifts .turtle{content:url('assets/art-5.png');top:1%;left:3%;width:28%}.show-gifts .whale{content:url('assets/art-7.png');--flip:1;top:8%;width:37%}.show-gifts .jellyfish{content:url('assets/art-6.png');width:27%;bottom:1%}.show-gifts .octopus{content:url('assets/art-3.png');width:40%}.spark{position:fixed;left:var(--x);top:var(--y);width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff;pointer-events:none;z-index:30;animation:spark .9s ease-out forwards}.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg) scaleX(var(--flip,1))}50%{transform:translateY(-1.4cqw) rotate(2deg) scaleX(var(--flip,1))}}@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%,80%{opacity:.65}100%{transform:translateY(-120vh) translateX(70px);opacity:0}}@keyframes rays{to{transform:rotate(8deg) translateX(3%)}}@keyframes sway{to{transform:rotate(8deg)}}@keyframes shine{50%{filter:drop-shadow(0 0 9px #d6fbff)}}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@media(max-width:700px){.tools{top:auto;bottom:max(10px,env(safe-area-inset-bottom));right:10px;gap:5px}.tools button{min-width:40px;min-height:40px;padding:6px 10px;font-size:18px}.tools span{font-size:12px}.invitation{width:100vw;max-width:56.25svh;min-width:min(100vw,360px)}.seaweed{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.bubble{display:none}}
/* Let the ornamental paper extend beneath the ribbon, as in the original. */
.paper{inset:25% -6% 3%}.age{font-size:10.8cqw;top:34.4%}.details{gap:19%}.details p{width:40.5%;font-size:4.5cqw}.dolphin{width:31%;left:35%}
.invitation{overflow:hidden}
/* A viewport-filling invitation, with a choreographed entrance. */
body{min-height:100svh;min-height:100dvh;overflow:hidden}
.invitation{height:100svh;height:100dvh;width:min(100vw,56.25dvh);min-width:0;aspect-ratio:auto;animation:none}
.intro-wash{position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#e5d1fc,#a9eef2);animation:reveal-ocean 1.7s ease-in-out both}
.top-friends{animation:friends-enter 1.8s cubic-bezier(.16,1,.3,1) .35s both}
.ribbon{animation:ribbon-enter 1.3s cubic-bezier(.16,1,.3,1) 1s both;transform-origin:center}
h1{animation:title-enter 1.2s cubic-bezier(.16,1,.3,1) 1.4s both,shine 5s ease-in-out 2.6s infinite}
.paper{animation:paper-enter 1.4s ease-out .8s both}
.age{animation:copy-enter 1s ease-out 1.8s both}
.message{animation:copy-enter 1s ease-out 2.1s both}
.details{animation:copy-enter 1s ease-out 2.4s both}
.dolphin{animation:guest-enter 1.3s ease-out 2.2s both,float 5s ease-in-out 3.5s infinite}
.actions{animation:copy-enter 1s ease-out 2.8s both}
.bottom-friends{animation:bottom-enter 1.7s cubic-bezier(.16,1,.3,1) 2.6s both}
#gifts:not([hidden]){animation:copy-enter .65s ease-out both}
@keyframes reveal-ocean{0%,15%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes friends-enter{from{opacity:0;transform:translateY(-14%)}to{opacity:1;transform:translateY(0)}}
@keyframes ribbon-enter{from{opacity:0;transform:scaleX(.35) translateY(18px)}to{opacity:1;transform:scaleX(1) translateY(0)}}
@keyframes title-enter{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes paper-enter{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes copy-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes guest-enter{from{opacity:0;transform:translateX(45px) rotate(12deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes bottom-enter{from{opacity:0;transform:translateY(12%)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px) and (orientation:portrait){.invitation{width:100vw;max-width:none;min-width:0;height:100svh;height:100dvh}.little-mermaid{bottom:0}.octopus{bottom:0}.jellyfish{bottom:0}}
@media(prefers-reduced-motion:reduce){.intro-wash{display:none}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Matching pearl bubbles for the three invitation actions. */
.actions{left:12%;width:76%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:3cqw;animation:none}
.actions>a,.actions>button{--action-delay:2.65s;width:100%;min-width:0;gap:2cqw;font-size:2.65cqw;line-height:1.15;animation:gift-arrive .9s cubic-bezier(.16,1,.3,1) var(--action-delay) both}
.actions>:nth-child(2){--action-delay:2.83s}.actions>:nth-child(3){--action-delay:3.01s}
.actions .round{position:relative;width:19cqw;height:19cqw;aspect-ratio:1;flex:none;padding:4.2cqw;overflow:hidden;border:.55cqw solid transparent;color:#9560bb;background:radial-gradient(circle at 30% 20%,#f8eaff,#e7c2ff 65%) padding-box,linear-gradient(145deg,#91f2ef,#d4b4fa 65%,#b18bd5) border-box;box-shadow:inset 0 .6cqw 1.4cqw #fff8,0 .8cqw 2cqw #a97bc322;transition:transform .25s,box-shadow .25s}
.actions .round:after{content:'';position:absolute;top:9%;left:15%;width:25%;height:12%;border-radius:50%;background:#fff8;transform:rotate(-35deg);pointer-events:none}
.actions svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 0 #fff9);animation:gift-bob 4s ease-in-out var(--action-delay) infinite}
.actions>*>span:last-child{display:block;min-height:8cqw;width:100%;padding:1cqw .4cqw;border:.25cqw solid #e5c9fb;border-radius:3cqw;background:linear-gradient(110deg,#f8eaff,#fbf3ff);box-shadow:0 .7cqw 1.8cqw #ae83c010}
.actions>a:hover .round,.actions>button:hover .round{transform:translateY(-.8cqw) scale(1.04);box-shadow:inset 0 .6cqw 1.4cqw #fff8,0 1.5cqw 3cqw #a97bc33b}
.actions>a:active .round,.actions>button:active .round{transform:scale(.95)}

.actions .whatsapp-icon{display:block;width:100%;height:100%;background:currentColor;mask:url('assets/art-10.png') center/145% no-repeat;-webkit-mask:url('assets/art-10.png') center/145% no-repeat;animation:gift-bob 4s ease-in-out var(--action-delay) infinite}

/* Return action uses the same pearl finish as the invitation buttons. */
.back{left:38%;width:24%;gap:2cqw;animation:gift-arrive .8s cubic-bezier(.16,1,.3,1) .6s both}
.back .round{position:relative;width:19cqw;height:19cqw;flex:none;padding:4.2cqw;overflow:hidden;border:.55cqw solid transparent;color:#9560bb;background:radial-gradient(circle at 30% 20%,#f8eaff,#e7c2ff 65%) padding-box,linear-gradient(145deg,#91f2ef,#d4b4fa 65%,#b18bd5) border-box;box-shadow:inset 0 .6cqw 1.4cqw #fff8,0 .8cqw 2cqw #a97bc322}
.back .round:after{content:'';position:absolute;top:9%;left:15%;width:25%;height:12%;border-radius:50%;background:#fff8;transform:rotate(-35deg);pointer-events:none}
.back svg{display:block;width:100%;height:100%;overflow:visible;animation:gift-bob 4s ease-in-out .6s infinite;filter:drop-shadow(0 1px 0 #fff9)}
.back-label{display:block;width:100%;padding:1.6cqw 1cqw;border:.25cqw solid #e5c9fb;border-radius:3cqw;background:linear-gradient(110deg,#f8eaff,#fbf3ff);box-shadow:0 .7cqw 1.8cqw #ae83c010}
.back:hover .round{transform:translateY(-.8cqw) scale(1.04);box-shadow:inset 0 .6cqw 1.4cqw #fff8,0 1.5cqw 3cqw #a97bc33b}.back:active .round{transform:scale(.95)}