:root {
  --bg: oklch(0.982 0.012 350);
  --surface: oklch(0.996 0.006 30);
  --ink: oklch(0.255 0.035 344);
  --muted: oklch(0.505 0.052 345);
  --primary: oklch(0.742 0.126 353);
  --primary-deep: oklch(0.548 0.154 350);
  --primary-soft: oklch(0.895 0.060 352);
  --accent: oklch(0.710 0.115 28);
  --paper-edge: oklch(0.898 0.033 41);
  --shadow: oklch(0.42 0.10 348 / 0.22);
  --z-base: 0;
  --z-decor: 1;
  --z-content: 2;
  --z-envelope: 3;
  --z-seal: 4;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  overflow-x: hidden;
}

body:not(.letter-mode) {
  overflow: hidden;
}

button {
  font: inherit;
}

.page-shell {
  min-height: 100dvh;
  position: relative;
}

.cover-stage {
  min-height: 100dvh;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) 20px max(34px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--primary-soft);
}

.cover-stage::before,
.cover-stage::after {
  content: "";
  position: absolute;
  z-index: var(--z-base);
  border-radius: 999px;
  pointer-events: none;
}

.cover-stage::before {
  width: 76vw;
  max-width: 360px;
  aspect-ratio: 1;
  left: -18vw;
  top: 8dvh;
  background: oklch(0.810 0.090 330 / 0.36);
}

.cover-stage::after {
  width: 68vw;
  max-width: 330px;
  aspect-ratio: 1;
  right: -22vw;
  bottom: 5dvh;
  background: oklch(0.970 0.028 24 / 0.68);
}

.ambient-petals {
  position: absolute;
  z-index: var(--z-decor);
  width: 125%;
  max-width: none;
  height: auto;
  opacity: 0.52;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.ambient-petals-a {
  inset: -16% auto auto -15%;
}

.ambient-petals-b {
  right: -28%;
  bottom: -18%;
  opacity: 0.34;
  transform: rotate(180deg);
}

.cover-copy {
  position: absolute;
  z-index: var(--z-content);
  top: max(62px, calc(env(safe-area-inset-top) + 40px));
  left: 50%;
  width: min(82vw, 360px);
  transform: translateX(-50%);
  text-align: center;
  color: var(--primary-deep);
}

.cover-copy p {
  margin: 0;
  font-size: clamp(1.55rem, 7vw, 2.45rem);
  line-height: 1.16;
  font-weight: 650;
  text-wrap: balance;
}

.cover-copy span {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

.envelope-button {
  position: relative;
  z-index: var(--z-envelope);
  width: min(78vw, 330px);
  aspect-ratio: 1.36;
  border: 0;
  padding: 0;
  margin-top: 60px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition: transform 180ms ease-out;
}

.envelope-button:focus-visible {
  outline: 3px solid oklch(0.980 0.025 40);
  outline-offset: 12px;
  border-radius: 18px;
}

.envelope-button:active {
  transform: translateY(3px) scale(0.99);
}

.envelope-shadow {
  position: absolute;
  inset: auto 12% -11% 12%;
  height: 18%;
  border-radius: 999px;
  background: oklch(0.42 0.08 345 / 0.18);
  filter: blur(8px);
}

.envelope {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  animation: idleFloat 3200ms ease-in-out infinite;
}

.envelope-back,
.envelope-front,
.envelope-left,
.envelope-right,
.envelope-flap,
.letter-peek,
.seal {
  position: absolute;
  display: block;
}

.envelope-back {
  inset: 0;
  border-radius: 14px;
  background-color: oklch(0.805 0.105 355);
  box-shadow: 0 8px 8px var(--shadow);
}

.letter-peek {
  left: 9%;
  right: 9%;
  bottom: 24%;
  height: 70%;
  border-radius: 8px 8px 4px 4px;
  background-color: var(--surface);
  background-image: url("./assets/paper-texture.png");
  background-size: 320px auto;
  box-shadow: 0 4px 8px oklch(0.42 0.08 345 / 0.13);
  transform: translateY(23%);
  transition: transform 780ms ease-out, opacity 260ms ease-out;
}

.letter-peek span {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  color: oklch(0.575 0.090 350);
  text-align: center;
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
}

.envelope-front {
  inset: 34% 0 0;
  border-radius: 0 0 14px 14px;
  background-color: var(--primary);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}

.envelope-left {
  inset: 0 auto 0 0;
  width: 51%;
  background-color: oklch(0.702 0.126 350);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius: 14px 0 0 14px;
}

.envelope-right {
  inset: 0 0 0 auto;
  width: 51%;
  background-color: oklch(0.765 0.112 356);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  border-radius: 0 14px 14px 0;
}

.envelope-flap {
  inset: 0;
  z-index: var(--z-envelope);
  transform-origin: 50% 0;
  background-color: oklch(0.852 0.088 356);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  border-radius: 14px 14px 0 0;
  transition: transform 720ms ease-out;
}

.seal {
  z-index: var(--z-seal);
  left: 50%;
  top: 48%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: oklch(0.985 0.010 30);
  background-color: var(--primary-deep);
  box-shadow: 0 5px 8px oklch(0.36 0.12 350 / 0.24);
  transform: translate(-50%, -50%) scale(1);
  transition: transform 220ms ease-out, opacity 180ms ease-out;
  animation: sealBreathe 1800ms ease-in-out infinite;
}

.is-open .cover-copy {
  animation: coverLift 680ms ease-out forwards;
}

.is-open .envelope-button {
  pointer-events: none;
  animation: envelopeSend 980ms ease-out forwards;
}

.is-open .envelope,
.is-open .seal {
  animation: none;
}

.is-open .envelope-flap {
  transform: rotateX(168deg);
}

.is-open .letter-peek {
  transform: translateY(-42%);
}

.is-open .seal {
  transform: translate(-50%, -50%) scale(0.78);
  opacity: 0;
}

.letter-stage {
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 14px max(46px, env(safe-area-inset-bottom));
  position: relative;
  isolation: isolate;
  background-color: oklch(0.984 0.010 24);
  overflow: hidden;
}

body:not(.is-open) .letter-stage {
  display: none;
}

body.is-open:not(.letter-mode) .letter-stage {
  display: none;
}

body.letter-mode .cover-stage {
  display: none;
}

.letter-stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background-image: url("./assets/paper-texture.png");
  background-size: 440px auto;
  opacity: 0.32;
}

.letter-petals {
  position: fixed;
  z-index: var(--z-decor);
  left: -22%;
  top: -10%;
  width: 142%;
  opacity: 0.25;
}

.letter-paper {
  position: relative;
  z-index: var(--z-content);
  width: min(100%, 720px);
  margin: 0 auto;
  padding: clamp(26px, 8vw, 56px) clamp(22px, 6.6vw, 54px) clamp(44px, 11vw, 72px);
  color: var(--ink);
  background-color: var(--surface);
  background-image: url("./assets/paper-texture.png");
  background-size: 520px auto;
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  box-shadow: 0 8px 8px oklch(0.42 0.05 30 / 0.11);
}

.letter-paper::before,
.letter-paper::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: oklch(0.835 0.036 32 / 0.72);
  pointer-events: none;
}

.letter-paper::before {
  top: 14px;
}

.letter-paper::after {
  bottom: 14px;
}

.letter-header {
  margin-bottom: clamp(24px, 8vw, 44px);
}

.letter-header p {
  margin: 0;
  color: var(--primary-deep);
  font-size: clamp(1.75rem, 9vw, 3.05rem);
  line-height: 1.14;
  font-weight: 700;
  text-wrap: balance;
}

.letter-header span {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

.letter-body {
  font-size: clamp(1.03rem, 4.2vw, 1.18rem);
  line-height: 2.02;
  text-wrap: pretty;
}

.letter-body p {
  margin: 0;
}

.letter-body p + p {
  margin-top: 1.02em;
}

.letter-body p:last-child {
  margin-top: 1.75em;
  color: var(--primary-deep);
  font-size: clamp(1.25rem, 5.6vw, 1.62rem);
  line-height: 1.7;
  font-weight: 700;
}

@keyframes envelopeSend {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  58% {
    transform: translateY(-16px) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: translateY(-38px) scale(0.94);
    opacity: 0;
  }
}

@keyframes coverLift {
  to {
    transform: translate(-50%, -18px);
    opacity: 0;
  }
}

@keyframes idleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes sealBreathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.045);
  }
}

@media (min-width: 720px) {
  .cover-stage {
    padding-inline: 40px;
  }

  .envelope-button {
    width: min(42vw, 380px);
  }

  .ambient-petals {
    width: 80%;
  }
}

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