:root {
  --ink: #fff9f2;
  --muted: rgba(255, 249, 242, 0.66);
  --gold: #ffd794;
  --rose: #f6a9ba;
  --night: #0d0919;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 110%, #372141 0, transparent 43%),
    radial-gradient(circle at 80% 10%, #251435 0, transparent 35%),
    var(--night);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

button { font: inherit; }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

.aurora {
  position: fixed;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.11;
  pointer-events: none;
  animation: drift 14s ease-in-out infinite alternate;
}

.aurora--one { top: -20vw; left: -10vw; background: #f1a5b9; }
.aurora--two { right: -15vw; bottom: -20vw; background: #9284ff; animation-delay: -7s; }

main { position: relative; z-index: 1; min-height: 100svh; }

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 7rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), visibility 0s 0.9s;
  overflow-y: auto;
}

.scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.16s;
}

.scene.is-leaving { opacity: 0; transform: translateY(-26px) scale(0.985); }

.scene--intro { align-content: center; justify-items: start; padding-left: clamp(1.5rem, 12vw, 12rem); }
.scene--intro::before {
  content: "";
  position: absolute;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  right: 5vw;
  border: 1px solid rgba(255, 215, 148, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(255, 215, 148, 0.06), inset 0 0 90px rgba(255, 215, 148, 0.04);
}

.scene--intro::after {
  content: "✦";
  position: absolute;
  right: clamp(4rem, 24vw, 23rem);
  color: var(--gold);
  font-size: clamp(2rem, 4vw, 4rem);
  filter: drop-shadow(0 0 18px var(--gold));
  animation: breathe 3s ease-in-out infinite;
}

.eyebrow, .step-label {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-title, h2 {
  font-family: Cambria, "Times New Roman", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-kerning: normal;
}

.hero-title { margin: 0.6rem 0 1.5rem; font-size: clamp(3.4rem, 8vw, 7.6rem); line-height: 0.94; }
.hero-title [data-i18n="introGreeting"] { color: #f7d4e3; font-style: italic; }
.hero-title [data-i18n="introSky"] { color: #e7dcff; font-style: italic; }
.hero-title [data-name] {
  color: transparent;
  background: linear-gradient(120deg, #fff1b8 5%, #ffb7d5 52%, #c9bdff 96%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 189, 213, .34));
  font-style: italic;
  font-weight: 650;
}
[data-name] {
  color: #ffdda7;
  font-weight: 650;
  text-shadow: 0 0 14px rgba(255, 196, 159, .24);
}
.intro-copy { color: var(--muted); line-height: 1.8; font-size: clamp(0.95rem, 1.4vw, 1.08rem); }

.primary-button, .text-button {
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s, box-shadow 0.35s;
}

.primary-button {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.6rem;
  padding: 0.9rem 1rem 0.9rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.primary-button:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); box-shadow: 0 12px 35px rgba(0,0,0,.25); }
.button-arrow { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; color: #2a1830; background: var(--gold); border-radius: 50%; }
.primary-button--small { margin: 2rem auto 0; }

.scene--intro .primary-button {
  position: relative;
  isolation: isolate;
  min-width: 235px;
  justify-content: space-between;
  overflow: hidden;
  padding: .72rem .72rem .72rem 1.35rem;
  border-color: rgba(190, 170, 255, .42);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 177, 220, .3), transparent 28%),
    radial-gradient(circle at 78% 85%, rgba(120, 104, 255, .35), transparent 36%),
    linear-gradient(115deg, rgba(35, 19, 68, .92), rgba(16, 11, 39, .9));
  box-shadow: inset 0 0 22px rgba(188, 166, 255, .08), 0 10px 38px rgba(5, 2, 18, .42), 0 0 0 1px rgba(255,255,255,.04);
}

.scene--intro .primary-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,215,148,.8) 0 1px, transparent 1.5px);
  background-position: 18px 13px, 73px 34px;
  background-size: 71px 43px, 97px 51px;
  opacity: .48;
  animation: button-stars 9s linear infinite;
}

.scene--intro .primary-button::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 72px;
  height: 160%;
  left: -90px;
  top: -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-20deg);
  transition: left .8s var(--ease);
}

.scene--intro .primary-button:hover {
  border-color: rgba(255, 215, 148, .7);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 177, 220, .38), transparent 30%),
    radial-gradient(circle at 78% 85%, rgba(120, 104, 255, .48), transparent 38%),
    linear-gradient(115deg, rgba(42, 22, 78, .96), rgba(17, 11, 43, .94));
  box-shadow: inset 0 0 28px rgba(188, 166, 255, .12), 0 16px 45px rgba(5, 2, 18, .5), 0 0 24px rgba(156, 132, 255, .2);
}

.scene--intro .primary-button:hover::after { left: calc(100% + 30px); }
.scene--intro .primary-button > span { position: relative; z-index: 1; }
.scene--intro .button-arrow {
  color: #fff9f2;
  background: radial-gradient(circle at 35% 30%, #ffe9ad, #d88cc8 48%, #7867db 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.32), 0 0 20px rgba(233,164,225,.55);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.scene--intro .primary-button:hover .button-arrow { transform: rotate(45deg) scale(1.06); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 28px rgba(255,193,226,.72); }

.reveal { opacity: 0; transform: translateY(18px); animation: reveal 0.9s var(--ease) forwards; }
.reveal:nth-child(2) { animation-delay: 0.12s; }
.reveal:nth-child(3) { animation-delay: 0.24s; }
.reveal:nth-child(4) { animation-delay: 0.36s; }

.glass-card {
  width: min(92vw, 680px);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2rem;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: 0 30px 90px rgba(0,0,0,.3);
  backdrop-filter: blur(22px);
}

.glass-card h2 { margin: .5rem auto 1rem; font-size: clamp(2rem, 5vw, 3.65rem); line-height: 1.08; }
#candle-title { max-width: 100%; overflow-wrap: normal; word-break: keep-all; text-wrap: balance; }
.muted { color: var(--muted); }

.cake { position: relative; width: 260px; height: 225px; margin: 2.5rem auto .5rem; }
.candle { --candle-x: 0px; position: absolute; z-index: 3; left: calc(50% - 11.5px); bottom: 112px; width: 23px; height: 95px; padding: 0; border: 0; background: none; cursor: pointer; transform: translateX(var(--candle-x)); transform-origin: bottom; transition: transform .35s var(--ease); }
.candle:hover { transform: translateX(var(--candle-x)) translateY(-5px); }
.candle:nth-child(1) { --candle-x: -52px; }
.candle:nth-child(2) { --candle-x: 0px; }
.candle:nth-child(3) { --candle-x: 52px; }
.candle--tall { height: 112px; }
.candle-body { position: absolute; inset: 23px 0 0; border-radius: 8px 8px 3px 3px; background: repeating-linear-gradient(135deg, #f2a7b9 0 8px, #ffe9d0 8px 16px); box-shadow: inset -5px 0 rgba(83,34,62,.12); }
.wick { position: absolute; left: 10px; top: 16px; width: 2px; height: 10px; border-radius: 2px; background: linear-gradient(#1d1720, #59404c); transition: box-shadow .35s; }
.flame {
  position: absolute;
  z-index: 2;
  left: 2px;
  top: -13px;
  width: 19px;
  height: 32px;
  border-radius: 52% 48% 46% 54% / 68% 68% 32% 32%;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(255,255,230,.98) 0 10%, rgba(255,224,112,.95) 25%, rgba(255,145,49,.88) 57%, rgba(255,87,25,.25) 78%, transparent 79%);
  filter: drop-shadow(0 0 4px rgba(255,220,120,.95)) drop-shadow(0 0 13px rgba(255,143,55,.7));
  opacity: 0;
  transform: translateY(11px) scale(.15,.3) rotate(2deg);
  transform-origin: 50% 100%;
  transition: opacity .35s, transform .5s var(--ease);
}
.flame::before {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 3px;
  width: 8px;
  height: 17px;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: linear-gradient(to top, #fffef0 8%, #fff7bd 48%, rgba(255,205,91,.1));
  filter: blur(.2px);
}
.flame::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 56%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,72,.24), rgba(255,119,44,.08) 42%, transparent 70%);
  transform: translate(-50%, -50%);
}
.candle.is-lit .wick { box-shadow: 0 -3px 5px #ffb353; }
.candle.is-lit .flame { opacity: 1; transform: translateY(0) scale(1) rotate(2deg); animation: natural-flicker 1.15s ease-in-out infinite alternate; }
.candle:nth-child(1) .flame { animation-delay: -.27s; animation-duration: 1.08s; }
.candle:nth-child(2) .flame { animation-delay: -.71s; animation-duration: 1.24s; }
.candle:nth-child(3) .flame { animation-delay: -.43s; animation-duration: .96s; }
.cake-top { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 91px; height: 40px; border-radius: 50%; background: #fff0df; box-shadow: inset 0 -9px #e9b6b5; }
.cake-base { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 29px; height: 83px; display: flex; justify-content: space-around; padding: 38px 35px 0; border-radius: 8px 8px 45px 45px; background: linear-gradient(90deg,#d9859d,#f2b2bd 55%,#d9859d); }
.cake-base span { width: 6px; height: 6px; border-radius: 50%; background: #ffe29f; box-shadow: 0 0 9px #ffe29f; }
.cake-plate { position: absolute; left: 0; right: 0; bottom: 12px; height: 26px; border-radius: 50%; background: #d7c9e7; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.wish-status { position: relative; display: grid; min-height: 3.4em; margin-bottom: .35rem; place-items: center; color: var(--gold); text-shadow: 0 0 0 rgba(255,215,148,0); transform-origin: center; transition: opacity .18s ease, transform .18s ease, filter .18s ease; }
.wish-status::after { content: ""; position: absolute; left: 50%; bottom: -.45rem; width: min(180px, 55%); height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,148,.72), transparent); opacity: 0; transform: translateX(-50%) scaleX(.15); }
.wish-status.is-leaving { opacity: 0; filter: blur(2px); transform: translateY(-5px); }
.wish-status.is-revealing { animation: wish-reveal .8s var(--ease) both; }
.wish-status.is-revealing::after { animation: wish-glow-line .9s ease-out both; }
.text-button { padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.3); background: transparent; }
.text-button:hover { transform: translateX(4px); border-color: var(--gold); }
.next-gift-button { min-height: 2.8rem; opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .55s ease, transform .65s var(--ease), visibility 0s; }
.next-gift-button[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
.next-gift-button[aria-hidden="false"] { transition-delay: .12s; }

.letter { text-align: left; position: relative; }
.letter-mark { position: absolute; right: 2rem; top: 1.5rem; color: var(--gold); font-size: 2rem; }
.letter h2 { margin-left: 0; }
.letter-copy { color: rgba(255,249,242,.75); line-height: 1.8; }
.letter-copy p { position: relative; }
.letter-copy p.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.14em; border-radius: 2px; background: var(--rose); box-shadow: 0 0 8px rgba(246,169,186,.55); animation: writing-caret .72s steps(1) infinite; }
.letter-copy p.is-written { animation: written-line-glow .65s ease-out; }
.signature { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.1); font-family: Cambria, "Times New Roman", serif; font-style: italic; letter-spacing: 0; }
.signature-from { color: var(--rose); text-align: right; }
.letter .signature, .letter-next { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .8s var(--ease); }
.letter .signature.is-waiting, .letter-next.is-waiting { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }

.scene--finale {
  isolation: isolate;
  perspective: 900px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(73, 42, 123, .16), transparent 42%),
    radial-gradient(circle at 12% 84%, rgba(80, 45, 122, .13), transparent 25%),
    linear-gradient(180deg, rgba(3,2,16,.2), rgba(4,2,18,.72));
}
#universe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; pointer-events: none; transition: opacity 1.8s var(--ease); }
.scene--finale.is-active #universe { opacity: 1; }
.deep-nebula { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; transform-style: preserve-3d; }
.deep-nebula--one { width: min(72vw, 850px); aspect-ratio: 1.7; left: -20%; top: 8%; background: radial-gradient(ellipse, rgba(104,71,190,.19), rgba(207,102,188,.07) 42%, transparent 70%); filter: blur(34px); animation: nebula-float 16s ease-in-out infinite alternate; }
.deep-nebula--two { width: min(58vw, 680px); aspect-ratio: 1.4; right: -15%; bottom: 1%; background: radial-gradient(ellipse, rgba(58,126,197,.17), rgba(103,75,179,.08) 45%, transparent 72%); filter: blur(40px); animation: nebula-float 20s ease-in-out -8s infinite alternate-reverse; }
.cosmic-planet { position: absolute; z-index: 2; left: clamp(-70px, 4vw, 70px); bottom: clamp(50px, 10vh, 110px); width: clamp(100px, 16vw, 210px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 27%, #d8c4ff 0 2%, #7d65b2 12%, #302052 47%, #100b21 74%); box-shadow: inset -28px -20px 45px rgba(0,0,0,.72), inset 8px 7px 16px rgba(255,255,255,.13), 0 0 45px rgba(121,95,194,.22); opacity: .72; transform: rotateX(8deg) rotateZ(-13deg); animation: planet-drift 9s ease-in-out infinite alternate; }
.cosmic-planet::before { content: ""; position: absolute; z-index: -1; inset: 43% -38%; height: 15%; border: 5px solid rgba(193,173,235,.46); border-left-color: rgba(121,104,179,.18); border-right-color: rgba(245,206,224,.7); border-radius: 50%; box-shadow: 0 0 12px rgba(186,157,235,.22); transform: rotate(-7deg); }
.cosmic-planet span { position: absolute; inset: 20% 9% auto 14%; height: 7%; border-radius: 50%; background: rgba(222,194,246,.09); box-shadow: 0 25px rgba(99,72,144,.16), 7px 48px rgba(226,196,235,.055); transform: rotate(-12deg); }
.finale-content { position: relative; z-index: 4; width: min(780px, 86vw); padding: 2rem; text-align: center; text-shadow: 0 3px 32px rgba(3,1,13,.96); transform-style: preserve-3d; }
.finale-content .eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1rem; letter-spacing: .32em; text-shadow: 0 0 16px rgba(255,215,148,.4); }
.finale-content .eyebrow::before, .finale-content .eyebrow::after { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,148,.7)); }
.finale-content .eyebrow::after { transform: rotate(180deg); }
.finale-content h2 { display: flex; flex-direction: column; align-items: center; margin: 0 0 1.25rem; line-height: .92; }
.finale-content h2 > span { max-width: 720px; color: #fff9f2; font-family: Cambria, "Times New Roman", serif; font-size: clamp(3.2rem, 6.5vw, 6rem); font-weight: 500; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 0 10px rgba(255,255,255,.14), 0 0 45px rgba(174,139,238,.18); }
.finale-content h2 > small { margin-top: .42em; color: transparent; background: linear-gradient(90deg, #f4c8dc, #ffe1a5 42%, #c7b8ff 78%, #efc0df); background-clip: text; -webkit-background-clip: text; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(1rem, 2.2vw, 1.75rem); font-weight: 400; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
.finale-message { max-width: min(90vw, 620px); margin-inline: auto; color: rgba(255,249,242,.66); font-size: clamp(.9rem, 1.4vw, 1.05rem); line-height: 1.8; letter-spacing: .02em; text-wrap: balance; }
.orbit { position: relative; width: 112px; height: 112px; margin: 0 auto 1.6rem; border: 1px solid rgba(255,215,148,.22); border-radius: 50%; box-shadow: inset 0 0 24px rgba(166,135,240,.08), 0 0 30px rgba(122,94,202,.1); transform: rotateX(66deg); animation: orbit-3d 10s linear infinite; }
.orbit::before { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(192,171,255,.2); border-radius: 50%; }
.orbit::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 2rem; text-shadow: 0 0 15px var(--gold); transform: rotateX(-66deg); animation: star-breathe 2.4s ease-in-out infinite; }
.orbit span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 12px var(--rose); }
.orbit span:nth-child(1) { left: 8px; top: 25px; }.orbit span:nth-child(2) { right: -3px; top: 54px; }.orbit span:nth-child(3) { left: 48px; bottom: -3px; }
.replay-button { margin-top: 1.35rem; color: rgba(255,255,255,.72); border-color: rgba(208,190,255,.3); letter-spacing: .08em; }

.progress { position: fixed; z-index: 5; left: 50%; bottom: 1.5rem; display: flex; gap: .55rem; transform: translateX(-50%); }
.progress-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); transition: width .45s var(--ease), background .45s; }
.progress-dot.is-active { width: 24px; border-radius: 9px; background: var(--gold); }
.sound-toggle { position: fixed; z-index: 6; top: 1.25rem; right: 1.25rem; display: flex; gap: .55rem; align-items: center; padding: .65rem .85rem; color: var(--muted); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; background: rgba(10,7,20,.25); backdrop-filter: blur(12px); cursor: pointer; }
.sound-icon { display: flex; align-items: center; gap: 2px; width: 16px; height: 14px; }
.sound-icon i { width: 2px; height: 4px; border-radius: 2px; background: currentColor; transform-origin: bottom; }
.sound-toggle[aria-pressed="true"] { color: var(--gold); }
.sound-toggle[aria-pressed="true"] .sound-icon i { animation: equalize .8s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-icon i:nth-child(2) { animation-delay: -.45s; }
.sound-toggle[aria-pressed="true"] .sound-icon i:nth-child(3) { animation-delay: -.2s; }
.personalize-hint { position: fixed; z-index: 5; left: 1.25rem; bottom: 1rem; margin: 0; color: rgba(255,255,255,.28); font-size: .68rem; }
.personalize-hint code { color: rgba(255,215,148,.55); }

.spark { position: fixed; z-index: 4; pointer-events: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: spark 1s var(--ease) forwards; }

@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes drift { to { transform: translate(10vw, 8vw) scale(1.15); } }
@keyframes breathe { 50% { opacity: .45; transform: scale(.85); } }
@keyframes natural-flicker {
  0% { transform: translate(-.5px, 0) scale(.96, 1.02) rotate(-2deg); filter: drop-shadow(0 0 4px rgba(255,220,120,.9)) drop-shadow(0 0 12px rgba(255,143,55,.62)); }
  38% { transform: translate(1px, -1px) scale(.9, 1.09) rotate(3deg); }
  68% { transform: translate(-1px, .5px) scale(1.03, .96) rotate(-4deg); filter: drop-shadow(0 0 5px rgba(255,226,135,1)) drop-shadow(0 0 17px rgba(255,126,42,.78)); }
  100% { transform: translate(.5px, -1.5px) scale(.94, 1.12) rotate(2deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spark { to { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); } }
@keyframes equalize { to { height: 13px; } }
@keyframes button-stars { to { background-position: 89px 13px, 170px 34px; } }
@keyframes nebula-float { to { transform: translate3d(7vw, 4vh, 80px) scale(1.12) rotate(4deg); opacity: .72; } }
@keyframes planet-drift { to { transform: translate3d(8px, -13px, 45px) rotateX(12deg) rotateZ(-9deg); } }
@keyframes orbit-3d { to { transform: rotateX(66deg) rotateZ(360deg); } }
@keyframes star-breathe { 50% { opacity: .55; text-shadow: 0 0 28px var(--gold); transform: rotateX(-66deg) scale(.82); } }
@keyframes wish-reveal {
  0% { opacity: 0; filter: blur(4px); transform: translateY(9px) scale(.985); text-shadow: 0 0 0 rgba(255,215,148,0); }
  48% { opacity: 1; filter: blur(0); transform: translateY(-1px) scale(1); text-shadow: 0 0 18px rgba(255,215,148,.38); }
  100% { opacity: 1; filter: blur(0); transform: none; text-shadow: 0 0 7px rgba(255,215,148,.14); }
}
@keyframes wish-glow-line {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.1); }
  38% { opacity: .9; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(.55); }
}
@keyframes writing-caret { 50% { opacity: 0; } }
@keyframes written-line-glow { 50% { color: rgba(255,249,242,.92); text-shadow: 0 0 12px rgba(246,169,186,.12); } }

/* Keep the content of scenes 2–4 inside the desktop viewport. */
@media (min-width: 701px) {
  .scene--candles,
  .scene--letter,
  .scene--finale {
    padding-top: 4rem;
    padding-bottom: 3.25rem;
    overflow-x: hidden;
  }
}

@media (min-width: 701px) and (max-height: 800px) {
  .scene--candles,
  .scene--letter,
  .scene--finale {
    padding-top: 2.75rem;
    padding-bottom: 2.25rem;
  }

  .wish-card,
  .letter {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .wish-card .step-label { margin-top: 0; }
  .wish-card .cake { margin-top: 1rem; margin-bottom: -.25rem; transform: scale(.88); transform-origin: center bottom; }
  .letter h2 { font-size: clamp(2rem, 4.2vw, 3.15rem); }
  .letter-copy { line-height: 1.65; }
  .letter-copy p { margin: .7rem 0; }
  .signature { margin-top: 1.25rem; padding-top: 1rem; }
  .letter .primary-button { margin-top: 1.25rem; }
  .finale-content { padding-top: 1rem; padding-bottom: 1rem; }
  .orbit { width: 92px; height: 92px; margin-bottom: 1rem; }
  .finale-content h2 > span { font-size: clamp(3rem, 6.5vw, 5.6rem); }
  .finale-content h2 > small { margin-top: .3em; }
  .finale-message { margin-top: .75rem; margin-bottom: .5rem; }
  .replay-button { margin-top: .75rem; }
}

@media (max-width: 700px) {
  .scene { padding: max(5rem, env(safe-area-inset-top)) 1rem max(4rem, env(safe-area-inset-bottom)); }
  .scene--intro { align-content: center; padding-left: 1.5rem; }
  .scene--intro::before { width: 80vw; right: -42vw; }
  .scene--intro::after { right: 11vw; top: 19%; }
  .hero-title { font-size: clamp(3rem, 14vw, 4.5rem); }
  .glass-card { width: min(calc(100vw - 1rem), 680px); padding: 1.8rem 1rem; border-radius: 1.4rem; }
  .glass-card h2 { font-size: clamp(1.7rem, 8.2vw, 2.8rem); }
  .wish-card { padding-top: 1.45rem; padding-bottom: 1.35rem; }
  .wish-card .muted { margin-bottom: 0; font-size: .86rem; }
  .cake { width: 260px; height: 205px; margin-top: 1.25rem; transform: scale(.88); transform-origin: center bottom; }
  .letter-copy { font-size: .92rem; line-height: 1.68; }
  .signature { flex-direction: column; }
  .signature-from { text-align: left; }
  .personalize-hint { display: none; }
  .finale-content { width: 96vw; padding: 1rem .75rem; }
  .finale-content h2 > span { max-width: 94vw; font-size: clamp(2.65rem, 13.5vw, 4.7rem); line-height: .94; }
  .finale-content h2 > small { max-width: 90vw; font-size: clamp(.72rem, 3.7vw, 1.05rem); letter-spacing: .12em; }
  .finale-content .eyebrow { font-size: .62rem; letter-spacing: .22em; }
  .finale-content .eyebrow::before, .finale-content .eyebrow::after { width: 18px; }
  .finale-message { padding: 0 1rem; font-size: .88rem; }
  .orbit { width: 88px; height: 88px; margin-bottom: 1.25rem; }
  .cosmic-planet { left: -42px; bottom: 70px; width: 125px; opacity: .58; }
  .deep-nebula--one { width: 120vw; left: -55%; }
  .deep-nebula--two { width: 105vw; right: -50%; }
}

@media (max-width: 700px) and (max-height: 720px) {
  .scene { align-items: start; }
  .scene--intro, .scene--finale { align-items: center; }
  .scene--candles { padding-top: 4.4rem; }
  .cake { margin-top: .35rem; margin-bottom: -.75rem; transform: scale(.76); }
  .wish-status { margin-top: 0; font-size: .83rem; }
  .letter { padding-top: 1.5rem; }
  .letter-copy p { margin: .65rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .scene.is-active, .scene--finale.is-active #universe { opacity: 1; visibility: visible; transform: none; }
}