:root {
  --text: #eef3ff;
  --muted: rgba(238, 243, 255, 0.72);
  --glass: rgba(226, 234, 255, 0.09);
  --border: rgba(226, 234, 255, 0.16);
  --accent: #d8e0ff;
  --accent-strong: #93a8e8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(145, 164, 236, 0.18), transparent 26%),
    linear-gradient(180deg, #141b34, #090d1b 56%, #03050a);
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
.loading-screen,.intro,.success-modal{position:fixed;inset:0;z-index:25}
.loading-screen{display:grid;place-items:center;background:#060913;transition:opacity .8s ease}
.loading-screen.hidden,.success-modal.hidden{opacity:0;pointer-events:none}
.intro{display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,rgba(4,7,14,.76),rgba(4,7,14,.96))}
.night-sky,.constellation,.constellation-lines{position:absolute;inset:0}
.night-sky{background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.5px);background-size:120px 120px,180px 180px;background-position:0 0,60px 30px;opacity:.55}
.constellation{display:grid;place-items:center}
.star{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.8);animation:twinkle 2.5s ease-in-out infinite}
.s1{top:34%;left:38%}.s2{top:22%;left:46%}.s3{top:36%;left:51%}.s4{top:18%;left:58%}.s5{top:37%;left:66%}.s6{top:56%;left:50%}
.constellation-lines{width:min(460px,86vw);height:auto;place-self:center}
.constellation-lines path{fill:none;stroke:rgba(209,221,255,.78);stroke-width:2;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s ease,opacity 1.2s ease}
body.intro-complete .constellation-lines path{stroke-dashoffset:0;opacity:0}
body.intro-complete .star{transform:translateY(-40px) scale(.2);opacity:0;transition:transform 1.2s ease,opacity 1.2s ease}
body.intro-complete .intro{opacity:0;pointer-events:none;transition:opacity 1.2s ease 1s}
.intro-copy{position:relative;z-index:2;max-width:640px;text-align:center}
.intro h1,.hero h2,.modal-card h3{font-family:"Playfair Display",serif}
.intro h1{font-size:clamp(2.4rem,7vw,4.8rem);margin:12px 0}
.eyebrow{margin:0;letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;color:rgba(227,234,255,.72)}
.intro-actions,.response-options,.share-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.page-shell.hidden{opacity:0;transform:translateY(22px)}
.page-shell{transition:opacity 1s ease .9s,transform 1s ease .9s}
body.intro-complete .page-shell{opacity:1;transform:none}
.section{width:min(1080px,calc(100% - 32px));margin:0 auto;padding:88px 0}
.hero{min-height:100vh;display:grid;align-items:center;background:linear-gradient(180deg,rgba(5,8,14,.2),rgba(5,8,14,.82)),url("assets/bg.jpg") center/cover}
.hero h2{font-size:clamp(3rem,8vw,6rem);line-height:1;margin:12px 0}
.typed-line{min-height:58px;color:var(--muted)}
.quote-section{text-align:center;padding-top:8px}
.quote{margin:0;font-family:"Cormorant Garamond",serif;font-size:clamp(1.7rem,4vw,2.9rem)}
.glass-card{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(18px);border-radius:30px;padding:30px;box-shadow:0 28px 60px rgba(0,0,0,.24)}
.glass-card p{color:var(--muted);line-height:1.9}
.gallery{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.memory-card{min-height:280px;padding:24px;border-radius:24px;display:flex;align-items:end;background:linear-gradient(180deg,transparent,rgba(5,8,14,.86)),url("assets/bg.jpg") center/cover}
.response-choice,.share-actions button,.skip-button,.cta-button,.music-toggle{border:0;border-radius:999px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.response-choice,.share-actions button,.skip-button{padding:14px 20px;color:var(--text);background:rgba(255,255,255,.08);border:1px solid var(--border)}
.cta-button{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;color:#07101d;text-decoration:none;background:linear-gradient(135deg,var(--accent),#f6f8ff)}
.response-form label{display:block;margin-bottom:16px;color:var(--muted)}
.response-form input,.response-form textarea{width:100%;margin-top:8px;padding:14px 16px;border-radius:16px;border:1px solid var(--border);color:var(--text);background:rgba(255,255,255,.08);font:inherit}
.music-toggle{position:fixed;right:24px;bottom:24px;z-index:10;width:56px;height:56px;color:#07101d;background:linear-gradient(135deg,#d9e2ff,#9db0ec)}
.success-modal{display:grid;place-items:center;background:rgba(2,4,10,.76);padding:24px;transition:opacity .4s ease}
.modal-card{max-width:440px;text-align:center}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes twinkle{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}