:root {
  --bg: #080708;
  --wine: #5c1d2c;
  --champagne: #e4d0a8;
  --champagne-soft: #c4a484;
  --ivory: #f6efe6;
  --cream: #f3e6cf;
  --muted: rgba(246, 239, 230, 0.72);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --script: "Great Vibes", "Allura", cursive;
  --sans: "Outfit", "Helvetica Neue", sans-serif;
  --safe-top: max(16px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(16px, env(safe-area-inset-left));
  --safe-right: max(16px, env(safe-area-inset-right));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  overflow: hidden;
}

body {
  min-height: 100dvh;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

.grain,
.ambient-canvas,
.veil,
.page-wash,
.stars,
.beam,
.screen-grain,
.screen-scratch {
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' 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)'/%3E%3C/svg%3E");
  animation: grainShift 1.1s steps(2) infinite;
}

.ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #050304;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.veil.is-on {
  opacity: 1;
  visibility: visible;
}

.veil.is-warm {
  background: radial-gradient(circle at 50% 40%, rgba(228, 208, 168, 0.28), #12080b 58%);
}

.music-btn {
  position: fixed;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 5, 7, 0.62);
  color: var(--champagne);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(228, 208, 168, 0.22);
}

.music-btn .music-icon[data-state="off"] {
  display: none;
}

.music-btn.is-muted .music-icon[data-state="on"] {
  display: none;
}

.music-btn.is-muted .music-icon[data-state="off"] {
  display: grid;
}

.page {
  position: fixed;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 0.8s ease, visibility 0.8s ease, transform 1s ease;
}

.page.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 5;
}

.page-wash {
  position: absolute;
  inset: 0;
}

.wash-wait {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(92, 29, 44, 0.34), transparent 46%),
    radial-gradient(circle at 80% 80%, rgba(228, 208, 168, 0.06), transparent 24%),
    #080708;
  animation: washDrift 14s ease-in-out infinite alternate;
}

.wash-cake {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(228, 208, 168, 0.1), transparent 36%),
    radial-gradient(ellipse at 50% 20%, rgba(92, 29, 44, 0.22), transparent 40%),
    #090708;
}

.wash-cinema {
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255, 226, 176, 0.14), transparent 26%),
    radial-gradient(ellipse at 50% 100%, rgba(28, 16, 10, 0.88), transparent 42%),
    radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, #0d0907 0%, #120c09 38%, #0a0706 100%);
}

.wash-letter {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(228, 208, 168, 0.1), transparent 42%),
    #080708;
}

.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 246, 226, 0.7), transparent),
    radial-gradient(1px 1px at 28% 64%, rgba(255, 246, 226, 0.4), transparent),
    radial-gradient(1.2px 1.2px at 67% 18%, rgba(255, 246, 226, 0.55), transparent),
    radial-gradient(1px 1px at 81% 48%, rgba(255, 246, 226, 0.35), transparent),
    radial-gradient(1px 1px at 46% 80%, rgba(255, 246, 226, 0.45), transparent);
  animation: starPulse 6s ease-in-out infinite;
}

.page-inner,
.page-footer,
.letter-stage {
  position: relative;
  z-index: 2;
}

.page-inner-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 24px) var(--safe-left) calc(var(--safe-bottom) + 24px);
  text-align: center;
}

.kicker {
  margin: 0 0 14px;
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--champagne-soft);
}

.display {
  margin: 0 0 28px;
  max-width: 16ch;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 7.4vw, 3.4rem);
  line-height: 1.2;
}

.today-line {
  margin: -10px 0 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 4.8vw, 1.7rem);
  color: var(--champagne);
}

.countdown {
  width: min(92vw, 440px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}

.countdown-cell {
  padding: 14px 4px 12px;
  border-radius: 16px;
  background: rgba(255, 248, 240, 0.045);
  box-shadow: inset 0 0 0 1px rgba(228, 208, 168, 0.14);
}

.countdown-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 6vw, 2.1rem);
  line-height: 1;
}

.countdown-label {
  display: block;
  margin-top: 7px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne-soft);
}

.btn {
  min-height: 50px;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  background: rgba(12, 6, 8, 0.5);
  letter-spacing: 0.14em;
  font-size: clamp(0.64rem, 3vw, 0.74rem);
  box-shadow:
    0 0 0 1px rgba(228, 208, 168, 0.38),
    0 0 22px rgba(228, 208, 168, 0.14);
}

.btn-ghost {
  position: absolute;
  top: calc(var(--safe-top) + 12px);
  right: var(--safe-right);
  z-index: 6;
  min-height: 40px;
  padding: 0.55rem 0.9rem;
  font-size: 0.62rem;
  opacity: 0.7;
}

.page-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.wish-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 4.8vw, 1.6rem);
}

/* ---------- Cake ---------- */

.cake-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 72px;
}

.cake-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 208, 168, 0.16), transparent 70%);
  filter: blur(8px);
  opacity: 0;
}

#page-2.is-lit .cake-glow {
  opacity: 1;
  animation: glowBreath 3.4s ease-in-out infinite;
}

.cake {
  position: relative;
  width: min(62vw, 260px);
  height: 230px;
  opacity: 0;
  transform: translateY(28px) scale(0.92);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

#page-2.is-shown .cake {
  animation: cakeIn 1.4s ease forwards;
}

.cake-board,
.cake-base,
.cake-mid,
.cake-frost,
.cake-top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.cake-board {
  bottom: 0;
  width: 122%;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0d7b0, #b08958);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
}

.cake-base {
  bottom: 14px;
  width: 100%;
  height: 62px;
  border-radius: 14px 14px 20px 20px;
  background: linear-gradient(180deg, #c56b78 0%, #7a3140 100%);
  box-shadow: inset 0 10px 0 rgba(255, 232, 220, 0.18);
}

.cake-mid {
  bottom: 68px;
  width: 84%;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, #d98a96, #8d3d4c);
  box-shadow: inset 0 8px 0 rgba(255, 236, 228, 0.16);
}

.cake-frost {
  bottom: 110px;
  width: 90%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6e6, #e6c89a);
}

.cake-top {
  bottom: 118px;
  width: 70%;
  height: 42px;
  border-radius: 16px 16px 12px 12px;
  background: linear-gradient(180deg, #e7a3ae, #9a4654);
  box-shadow: inset 0 7px 0 rgba(255, 240, 234, 0.2);
}

.candles {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 142px;
  height: 70px;
}

.candle {
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 36px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #f6efe2, #d7c09a);
  opacity: 0;
  transform: translateY(-90px);
}

.candle.is-falling {
  animation: candleDrop 0.7s cubic-bezier(0.22, 0.8, 0.25, 1) forwards;
}

.candle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 7px;
  height: 11px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle, #ffe7a8 0 30%, #ff9a3c 70%, transparent 80%);
  transform: translateX(-50%) scale(0);
  filter: blur(0.2px);
}

.candle.is-lit::after {
  transform: translateX(-50%) scale(1);
  animation: flame 0.7s ease-in-out infinite alternate;
}

.candle-smoke {
  position: absolute;
  left: 50%;
  top: -18px;
  width: 2px;
  height: 10px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.25));
  opacity: 0;
}

.candle.is-lit .candle-smoke {
  animation: smoke 1.8s ease-in-out infinite;
}

/* ---------- Cinema / 1900s projection room ---------- */

.drape {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(11vw, 88px);
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      #3a1c18 0 11px,
      #2a1210 11px 13px,
      #261110 13px 24px
    );
  box-shadow: inset -18px 0 28px rgba(0, 0, 0, 0.45);
}

.drape-left { left: 0; }
.drape-right {
  right: 0;
  box-shadow: inset 18px 0 28px rgba(0, 0, 0, 0.45);
}

.cinema-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      #1c120d 0 36px,
      #140c09 36px 37px,
      #19100b 37px 72px
    );
  mask-image: linear-gradient(180deg, transparent, #000 46%);
  opacity: 0.72;
}

.theater {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 36px) var(--safe-left) calc(var(--safe-bottom) + 92px);
}

.sheet-hang {
  position: relative;
  z-index: 3;
  width: min(84vw, 440px);
  text-align: center;
}

.sheet-rod {
  position: relative;
  height: 7px;
  width: 106%;
  margin: 0 -3% 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #b08958, #6a4a28 46%, #3d2814);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.sheet-rod::before,
.sheet-rod::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 7px;
  height: 9px;
  border: 1.5px solid #7a5a34;
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

.sheet-rod::before { left: 14%; }
.sheet-rod::after { right: 14%; }

.sheet {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 48vh;
  margin-top: 1px;
  background:
    radial-gradient(ellipse at 50% 36%, #fff8ea 0%, #f3e6c8 52%, #e4d0a6 100%);
  box-shadow:
    0 0 70px rgba(255, 228, 176, 0.28),
    0 22px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(120, 82, 36, 0.08);
  clip-path: polygon(0.8% 0.4%, 99.3% 0.7%, 99.8% 99.1%, 0.3% 99.5%);
}

.sheet-cloth {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      92deg,
      rgba(255, 248, 230, 0.08) 0 16px,
      rgba(120, 88, 48, 0.06) 16px 17px
    );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  filter: sepia(0.22) contrast(1.08) brightness(0.78) saturate(0.8);
}

.sheet.is-on img {
  animation: lanternIn 1.45s ease forwards;
}

.sheet.is-changing img {
  opacity: 0.06;
  filter: sepia(0.55) brightness(0.22);
}

.sheet.is-clearing img {
  animation: lanternOut 1.1s ease forwards;
}

.sheet.is-empty img {
  display: none !important;
}

.sheet-vignette,
.screen-grain,
.screen-scratch,
.sheet-flicker,
.sheet-gate {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sheet-vignette {
  background: radial-gradient(ellipse at center, transparent 44%, rgba(42, 24, 12, 0.38) 100%);
}

.screen-grain {
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.screen-scratch {
  background:
    linear-gradient(100deg, transparent 47%, rgba(70, 45, 20, 0.14) 48%, transparent 49%),
    linear-gradient(86deg, transparent 72%, rgba(255, 244, 220, 0.08) 73%, transparent 74%);
  animation: scratch 3.8s steps(3) infinite;
}

.sheet-flicker {
  background: rgba(255, 236, 200, 0.1);
  opacity: 0;
}

#page-3.is-playing .sheet-flicker {
  animation: lanternFlicker 3.4s steps(2) infinite;
}

.sheet-gate {
  background:
    linear-gradient(#140e0a, #140e0a),
    linear-gradient(180deg, transparent 46%, rgba(8, 5, 3, 0.85) 50%, transparent 54%);
  opacity: 0;
}

.sheet.is-changing .sheet-gate {
  opacity: 0.78;
}

.cinema-caption,
.cinema-intertitle {
  position: absolute;
  left: 10%;
  right: 10%;
  z-index: 4;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #f3e6c8;
  text-shadow: 0 1px 2px rgba(24, 14, 8, 0.55);
  background: none;
  pointer-events: none;
}

.cinema-caption {
  bottom: 9%;
  font-size: clamp(0.95rem, 3.4vw, 1.18rem);
}

.cinema-intertitle {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  font-size: clamp(1.15rem, 4.6vw, 1.52rem);
  line-height: 1.4;
  color: #2c1e12;
  opacity: 0;
  filter: sepia(0.18) brightness(0.96);
  text-shadow: 0 1px 0 rgba(255, 246, 228, 0.22);
}

.cinema-intertitle.is-on {
  animation: intertitleIn 1.7s ease forwards;
}

#page-3.is-done .cinema-intertitle.is-on {
  animation:
    intertitleIn 1.7s ease forwards,
    intertitleFlicker 3.8s steps(2) infinite 1.7s;
}

.beam-stack {
  position: relative;
  z-index: 2;
  width: min(62vw, 320px);
  height: clamp(84px, 15vh, 130px);
  margin-top: -8px;
}

.beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 236, 196, 0.2), rgba(255, 210, 130, 0.55));
  clip-path: polygon(6% 0, 94% 0, 57% 100%, 43% 100%);
  opacity: 0.78;
}

.beam-glow {
  inset: -8% -22% 0;
  background: linear-gradient(180deg, rgba(255, 226, 160, 0.22), rgba(255, 196, 100, 0.28));
  clip-path: polygon(2% 0, 98% 0, 61% 100%, 39% 100%);
  filter: blur(8px);
  opacity: 0.7;
}

#page-3.is-playing .beam {
  animation: beamPulse 2.6s ease-in-out infinite;
}

.mote {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 236, 196, 0.8);
  left: 48%;
  bottom: 0;
  animation: moteRise 4.4s linear infinite;
}

.mote:nth-child(2) { left: 42%; animation-duration: 5.1s; animation-delay: -1s; }
.mote:nth-child(3) { left: 55%; animation-duration: 3.8s; animation-delay: -2s; }
.mote:nth-child(4) { left: 50%; width: 1px; height: 1px; animation-duration: 6s; }
.mote:nth-child(5) { left: 46%; animation-duration: 4.7s; animation-delay: -2.4s; }
.mote:nth-child(6) { left: 53%; animation-duration: 5.6s; animation-delay: -0.6s; }
.mote:nth-child(7) { left: 44%; width: 1px; height: 1px; animation-duration: 4.1s; animation-delay: -3s; }
.mote:nth-child(8) { left: 57%; animation-duration: 5.9s; animation-delay: -1.8s; }

.vproj {
  position: relative;
  z-index: 3;
  width: min(72vw, 230px);
  height: 118px;
  margin-top: -4px;
}

.vproj-reel {
  position: absolute;
  top: 4px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #e6c896 0 7px, #2c1c12 8px 12px, transparent 13px),
    repeating-conic-gradient(#3a2618 0 16deg, #d7b48a 16deg 20deg),
    #5a3c24;
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.55),
    inset 0 0 0 3px #24160e,
    inset 0 0 0 7px #8d6844;
}

.vproj-reel-l { left: 0; }
.vproj-reel-r { right: 0; }

#page-3.is-playing .vproj-reel-l {
  animation: spin 5.4s linear infinite;
}

#page-3.is-playing .vproj-reel-r {
  animation: spin 5.4s linear infinite reverse;
}

#page-3.is-playing .vproj {
  animation: projShake 3.2s ease-in-out infinite;
}

#page-3.is-playing:has(.sheet.is-changing) .vproj {
  animation: projCrank 0.26s ease;
}

.vproj-film {
  position: absolute;
  top: 26px;
  left: 46px;
  right: 46px;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, #1a1008 0 7px, #4a3420 7px 8px),
    #120c08;
  box-shadow: 0 2px 0 #0a0604;
}

.vproj-body {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 96px;
  height: 52px;
  margin-left: -48px;
  background:
    linear-gradient(90deg, transparent 10%, rgba(255, 220, 170, 0.1) 11%, transparent 14%),
    linear-gradient(180deg, #8a6040, #4a2e1c 72%, #2a1810);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 180, 0.22),
    0 8px 14px rgba(0, 0, 0, 0.4);
}

.vproj-chimney {
  position: absolute;
  left: 12px;
  top: -14px;
  width: 14px;
  height: 16px;
  background: linear-gradient(180deg, #6a4a2c, #2a180e);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.vproj-barrel {
  position: absolute;
  left: 50%;
  top: -18px;
  width: 22px;
  height: 20px;
  margin-left: -11px;
  background: linear-gradient(90deg, #5a3c18, #c4a056, #5a3c18);
  box-shadow: inset 0 0 0 1px #2a1a08;
}

.vproj-lens {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 20px;
  height: 12px;
  margin-left: -10px;
  background: radial-gradient(circle at 50% 30%, #fff6d0, #e0b24a 50%, #6a4814);
  box-shadow:
    0 0 18px rgba(255, 220, 130, 0.8),
    0 -10px 20px rgba(255, 210, 120, 0.35),
    inset 0 0 0 2px #3a2810;
}

.vproj-knob {
  position: absolute;
  right: 10px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d09a, #6a4a28);
}

.vproj-vent {
  position: absolute;
  left: 14px;
  right: 28px;
  bottom: 8px;
  height: 8px;
  background: repeating-linear-gradient(90deg, #2a180e 0 3px, #6a4a30 3px 5px);
  opacity: 0.7;
}

.vproj-legs {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 16px;
  height: 18px;
  background:
    linear-gradient(90deg, #3a2414 0 5px, transparent 5px 100%),
    linear-gradient(90deg, transparent calc(100% - 5px), #3a2414 0);
}

.vproj-base {
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 4px;
  height: 14px;
  background: linear-gradient(180deg, #4a3220, #1c120c);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.45);
}

.cinema-end {
  z-index: 6;
}

#page-3.is-done .cinema-caption {
  opacity: 0;
}

#page-3 .btn-ghost {
  letter-spacing: 0.16em;
  font-family: var(--serif);
  font-style: italic;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.62;
}

/* ---------- Letter ---------- */

.letter-stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(var(--safe-top) + 24px) var(--safe-left) calc(var(--safe-bottom) + 24px);
  text-align: center;
}

.envelope {
  position: relative;
  width: min(78vw, 280px);
  height: 170px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.4));
  transition: transform 0.8s ease;
}

.envelope.is-opening {
  transform: translateY(-12px) scale(1.03);
}

.env-front,
.env-pocket,
.env-flap {
  position: absolute;
  inset: 0;
}

.env-front {
  display: grid;
  place-items: start center;
  padding-top: 28px;
  background: linear-gradient(180deg, #efe0c4, #d7c09a);
  color: #5a3d32;
  font-family: var(--script);
  font-size: 2rem;
  border-radius: 4px;
  z-index: 2;
}

.env-pocket {
  top: 46%;
  background: linear-gradient(180deg, #e6d3b0, #c9ae84);
  clip-path: polygon(0 18%, 50% 78%, 100% 18%, 100% 100%, 0 100%);
  z-index: 3;
}

.env-flap {
  height: 58%;
  background: linear-gradient(180deg, #f3e4c8, #cbb48a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  z-index: 4;
  transition: transform 0.9s ease;
}

.envelope.is-open .env-flap {
  transform: rotateX(188deg);
  z-index: 1;
}

.env-seal {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 5;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #8d3040, #5a1824);
  color: #f3d5b8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.envelope.is-open .env-seal {
  transform: scale(0.2);
  opacity: 0;
}

.letter {
  width: min(88vw, 360px);
}

.letter-paper {
  min-height: 280px;
  padding: 28px 22px 32px;
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.97), rgba(240, 220, 180, 0.96));
  color: #4a3228;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  text-align: left;
  opacity: 0;
  transform: translateY(36px) scale(0.96);
}

.letter.is-out .letter-paper {
  animation: paperOut 1s ease forwards;
}

.letter-line {
  margin: 0 0 12px;
  font-family: var(--script);
  font-size: clamp(1.25rem, 5.6vw, 1.7rem);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
}

.letter-line.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.letter-title {
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  text-align: center;
}

.letter-sign {
  margin-top: 18px;
  text-align: right;
}

#page-4.is-glow .wash-letter {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(228, 208, 168, 0.18), transparent 46%),
    #080708;
}

/* ---------- Motion ---------- */

@keyframes grainShift {
  to { transform: translate3d(-1.5%, 1%, 0); }
}

@keyframes washDrift {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes starPulse {
  50% { opacity: 0.55; }
}

@keyframes cakeIn {
  to { opacity: 1; transform: none; }
}

@keyframes candleDrop {
  to { opacity: 1; transform: none; }
}

@keyframes flame {
  from { transform: translateX(-50%) scale(0.92); opacity: 0.8; }
  to { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

@keyframes smoke {
  from { opacity: 0; transform: translate(-50%, 4px); }
  40% { opacity: 0.35; }
  to { opacity: 0; transform: translate(-46%, -12px); }
}

@keyframes glowBreath {
  50% { opacity: 0.75; transform: scale(1.08); }
}

@keyframes lanternIn {
  0% { opacity: 0; filter: sepia(0.4) contrast(0.9) brightness(0.12) saturate(0.55); }
  9% { opacity: 0.55; filter: sepia(0.3) contrast(1) brightness(1.08) saturate(0.75); }
  16% { opacity: 0.22; filter: sepia(0.4) brightness(0.3) saturate(0.6); }
  28% { opacity: 0.92; filter: sepia(0.22) contrast(1.1) brightness(0.88) saturate(0.8); }
  100% { opacity: 0.96; filter: sepia(0.22) contrast(1.08) brightness(0.78) saturate(0.8); }
}

@keyframes lanternOut {
  from { opacity: 0.96; filter: sepia(0.22) contrast(1.08) brightness(0.78) saturate(0.8); }
  to { opacity: 0; filter: sepia(0.3) contrast(0.95) brightness(0.2) saturate(0.6); }
}

@keyframes lanternFlicker {
  0%, 100% { opacity: 0; }
  18% { opacity: 0.12; }
  22% { opacity: 0; }
  61% { opacity: 0.08; }
  64% { opacity: 0.02; }
}

@keyframes intertitleIn {
  0% { opacity: 0; filter: sepia(0.25) brightness(0.4); }
  10% { opacity: 0.35; filter: sepia(0.15) brightness(1.08); }
  16% { opacity: 0.1; filter: sepia(0.22) brightness(0.5); }
  34% { opacity: 0.78; filter: sepia(0.2) brightness(0.98); }
  100% { opacity: 0.82; filter: sepia(0.2) brightness(0.95); }
}

@keyframes intertitleFlicker {
  0%, 100% { opacity: 0.82; }
  22% { opacity: 0.7; }
  26% { opacity: 0.84; }
  71% { opacity: 0.76; }
}

@keyframes beamPulse {
  0%, 100% { opacity: 0.48; }
  38% { opacity: 0.72; }
  44% { opacity: 0.4; }
  70% { opacity: 0.64; }
}

@keyframes moteRise {
  from { transform: translate(-50%, 8px); opacity: 0; }
  18% { opacity: 0.85; }
  to { transform: translate(-50%, -118px); opacity: 0; }
}

@keyframes projShake {
  0%, 100% { transform: none; }
  35% { transform: translateY(0.4px); }
  68% { transform: translateY(-0.3px) rotate(-0.15deg); }
}

@keyframes projCrank {
  0%, 100% { transform: none; }
  45% { transform: translateX(1px) rotate(0.35deg); }
}

@keyframes scratch {
  to { transform: translateX(8%); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes paperOut {
  to { opacity: 1; transform: none; }
}

@media (max-height: 700px) {
  .display { font-size: clamp(1.55rem, 6.4vw, 2.3rem); }
  .cake { transform: scale(0.88); }
  .sheet { max-height: 40vh; }
  .beam-stack { height: 68px; }
  .vproj { width: 150px; height: 74px; }
}

@media (min-width: 760px) {
  .sheet-hang { width: min(42vw, 520px); }
  .sheet { max-height: 56vh; }
  .vproj { width: 240px; height: 124px; }
  .cake { width: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .cake, .letter-paper, .sheet.is-on img, .letter-line, .cinema-intertitle.is-on {
    opacity: 1 !important;
    transform: none !important;
  }
}