:root {
  color-scheme: dark;
  --wine: #351126;
  --gold: #ffd9a2;
  --cream: #fff5e9;
  --pink: #ffd1dd;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #160b14;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
}

button { font: inherit; }

#app {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity .8s ease, visibility .8s;
}

.scene.active { opacity: 1; visibility: visible; }
.scene > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.scene-front > img {
  object-fit: contain;
  background: radial-gradient(circle at 50% 40%, #483025 0, #1a0d17 68%);
  transition: transform 1.1s cubic-bezier(.22,.8,.22,1), filter .9s ease;
}

.front-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(25,5,20,.82));
  pointer-events: none;
}

.open-button {
  position: absolute;
  left: 50%;
  bottom: max(7vh, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(82vw, 360px);
  padding: 13px 24px 12px;
  color: #fff5ed;
  border: 1px solid rgba(255,213,218,.72);
  border-radius: 999px;
  background: rgba(55,15,40,.82);
  box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 0 20px rgba(255,190,199,.07);
  backdrop-filter: blur(10px);
  animation: breathe 2.2s ease-in-out infinite;
}

.open-button span { display: block; font-size: 20px; letter-spacing: .16em; }
.open-button small { display: block; margin-top: 3px; opacity: .68; font-size: 11px; letter-spacing: .08em; }

@keyframes breathe {
  50% { box-shadow: 0 10px 40px rgba(0,0,0,.38), 0 0 24px rgba(255,186,200,.27); transform: translateX(-50%) scale(1.025); }
}

.scene-front.opening > img { transform: scale(1.08); filter: sepia(.18) brightness(1.12); }
.scene-front.opening .open-button { opacity: 0; pointer-events: none; transition: opacity .3s; }

.scene-lining {
  background: #2a171e;
  transition-duration: .72s;
}

.lining-backdrop {
  position: absolute;
  inset: -35px;
  background: url("lining.jpg") center/cover;
  filter: blur(25px) brightness(.55) saturate(.85);
  transform: scale(1.14);
}

.scene-lining > img {
  position: relative;
  object-fit: contain;
  height: 91%;
  top: 4.5%;
  filter: drop-shadow(0 15px 28px rgba(0,0,0,.5));
  clip-path: inset(50% 0 50% 0);
  transform: perspective(900px) rotateY(-12deg) scale(.92);
}

.scene-lining.revealed > img {
  animation: revealLining 1s cubic-bezier(.16,.78,.26,1) forwards;
}

.gold-flare {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 58% 42%, rgba(255,224,155,.55), transparent 44%);
  mix-blend-mode: screen;
}
.scene-lining.revealed .gold-flare { animation: flare 1.6s .65s ease-out; }

@keyframes revealLining {
  to { clip-path: inset(0); transform: perspective(900px) rotateY(0) scale(1); }
}
@keyframes flare { 35% { opacity: .8; } 100% { opacity: 0; } }

.scene-opened > img { object-position: 56% center; transform: scale(1.03); }
.scene-opened.entering { clip-path: inset(0 0 0 100%); animation: peel 1.25s cubic-bezier(.16,.76,.25,1) forwards; }
@keyframes peel { to { clip-path: inset(0); } }

.left-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32,5,25,.82) 0, rgba(40,8,31,.5) 43%, transparent 68%);
}

.letter {
  position: absolute;
  left: max(4vw, env(safe-area-inset-left));
  top: 8vh;
  width: min(54vw, 580px);
  min-width: 280px;
  padding: clamp(24px, 5vw, 55px);
  color: var(--cream);
  border: 1px solid rgba(255,213,218,.35);
  border-radius: 30px;
  background: linear-gradient(155deg, rgba(67,17,49,.88), rgba(42,11,33,.82));
  box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 0 45px rgba(255,215,190,.035);
  backdrop-filter: blur(11px);
  opacity: 0;
  transform: translateY(22px);
}

.letter.show { animation: letterIn .85s .3s ease forwards; }
@keyframes letterIn { to { opacity: 1; transform: translateY(0); } }

.letter h1 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(30px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: .03em;
  text-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.letter h1 em { font-style: normal; white-space: nowrap; }

.rule { height: 23px; margin: 2px 0 9px; display: flex; align-items: center; }
.rule::before { content: "♥"; color: var(--pink); font-size: 10px; }
.rule i { display: block; width: 72%; height: 1px; background: linear-gradient(90deg, var(--pink), transparent); }

.letter p, .signature {
  opacity: 0;
  transform: translateX(-10px);
}
.letter.show p, .letter.show .signature {
  animation: wordsIn .75s var(--delay) ease forwards;
}
@keyframes wordsIn { to { opacity: 1; transform: translateX(0); } }

.letter p {
  margin: .48em 0;
  font-size: clamp(21px, 3.2vw, 37px);
  line-height: 1.25;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.letter p.last { margin-top: 1.1em; }
.signature { margin-top: 22px; text-align: right; color: var(--pink); font-size: clamp(17px, 2.5vw, 28px); }

.music-button {
  position: fixed;
  z-index: 20;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 45px;
  height: 45px;
  padding: 0;
  border: 1px solid rgba(255,228,220,.55);
  border-radius: 50%;
  color: #ffe4d8;
  background: rgba(53,17,38,.72);
  backdrop-filter: blur(8px);
}
.music-button .disc { display: grid; place-items: center; width: 100%; height: 100%; }
.music-button.playing .disc { animation: spin 3.8s linear infinite; }
.music-button.muted { opacity: .58; }
@keyframes spin { to { transform: rotate(360deg); } }

.heart {
  position: absolute;
  bottom: -30px;
  color: #ffadc1;
  opacity: 0;
  font-family: Arial, sans-serif;
  animation: floatUp var(--duration) linear forwards;
}
@keyframes floatUp {
  8% { opacity: .8; }
  80% { opacity: .55; }
  to { transform: translate(var(--drift), -105vh) rotate(20deg); opacity: 0; }
}

@media (max-width: 650px) {
  .scene-opened > img { object-position: 62% center; }
  .left-veil { background: linear-gradient(90deg, rgba(30,4,23,.87), rgba(38,7,30,.62) 58%, rgba(0,0,0,.05)); }
  .letter {
    left: 5vw;
    top: 10vh;
    width: 67vw;
    min-width: 0;
    padding: 25px 20px 23px;
    border-radius: 24px;
  }
  .letter p { letter-spacing: .03em; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .letter { top: 4vh; padding: 18px 30px; width: 48vw; }
  .letter h1 { font-size: 30px; }
  .letter p { margin: .25em 0; font-size: 20px; }
  .letter p.last { margin-top: .55em; }
  .signature { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}