@font-face{font-family:LetterScript;src:url('assets/letter-script.woff') format('woff');font-display:swap}
:root{--paper:#c2e5fa;--accent:#3f6aa1;--script:LetterScript,cursive}
body{background:#c2e5fa;color:#263f5c}
body.intro-mode{height:100dvh;overflow:hidden}
/* Sky-blue glitter and icy silver reflections match the blue stationery. */
.kawaii-sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background-color:#c2e5fa;background-image:linear-gradient(#f0f9ff10,#c6e7ff14),url('assets/brillantina-azul-cielo.webp');background-size:100% 100%,720px 720px;background-position:center,center;background-repeat:no-repeat,repeat}
.kawaii-sky::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 17% 24%,#ffffff 0 1px,#f3faff75 1.5px,transparent 7px),radial-gradient(circle at 78% 62%,#f6f9ff 0 1.2px,#d7edff80 1.8px,transparent 8px),radial-gradient(circle at 46% 83%,#ffffff 0 .8px,transparent 4px);background-size:181px 199px,239px 227px,113px 137px;opacity:.24;animation:glitterGlimmer 7s ease-in-out infinite}
.kawaii-sky::after{content:'';position:absolute;inset:0 -35%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#f6f9ff24 46%,#ffffff85 50%,#cdeaff30 54%,transparent 62%);opacity:.18;animation:glitterSweep 14s ease-in-out infinite}
@keyframes glitterGlimmer{0%,100%{opacity:.16}50%{opacity:.55}}
@keyframes glitterSweep{0%,100%{transform:translateX(-28%);opacity:.08}50%{transform:translateX(28%);opacity:.3}}
.sky-deco{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);animation:skyFloat 8s ease-in-out infinite;animation-delay:var(--delay);transform:rotate(-8deg)}
.deco-cloud{fill:#d4ecfc;stroke:#f3faff;stroke-width:1;opacity:.5}.deco-heart{fill:#afd2ee;stroke:#f8faff;stroke-width:.7;opacity:.62}.deco-bow{fill:#c3e3fa;stroke:#f6f9ff;stroke-width:.8;opacity:.7}.deco-star{fill:#f8faff;opacity:.95;filter:drop-shadow(0 0 5px #fff);animation-name:skyTwinkle}
@keyframes skyFloat{50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes skyTwinkle{50%{opacity:.48;transform:scale(.75) rotate(16deg)}}
.intro-screen{position:fixed;inset:0;z-index:80;overflow-x:hidden;overflow-y:auto;transition:opacity .36s ease;isolation:isolate}
.intro-screen.is-dismissed{opacity:0;pointer-events:none}
.intro-layout{min-height:100dvh;padding:19px 22px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center}


.intro-copy{text-align:center;position:relative;z-index:1;max-width:100%;padding:13px 24px 15px;background:#edf7fff2;border:1px solid #f8fbffb3;border-radius:22px;box-shadow:0 3px 18px #4b649126}
.intro-copy>p{font-size:8px;letter-spacing:2.7px;color:#355577;margin-bottom:11px}
.intro-copy h1{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.8px;color:#2c4d78}
.intro-copy h1>span{font-family:var(--script);font-weight:400;display:block;font-size:49px;letter-spacing:0;line-height:1.05;color:#456791;margin-top:5px}
/* One proportional scene keeps the envelope, paper and hands aligned at every size. */
.envelope-stage{position:relative;width:470px;max-width:100%;aspect-ratio:470/502;height:auto;margin-top:20px;flex-shrink:0;perspective:1300px;--mascot-size:70.2%;--mascot-lift:-3.4%;--envelope-size:89.36%;--envelope-bottom:4.38%}
.intro-mascot,.intro-paws{position:absolute;top:var(--mascot-lift);left:50%;width:var(--mascot-size);max-width:none;height:auto;transform:translateX(-50%);pointer-events:none;transition:transform .7s ease,opacity .4s ease}
.intro-mascot{z-index:3;filter:drop-shadow(0 5px 16px #45678c35)}
.intro-paws{z-index:5;clip-path:polygon(7% 78%,31% 78%,31% 99%,69% 99%,69% 78%,93% 78%,93% 100%,7% 100%)}
.envelope-button{position:absolute;left:50%;bottom:var(--envelope-bottom);transform:translateX(-50%);width:var(--envelope-size);max-width:100%;aspect-ratio:420/222;height:auto;border:0;background:transparent;padding:0;cursor:pointer;perspective:1300px;z-index:4;container-type:inline-size;--corner:1.19cqw;-webkit-tap-highlight-color:transparent;touch-action:manipulation;isolation:isolate}
.envelope-button:focus-visible{outline:3px solid #2c4d78;outline-offset:7px;border-radius:15px;box-shadow:0 0 0 12px #f8faff}
.envelope-button:disabled{opacity:1;cursor:default}
.envelope-back{position:absolute;inset:0;border-radius:var(--corner);background:#96aece url('assets/papel-azul-real.webp') center/cover;border:1px solid #869cba;box-shadow:0 17px 27px #3e56763b,0 3px 4px #15233530;z-index:0}
/* The closed pocket clips its card and shadow. Paper moves only after the flap turns. */
.letter-pocket{position:absolute;inset:0;overflow:hidden;border-radius:var(--corner);z-index:2;pointer-events:none}
.letter-preview{position:absolute;left:8%;right:8%;top:6%;height:88%;padding:4.2cqw 3.8cqw 2.2cqw;background:#f5f9ff;border:2px solid #b8ceeb;border-radius:10px;display:flex;flex-direction:column;align-items:center;color:#3a5476;box-shadow:0 4px 20px #3b4f6938;transform:translateY(0);transition:transform .8s cubic-bezier(.22,.72,.28,1);pointer-events:none}
.letter-preview::after{content:'';position:absolute;inset:6px;border:1px solid #cad7e7;border-radius:5px;pointer-events:none}
.letter-preview>svg{width:7cqw;height:5.2cqw;fill:#90b3df;stroke:#5c7ba4;stroke-width:1;margin-bottom:1cqw;flex-shrink:0}
.letter-preview>span{font-size:2.1cqw;letter-spacing:.7px;line-height:1.25}.letter-preview>strong{font-family:var(--script);font-size:14.5cqw;font-weight:400;line-height:1;margin-top:.6cqw}.letter-preview>b{font-size:1.7cqw;font-weight:400;letter-spacing:1.5px;line-height:1.3}.letter-preview>small{font-size:1.7cqw;letter-spacing:1px;margin-top:1.7cqw;line-height:1.2}.letter-preview>i{font-family:var(--script);font-style:normal;font-size:4.1cqw;line-height:1.2;margin-top:1.3cqw}
/* Real paper grain, fine creases and a photographed wax seal; no faux stitching. */
.envelope-front{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:hidden;border-radius:var(--corner)}
.envelope-flap{position:absolute;top:0;left:0;right:0;height:60.36%;transform-origin:50% 0;transform:rotateX(0);backface-visibility:visible;transition:transform .72s cubic-bezier(.4,0,.2,1),z-index 0s .36s;z-index:6;pointer-events:none}
.envelope-flap>svg{display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--corner) var(--corner) 0 0}
.envelope-seal{position:absolute;left:50%;top:56%;width:22%;aspect-ratio:1;height:auto;display:block;transform:translate(-50%,-50%) rotate(-5deg);z-index:8;pointer-events:none;filter:drop-shadow(1px 4px 2px #1c2d4475);transition:transform .23s ease,opacity .2s ease}
.envelope-seal>img{display:block;width:100%;height:100%;object-fit:contain}
.is-opening .envelope-flap{transform:rotateX(180deg);z-index:1}
.is-opening .envelope-seal{transform:translate(-50%,-50%) rotate(-18deg) scale(.78);opacity:0}
.is-opening .intro-paws{opacity:0;transform:translate(-50%,-4%)}
.is-letter-out .letter-pocket{overflow:visible}.is-letter-out .letter-preview{transform:translateY(-107%)}.is-letter-out .intro-mascot{transform:translate(-50%,-6%);opacity:.6}
.envelope-spark{position:absolute;left:50%;top:65%;z-index:10;color:#4478ad;pointer-events:none;font-size:20px;animation:envelopeBurst 1.1s ease-out forwards;text-shadow:0 0 12px #fffffff0}
@keyframes envelopeBurst{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rotate)) scale(1.15)}}
.intro-hint{font-size:11px;color:#355577;text-align:center;letter-spacing:.2px;margin-top:1px;line-height:1.8;max-width:100%;padding:7px 16px;background:#edf7fff2;border:1px solid #f8fbffb3;border-radius:99px;box-shadow:0 3px 18px #4b649126}.intro-hint>span{font-size:17px;vertical-align:-1px;margin-left:3px}
.site-header{background:#f1f8fff2;border-bottom-color:#a8b8d980;color:#355370}.header-nav>a:hover{color:#245b91}.header-nav>button{background:#e1eaf6;border-color:#789ab9;color:#284f72}.brand-heart{background:#dde7f3;border-color:#8198b2}
.music-button{background:#e7eef8;border-color:#9cb6d2;color:#345875}.music-button .icon{color:#3f75ad}.music-button:hover,.music-button[aria-pressed=true]{background:#d8e8fb;border-color:#7095bc;color:#295b83}.equalizer i{background:#4b80b8}
#invitation{position:relative;z-index:1}.letter-revealed{animation:letterReveal .5s ease both}@keyframes letterReveal{from{opacity:0}to{opacity:1}}
.welcome-message{position:relative;z-index:1;grid-column:1/-1;max-width:760px;width:100%;padding:0;margin:0 auto;text-align:center}
.welcome-title{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.45;letter-spacing:-.45px;color:#3b5f89;max-width:820px;margin:0 auto 24px;overflow-wrap:break-word}
.welcome-copy{max-width:760px;margin:0 auto;font-size:16px;line-height:1.85;color:#36516f;overflow-wrap:break-word}
.welcome-copy>p+p{margin-top:16px}.welcome-copy .welcome-closing{font-size:18px;line-height:1.75;font-weight:700;color:#315a83}
@media(max-width:760px){.welcome-title{font-size:22px;line-height:1.5;letter-spacing:-.3px;margin-bottom:20px}.welcome-copy{font-size:14px;line-height:1.8}.welcome-copy>p+p{margin-top:14px}.welcome-copy .welcome-closing{font-size:15px}}
@media(max-width:370px){.welcome-title{font-size:20px}}
.hero-card{position:relative;max-width:1110px;width:calc(100% - 68px);background:#e6eef9;color:var(--ink);border:2px solid #85a5cf;border-radius:28px;margin-top:32px;margin-bottom:5px;padding:45px 44px 43px;min-height:668px;gap:34px;box-shadow:0 12px 32px #637b962e,7px 7px 0 #8ca3bf24}
.hero-card::before{content:'';position:absolute;inset:12px;border:1.5px dashed #a9c1e0;border-radius:20px;pointer-events:none}.paper-bow{position:absolute;top:-32px;left:50%;transform:translateX(-50%) rotate(-6deg);width:89px;height:66px;fill:#87acdd;stroke:#55749d;stroke-width:1.2;z-index:2;filter:drop-shadow(0 4px 0 #3a4f6b35);animation:bowNod 5s ease-in-out infinite}@keyframes bowNod{50%{transform:translateX(-50%) rotate(6deg)}}
.paper-heart{position:absolute;color:#85a5cf;font-size:36px;pointer-events:none}.corner-one{top:21px;right:26px;transform:rotate(14deg)}.corner-two{bottom:15px;left:24px;font-size:43px;transform:rotate(-12deg)}
.hero-card .hero-copy{padding:0;position:relative;z-index:1;text-align:center}.hero-card .hero-tag{background:#ccdef4;border-color:#89a7ce;color:#4c6382;box-shadow:none;letter-spacing:1.5px}.hero-card .hero-tag .icon{fill:#6385b1;stroke:#6385b1}
.hero-card .hero-title{font-family:var(--script);font-weight:400;font-size:160px;line-height:1.08;letter-spacing:-1px;-webkit-text-stroke:0;text-shadow:0 2px 0 #ffffff90,0 7px 18px #8b6bae24;color:#69358f;margin-top:0;margin-left:0}
.hero-card .hero-full-name{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:20px;line-height:1.6;letter-spacing:.85px;color:#765391;margin-top:0;padding:0 6px}.hero-card .hero-full-name::after{content:"";display:block;width:112px;max-width:45%;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,#9871b4,transparent)}.hero-card .hero-birthday{font-family:var(--display);font-weight:700;font-size:27px;color:#5a6e87;letter-spacing:-.7px;margin-top:15px}.hero-card .hero-birthday strong{font-size:29px;color:#4a6992}
.special-message{font-size:14px;color:#617186;line-height:1.9;margin:17px 0 0;max-width:350px;padding:0 0 0 14px;border-left:2px solid #94b1d6}.card-signature{font-family:var(--script);font-size:28px;color:#6688b5;line-height:1.2;margin-top:13px}
.hero-card .hero-date{background:#f9fcff;border-color:#839dbf;box-shadow:3px 3px 0 #b8cce6;font-size:18px;margin-top:21px;color:#394b63}.hero-card .hero-time{color:#667891}.hero-card .hero-actions{margin-top:24px}.hero-card .hero-actions .button{background:#4e719e;border-color:#3a5273;box-shadow:3px 3px 0 #3a5273;font-size:12px;padding-left:18px;padding-right:18px}.hero-card .text-link{color:#5c728e;border-color:#98acc8}
.hero-card .hero-art-panel{max-width:450px}.hero-card .art-backdrop{background-color:#cadaf0;border-color:#9cb8de;background-image:radial-gradient(#85a3cb6b 1.2px,transparent 1.3px);box-shadow:0 0 0 9px #d6e2f2;animation:cloudPulse 6s ease-in-out infinite}@keyframes cloudPulse{50%{border-radius:42% 48% 47% 44%}}
.hero-card .kuromi-art{animation:mascotBob 6s ease-in-out infinite;filter:drop-shadow(0 11px 0 #7f9cc137)}@keyframes mascotBob{50%{transform:translateY(-8px) rotate(-1deg)}}
.hero-card .age-badge{border-color:#5a7394;box-shadow:4px 4px 0 #a2bcdf;background:#f9fcff}.hero-card .age-badge>strong{-webkit-text-stroke:.5px #556d8e;color:#678ebf}.hero-card .kuromi-note{background:#7194c1;border-color:#587aa6;color:#eff6ff;font-size:8px;top:-6px}
.details-section{padding-top:68px}.section-heading,.countdown-heading{max-width:680px;margin-left:auto;margin-right:auto;padding:20px 22px;background:#edf7fff2;border:1px solid #f8fbffb3;border-radius:22px;box-shadow:0 3px 18px #4b649126}.section-heading h2,.countdown-section h2{color:#284f78}.section-heading .eyebrow,.countdown-section .eyebrow{color:#2b435f}.section-heading>p:last-child,.countdown-copy{color:#2b435f}.event-ticket{color:var(--ink);border-color:#718eb5;box-shadow:5px 5px 0 #8aa0bd47;background:#eaf2fb}.event-ticket::before,.event-ticket::after{border-color:#718eb5}.ticket-heart{color:#5e82b1}.countdown>div{border-color:#7092be;box-shadow:3px 3px 0 #8faac066;background:#abc5e7}.countdown small{color:#364c69}.countdown-heart{color:#f8faff;filter:drop-shadow(0 0 5px #dce8ff)}
.location-panel{background:#e0eaf8;border-color:#7492ba;box-shadow:5px 5px 0 #8ca4bf47}.location-copy{color:var(--ink)}.location-copy .eyebrow{color:#6784ab}.location-copy h2{color:#496589;font-size:36px}.location-copy>p:not(.eyebrow){color:#637388}.location-hint{color:#75869d}.directions-card{background:#f5f9ff;border-color:#b6cbe6;color:var(--ink)}.directions-heading,.directions-footer{border-color:#b4c8e2}.location-copy .button-sky{background:#b1c8e7;border-color:#6b8bb4;box-shadow:3px 3px 0 #8ca7cb}
.rsvp-section{background:#edf7fff2;border-top:1px solid #a8b8d980;border-bottom:1px solid #a8b8d980;padding-top:39px}.rsvp-section h2{color:#305777}.rsvp-section .eyebrow{color:#405976}.rsvp-section .rsvp-inner>p:not(.eyebrow){color:#3d5470}.rsvp-note{color:#3d5470}.rsvp-mascot{width:134px;height:134px;object-fit:contain;margin:0 auto 22px;animation:mascotBob 6s ease-in-out infinite}.rsvp-heart{fill:#7199c7;stroke:#7d9abc;opacity:.4}.rsvp-star{fill:#759bc9;opacity:.4}
.site-footer{color:#2a415c;background:#edf7fff2;border-radius:22px}.site-footer strong{color:#244968}.site-footer p span{color:#4d78a8}.footer-date{color:#2a415c}.replay-link{display:inline-flex;align-items:center;gap:7px;background:transparent;color:#2a415c;font-size:10px;border:0;padding:5px 0}.replay-link .icon{width:17px;height:17px}.replay-link:hover{color:#244364}
.mobile-actions{background:#f1f8fff2;border-top-color:#a8b8d9}.mobile-actions>a{background:#cadef3}.toast{z-index:100}
.noscript-message{position:relative;z-index:1}
@media(max-width:1080px){.hero-card{padding:41px 32px;gap:25px;width:calc(100% - 60px);min-height:631px}.hero-card .hero-title{font-size:136px}.hero-card .hero-full-name{font-size:18px}.hero-card .hero-birthday{font-size:23px}.hero-card .hero-birthday strong{font-size:25px}.special-message{font-size:13px}.hero-card .hero-date{font-size:17px}.hero-card .hero-actions{gap:16px}.hero-card .hero-actions .button{font-size:11px;padding-left:14px;padding-right:14px}.location-copy h2{font-size:33px}}
@media(max-width:760px){.sky-deco{width:calc(var(--s) * .75);height:calc(var(--s) * .75)}.kawaii-sky{background-size:100% 100%,560px 560px}.intro-copy{padding:12px 19px 13px;border-radius:20px}.section-heading,.countdown-heading{padding:19px 16px}.intro-layout{padding:16px 18px 22px}.intro-copy>p{font-size:7px;letter-spacing:2px;margin-bottom:10px}.intro-copy h1{font-size:24px;letter-spacing:-.6px}.intro-copy h1>span{font-size:42px;line-height:1.02;margin-top:6px}.envelope-stage{width:332px;aspect-ratio:332/410;margin-top:16px;--mascot-size:81%;--mascot-lift:-3%;--envelope-size:98.8%;--envelope-bottom:4.4%}.envelope-spark{font-size:17px}.intro-hint{font-size:10px;margin-top:0;line-height:1.8;letter-spacing:0}.intro-hint>span{font-size:15px}.hero-card{display:flex;flex-direction:column;gap:20px;width:calc(100% - 36px);min-height:0;padding:39px 23px 26px;margin-top:24px;border-radius:23px;text-align:center}.hero-card::before{inset:9px;border-radius:16px}.paper-bow{width:71px;height:53px;top:-25px}.paper-heart{font-size:26px}.corner-one{top:17px;right:18px}.corner-two{left:17px;bottom:10px;font-size:32px}.hero-card .hero-copy{display:block;padding:0;width:100%}.hero-card .hero-tag{font-size:7px;padding:6px 9px;letter-spacing:1px}.hero-card .hero-title{font-size:124px;line-height:1.08;letter-spacing:-.8px;margin-top:0;margin-left:0}.hero-card .hero-full-name{font-size:17px;letter-spacing:.5px;margin-top:0}.hero-card .hero-birthday{font-size:22px;line-height:1.4;margin-top:14px}.hero-card .hero-birthday strong{font-size:24px}.special-message{font-size:12px;text-align:center;border-left:0;border-top:1px solid #afc4e0;border-bottom:1px solid #afc4e0;padding:13px 2px;margin:18px auto 0;max-width:290px;line-height:1.9}.card-signature{font-size:27px;margin-top:14px}.hero-card .hero-date{font-size:16px;gap:9px;padding:9px 12px;margin-top:20px;border-width:1.5px;box-shadow:2px 2px 0 #b8cce6}.hero-card .hero-date span{font-size:9px;letter-spacing:1.1px}.hero-card .hero-time{font-size:11px;margin-top:10px}.hero-card .hero-actions{margin-top:20px;justify-content:center;gap:17px}.hero-card .hero-actions .button{font-size:11px;padding:11px 15px;min-height:46px}.hero-card .text-link{font-size:10px}.hero-card .hero-art-panel{order:initial;width:245px;height:245px;max-width:100%;margin:1px auto 13px}.hero-card .age-badge{width:78px;height:78px;left:-2px;bottom:-2px}.hero-card .age-badge>strong{font-size:43px}.hero-card .kuromi-note{display:none}.hero-card .art-backdrop{inset:11px 6px 13px 12px;box-shadow:0 0 0 6px #d6e2f2}.details-section{padding-top:41px}.section-heading h2{font-size:29px}.section-heading .eyebrow{font-size:7px;letter-spacing:1.4px}.countdown-section h2{font-size:26px}.location-copy h2{font-size:30px}.rsvp-mascot{width:106px;height:106px;margin-bottom:20px}.rsvp-section{padding-top:34px}.rsvp-section h2{font-size:28px}.site-footer{padding-bottom:calc(30px + env(safe-area-inset-bottom))}.site-footer>p{font-size:11px}.replay-link{font-size:10px}}
@media(max-width:370px){.intro-copy h1{font-size:22px}.intro-copy h1>span{font-size:39px}.intro-hint{font-size:9px}.hero-card{padding-left:18px;padding-right:18px}.hero-card .hero-title{font-size:110px}.hero-card .hero-full-name{font-size:15px}.hero-card .hero-actions{gap:12px}.hero-card .hero-actions .button{font-size:10px;padding:11px 12px}.hero-card .text-link{font-size:9px}.hero-card .hero-date{font-size:14px;gap:8px}.hero-card .hero-art-panel{width:216px;height:216px}.countdown-section h2{font-size:23px}.location-copy h2{font-size:28px}}
@media(max-height:740px) and (min-width:371px){.intro-layout{padding-top:13px;padding-bottom:17px}.intro-copy>p{margin-bottom:7px}.intro-copy h1{font-size:22px}.intro-copy h1>span{font-size:37px}.envelope-stage{width:310px;aspect-ratio:332/410;margin-top:12px;--mascot-size:81%;--mascot-lift:-3%;--envelope-size:98.8%;--envelope-bottom:4.4%}}
@media(prefers-reduced-motion:reduce){.kawaii-sky::before,.kawaii-sky::after,.sky-deco,.paper-bow,.hero-card .kuromi-art,.hero-card .art-backdrop,.rsvp-mascot,.envelope-seal{animation:none!important}.letter-revealed{animation:none}.intro-screen,.envelope-flap,.letter-preview,.intro-mascot,.intro-paws,.envelope-seal{transition:none!important}}