:root {
  --ink: #fdf7f4;
  --muted: #c9bfd0;
  --rose: #e8a9b8;
  --rose-light: #ffd9df;
  --gold: #f3cf99;
  --night: #121126;
  --night-2: #211a3b;
  --serif: "Noto Serif SC", "Songti SC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font-family: var(--serif);
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .65; }
#fireworks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 24; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
#fireworks.active { opacity: 1; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero-image {
  position: absolute; inset: 0; z-index: -3;
  background: url("assets/birthday-garden.png") center center / cover no-repeat;
  transform: scale(1.04);
  animation: breathe 18s ease-in-out infinite alternate;
}
.hero-vignette {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(10,9,29,.78) 0%, rgba(15,13,37,.32) 48%, rgba(11,9,28,.12) 75%),
              linear-gradient(0deg, var(--night) 0%, transparent 22%, rgba(8,7,23,.18) 100%);
}
.nav { position: absolute; top: 0; left: 0; right: 0; padding: 28px clamp(22px,5vw,72px); display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.nav-brand { color: var(--ink); text-decoration: none; font-family: Parisienne, cursive; font-size: 27px; letter-spacing: .02em; }
.sound-button { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.22); color: var(--ink); background: rgba(15,12,37,.25); backdrop-filter: blur(12px); border-radius: 100px; padding: 10px 15px; cursor: pointer; }
.sound-bars { height: 16px; display: flex; align-items: center; gap: 2px; }
.sound-bars i { display: block; width: 2px; height: 5px; background: var(--rose-light); border-radius: 4px; }
.sound-button.playing .sound-bars i { animation: equalize .8s ease-in-out infinite alternate; }
.sound-button.playing .sound-bars i:nth-child(2) { animation-delay: -.3s; }.sound-button.playing .sound-bars i:nth-child(3) { animation-delay: -.55s; }
.sound-label { font-size: 12px; letter-spacing: .12em; }

.hero-copy { width: min(90%, 1180px); padding-left: clamp(0px, 3vw, 50px); margin-top: -4vh; }
.eyebrow { color: var(--gold); font-family: Georgia, serif; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; margin: 0 0 22px; }
.hero h1 { margin: 0; font-weight: 500; font-size: clamp(64px, 10vw, 144px); line-height: .9; letter-spacing: -.055em; text-shadow: 0 10px 60px rgba(2,0,15,.6); }
.hero h1 span { display: block; margin: 0 0 20px 8px; font-size: clamp(16px, 2vw, 26px); font-weight: 400; letter-spacing: .45em; color: var(--rose-light); }
.hero-wish { margin: 30px 0 34px 5px; font-size: clamp(15px, 1.35vw, 19px); line-height: 2; color: rgba(255,250,248,.83); letter-spacing: .08em; }
.open-button, .wish-button { position: relative; border: 0; border-radius: 100px; padding: 17px 23px 17px 27px; color: #2c2034; background: linear-gradient(120deg, #f8d7d8, #f4c795); box-shadow: 0 16px 45px rgba(225,158,173,.25); cursor: pointer; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.open-button:hover, .wish-button:hover { transform: translateY(-3px); box-shadow: 0 19px 55px rgba(225,158,173,.42); }
.open-button span, .wish-button span { margin-right: 30px; letter-spacing: .12em; }
.open-button b, .wish-button b { font-size: 16px; }
.cake-ticket-button { position: absolute; z-index: 3; left: 64%; top: 61%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 24px; border: 0; color: #fff4dc; background: transparent; cursor: pointer; filter: drop-shadow(0 0 12px rgba(255,210,145,.8)); animation: cakeHint 2s ease-in-out infinite; }
.cake-ticket-button span { font-size: 27px; }.cake-ticket-button b { padding: 6px 10px; border-radius: 100px; background: rgba(20,13,35,.55); backdrop-filter: blur(8px); font-size: 10px; font-weight: 400; letter-spacing: .12em; white-space: nowrap; opacity: .78; }
.cake-ticket-button:hover { filter: drop-shadow(0 0 22px #ffd891); }
.scroll-cue { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .28em; color: rgba(255,255,255,.55); }
.scroll-cue span { width: 1px; height: 35px; background: linear-gradient(var(--rose-light), transparent); animation: scrollLine 1.8s infinite; }

.chapter { position: relative; z-index: 1; padding: clamp(90px, 14vw, 180px) clamp(22px, 7vw, 110px); }
.intro-section { min-height: 95vh; display: grid; grid-template-columns: 1fr 3fr; align-items: center; gap: 5vw; background: radial-gradient(circle at 77% 44%, #3b2545 0%, #211831 34%, #121126 72%); }
.chapter-number { align-self: start; color: rgba(243,207,153,.35); font: 400 clamp(80px,14vw,190px)/1 Georgia, serif; }
.intro-card { max-width: 730px; padding: clamp(30px,5vw,70px); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); backdrop-filter: blur(14px); box-shadow: 0 25px 80px rgba(0,0,0,.16); }
.script { font-family: Parisienne, cursive; color: var(--rose); font-size: clamp(34px,5vw,65px); line-height: 1; margin: 0 0 24px; }
.intro-card h2, .section-heading h2, .constellation-copy h2, .countdown-card h2, .finale h2 { font-size: clamp(33px,5vw,68px); font-weight: 500; letter-spacing: -.04em; margin: 0 0 26px; }
.intro-card > p:not(.script) { color: var(--muted); font-size: 16px; line-height: 2.15; letter-spacing: .05em; }
.signature { display: block; color: var(--gold); margin-top: 40px; font-size: 13px; letter-spacing: .15em; }

.wishes-section { background: linear-gradient(180deg, #121126, #21152e 50%, #151326); }
.section-heading { text-align: center; max-width: 750px; margin: 0 auto 70px; }
.section-heading > p:last-child { color: var(--muted); letter-spacing: .1em; }
.wish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1180px; margin: auto; }
.wish-card { position: relative; min-height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); cursor: pointer; transition: transform .4s, background .4s, border-color .4s; overflow: hidden; }
.wish-card::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(243,207,153,.18); }
.wish-card:hover { transform: translateY(-9px); background: rgba(232,169,184,.11); border-color: rgba(232,169,184,.6); }
.wish-card .flower { font-size: 70px; color: var(--rose); filter: drop-shadow(0 0 22px rgba(232,169,184,.4)); transition: transform .6s; }
.wish-card:hover .flower { transform: rotate(25deg) scale(1.12); }
.wish-card small { color: var(--gold); letter-spacing: .3em; margin-top: 30px; }
.wish-card strong { font-size: 35px; font-weight: 500; margin: 11px 0 45px; letter-spacing: .2em; }
.wish-card em { font-style: normal; color: var(--muted); font-size: 11px; letter-spacing: .2em; }

.constellation-section { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7vw; background: radial-gradient(circle at 74% 50%, rgba(120,73,119,.38), transparent 32%), #111023; }
.constellation-copy { max-width: 550px; }
.constellation-copy p:last-child { color: var(--muted); line-height: 2; max-width: 460px; }
.age-orbit { width: min(70vw, 540px); aspect-ratio: 1; position: relative; display: grid; place-items: center; margin: auto; }
.orbit-ring { position: absolute; inset: 7%; border: 1px solid rgba(243,207,153,.28); border-radius: 50%; box-shadow: 0 0 100px rgba(232,169,184,.1), inset 0 0 100px rgba(232,169,184,.06); }
.orbit-ring::after { content: ""; position: absolute; inset: 17%; border: 1px dashed rgba(232,169,184,.2); border-radius: 50%; animation: spin 35s linear infinite; }
.age-core { text-align: center; z-index: 2; }
.age-core span { display: block; font: 400 clamp(100px,16vw,200px)/.8 Georgia, serif; color: transparent; -webkit-text-stroke: 1px var(--rose-light); text-shadow: 0 0 45px rgba(232,169,184,.25); }
.age-core small { color: var(--gold); letter-spacing: .22em; font-size: 10px; }
.orbit-star { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform: rotate(var(--angle)) translateX(var(--radius)); animation: twinkle var(--speed) ease-in-out infinite alternate; }
.orbit-star::before { content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; transform:translate(-50%,-50%); border-radius:50%; background:var(--gold); box-shadow:0 0 10px 3px rgba(243,207,153,.65); transition:width .25s,height .25s,box-shadow .25s; }
.orbit-star:hover::before, .orbit-star.opened::before { width:10px; height:10px; box-shadow:0 0 18px 7px rgba(243,207,153,.8); }

.countdown-section { background: linear-gradient(rgba(14,12,32,.72), rgba(14,12,32,.8)), url("assets/birthday-garden.png") center 61%/cover fixed; display: grid; place-items: center; }
.countdown-card { width: min(970px, 100%); text-align: center; padding: clamp(40px,7vw,85px); background: rgba(18,13,36,.72); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(18px); }
.countdown-card .script { font-size: clamp(30px,4.5vw,56px); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); margin: 55px 0 35px; }
.countdown > div { padding: 10px; border-right: 1px solid rgba(255,255,255,.13); }
.countdown > div:last-child { border: 0; }
.countdown strong { display: block; font: 400 clamp(38px,6vw,76px)/1 Georgia, serif; color: var(--rose-light); }
.countdown span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .2em; margin-top: 13px; }
.countdown-note { color: var(--gold); font-size: 12px; letter-spacing: .14em; }

.finale { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; text-align: center; background: radial-gradient(circle at 50% 52%, #6b405f 0%, #251831 28%, #0f0e20 68%); }
.finale-glow { position: absolute; width: 45vw; height: 45vw; border: 1px solid rgba(243,207,153,.17); border-radius: 50%; box-shadow: 0 0 100px rgba(232,169,184,.12), inset 0 0 100px rgba(232,169,184,.12); animation: pulse 4s ease-in-out infinite; }
.finale-content { position: relative; z-index: 2; padding: 30px; }
.finale-content > p:not(.eyebrow,.final-message) { color: var(--muted); margin-bottom: 35px; }
.final-message { opacity: 0; transform: translateY(10px); color: var(--gold); letter-spacing: .2em; margin-top: 30px; transition: .7s; }
.final-message.show { opacity: 1; transform: none; }
.finale footer { position: absolute; bottom: 30px; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .22em; }

dialog { width: min(88vw, 510px); padding: 58px 45px; color: var(--ink); text-align: center; border: 1px solid rgba(255,255,255,.18); background: rgba(31,20,47,.94); backdrop-filter: blur(20px); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(7,6,18,.72); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 12px; right: 17px; border: 0; background: transparent; color: var(--muted); font-size: 28px; cursor: pointer; }
.dialog-flower { font-size: 50px; color: var(--gold); }
.dialog-title { margin: 13px 0 0; color: var(--gold); font-size: 14px; font-weight: 500; letter-spacing: .18em; }
.dialog-text { font-size: clamp(19px,3vw,25px); line-height: 1.9; margin: 25px 0; }
dialog span { color: var(--rose); font-size: 12px; letter-spacing: .12em; }
.coupon-dialog { width:min(90vw,620px); padding:18px; background:#21152e; overflow:hidden; }
.coupon-ticket { position:relative; padding:55px 40px 45px; border:1px dashed #9f6d54; color:#513629; background:linear-gradient(135deg,#fff3d6,#f7dcb4 48%,#ffe9c6); box-shadow:inset 0 0 0 8px rgba(255,255,255,.35); text-align:center; }
.coupon-ticket::before,.coupon-ticket::after { content:""; position:absolute; top:50%; width:38px; height:38px; border-radius:50%; background:#21152e; transform:translateY(-50%); }.coupon-ticket::before{left:-20px}.coupon-ticket::after{right:-20px}
.coupon-ticket p { margin:0 0 12px; font:12px Georgia,serif; letter-spacing:.35em; color:#9f6d54; }.coupon-ticket > span { display:block; color:#b36e77; font-size:14px; letter-spacing:.25em; }.coupon-ticket h3 { margin:28px 0; font-size:clamp(24px,4vw,38px); line-height:1.65; font-weight:600; }.coupon-rule { border-top:1px dashed rgba(81,54,41,.35); margin:25px 0; }.coupon-ticket small { display:block; color:#8b6a59; letter-spacing:.13em; }.coupon-ticket b { display:block; margin-top:24px; font:12px Georgia,serif; letter-spacing:.2em; color:#a96e55; }

.birthday-reveal {
  position: fixed; inset: 0; z-index: 22; display: grid; place-items: center;
  padding: clamp(18px, 4vw, 55px); overflow: auto; pointer-events: none;
  opacity: 0; visibility: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(97,54,91,.82), rgba(11,9,27,.97) 68%);
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.birthday-reveal.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 1.2s ease; }
.reveal-close { position: fixed; top: clamp(18px,3vw,36px); right: clamp(18px,3vw,42px); z-index: 4; display: flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.3); border-radius: 100px; color: var(--ink); background: rgba(17,13,35,.55); backdrop-filter: blur(12px); cursor: pointer; font-size: 20px; opacity: 0; transform: translateY(-12px); transition: background .3s; }
.birthday-reveal.show .reveal-close { animation: wordsArrive .7s ease 2s forwards; }
.reveal-close:hover { background: rgba(232,169,184,.25); }
.reveal-close span { font-size: 11px; letter-spacing: .15em; }
.reveal-halo { position: absolute; width: min(78vw, 850px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(243,207,153,.18); box-shadow: 0 0 130px rgba(232,169,184,.19), inset 0 0 130px rgba(232,169,184,.12); animation: pulse 4s ease-in-out infinite; pointer-events: none; }
.photo-moment { position: relative; z-index: 2; width: min(1120px, 94vw); display: grid; grid-template-columns: minmax(250px, .76fr) 1fr; align-items: center; gap: clamp(35px, 7vw, 100px); }
.photo-frame {
  position: relative; justify-self: end; padding: 9px; border-radius: 220px 220px 22px 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(243,207,153,.35));
  box-shadow: 0 35px 90px rgba(0,0,0,.42), 0 0 55px rgba(232,169,184,.22);
  opacity: 0; transform: translateY(80px) scale(.84) rotate(-3deg);
}
.birthday-reveal.show .photo-frame { animation: photoArrive 1.55s cubic-bezier(.16,.82,.2,1) .25s forwards; }
.photo-frame img { display: block; width: min(38vw, 410px); max-height: 74vh; object-fit: cover; object-position: center; border-radius: 212px 212px 16px 16px; }
.photo-spark { position: absolute; color: var(--gold); font-size: 30px; filter: drop-shadow(0 0 12px var(--gold)); animation: twinkle 1.4s ease-in-out infinite alternate; }
.photo-spark-one { top: 9%; right: -22px; }.photo-spark-two { bottom: 14%; left: -20px; animation-delay: -.7s; }
.photo-blessing { opacity: 0; transform: translateX(65px); }
.birthday-reveal.show .photo-blessing { animation: wordsArrive 1.25s cubic-bezier(.2,.76,.23,1) 1.25s forwards; }
.photo-blessing .script { font-size: clamp(32px,4vw,58px); }
.photo-blessing h2 { max-width: 620px; margin: 0 0 28px; font-size: clamp(32px,4.8vw,66px); font-weight: 500; line-height: 1.35; letter-spacing: -.04em; }
.photo-blessing > p:not(.script) { color: var(--muted); line-height: 2.1; letter-spacing: .07em; }
.photo-blessing .more-joy { margin: 18px 0 0; color: var(--gold); font-size: clamp(20px,2vw,28px); letter-spacing: .45em; }
.photo-blessing > span { display: block; margin-top: 35px; color: var(--gold); font-size: 12px; letter-spacing: .2em; }

.petal { position: fixed; top: -12vh; z-index: 4; pointer-events: none; color: #f4c5ce; opacity: .65; animation: fall linear forwards; }
.reveal { opacity: 0; transform: translateY(35px); transition: opacity 1s ease, transform 1s ease; }
.reveal.visible { opacity: 1; transform: none; }

@keyframes breathe { to { transform: scale(1.09) translate3d(-.8%, -.5%, 0); } }
@keyframes equalize { to { height: 15px; } }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { to { opacity: .2; transform: rotate(var(--angle)) translateX(var(--radius)) scale(.5); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .55; } }
@keyframes fall { to { transform: translate3d(var(--drift), 115vh, 0) rotate(560deg); } }
@keyframes photoArrive { 0% { opacity: 0; transform: translateY(80px) scale(.84) rotate(-3deg); filter: blur(9px); } 65% { opacity: 1; transform: translateY(-8px) scale(1.015) rotate(.5deg); filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes wordsArrive { to { opacity: 1; transform: none; } }
@keyframes cakeHint { 50% { transform:translate(-50%,-57%) scale(1.06); } }

@media (max-width: 760px) {
  .hero-image { background-position: 61% center; }
  .hero-vignette { background: linear-gradient(90deg, rgba(8,7,26,.74), rgba(10,8,27,.15)), linear-gradient(0deg, #121126, transparent 32%); }
  .nav { padding: 21px 18px; }.nav-brand { font-size: 23px; }.sound-label { display: none; }
  .hero-copy { align-self: end; padding: 0 23px 15vh; margin: 0; }
  .hero h1 { font-size: clamp(56px, 19vw, 86px); }
  .hero-wish { font-size: 14px; }
  .intro-section { grid-template-columns: 1fr; }.chapter-number { position: absolute; top: 50px; right: 18px; opacity: .35; }
  .intro-card { padding: 42px 27px; }
  .cake-ticket-button { left:61%; top:58%; }
  .wish-grid { grid-template-columns: 1fr; }.wish-card { min-height: 330px; }
  .constellation-section { grid-template-columns: 1fr; text-align: center; }.constellation-copy p:last-child { margin-inline: auto; }
  .age-orbit { width: min(90vw, 480px); }
  .countdown-section { background-attachment: scroll; }
  .countdown-card { padding-inline: 18px; }.countdown { margin: 40px 0 30px; }.countdown strong { font-size: 42px; }
  .countdown-note { line-height: 2; }
  .finale-glow { width: 90vw; height: 90vw; }
  .birthday-reveal { align-items: start; padding: 26px 18px 45px; }
  .photo-moment { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .photo-frame { justify-self: center; border-radius: 180px 180px 20px 20px; }
  .photo-frame img { width: min(76vw, 340px); max-height: 57vh; border-radius: 172px 172px 14px 14px; }
  .photo-blessing h2 { font-size: clamp(29px, 8.5vw, 43px); }
  .photo-blessing > p:not(.script) { font-size: 13px; }
}

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