@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--bg:#09070d;--bg2:#120d1b;--text:#fff9fd;--muted:#c4b9c6;--pink:#ffb3d9;--pink2:#ffd7eb;--lav:#c9bbff;--gold:#fff0b8;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font-family:"DM Sans",system-ui,sans-serif;line-height:1.65;background:radial-gradient(circle at 18% 14%,rgba(255,179,217,.18),transparent 28%),radial-gradient(circle at 82% 18%,rgba(201,187,255,.16),transparent 26%),radial-gradient(circle at 50% 80%,rgba(255,240,184,.08),transparent 24%),linear-gradient(180deg,var(--bg2),var(--bg));overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08) 0 1px,transparent 1px),radial-gradient(circle at 70% 80%,rgba(255,255,255,.07) 0 1px,transparent 1px);background-size:130px 130px,170px 170px;opacity:.5}.hidden{display:none}.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 45%,rgba(255,179,217,.12),transparent 30%),#09070d;transition:opacity .9s ease,transform .9s ease}.gate-hide{opacity:0;transform:scale(1.03);pointer-events:none}.gate-card{width:min(460px,100%);padding:42px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.045);backdrop-filter:blur(22px);box-shadow:0 30px 90px rgba(0,0,0,.45);text-align:center}.mini-heart{font-family:"Playfair Display",serif;font-size:3.8rem;color:var(--pink);text-shadow:0 0 34px rgba(255,179,217,.4);animation:pulse 2.1s ease-in-out infinite}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:700;color:#cbbdca;margin-bottom:14px}.gate-card h1{margin:0;font-family:"Playfair Display",serif;font-size:clamp(2.7rem,9vw,4.4rem);line-height:1}.gate-card p{color:var(--muted);margin:18px auto 28px;max-width:340px}#unlock-form{display:grid;gap:12px}#password{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.18);color:var(--text);text-align:center;border-radius:15px;padding:15px 16px;outline:none;letter-spacing:.12em}#password:focus{border-color:rgba(255,179,217,.55);box-shadow:0 0 0 4px rgba(255,179,217,.08)}#unlock-form button{border:0;border-radius:15px;padding:15px;background:linear-gradient(100deg,var(--pink2),var(--lav));color:#1d1020;font-weight:700;cursor:pointer;box-shadow:0 12px 34px rgba(255,179,217,.18);transition:transform .18s ease}#unlock-form button:hover{transform:translateY(-2px)}.gate-error{min-height:1.5em;margin:12px 0 0!important;color:#ffabc9!important}.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:90px 24px 70px;position:relative}.hero:after{content:"";position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(255,179,217,.09),transparent 65%);animation:breathe 6s ease-in-out infinite}.hero-inner{position:relative;z-index:2}.hero h1{margin:0;font-family:"Playfair Display",serif;font-size:clamp(4rem,11vw,8rem);line-height:.94;letter-spacing:-.055em}.hero h1 span{display:block;color:var(--pink2);text-shadow:0 0 50px rgba(255,179,217,.2)}.hero h1 b{color:var(--gold)}.hero-copy{max-width:680px;margin:34px auto 0;color:var(--muted);font-size:clamp(1rem,2vw,1.18rem)}.scroll-hint{display:inline-block;margin-top:42px;color:#d7cbd5;font-size:.9rem;animation:bob 2.3s ease-in-out infinite}.letter-section,.reasons,.wish{max-width:1120px;margin:0 auto;padding:110px 24px}.letter-card{width:min(760px,100%);margin:0 auto;padding:clamp(34px,6vw,70px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 40px 100px rgba(0,0,0,.25)}.card-symbol{color:var(--gold);font-size:1.4rem;margin-bottom:22px}.letter-card h2,.section-title h2,.wish h2{margin:0;font-family:"Playfair Display",serif;font-size:clamp(2.5rem,6vw,4.7rem);line-height:1;letter-spacing:-.045em}.letter{margin-top:30px;color:#d8cdd8;font-size:1.06rem}.letter p{margin:0 0 20px}.signature{color:var(--pink2)}.section-title{text-align:center}.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}.reason{padding:30px;min-height:240px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.045);transition:transform .25s ease,border-color .25s ease}.reason:hover{transform:translateY(-5px);border-color:rgba(255,179,217,.35)}.reason span{color:var(--gold);font-size:.76rem;letter-spacing:.15em}.reason h3{margin:26px 0 9px;font-family:"Playfair Display",serif;font-size:1.55rem}.reason p{color:var(--muted);margin:0}.wish{text-align:center;position:relative}.wish-glow{position:absolute;inset:24% 10%;border-radius:50%;background:radial-gradient(circle,rgba(201,187,255,.13),transparent 65%);filter:blur(28px)}.wish>*{position:relative;z-index:2}.wish h2 span{color:var(--pink2)}.wish p{max-width:700px;margin:28px auto 0;color:var(--muted);font-size:1.08rem}.heart-row{margin-top:36px;color:var(--pink);font-size:2rem;letter-spacing:.35em;text-shadow:0 0 28px rgba(255,179,217,.25);animation:pulse 3s ease-in-out infinite}footer{display:flex;justify-content:space-between;gap:20px;max-width:1120px;margin:0 auto;padding:34px 24px 45px;color:#8f8391;font-size:.78rem;border-top:1px solid rgba(255,255,255,.07)}.floating-heart{position:fixed;bottom:-20px;z-index:30;color:rgba(255,179,217,.55);pointer-events:none;animation:floatUp linear forwards}.confetti{position:fixed;z-index:40;border-radius:4px;pointer-events:none;animation:confettiFall ease-out forwards}.shake{animation:shake .35s linear}@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}@keyframes breathe{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.05);opacity:1}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}@keyframes floatUp{from{transform:translateY(0) rotate(0);opacity:0}12%{opacity:1}to{transform:translateY(-115vh) rotate(320deg);opacity:0}}@keyframes confettiFall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(120vh) rotate(720deg);opacity:0}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-5px)}}@media(max-width:820px){.reason-grid{grid-template-columns:1fr}.letter-section,.reasons,.wish{padding-top:80px;padding-bottom:80px}}@media(max-width:560px){.gate-card{padding:32px 22px}.hero h1{font-size:clamp(3.3rem,17vw,5.2rem)}footer{flex-direction:column}}

.content-show {
  display: block;
  animation: contentReveal 1.1s ease both;
}

@keyframes contentReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}