:root{
  --pink:#e0497f;
  --pink-deep:#c92a66;
  --pink-dark:#8f1a49;
  --pink-text:#a01f55;
  --pink-soft:#f7a8c4;
  --pink-line:#f2a7c1;
  --blush:#ffe3ea;
  --cream:#fff8f1;
  --vanilla:#fdeed8;
  --caramel:#e9b98f;
  --choc:#3b1f15;
  --brown:#5a3122;
  --text:#4f2a1d;
  --text-soft:#6b4535;
  --shadow:0 24px 60px rgba(59,31,21,.32);
  --ring:0 0 0 3px var(--pink-line);
  --script:Caveat,"Comic Sans MS",cursive;
  --display:Pacifico,Caveat,cursive;
  --sans:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.6;
  background-color:#f7c6d0;
  background-image:url(img/leopard.jpg);
  background-image:image-set(url(img/leopard.webp) type("image/webp"),url(img/leopard.jpg) type("image/jpeg"));
  background-size:min(560px,120vw);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
img{max-width:100%;display:block}
p{margin:0}
h1,h2{margin:0;font-weight:400}
a{color:var(--pink-text)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px dashed var(--pink-deep);outline-offset:4px;border-radius:12px}

/* ===== buttons ===== */
.btn{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 28px;border-radius:999px;border:3px solid #fff;
  font:800 17px/1.1 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px)}
.btn-primary{background:var(--pink-deep);color:#fff;box-shadow:0 6px 0 var(--pink-dark),0 14px 28px rgba(143,26,73,.3)}
.btn-primary:active{box-shadow:0 2px 0 var(--pink-dark),0 8px 16px rgba(143,26,73,.3)}
.btn-primary:hover{color:#fff}
.btn-soft{background:#fff1f5;color:var(--pink-text);box-shadow:0 6px 0 var(--pink-line),0 14px 28px rgba(143,26,73,.16)}
.btn-big{min-height:64px;padding:0 36px;font-size:19px}
.actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ===== shared surfaces ===== */
.card{position:relative;background:var(--cream);border:6px solid #fff;border-radius:40px;box-shadow:var(--ring),var(--shadow)}
.card-blush{background:var(--blush)}
.deco{position:absolute;pointer-events:none;overflow:visible}
.eyebrow{text-align:center;font-size:13px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-text)}
.lead{margin:20px auto 0;max-width:460px;text-align:center;font-size:18px;line-height:1.65;color:var(--text-soft)}
.title-script{margin:6px 0 32px;text-align:center;font-family:var(--display);font-size:clamp(34px,7vw,56px);line-height:1.3;color:var(--pink);text-shadow:3px 3px 0 #fde2ea}
.title-deep{color:var(--pink-deep);margin-bottom:8px}
.pill-title{
  display:block;width:max-content;max-width:100%;margin:0 auto 36px;padding:10px 32px;
  background:var(--pink-deep);color:#fff;border:5px solid #fff;border-radius:999px;
  font-family:var(--script);font-weight:700;font-size:clamp(32px,6vw,46px);line-height:1.15;text-align:center;
  box-shadow:0 10px 30px rgba(59,31,21,.32);transform:rotate(-1.5deg);
}
.tape{position:absolute;z-index:2;height:30px;border-radius:3px;box-shadow:0 3px 8px rgba(59,31,21,.15);pointer-events:none}
.tape-top{top:-18px;left:50%;width:140px;margin-left:-70px;transform:rotate(-3deg);background:repeating-linear-gradient(45deg,#ffd1df 0 10px,#ffeef3 10px 20px)}
.tape-corner{top:-14px;left:22px;width:100px;transform:rotate(-8deg);background:repeating-linear-gradient(45deg,#fdeed8 0 8px,#fff8f1 8px 16px)}

/* ===== ribbon ===== */
.ribbon{background:var(--pink-deep);color:#fff;border-bottom:4px solid #fff;overflow:hidden;white-space:nowrap;font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 6px 20px rgba(59,31,21,.2)}
.ribbon-track{display:inline-flex;gap:22px;padding:10px 0;animation:marquee 28s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== cover ===== */
.cover{display:none}
.js .cover{
  display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:24px 16px;
  background:inherit;background-color:#f7c6d0;
  background-image:image-set(url(img/leopard.webp) type("image/webp"),url(img/leopard.jpg) type("image/jpeg"));
  background-size:min(560px,120vw);
  transition:opacity .7s ease .35s,visibility 0s linear 1.05s;
}
.js .cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,248,241,.0) 30%,rgba(201,42,102,.18) 100%)}
.cover-card{
  position:relative;width:min(440px,100%);padding:56px 28px 40px;text-align:center;
  background:var(--cream);border:6px solid #fff;border-radius:44px;box-shadow:var(--ring),var(--shadow);
  animation:pop .8s cubic-bezier(.3,1.5,.5,1) both;
  transition:transform .6s cubic-bezier(.5,-.4,.6,1),opacity .5s ease .2s;
}
.cover-bow{position:absolute;top:-44px;left:50%;width:130px;height:88px;margin-left:-65px;animation:wiggle 2.4s ease-in-out infinite}
.cover-kicker{font-family:var(--script);font-weight:700;font-size:30px;color:var(--pink-text)}
.cover-title{margin:6px 0 10px;font-family:var(--display);font-size:clamp(30px,8vw,40px);line-height:1.35;color:var(--pink);text-shadow:3px 3px 0 #fde2ea}
.cover-from{margin-bottom:28px;font-size:17px;font-weight:700;color:var(--text-soft)}
.cover.is-open{opacity:0;visibility:hidden}
.cover.is-open .cover-card{transform:translateY(-30px) scale(1.15);opacity:0}
.cover-gone{display:none!important}
html.locked,html.locked body{overflow:hidden}
@keyframes pop{0%{opacity:0;transform:scale(.7) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* ===== hero ===== */
main{display:flex;flex-direction:column;align-items:center}
.hero{width:100%;max-width:1160px;padding:60px 16px 24px;display:flex;flex-wrap:wrap;gap:56px 40px;align-items:center;justify-content:center}
.hero-card{flex:1 1 440px;max-width:600px;padding:clamp(40px,7vw,60px) clamp(22px,5vw,52px) 40px;border-radius:44px}
.hero-card h1{display:flex;flex-direction:column;align-items:center;outline:none}
.name{font-family:var(--display);font-size:clamp(70px,19vw,132px);line-height:1.15;color:var(--pink);text-shadow:4px 4px 0 #fff,8px 8px 0 var(--choc);letter-spacing:.01em;padding:0 .1em}
.hero-sub{margin-top:2px;font-family:var(--script);font-weight:700;font-size:clamp(40px,9vw,58px);line-height:1.05;color:var(--brown)}
.hero-card .actions{position:relative;margin-top:30px}
.hearts-label{margin-top:16px;min-height:30px;text-align:center;font-family:var(--script);font-weight:700;font-size:27px;color:var(--pink-text)}

.hero-photo{position:relative;flex:1 1 340px;max-width:460px;margin:0;padding:12px 0 28px;touch-action:pan-y}
.polaroid{position:relative;display:block;background:#fff;border-radius:32px;padding:16px 16px 20px;box-shadow:var(--ring),var(--shadow)}
.hero-photo .polaroid{transform:rotate(2.5deg)}
.polaroid img{width:100%;height:auto;border-radius:22px;background:var(--blush);object-fit:cover}
.hero-photo img{aspect-ratio:9/10;object-position:50% 30%}
.polaroid figcaption,.cat-caption{display:block;margin-top:12px;text-align:center;font-family:var(--script);font-size:30px;font-weight:700;line-height:1.15;color:var(--brown)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

.stickers{position:absolute;inset:0;pointer-events:none}
.sticker{
  position:absolute;width:68px;height:68px;margin:-6px;padding:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px var(--pink-line),0 10px 20px rgba(59,31,21,.25);
  transform:rotate(var(--r,0deg));cursor:grab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;
  animation:stickerIn .6s cubic-bezier(.3,1.6,.5,1) both;
}
.sticker:nth-child(2){animation-delay:.08s}.sticker:nth-child(3){animation-delay:.16s}.sticker:nth-child(4){animation-delay:.24s}.sticker:nth-child(5){animation-delay:.32s}
.sticker.s-wide{width:84px;height:62px;border-radius:24px}
.sticker svg{width:100%;height:100%;overflow:visible}
.sticker.dragging{cursor:grabbing;transform:rotate(var(--r,0deg)) scale(1.18);box-shadow:0 0 0 3px var(--pink),0 18px 30px rgba(59,31,21,.35);z-index:5}
@keyframes stickerIn{0%{opacity:0;scale:.3}100%{opacity:1;scale:1}}
.sticker-hint{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-family:var(--script);font-weight:700;font-size:24px;color:#fff;text-shadow:0 2px 0 var(--pink-dark),0 0 14px rgba(59,31,21,.6)}
.no-js .stickers,.no-js .sticker-hint{display:none}

/* ===== letter ===== */
.letter-section{width:100%;max-width:820px;padding:80px 16px 24px;scroll-margin-top:12px}
.envelope{
  position:relative;overflow:hidden;text-align:center;padding:40px 24px 40px;border-radius:36px;
  background:var(--vanilla);border:6px solid #fff;box-shadow:0 0 0 3px var(--caramel),var(--shadow);
}
.envelope-flap{position:absolute;top:0;left:0;right:0;height:150px;background:
  linear-gradient(160deg,transparent 49.6%,#f6dcc0 50%) left/50.2% 100% no-repeat,
  linear-gradient(200deg,transparent 49.6%,#f6dcc0 50%) right/50.2% 100% no-repeat}
.seal{position:relative;width:96px;height:96px;margin:46px auto 18px;border-radius:50%;background:var(--pink-deep);border:5px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(143,26,73,.35);animation:beat 1.8s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(1)}45%{transform:scale(1.06)}}
.envelope-title{position:relative;font-family:var(--script);font-weight:700;font-size:46px;line-height:1.1;color:var(--brown)}
.envelope-from{position:relative;margin:6px 0 26px;font-size:17px;color:var(--text-soft)}
.envelope.is-opening{animation:envOut .45s ease forwards}
@keyframes envOut{to{opacity:0;transform:translateY(-20px) scale(.96)}}
.letter{
  padding:clamp(36px,6vw,64px) clamp(22px,6vw,72px);border-radius:36px;
  background-color:var(--cream);background-image:repeating-linear-gradient(transparent 0 37px,#fbe1e8 37px 38px);
}
.letter.is-in{animation:unfold .8s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes unfold{0%{opacity:0;transform:perspective(900px) rotateX(-35deg) translateY(30px);transform-origin:50% 0}100%{opacity:1;transform:none}}
.letter:focus{outline:none}
.letter-hello{margin-bottom:10px;font-family:var(--script);font-weight:700;font-size:clamp(42px,8vw,56px);line-height:1.1;color:var(--pink-deep)}
.letter-text{display:flex;flex-direction:column;gap:16px;font-size:clamp(17px,2.4vw,19px);line-height:1.75}
.signature{margin-top:28px;text-align:right;font-family:var(--script);font-size:34px;line-height:1.2;color:var(--brown)}
.signature strong{color:var(--pink-deep)}
.letter .actions{margin-top:30px}

/* ===== gallery ===== */
.gallery{width:100%;max-width:1160px;padding:96px 16px 24px}
.gallery-row{display:flex;flex-wrap:wrap;gap:56px 44px;justify-content:center;align-items:flex-start}
.g-item{flex:0 1 400px;margin:0}
.g-item img{aspect-ratio:3/4;object-position:50% 30%}
.g-item img.img-couple{object-position:46% 30%}
@media (max-width:860px){.tilt-right{transform:rotate(2deg)}}
.tilt-left{transform:rotate(-2.5deg)}
.tilt-right{transform:rotate(2.5deg) translateY(24px)}

/* ===== album / cat ===== */
.album{width:100%;max-width:1160px;padding:96px 16px 24px}
.album-card{padding:clamp(36px,5vw,56px) clamp(18px,4vw,52px) 52px}
.album-row{display:flex;flex-wrap:wrap;gap:44px;align-items:center;justify-content:center}
.cat-wrap{position:relative;flex:1 1 280px;max-width:380px}
.cat-btn{width:100%;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cat-btn:hover{transform:rotate(-1deg) scale(1.02)}
.cat-btn.boop{animation:boop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes boop{0%{transform:rotate(-2.5deg) scale(1)}40%{transform:rotate(1deg) scale(.95)}100%{transform:rotate(-2.5deg) scale(1)}}
.cat-btn img{aspect-ratio:3/4;object-position:50% 35%}
.bubble{
  position:absolute;z-index:3;top:-18px;right:-8px;max-width:220px;padding:14px 20px;border-radius:26px 26px 26px 6px;
  background:#fff;border:3px solid var(--pink-line);box-shadow:0 12px 26px rgba(59,31,21,.25);
  font-family:var(--script);font-weight:700;font-size:28px;line-height:1.1;color:var(--pink-deep);text-align:center;
  animation:bubble .5s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes bubble{0%{opacity:0;transform:scale(.4) translateY(20px)}100%{opacity:1;transform:none}}
.album-text{flex:1 1 300px;max-width:460px;display:flex;flex-direction:column;gap:18px;font-size:clamp(18px,2.3vw,20px);line-height:1.7}
.tap-hint{display:flex;align-items:center;gap:8px;font-family:var(--script);font-weight:700;font-size:26px;line-height:1.2;color:var(--pink-deep)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:9px 18px;border-radius:999px;background:var(--blush);border:3px solid #fff;box-shadow:0 0 0 2px var(--pink-line);font-weight:800;font-size:16px;color:var(--pink-text)}
.chips .chip-vanilla{background:var(--vanilla);box-shadow:0 0 0 2px var(--caramel);color:#7a4129}

/* ===== jar ===== */
.jar-section{width:100%;max-width:1000px;padding:96px 16px 24px}
.jar-row{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:center;justify-content:center}
.jar{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 26px 22px;border-radius:40px;cursor:pointer;
  background:rgba(255,248,241,.35);border:4px dashed #fff;-webkit-tap-highlight-color:transparent;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}
.jar:hover{transform:rotate(-3deg)}
.jar.shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:rotate(-2deg)}20%,80%{transform:rotate(4deg)}30%,50%,70%{transform:rotate(-7deg)}40%,60%{transform:rotate(7deg)}}
.jar svg{filter:drop-shadow(0 14px 22px rgba(59,31,21,.3))}
.jar-label{display:inline-flex;min-height:52px;align-items:center;padding:0 24px;border-radius:999px;background:var(--pink-deep);color:#fff;border:3px solid #fff;font-weight:800;font-size:17px;box-shadow:0 6px 0 var(--pink-dark)}
.wish-card{
  flex:1 1 320px;max-width:460px;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:34px 30px;border-radius:36px;text-align:center;background:var(--cream);border:6px solid #fff;box-shadow:var(--ring),var(--shadow);
}
.wish-card-kicker{font-size:13px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-text)}
.wish-card-text{font-family:var(--script);font-weight:700;font-size:clamp(32px,6vw,40px);line-height:1.2;color:var(--brown)}
.wish-card.flip{animation:flip .6s cubic-bezier(.3,1.3,.5,1)}
@keyframes flip{0%{transform:perspective(800px) rotateY(0)}50%{transform:perspective(800px) rotateY(90deg)}100%{transform:perspective(800px) rotateY(0)}}

/* ===== cake ===== */
.cake-section{width:100%;max-width:820px;padding:96px 16px 24px}
.cake-card{text-align:center;padding:clamp(38px,6vw,56px) clamp(20px,5vw,48px) 44px}
.cake{position:relative;width:240px;height:230px;margin:34px auto 18px}
.cake svg{display:block}
.flame{
  position:absolute;left:50%;top:-30px;width:22px;height:36px;margin-left:-11px;z-index:2;
  background:radial-gradient(ellipse at 50% 72%,#fffbe0 0 28%,#ffd24d 55%,#ff8a3d 100%);
  border-radius:50% 50% 45% 45%/65% 65% 35% 35%;box-shadow:0 0 26px 10px rgba(255,201,77,.55);
  animation:flicker 1.3s ease-in-out infinite;transform-origin:50% 100%;transition:opacity .4s,transform .4s;
}
.flame.out{opacity:0;transform:scale(.2) translateY(10px);animation:none}
@keyframes flicker{0%,100%{transform:scaleY(1) rotate(-2deg)}50%{transform:scaleY(1.14) rotate(2deg)}}
.smoke{position:absolute;left:50%;top:-20px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0;pointer-events:none}
.cake.blown .smoke{animation:smoke 1.6s ease-out forwards}
@keyframes smoke{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(14px,-70px) scale(3)}}
.wish-done{margin-bottom:18px;font-family:var(--script);font-weight:700;font-size:clamp(32px,6vw,40px);line-height:1.15;color:var(--pink-deep)}

/* ===== footer ===== */
.footer{display:flex;justify-content:center;padding:80px 16px calc(56px + env(safe-area-inset-bottom))}
.footer-pill{padding:20px 40px;border-radius:999px;text-align:center;background:var(--cream);border:5px solid #fff;box-shadow:var(--ring),var(--shadow)}
.footer-title{font-family:var(--display);font-size:clamp(22px,5vw,28px);line-height:1.4;color:var(--pink)}
.footer-from{margin-top:2px;font-size:15px;font-weight:700;color:var(--text-soft)}

/* ===== decorations & effects ===== */
.sway{animation:sway 6s ease-in-out infinite;transform-origin:50% 60%}
.sway2{animation:sway 7.5s ease-in-out infinite reverse;transform-origin:50% 60%}
.twinkle{animation:twinkle 2.8s ease-in-out infinite}
.twinkle.t2{animation-delay:1.2s}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}

.fx{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.fx .conf{position:absolute;top:-24px;width:11px;height:15px;border-radius:3px;will-change:transform;animation:fall var(--d,3s) cubic-bezier(.25,.6,.45,1) var(--delay,0s) forwards}
.fx .conf.round{border-radius:50%;width:11px;height:11px}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx,0),110vh) rotate(var(--rot,540deg))}}
.fx .pop{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;animation:popHeart 1.1s ease-out forwards}
.fx .pop svg{width:100%;height:100%;overflow:visible}
@keyframes popHeart{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1;transform:translate(calc(var(--dx)*.3),-14px) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.8) rotate(var(--rot,0deg))}}
.fh{position:absolute;bottom:20px;width:30px;height:30px;pointer-events:none;animation:rise 2.3s ease-out forwards}
.fh svg{width:100%;height:100%}
@keyframes rise{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-200px) scale(1.3) rotate(var(--rot,12deg))}}

/* ===== phones ===== */
@media (max-width:560px){
  body{font-size:17px}
  .hero{padding-top:44px;gap:48px}
  .hero-card{border-radius:36px}
  .btn{width:100%;max-width:340px}
  .hero-card .actions{flex-direction:column;align-items:center}
  .sticker{width:56px;height:56px;padding:7px}
  .sticker.s-wide{width:70px;height:52px}
  .pill-title{padding:8px 24px}
  .bubble{right:-4px;top:-26px;font-size:25px}
  .letter{border-radius:30px}
  .signature{font-size:30px}
  .jar svg{width:170px;height:204px}
  .footer-pill{border-radius:36px;padding:18px 26px}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ribbon-track{animation:none}
  .fx .conf,.fx .pop,.fh{animation:fadeOnly 1.4s ease forwards!important}
  .fx .conf{top:var(--top,20%)}
}
@keyframes fadeOnly{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ---------- почта от подруг ---------- */
.mail{margin-top:72px;width:100%;max-width:1060px}
.mail-hint{margin:-6px auto 44px;max-width:780px;text-align:center;font-family:var(--script);font-weight:700;font-size:clamp(26px,3vw,32px);line-height:1.2;color:#fff;text-shadow:0 2px 0 var(--pink-dark),0 0 14px rgba(59,31,21,.6)}
.garland{display:flex;flex-direction:column;gap:50px;max-width:1120px;margin:0 auto}
.g-row{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(16px,3vw,40px);padding:30px clamp(4px,2vw,24px) 0}
.g-row::before{content:"";position:absolute;left:-3%;right:-3%;top:-30px;height:62px;border-bottom:3px solid #3b1f15;border-radius:0 0 50% 50%/0 0 100% 100%;pointer-events:none}
.g-row::after{content:"";position:absolute;left:-3%;right:-3%;top:-26px;height:62px;border-bottom:2px dashed #fff;border-radius:0 0 50% 50%/0 0 100% 100%;pointer-events:none;opacity:.7}
.env{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% -18px;animation:envSway 5s ease-in-out infinite;animation-delay:var(--dl,0s);container-type:inline-size}
.g-row .env:nth-child(2){margin-top:18px}
@keyframes envSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.env .pin{position:absolute;z-index:4;left:50%;top:-24px;width:14px;height:34px;margin-left:-7px;border-radius:3px;background:linear-gradient(90deg,#d9a877,#f3d2ad 50%,#c99263);box-shadow:0 2px 3px rgba(59,31,21,.3)}
.env .pin::after{content:"";position:absolute;left:-2px;right:-2px;top:14px;height:3px;background:#a8743f;border-radius:2px}
.env .body{position:relative;display:block;aspect-ratio:5/4;border-radius:14px;background:#fff8f1;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink-line),0 16px 30px rgba(59,31,21,.35);overflow:hidden}
.env .body::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:#fde2ea;clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .5s;transform-origin:50% 0;z-index:1}
.env .body::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(160deg,transparent 49.5%,rgba(242,167,193,.4) 50%) left/50% 100% no-repeat,linear-gradient(200deg,transparent 49.5%,rgba(242,167,193,.4) 50%) right/50% 100% no-repeat}
.env .seal{display:none}
.env .stamp{position:absolute;z-index:3;right:7%;top:8%;width:46%;aspect-ratio:4/5;background:radial-gradient(circle,transparent 2.6px,#fff 3.1px) -4px -4px/8px 8px;filter:drop-shadow(0 3px 4px rgba(59,31,21,.3));transform:rotate(5deg)}
.env .stamp picture,.env .stamp b{position:absolute;inset:5px}
.env .stamp img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.env .stamp b{display:grid;place-items:center;background:#fde2ea;color:var(--pink-deep);font:900 clamp(20px,14cqw,44px)/1 var(--sans)}
.env .to{position:absolute;z-index:2;left:7%;bottom:8%;max-width:50%;text-align:left;font-family:var(--script);font-weight:700;font-size:clamp(20px,15cqw,52px);line-height:1;color:var(--brown)}
.env .to small{display:block;margin-bottom:2px;font-size:.6em;color:var(--pink-text)}
.env .heart{position:absolute;z-index:2;left:7%;top:12%;width:clamp(18px,11cqw,34px);height:clamp(18px,11cqw,34px);fill:var(--pink);transform:rotate(-12deg);transition:transform .3s}
.env.read .body::before{transform:scaleY(-1)}
.env.read .to::after{content:" ✓";color:var(--pink)}
.env.read .heart{transform:rotate(-12deg) scale(1.15);fill:var(--pink-deep)}
.env.soon .body{background:#f6ece4}
.env.soon .to{color:#9a7a6a}
.env:hover .body,.env:focus-visible .body{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink),0 20px 34px rgba(59,31,21,.4)}
.env:hover{animation-play-state:paused}
.mail-toast{position:fixed;z-index:70;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;padding:12px 20px;border-radius:999px;background:var(--choc);color:#fff;font-weight:800;font-size:16px;transition:.3s;pointer-events:none;white-space:nowrap}
.mail-toast.on{transform:translate(-50%,0);opacity:1}

.pc-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.pc-modal[hidden]{display:none}
.pc-scrim{position:absolute;inset:0;background:rgba(59,31,21,.55)}
.pc-card{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;padding:26px 22px 24px;text-align:center;animation:pcIn .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes pcIn{from{transform:perspective(900px) rotateY(-80deg) scale(.8);opacity:0}}
.pc-x{position:absolute;right:12px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:var(--blush);color:var(--pink-text);font-size:28px;line-height:1;cursor:pointer}
.pc-photo{width:min(64%,230px);margin:4px auto 10px;padding:8px 8px 10px;background:#fff;border-radius:6px;box-shadow:0 0 0 2px var(--pink-line),0 14px 26px rgba(59,31,21,.25);transform:rotate(-3deg)}
.pc-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:3px}
.pc-from{margin:6px 0 0;font-family:var(--script);font-weight:700;font-size:22px;line-height:1;color:var(--pink-text)}
.pc-name{margin:2px 0 8px;font-family:var(--display);font-weight:400;font-size:clamp(38px,10vw,50px);line-height:1.3;color:var(--pink);text-shadow:3px 3px 0 #fde2ea}
.pc-wish{margin:0 0 6px;font-family:var(--script);font-weight:700;font-size:clamp(25px,6.4vw,30px);line-height:1.2;color:var(--brown)}
.pc-hug{min-height:28px;margin:4px 0 10px;font-family:var(--script);font-weight:700;font-size:24px;color:var(--pink-deep)}
.pc-acts{display:flex;flex-direction:column;gap:14px;align-items:center}
.pc-acts .btn{width:100%;max-width:320px}
@media (prefers-reduced-motion:reduce){.env{animation:none}.pc-card{animation:none}}