/* A birthday postcard: one welcoming message, one portrait, one clear invitation. */
.hero-with-portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;width:calc(100% - 64px);max-width:1090px;min-height:600px;margin:34px auto 74px;padding:52px 65px 48px;text-align:left;overflow:hidden;border:1px solid #e3bdc36b;border-radius:32px 86px 32px 32px;background:linear-gradient(125deg,#fffaf194,#fff4e965 45%,#f4dce25e);box-shadow:0 18px 65px #ab7c8b08;isolation:isolate}
.hero-with-portrait .welcome-copy{position:relative;z-index:2;min-width:0;padding:4px 0 10px}
.hero-with-portrait .animated-birthday{font-size:clamp(72px,8vw,100px);letter-spacing:-4px;line-height:1.12;margin:0 0 15px;white-space:nowrap}
.hero-with-portrait .hero-whisper{font:italic 21px/1.55 var(--display);color:#9b7184;margin:0 0 17px;max-width:340px}
.hero-with-portrait .welcome-note{font:14px/1.9 var(--ui);color:#8d7780;margin:0 0 27px;max-width:290px;text-wrap:pretty}
.hero-with-portrait .welcome-heart-line{display:block;width:130px;height:25px;margin:0 0 21px;opacity:.62}
.hero-with-portrait .welcome-scroll{display:inline-flex;align-items:center;justify-content:center;gap:27px;padding:15px 23px;min-height:49px;min-width:215px;margin:0;border:1px solid #a8667d;background:#a8667d;color:#fff9ed;box-shadow:0 5px 0 #8e5b7320,0 10px 25px #a16c7d12;border-radius:50px;font:500 13px/1.3 var(--ui);text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.hero-with-portrait .welcome-scroll span{font-size:21px;line-height:1}.hero-with-portrait .welcome-scroll:hover{background:#95566d;transform:translateY(-3px);box-shadow:0 7px 0 #8e5b7318}.hero-with-portrait .welcome-scroll:active{transform:translateY(2px);box-shadow:0 2px 0 #8e5b7320}
.hero-with-portrait .surprise-chips{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;margin:25px 0 0;max-width:350px}
.hero-with-portrait .surprise-chips a{font:11px/1.6 var(--ui);color:#967d84;background:none!important;border:0;border-radius:0;transform:none;padding:3px 12px;box-shadow:none;transition:color .2s;text-decoration:none;white-space:nowrap}
.hero-with-portrait .surprise-chips a:first-child{padding-left:0}.hero-with-portrait .surprise-chips a+a{border-left:1px solid #cfa9b96b}.hero-with-portrait .surprise-chips a:hover{color:#a05f78;transform:none;text-decoration:underline;text-underline-offset:4px}
.hero-with-portrait .welcome-halo{left:auto;right:-60px;top:26px;width:470px;height:470px;border:1px dashed #c594a42b;opacity:.5;transform:rotate(-12deg);z-index:-1}
.hero-with-portrait>.lily-scene,.hero-with-portrait>.float-doodle{display:none}
.welcome-portrait{position:relative;isolation:isolate;width:100%;max-width:335px;margin:0 auto;padding:0 0 22px;align-self:center;opacity:0;translate:0 18px;transition:opacity .8s .12s,translate .8s .12s}
.welcome-alive .welcome-portrait{opacity:1;translate:0 0}
.welcome-portrait:before{content:'';position:absolute;z-index:-1;inset:13% -6% 5%;border-radius:48% 48% 40% 44%;background:radial-gradient(ellipse at 40% 20%,#fff9e9,#f2dce0bd 67%,#e8cbd575);border:1px solid #fff9ef99;box-shadow:10px 13px 0 #e8d4d32e;transform:rotate(5deg)}
.welcome-portrait:after{content:'';position:absolute;left:14%;right:14%;bottom:10px;height:24px;background:radial-gradient(ellipse,#b4868d20,transparent 72%);z-index:-1}
.welcome-portrait img{display:block;width:100%;height:auto;max-height:445px;object-fit:contain;filter:drop-shadow(0 8px 9px #a46e7d12);transform-origin:50% 85%;animation:portrait-sway 8s ease-in-out infinite alternate}
.portrait-note{position:absolute;right:-15px;bottom:13px;z-index:2;background:#f8efda;border:1px solid #dac8a37a;padding:10px 15px 11px;box-shadow:2px 4px 0 #bda59412;font:italic 20px/1.2 var(--display);color:#9c7a77;transform:rotate(-7deg);border-radius:3px;white-space:nowrap}
.portrait-note:before{content:'';position:absolute;width:42px;height:13px;top:-8px;left:calc(50% - 21px);background:#c9d4ae9c;transform:rotate(9deg)}
@keyframes portrait-sway{from{transform:rotate(-.65deg) translateY(0)}to{transform:rotate(.65deg) translateY(-4px)}}
@media(min-width:701px) and (max-width:1000px){.hero-with-portrait{width:calc(100% - 40px);padding:45px 35px;gap:25px;min-height:570px;margin-top:28px}.hero-with-portrait .animated-birthday{font-size:clamp(64px,8.2vw,82px);letter-spacing:-3.6px}.hero-with-portrait .hero-whisper{font-size:20px}.hero-with-portrait .welcome-note{font-size:13px;max-width:275px}.welcome-portrait{max-width:300px}.hero-with-portrait .surprise-chips a{font-size:10px;padding-left:8px;padding-right:8px}.portrait-note{right:-5px;font-size:18px}}
@media(max-width:700px){
 .hero-with-portrait{display:flex;flex-direction:column;align-items:center;gap:0;width:calc(100% - 28px);min-height:0;margin:20px auto 54px;padding:30px 18px 28px;text-align:center;overflow:hidden;border-radius:30px 56px 30px 30px;background:linear-gradient(155deg,#fffaf17d,#fff4e966 50%,#f2dce05c)}
 .hero-with-portrait .welcome-copy{display:contents}
 .hero-with-portrait .animated-birthday{order:0;font-size:clamp(61px,16vw,78px);letter-spacing:-3px;line-height:1.12;margin:0 0 8px}
 .hero-with-portrait .welcome-heart-line{display:none}
 .hero-with-portrait .hero-whisper{order:1;font-size:18px;line-height:1.55;margin:0 auto 16px;max-width:290px}
 .welcome-portrait{order:2;width:min(65vw,260px);max-width:100%;margin:0 auto 16px;padding-bottom:19px}
 .welcome-portrait img{max-height:345px}
 .portrait-note{right:-20px;bottom:5px;font-size:17px;padding:9px 13px}
 .hero-with-portrait .welcome-note{order:3;font-size:12.5px;line-height:1.8;margin:0 auto 19px;max-width:270px}
 .hero-with-portrait .welcome-scroll{order:4;font-size:12px;gap:30px;min-height:46px;min-width:215px;padding:13px 22px}
 .hero-with-portrait .surprise-chips{order:5;justify-content:center;gap:0;margin:19px auto 0;max-width:100%}
 .hero-with-portrait .surprise-chips a{font-size:10px;padding:2px 10px}
 .hero-with-portrait .welcome-halo{left:auto;right:-80px;top:135px;width:360px;height:360px}
}
@media(max-width:370px){.hero-with-portrait{padding-left:13px;padding-right:13px;padding-top:25px;width:calc(100% - 24px)}.hero-with-portrait .animated-birthday{font-size:57px;letter-spacing:-3px}.hero-with-portrait .hero-whisper{font-size:16px}.welcome-portrait{width:63vw}.portrait-note{right:-17px;font-size:16px}.hero-with-portrait .surprise-chips a{font-size:9px;padding:2px 9px}.hero-with-portrait .welcome-note{font-size:12px;max-width:250px}}
@media(prefers-reduced-motion:reduce){.welcome-portrait{opacity:1;translate:none;transition:none}.welcome-portrait img{animation:none}.hero-with-portrait .welcome-scroll{transition:none}}
.atmosphere-paused .welcome-portrait img{animation-play-state:paused}