@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Noto+Serif+SC:wght@400;500;600;700&display=swap");

:root {
  --cream: #f8f1ec;
  --paper: #fffaf6;
  --rose: #d9a29f;
  --rose-deep: #9c5f61;
  --ink: #3c302e;
  --gold: #b4935e;
  --night: #171316;
  --serif: "DM Serif Display", "Noto Serif SC", serif;
  --cn-serif: "Noto Serif SC", "Songti SC", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--cn-serif);
  overflow-x: hidden;
}

body.locked { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; width: 100%; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: .045;
  pointer-events: none;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 213, 210, .22), transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.25rem;
  padding: 2rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.95), transparent 42%),
    linear-gradient(135deg, #eee0dc, #faf6f1 45%, #e8d1ce);
  transition: opacity 1s ease, visibility 1s ease;
}

.intro::before, .intro::after {
  content: "";
  position: absolute;
  width: 35vw;
  height: 70vh;
  opacity: .38;
  filter: blur(2px);
  background: radial-gradient(ellipse at center, #fff 0 3%, transparent 4%), radial-gradient(ellipse at center, #d7aca7 0 2%, transparent 3%);
  background-size: 77px 63px, 95px 81px;
  transform: rotate(-16deg);
}

.intro::before { left: -10vw; top: 10vh; }
.intro::after { right: -10vw; bottom: 5vh; transform: rotate(18deg); }
.intro.opened { opacity: 0; visibility: hidden; }

.envelope { position: relative; width: 270px; height: 172px; margin-bottom: 1rem; filter: drop-shadow(0 22px 32px rgba(88,54,50,.18)); }
.envelope__back, .envelope__front, .envelope__flap { position: absolute; inset: 0; }
.envelope__back { background: #e3c3be; border-radius: 4px; }
.envelope__front { z-index: 3; background: linear-gradient(150deg, transparent 49.5%, #f0d7d1 50%) left/50% 100% no-repeat, linear-gradient(210deg, transparent 49.5%, #ead0cb 50%) right/50% 100% no-repeat; }
.envelope__front::after { content:""; position:absolute; inset:36% 0 0; background:linear-gradient(35deg,#f3dcd7 50%,transparent 51%),linear-gradient(-35deg,#edcfca 50%,transparent 51%); }
.envelope__flap { z-index: 4; clip-path: polygon(0 0,100% 0,50% 68%); background: #e8cbc6; transform-origin: top; transition: transform .8s ease; }
.envelope__letter { position: absolute; z-index: 2; left: 9%; right: 9%; bottom: 4%; height: 90%; padding: 1.2rem; background: #fffaf6; text-align: left; transition: transform 1s ease .25s; }
.envelope__letter span, .envelope__letter small { display:block; color:#a77d77; font: 10px/1.8 Arial,sans-serif; letter-spacing:.2em; }
.envelope__letter strong { display:block; margin:.25rem 0; font: 2rem var(--cn-serif); }
.wax-seal { position:absolute; z-index:5; left:50%; top:43%; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#f2d5c8; background:#9f4d50; border:4px double #c97975; transform:translate(-50%,-50%); }
.intro.opening .envelope__flap { transform: rotateX(180deg); z-index:1; }
.intro.opening .envelope__letter { transform: translateY(-80px); }
.intro.opening .wax-seal { opacity:0; transition:opacity .25s; }
.intro__eyebrow { margin:0; color:var(--rose-deep); font:11px Arial,sans-serif; letter-spacing:.28em; }
.intro h1 { margin:.2rem 0 .6rem; font-size:clamp(1.5rem,4vw,2.6rem); font-weight:500; }
.open-button { display:flex; align-items:center; gap:2rem; padding:.9rem 1rem .9rem 1.5rem; border:1px solid rgba(92,57,52,.25); border-radius:100px; color:var(--ink); background:rgba(255,255,255,.4); cursor:pointer; transition:.3s ease; }
.open-button i { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-style:normal; color:white; background:var(--ink); }
.open-button:hover { transform:translateY(-3px); background:#fff; box-shadow:0 12px 30px rgba(91,51,48,.12); }

.sound-toggle { position:fixed; z-index:100; top:1.2rem; right:1.2rem; display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem; border:1px solid rgba(255,255,255,.25); border-radius:100px; color:white; background:rgba(31,23,25,.4); backdrop-filter:blur(12px); cursor:pointer; }
.sound-bars { display:flex; align-items:center; gap:2px; height:13px; }
.sound-bars i { display:block; width:2px; height:4px; background:currentColor; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation:sound .8s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay:-.3s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay:-.55s; }
.sound-label { font:10px Arial,sans-serif; letter-spacing:.12em; }
@keyframes sound { to { height:13px; } }

.hero { position:relative; min-height:100svh; overflow:hidden; color:white; background:#2b2021; }
.hero__image-wrap, .hero__image, .hero__veil { position:absolute; inset:0; width:100%; height:100%; }
.hero__image { object-fit:cover; object-position:center 35%; transform:scale(1.04); animation:hero-in 2s ease forwards; }
.hero__veil { background:linear-gradient(90deg,rgba(24,15,17,.76) 0%,rgba(24,15,17,.25) 50%,rgba(24,15,17,.12)),linear-gradient(0deg,rgba(16,10,12,.48),transparent 45%); }
.hero__content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:100svh; width:min(90%,1300px); margin:auto; padding:6rem 0 8rem; }
.kicker { margin:0 0 1rem; font:11px Arial,sans-serif; letter-spacing:.32em; color:#f0d1cf; }
.hero__title { margin:0; font-weight:400; text-shadow:0 3px 25px rgba(0,0,0,.18); }
.hero__title span { display:block; font-size:clamp(4.5rem,12vw,10rem); line-height:.9; letter-spacing:.08em; }
.hero__title em { display:block; margin:.9rem 0 0 .4rem; font-style:normal; font-size:clamp(1.4rem,3.2vw,3rem); letter-spacing:.22em; }
.hero__meta { display:flex; align-items:center; gap:1.2rem; margin-top:2.5rem; font:10px Arial,sans-serif; letter-spacing:.25em; }
.hero__meta .line { width:80px; height:1px; background:rgba(255,255,255,.55); }
.hero__number { position:absolute; z-index:1; right:-.02em; bottom:-.22em; color:rgba(255,255,255,.1); font:clamp(16rem,36vw,34rem)/1 var(--serif); }
.scroll-hint { position:absolute; z-index:2; bottom:2rem; left:50%; display:flex; flex-direction:column; align-items:center; gap:.7rem; color:white; text-decoration:none; transform:translateX(-50%); }
.scroll-hint span { font:9px Arial,sans-serif; letter-spacing:.25em; }
.scroll-hint i { display:block; width:1px; height:42px; background:linear-gradient(white,transparent); animation:scroll 1.8s ease infinite; }
@keyframes hero-in { from { transform:scale(1.13); } to { transform:scale(1.04); } }
@keyframes scroll { 50% { transform:translateY(8px); opacity:.35; } }

.chapter { padding:clamp(6rem,12vw,11rem) 5vw; background:var(--cream); }
.section-heading { max-width:1200px; margin:0 auto clamp(4rem,8vw,7rem); }
.section-heading p, .wishes__intro>p { margin:0 0 1rem; color:var(--rose-deep); font:10px Arial,sans-serif; letter-spacing:.3em; }
.section-heading h2, .wishes__intro h2 { margin:0; font-size:clamp(2.7rem,7vw,6rem); font-weight:500; line-height:1.2; }
.editorial-grid { display:grid; grid-template-columns:1.15fr .65fr .85fr; align-items:center; gap:clamp(1.5rem,4vw,5rem); max-width:1350px; margin:auto; }
.photo { margin:0; }
.photo img { height:clamp(540px,72vw,860px); object-fit:cover; }
.photo--tall img { object-position:center; }
.photo--soft { align-self:end; margin-bottom:-7rem; }
.photo--soft img { height:clamp(320px,45vw,560px); }
.photo figcaption { margin-top:1rem; color:#796763; font-size:.76rem; letter-spacing:.08em; }
.editorial-copy { position:relative; z-index:1; margin-right:-3rem; }
.editorial-copy p { color:#63524f; font-size:clamp(.95rem,1.3vw,1.1rem); line-height:2.1; }
.dropcap { float:left; margin:-.3rem .5rem 0 0; color:var(--rose); font:5rem/1 var(--serif); }
.signature { margin-top:2rem; color:var(--gold); font:italic 2.2rem var(--serif); transform:rotate(-5deg); }

.letter-section { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; background:#2b211e; color:#f9eee7; }
.letter-photo { position:relative; min-height:800px; overflow:hidden; }
.letter-photo img { position:absolute; inset:0; height:100%; object-fit:cover; }
.letter-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 75%,#2b211e); }
.photo-index { position:absolute; z-index:1; left:2rem; bottom:2rem; font:10px Arial,sans-serif; letter-spacing:.25em; }
.birthday-letter { align-self:center; max-width:650px; padding:clamp(4rem,8vw,9rem); }
.letter-label { color:#d7a9a2; font:10px Arial,sans-serif; letter-spacing:.3em; }
.birthday-letter h2 { margin:2rem 0; font-size:clamp(2rem,4vw,3.5rem); font-weight:400; }
.typed-copy p { color:#e2d4cd; font-size:clamp(.95rem,1.15vw,1.08rem); line-height:2.15; opacity:.85; }
.letter-end { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.15); color:#c9b8b0; font-size:.78rem; }
.letter-end strong { color:#e5b9b2; font-size:1.15rem; }

.memories { position:relative; overflow:hidden; padding:clamp(6rem,12vw,10rem) 4vw; background:#efe1dc; }
.memories::before { content:"19"; position:absolute; left:-.04em; top:.05em; color:rgba(255,255,255,.34); font:34vw/1 var(--serif); }
.section-heading--center { position:relative; text-align:center; }
.section-heading--center span { display:block; margin-top:1.2rem; color:#74615e; }
.polaroid-wall { position:relative; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:2vw; max-width:1400px; margin:auto; }
.polaroid { position:relative; padding:.75rem .75rem 3rem; border:0; background:#fffaf5; box-shadow:0 18px 45px rgba(67,43,41,.16); cursor:zoom-in; transition:.4s ease; }
.polaroid:hover { z-index:3; transform:translateY(-15px) rotate(0deg) scale(1.04); box-shadow:0 28px 60px rgba(67,43,41,.22); }
.polaroid img { height:430px; object-fit:cover; }
.polaroid span { position:absolute; left:0; right:0; bottom:.9rem; color:#6e5854; font-size:.8rem; letter-spacing:.12em; }
.polaroid--one { transform:rotate(-5deg) translateY(2rem); }
.polaroid--two { transform:rotate(3deg) translateY(-2rem); }
.polaroid--three { transform:rotate(-2deg) translateY(1rem); }
.polaroid--four { transform:rotate(6deg) translateY(-1rem); }
.polaroid--one img { object-position:center 25%; }
.polaroid--three img { object-position:center 24%; }
.tap-note { position:relative; margin:5rem 0 0; text-align:center; color:#8d7470; font-size:.75rem; letter-spacing:.12em; }

.wishes { display:grid; grid-template-columns:.8fr 1.2fr; gap:6vw; padding:clamp(6rem,10vw,10rem) 6vw; color:#f8edeb; background:#1c1719; }
.wishes__intro { position:sticky; top:20vh; align-self:start; }
.wishes__intro span { display:block; margin-top:1.5rem; color:#bfaeaa; line-height:1.8; }
.wish-board { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.8rem,2vw,1.5rem); }
.wish-star { position:relative; display:grid; place-items:center; aspect-ratio:1; padding:0; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#9c8987; background:transparent; cursor:pointer; transition:.35s ease; }
.wish-star::before { content:"✦"; font-size:clamp(1rem,2vw,1.7rem); }
.wish-star span { position:absolute; bottom:14%; font:9px Arial,sans-serif; }
.wish-star:hover, .wish-star.active { color:#f5d0c9; border-color:#d7a59d; background:rgba(217,162,159,.12); box-shadow:0 0 35px rgba(217,162,159,.16); transform:scale(1.06); }
.wish-star.found::after { content:""; position:absolute; inset:9%; border:1px solid rgba(218,175,167,.25); border-radius:50%; }
.wish-display { grid-column:2; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1.5rem; min-height:120px; margin-top:1rem; padding:1.2rem 0; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.wish-display span { color:#d8a49e; font:3rem var(--serif); }
.wish-display p { margin:0; color:#ddcfcc; line-height:1.8; }

.finale { position:relative; display:grid; place-items:center; min-height:100svh; overflow:hidden; text-align:center; color:white; background:#0c090c; }
.finale>img, .finale__overlay { position:absolute; inset:0; width:100%; height:100%; }
.finale>img { object-fit:cover; object-position:center; opacity:.7; }
.finale__overlay { background:radial-gradient(circle at 50% 42%,transparent,rgba(10,6,10,.7) 65%),linear-gradient(0deg,rgba(10,6,10,.75),transparent 50%); }
.finale__stars { position:absolute; inset:0; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px); background-size:91px 91px; opacity:.24; animation:stars 8s linear infinite; }
.finale__content { position:relative; z-index:1; padding:5rem 1.5rem; text-shadow:0 2px 20px rgba(0,0,0,.3); }
.finale__content>p { margin:0 0 1.5rem; color:#efd0ce; font:10px Arial,sans-serif; letter-spacing:.35em; }
.finale__content h2 { margin:0; font-size:clamp(2rem,5.5vw,5rem); font-weight:400; line-height:1.45; }
.finale__content>strong { display:block; margin-top:1.5rem; font:10px Arial,sans-serif; letter-spacing:.35em; }
.candle { position:relative; width:80px; margin:2.5rem auto .5rem; font:3rem var(--serif); }
.candle i { position:absolute; left:50%; top:-20px; width:12px; height:20px; border-radius:80% 20% 55% 45%; background:#ffd890; filter:drop-shadow(0 0 10px #ffac62); transform:rotate(45deg); animation:flame .9s ease-in-out infinite alternate; }
.replay-button { margin-top:2.2rem; padding:.8rem 1.4rem; border:1px solid rgba(255,255,255,.35); border-radius:100px; color:white; background:rgba(255,255,255,.08); cursor:pointer; backdrop-filter:blur(8px); }
@keyframes flame { to { transform:rotate(42deg) scale(.8,1.1); } }
@keyframes stars { 50% { transform:translateY(8px); opacity:.4; } }

.reveal { opacity:0; transform:translateY(38px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:none; }

.lightbox { width:min(92vw,850px); max-height:92vh; padding:0; border:0; color:white; background:transparent; overflow:visible; }
.lightbox::backdrop { background:rgba(15,10,12,.86); backdrop-filter:blur(12px); }
.lightbox img { max-height:80vh; object-fit:contain; }
.lightbox p { margin:1rem 0 0; text-align:center; line-height:1.7; }
.lightbox__close { position:absolute; z-index:2; top:-45px; right:0; width:36px; height:36px; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:white; background:rgba(0,0,0,.25); cursor:pointer; }

@media (max-width: 900px) {
  .cursor-glow { display:none; }
  .hero__veil { background:linear-gradient(0deg,rgba(24,15,17,.72),transparent 68%); }
  .hero__content { justify-content:flex-end; padding-bottom:9rem; }
  .editorial-grid { grid-template-columns:1fr 1fr; }
  .editorial-copy { margin:0; }
  .photo--soft { grid-column:2; margin:-3rem 0 0; }
  .letter-section { grid-template-columns:1fr; }
  .letter-photo { min-height:70vh; }
  .letter-photo::after { background:linear-gradient(0deg,#2b211e,transparent 25%); }
  .polaroid-wall { grid-template-columns:1fr 1fr; gap:4rem 1.2rem; }
  .polaroid img { height:55vw; }
  .wishes { grid-template-columns:1fr; }
  .wishes__intro { position:static; }
  .wish-display { grid-column:auto; }
}

@media (max-width: 600px) {
  .intro { padding:1.3rem; }
  .envelope { width:230px; height:147px; }
  .intro h1 { max-width:11em; }
  .sound-label { display:none; }
  .hero__image { object-position:58% center; }
  .hero__title span { font-size:4.2rem; }
  .hero__title em { font-size:1.25rem; letter-spacing:.14em; }
  .hero__meta { gap:.7rem; letter-spacing:.12em; }
  .hero__meta .line { width:35px; }
  .chapter { padding-left:1.2rem; padding-right:1.2rem; }
  .editorial-grid { grid-template-columns:1fr; gap:3rem; }
  .photo img { height:auto; max-height:75vh; }
  .editorial-copy { padding:0 .6rem; }
  .photo--soft { grid-column:auto; margin:0; }
  .letter-photo { min-height:60vh; }
  .birthday-letter { padding:4.5rem 1.5rem; }
  .letter-end { align-items:start; flex-direction:column; }
  .memories { padding-left:1rem; padding-right:1rem; }
  .polaroid-wall { gap:2.5rem .65rem; }
  .polaroid { padding:.4rem .4rem 2.4rem; }
  .polaroid img { height:62vw; }
  .polaroid--one, .polaroid--three { transform:rotate(-3deg); }
  .polaroid--two, .polaroid--four { transform:rotate(3deg); }
  .wish-board { grid-template-columns:repeat(4,1fr); }
  .wish-star:last-child { grid-column:2; }
  .finale>img { object-position:48% center; }
}

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