:root{
  --bg:#FFF5FA;--ink:#3B2A4A;--soft:#7D6A8E;
  --pink:#FF5C8A;--lav:#8F7CFF;--sun:#FFC83D;--mint:#2FD6A8;--sky:#4DC3FF;--peach:#FF9A6B;
  --hand:'Caveat','Segoe Script',cursive;--body:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
[hidden]{display:none!important}
section{padding:clamp(60px,10vw,110px) 20px;max-width:1120px;margin:auto;text-align:center}
h2{font-family:var(--hand);font-size:clamp(2.6rem,7vw,4.2rem);color:var(--pink);line-height:1.1;margin-bottom:8px}
.sub{color:var(--soft);margin-bottom:clamp(28px,5vw,48px);font-size:clamp(1rem,2.4vw,1.15rem)}
button{font:inherit;cursor:pointer;border:0;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--lav);outline-offset:3px}

.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blobs i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(80px);opacity:.45;animation:drift 18s ease-in-out infinite alternate}
.blobs i:nth-child(1){background:var(--pink);top:-14%;left:-12%}
.blobs i:nth-child(2){background:var(--sky);top:18%;right:-16%;animation-delay:-6s}
.blobs i:nth-child(3){background:var(--sun);bottom:-16%;left:12%;animation-delay:-3s}
.blobs i:nth-child(4){background:var(--lav);bottom:4%;right:4%;animation-delay:-9s;opacity:.35}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.2)}}

/* login gate */
.gate{min-height:100svh;display:grid;place-items:center;padding:24px}
.login{width:min(430px,100%);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid #fff;border-radius:34px;padding:clamp(28px,6vw,44px) clamp(22px,5vw,36px);text-align:center;
  box-shadow:0 30px 70px -30px rgba(143,124,255,.7);animation:rise .9s cubic-bezier(.2,1.2,.4,1) both}
.login.shake{animation:shake .45s}
.login.out{animation:out .6s forwards}
.login h1{font-family:var(--hand);font-size:3rem;color:var(--pink);line-height:1.1}
.login p{color:var(--soft)}
.lock{font-size:3rem;display:inline-block;animation:bob 2.2s ease-in-out infinite}
.field{position:relative;margin:22px 0 6px}
.field input{width:100%;font:inherit;font-size:1.05rem;padding:15px 52px 15px 20px;border-radius:99px;border:2px solid #F3D9EA;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:0;border-color:var(--lav);box-shadow:0 0 0 5px rgba(143,124,255,.18)}
.field button{position:absolute;right:8px;top:50%;translate:0 -50%;width:40px;height:40px;border-radius:50%;background:none;font-size:1.15rem}
.err{min-height:1.6em;color:#E0316B!important;font-weight:500;font-size:.95rem}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.92)}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes out{to{opacity:0;transform:translateY(-30px) scale(.9)}}

.pins{display:flex;justify-content:center;gap:clamp(8px,3vw,14px);margin:26px 0 6px}
.pins input{width:clamp(54px,17vw,66px);height:clamp(66px,20vw,80px);text-align:center;font:700 2rem var(--body);border-radius:22px;border:2px solid #F3D9EA;background:#fff;color:var(--ink);caret-color:transparent;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.pins input:focus{outline:0;border-color:var(--lav);box-shadow:0 0 0 5px rgba(143,124,255,.18);transform:translateY(-4px)}
.pins input.filled{border-color:var(--pink);background:#FFF0F6}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.hello{font-family:var(--hand);font-size:clamp(1.7rem,5vw,2.6rem);color:var(--lav)}
.name{font-family:var(--hand);font-size:clamp(4rem,17vw,11rem);line-height:1;font-weight:700;display:flex;flex-wrap:wrap;justify-content:center}
.name span{display:inline-block;animation:pop .8s cubic-bezier(.3,1.6,.5,1) both;transition:transform .25s}
.name span:hover{transform:translateY(-18px) rotate(-8deg) scale(1.15)}
@keyframes pop{from{opacity:0;transform:translateY(60px) scale(.3) rotate(20deg)}}
.tag{max-width:520px;margin:16px 0 36px;color:var(--soft);font-size:clamp(1.05rem,2.6vw,1.3rem);animation:pop 1s .9s both}
.cta{background:linear-gradient(135deg,var(--pink),var(--peach));color:#fff;font-weight:700;font-size:1.1rem;padding:16px 36px;border-radius:99px;box-shadow:0 12px 30px -8px var(--pink);transition:transform .2s}
#cta{animation:pop 1s 1.2s both,beat 1.8s 2.4s infinite}
.cta:hover{transform:scale(1.07) rotate(-2deg)}
.cta:active{transform:scale(.94)}
.cta:disabled{opacity:.7;cursor:wait}
@keyframes beat{50%{box-shadow:0 12px 42px -2px var(--pink);scale:1.05}}
.scroll{position:absolute;bottom:26px;font-size:1.8rem;color:var(--lav);animation:bob 1.5s infinite}
@keyframes bob{50%{transform:translateY(10px)}}

/* counter */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,20px);max-width:720px;margin:auto}
.count div{padding:clamp(16px,3vw,28px) 4px;border-radius:clamp(18px,3vw,28px);color:#fff;font-size:clamp(.78rem,2vw,1rem);box-shadow:0 14px 28px -14px rgba(60,30,90,.45);transition:transform .3s}
.count div:hover{transform:translateY(-8px) rotate(2deg)}
.count div:nth-child(1){background:var(--pink)}.count div:nth-child(2){background:var(--lav)}
.count div:nth-child(3){background:var(--mint)}.count div:nth-child(4){background:var(--sky)}
.count b{display:block;font-size:clamp(1.5rem,5.4vw,3rem);line-height:1.15;font-variant-numeric:tabular-nums}

/* flip cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;perspective:1000px}
.card{height:190px;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.5,1);background:none;padding:0}
.card.on{transform:rotateY(180deg)}
.card:hover:not(.on){transform:translateY(-8px) rotate(-2deg)}
.card>*{position:absolute;inset:0;border-radius:28px;display:flex;align-items:center;justify-content:center;padding:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.front{font-size:3.4rem;color:#fff;box-shadow:0 14px 30px -14px rgba(60,30,90,.5)}
.back{transform:rotateY(180deg);background:#fff;font-size:1.15rem;font-weight:500;border:3px solid var(--c)}

/* gallery */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:34px 26px;justify-items:center}
.pol{width:100%;max-width:320px;background:#fff;padding:14px 14px 18px;border-radius:10px;box-shadow:0 18px 36px -16px rgba(60,30,90,.5);transform:rotate(var(--r));transition:transform .4s cubic-bezier(.3,1.5,.5,1);cursor:zoom-in;text-align:center}
.pol:hover{transform:rotate(0) scale(1.07) translateY(-8px);z-index:2}
.pic{aspect-ratio:1;border-radius:5px;background:var(--g);overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s}
.pic img.ok{opacity:1}
.pol p{font-family:var(--hand);font-size:1.75rem;margin-top:10px;line-height:1.2;text-transform:capitalize}
.empty{color:var(--soft);grid-column:1/-1}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(59,42,74,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;animation:fade .3s}
.lightbox figure{max-width:min(94vw,900px);text-align:center;animation:rise .5s cubic-bezier(.2,1.2,.4,1)}
.lightbox img{max-width:100%;max-height:78svh;border-radius:14px;border:10px solid #fff;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.lightbox figcaption{font-family:var(--hand);font-size:2rem;color:#fff;margin-top:12px;text-transform:capitalize}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;width:46px;height:46px;border-radius:50%;background:#fff;font-size:1.2rem}
@keyframes fade{from{opacity:0}}

/* envelope & letter */
.env{position:relative;display:block;width:min(340px,86vw);height:220px;margin:0 auto;background:none;padding:0}
.eb{position:absolute;inset:0;background:linear-gradient(135deg,var(--sun),var(--peach));border-radius:16px;box-shadow:0 18px 36px -14px rgba(255,140,60,.7)}
.flap{position:absolute;left:0;right:0;top:0;height:60%;background:linear-gradient(160deg,#FFB347,var(--peach));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s;z-index:2;border-radius:16px 16px 0 0}
.seal{position:absolute;left:50%;top:46%;z-index:3;font-size:2.6rem;translate:-50% -50%;animation:beat2 1.4s infinite;transition:opacity .3s}
@keyframes beat2{50%{scale:1.25}}
.env:hover:not(.open){transform:rotate(-2deg) scale(1.04)}
.env.open .flap{transform:rotateX(180deg)}
.env.open .seal{opacity:0}
.env.open{animation:out .5s .7s forwards}
.env.gone{display:none}
.letter{max-width:600px;margin:0 auto;background:#fff;border-radius:28px;padding:0 28px;font-family:var(--hand);font-size:clamp(1.55rem,4vw,1.95rem);line-height:1.5;text-align:left;
  box-shadow:0 20px 40px -20px rgba(60,30,90,.5);max-height:0;opacity:0;overflow:hidden;transition:max-height .9s,opacity .9s,padding .9s}
.letter.show{max-height:1200px;opacity:1;padding:32px 28px}
.sig{display:block;text-align:right;color:var(--pink);margin-top:14px;font-size:2.1rem}

footer{padding:50px 20px 80px;text-align:center;font-family:var(--hand);font-size:2.2rem;color:var(--lav)}
.ghost{display:block;margin:14px auto 0;background:#fff;border-radius:99px;padding:10px 22px;font-family:var(--body);font-size:.95rem;color:var(--soft);box-shadow:0 6px 16px -8px rgba(60,30,90,.4)}

.fx{position:fixed;pointer-events:none;z-index:99;user-select:none;will-change:transform}

@media (min-width:900px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{height:210px}
  .pol:nth-child(odd){--r:-3deg}.pol:nth-child(even){--r:3deg}
}
@media (max-width:899px){.pol:nth-child(odd){--r:-2deg}.pol:nth-child(even){--r:2deg}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}