:root {
  --ink: #2b1732;
  --plum: #593157;
  --rose: #b95d76;
  --pink: #e9a2ad;
  --paper: #fff8f4;
  --cream: #f7eadf;
  --gold: #e8cba7;
  --white: #fffaf7;
  --serif: "STSong", "Songti SC", "Noto Serif CJK SC", serif;
  --sans: "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; width: 100%; }

.noise {
  position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 72px); color: white;
  background: linear-gradient(180deg, rgba(25, 10, 32, .68), transparent);
  transition: color .4s, background .4s;
}
.topbar.light { color: var(--ink); background: rgba(255,248,244,.83); backdrop-filter: blur(18px); box-shadow: 0 1px rgba(74,37,63,.08); }
.brand { color: inherit; text-decoration: none; font: 600 15px var(--serif); letter-spacing: .18em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.progress-text { font-size: 11px; letter-spacing: .18em; opacity: .7; }
.icon-button {
  width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; color: inherit;
  background: rgba(255,255,255,.08); cursor: pointer; display: grid; place-items: center;
}
.sound-icon { font-size: 18px; transition: transform .3s; }
.icon-button[aria-pressed="true"] .sound-icon { animation: soundPulse 1.6s ease-in-out infinite; }

.hero { min-height: 100svh; position: relative; display: grid; place-items: center; color: var(--white); overflow: hidden; }
.hero-bg { position: absolute; inset: -4%; background: url("assets/moon-bridge.png") center 41% / cover no-repeat; transform: scale(1.05); animation: breathe 14s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,12,39,.18), rgba(36,16,48,.1) 42%, rgba(29,13,39,.62)); }
.hero-copy { position: relative; z-index: 2; width: min(920px, 92vw); text-align: center; margin-top: -6vh; }
.eyebrow { margin: 0 0 20px; font-size: 11px; letter-spacing: .42em; text-transform: uppercase; opacity: .76; }
.eyebrow.dark { color: var(--rose); }
h1, h2, .brush-title { font-family: var(--serif); font-weight: 500; }
.hero h1 { margin: 0; font-size: clamp(44px, 5.6vw, 80px); letter-spacing: .08em; line-height: 1.28; text-shadow: 0 4px 28px rgba(37,12,41,.42); }
.hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: .75em; }
.hero-lead { margin: 28px auto 34px; font: 16px/2 var(--serif); letter-spacing: .1em; text-shadow: 0 2px 14px rgba(32,12,34,.7); }
.primary-button, .ghost-button, .yes-button, .memory-button {
  border: 0; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s;
}
.primary-button {
  margin: auto; padding: 15px 24px 15px 28px; border-radius: 999px;
  background: rgba(255,250,247,.92); color: var(--plum); display: flex; align-items: center; gap: 18px;
  box-shadow: 0 10px 36px rgba(30,8,35,.28); font-size: 13px; letter-spacing: .12em;
}
.primary-button:hover, .yes-button:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(30,8,35,.35); }
.scroll-cue { position: absolute; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .24em; opacity: .66; }
.scroll-cue i { width: 1px; height: 30px; background: linear-gradient(white, transparent); animation: cue 2s infinite; }

.section-pad { padding: clamp(100px, 13vw, 190px) 24px; }
.prologue { position: relative; text-align: center; background: radial-gradient(circle at 50% 30%, #fff 0, var(--paper) 50%, #f9e9e7 100%); }
.prologue::before, .prologue::after { content: "✦"; position: absolute; color: var(--pink); opacity: .35; font-size: 36px; }
.prologue::before { left: 12%; top: 25%; } .prologue::after { right: 14%; bottom: 24%; font-size: 20px; }
.prologue-inner { max-width: 740px; margin: auto; }
.brush-title { font-size: clamp(38px, 6vw, 66px); margin: 10px 0 28px; letter-spacing: .08em; }
.prologue-text { font: clamp(16px, 2vw, 19px)/2.2 var(--serif); letter-spacing: .1em; color: #63495b; }
.constellation { margin: 54px auto 0; display: flex; align-items: center; justify-content: center; max-width: 420px; }
.star-dot { width: 48px; height: 48px; border: 1px solid #d8aab3; border-radius: 50%; display: grid; place-items: center; font: 11px var(--serif); color: #b37b88; transition: .5s; }
.constellation i { height: 1px; flex: 1; max-width: 100px; background: linear-gradient(90deg, #dfbdc5, #ead5cd); transition: .5s; }
.star-dot.lit { color: white; background: var(--rose); border-color: var(--rose); box-shadow: 0 0 0 8px rgba(185,93,118,.1), 0 0 28px rgba(185,93,118,.3); }

.memories { background: linear-gradient(#f9e9e7, #fff9f4 45%, #f4e6e4); }
.memory { min-height: 100svh; max-width: 1180px; margin: auto; padding: clamp(90px, 10vw, 150px) clamp(24px, 5vw, 70px); display: grid; grid-template-columns: minmax(280px, .9fr) minmax(300px, 1fr); gap: clamp(50px, 8vw, 120px); align-items: center; }
.memory-right .memory-art { order: 2; }
.photo-frame { position: relative; aspect-ratio: 4 / 5; padding: 13px; background: rgba(255,255,255,.76); box-shadow: 0 28px 70px rgba(70,36,58,.2); transform: rotate(-1.7deg); }
.memory-right .photo-frame { transform: rotate(1.8deg); }
.photo-frame::after { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.5); pointer-events: none; }
.photo-crop { width: 100%; height: 100%; overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-graduation img { object-position: center 40%; }
.photo-first img { object-position: center 24%; transform: scale(1.13); }
.photo-wedding img { object-position: center 35%; transform: scale(1.15); }
.photo-number { position: absolute; right: -18px; top: 28px; width: 52px; height: 52px; border-radius: 50%; background: var(--plum); color: white; display: grid; place-items: center; font: 12px var(--serif); box-shadow: 0 8px 22px rgba(46,19,47,.28); }
.memory-copy h2 { margin: 8px 0 28px; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.35; letter-spacing: .04em; }
.memory-copy > p:not(.eyebrow):not(.quote):not(.memory-note) { font: 16px/2 var(--serif); color: #735967; max-width: 520px; }
.quote { padding-left: 18px; border-left: 2px solid var(--pink); font: 18px/1.8 var(--serif); color: var(--rose); }
.memory-button { margin-top: 22px; padding: 13px 18px 13px 22px; border: 1px solid #c98d9e; border-radius: 999px; background: transparent; color: var(--rose); display: inline-flex; gap: 20px; align-items: center; font-size: 13px; letter-spacing: .12em; }
.memory-button:hover { background: #fff; transform: translateY(-2px); }
.memory-button.unlocked { background: var(--rose); border-color: var(--rose); color: white; }
.memory-button b { font-weight: 400; }
.memory-note { max-height: 0; margin: 0; overflow: hidden; opacity: 0; color: var(--plum); font: 15px/1.8 var(--serif); transition: max-height .7s, opacity .7s, margin .7s; }
.memory.unlocked .memory-note { max-height: 100px; margin-top: 20px; opacity: 1; }
.memory.unlocked .photo-frame { box-shadow: 0 30px 90px rgba(185,93,118,.3), 0 0 0 8px rgba(255,255,255,.42); }

.confession { min-height: 100svh; position: relative; display: grid; place-items: center; padding: 120px 24px; overflow: hidden; color: white; }
.confession-bg { position: absolute; inset: 0; background: linear-gradient(rgba(31,12,43,.5), rgba(28,10,37,.84)), url("assets/moon-bridge.png") center 25% / cover no-repeat; filter: saturate(.78); transform: scale(1.03); }
.lock-panel, .letter { position: relative; z-index: 2; text-align: center; }
.lock-panel { max-width: 440px; padding: 45px 34px; border: 1px solid rgba(255,255,255,.25); background: rgba(46,21,55,.42); backdrop-filter: blur(18px); border-radius: 3px; }
.lock-star { display: block; font-size: 28px; margin-bottom: 20px; }
.lock-panel p { font: 24px var(--serif); letter-spacing: .08em; margin: 0 0 12px; }
.lock-panel small { display: block; opacity: .68; line-height: 1.8; }
.ghost-button { margin-top: 26px; padding: 11px 24px; background: transparent; color: white; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-size: 12px; letter-spacing: .12em; }
.letter { width: min(780px, 92vw); display: none; opacity: 0; transform: translateY(20px); }
.confession.open .lock-panel { display: none; }
.confession.open .letter { display: block; animation: letterIn 1.1s forwards; }
.letter-kicker { font: 22px var(--serif); color: #efc2ca; letter-spacing: .2em; }
.letter h2 { margin: 24px 0 36px; font-size: clamp(42px, 7vw, 76px); line-height: 1.3; text-shadow: 0 5px 28px rgba(10,0,20,.5); }
.letter-body { max-width: 650px; margin: auto; text-align: left; }
.letter-body p { font: clamp(15px, 2vw, 17px)/2.05 var(--serif); letter-spacing: .06em; color: rgba(255,250,247,.85); }
.promise { margin: 40px 0 18px; font: 17px var(--serif); }
.yes-button { padding: 16px 28px; border-radius: 999px; background: linear-gradient(135deg, #fff3ef, #edb0bb); color: #57304f; box-shadow: 0 10px 36px rgba(14,2,23,.3); font: 15px var(--serif); letter-spacing: .08em; }
.answer { opacity: 0; transform: translateY(8px); margin: 24px 0 0; color: #ffdce2; font: 18px var(--serif); transition: .8s; }
.answer.show { opacity: 1; transform: translateY(0); }
.signature { display: block; margin-top: 54px; font: 14px var(--serif); letter-spacing: .16em; opacity: .66; }

.petals { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.petal { position: absolute; top: -30px; width: 12px; height: 18px; border-radius: 80% 0 80% 20%; background: linear-gradient(135deg, #ffdce3, #dd758f); animation: fall var(--duration) linear forwards; transform: rotate(var(--rotate)); }
.reveal { opacity: 0; transform: translateY(38px); transition: opacity 1s ease, transform 1s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes breathe { to { transform: scale(1.1) translateY(-1%); } }
@keyframes cue { 0%,100% { transform: scaleY(.6); transform-origin: top; opacity:.4; } 50% { transform: scaleY(1); opacity:1; } }
@keyframes soundPulse { 0%,100%{ transform:rotate(-6deg) scale(.95)} 50%{transform:rotate(6deg) scale(1.12)} }
@keyframes letterIn { to { opacity: 1; transform: translateY(0); } }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(calc(var(--rotate) + 540deg)); } }

@media (max-width: 760px) {
  .topbar { padding: 16px 18px; }
  .hero-bg { background-position: center center; }
  .hero-copy { width: 94vw; margin-top: -2vh; }
  .hero h1 { font-size: clamp(32px, 9.2vw, 42px); letter-spacing: .04em; line-height: 1.4; }
  .hero h1 span:last-child { margin-left: 0; }
  .hero-lead { font-size: 14px; }
  .memory { min-height: auto; grid-template-columns: 1fr; gap: 48px; padding-top: 100px; padding-bottom: 100px; }
  .memory-right .memory-art { order: 0; }
  .memory-copy h2 { font-size: 38px; }
  .photo-frame { width: min(88vw, 430px); margin: auto; }
  .prologue-text br { display: none; }
  .letter-body { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}