:root {
  --night: #060302;
  --ember: #d79b52;
  --paper-1: #f3d7a6;
  --paper-2: #d3a064;
  --paper-3: #a96a37;
  --ink: #1b100a;
  --ink-soft: rgba(28, 16, 10, .68);
  --wax: #8c2f2b;
  --rose: #ffb6c5;
  --cream: #ffe7bd;
  --progress: 0;
  --drag-x: 0px;
  --drag-rot: 0deg;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  font-family: "Fraunces", Georgia, serif;
  background:
    radial-gradient(circle at 50% 34%, rgba(220, 144, 64, .24), transparent 23rem),
    radial-gradient(circle at 20% 82%, rgba(255, 182, 197, .09), transparent 17rem),
    linear-gradient(180deg, #020101, #090402 48%, #020101);
  color: var(--cream);
  user-select: none;
}

.ritual {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  isolation: isolate;
}

.room {
  position: absolute;
  inset: -20%;
  z-index: -5;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 210, 145, .18), transparent 19rem),
    conic-gradient(from 100deg at 50% 50%, transparent, rgba(255,255,255,.035), transparent, rgba(255, 177, 110, .05), transparent);
  filter: blur(.2px);
  animation: roomBreath 8s ease-in-out infinite;
}
.room::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
}

.dust {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 229, 183, .65);
  box-shadow: 0 0 16px rgba(255, 196, 118, .58);
  animation: floatDust 7s ease-in-out infinite;
}
.d1 { left: 17%; top: 34%; animation-delay: 0s; }
.d2 { left: 75%; top: 24%; animation-delay: 1.2s; }
.d3 { left: 28%; top: 78%; animation-delay: 2.1s; }
.d4 { left: 86%; top: 66%; animation-delay: 3.4s; }
.d5 { left: 48%; top: 17%; animation-delay: 4.2s; }

.afterglow {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.18,1);
  pointer-events: none;
  z-index: -1;
}
body.revealed .afterglow { opacity: 1; transform: scale(1); }
.afterglow p {
  margin: 0;
  font-family: "Caveat", cursive;
  font-size: clamp(3.1rem, 15vw, 7rem);
  line-height: .82;
  color: var(--rose);
  text-shadow: 0 0 40px rgba(255, 182, 197, .28);
}
.afterglow strong {
  margin-top: 16px;
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 231, 189, .68);
}

.letter {
  --lift: calc(var(--progress) * -26deg);
  --seal-scale: calc(1 - var(--progress) * .12);
  position: relative;
  width: min(100vw, calc(100dvh * .462));
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: grab;
  perspective: 1500px;
  transform: translateX(var(--drag-x)) rotate(var(--drag-rot));
  transition: transform .42s cubic-bezier(.16,.84,.25,1), filter .42s ease;
  will-change: transform;
  filter: drop-shadow(0 48px 84px rgba(0,0,0,.72));
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.letter:active { cursor: grabbing; }
.letter:focus-visible { outline: 2px solid rgba(255, 221, 171, .76); outline-offset: -12px; }
.letter.is-dragging { transition: none; }
.letter.is-flung { transform: translateX(115vw) rotate(12deg); transition: transform .72s cubic-bezier(.15,.82,.19,1); }

.aura {
  position: absolute;
  inset: 12% -12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 203, 133, .2), transparent 68%);
  filter: blur(24px);
  opacity: .7;
  animation: auraPulse 5.6s ease-in-out infinite;
}

.envelope,
.paper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.26), transparent 18rem),
    radial-gradient(circle at 74% 86%, rgba(75, 34, 14, .20), transparent 16rem),
    linear-gradient(112deg, rgba(255,255,255,.12), transparent 19%, rgba(75, 38, 16, .10) 52%, transparent 85%),
    linear-gradient(158deg, var(--paper-1), var(--paper-2) 56%, var(--paper-3));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 80px rgba(75, 38, 16, .22);
}
.envelope { z-index: 4; transform-origin: left center; transition: transform 1.1s cubic-bezier(.16,.84,.2,1), opacity .65s ease, filter .65s ease; }
.paper {
  z-index: 2;
  display: grid;
  place-items: center;
  padding: max(34px, env(safe-area-inset-top)) clamp(24px, 7vw, 56px) max(40px, env(safe-area-inset-bottom));
  transform: translateY(20px) scale(.94) rotateX(4deg);
  opacity: .72;
  transition: transform 1s cubic-bezier(.16,.84,.2,1), opacity .8s ease;
}
.letter.is-open .envelope { transform: rotateY(-114deg) translateX(-16px); opacity: 0; filter: blur(3px); pointer-events: none; }
.letter.is-open .paper { transform: translateY(0) scale(1) rotateX(0); opacity: 1; }

.age-map,
.paper-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.52' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
.age-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 21%, rgba(74, 39, 17, .22) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 35%, rgba(74, 39, 17, .16) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 78%, rgba(74, 39, 17, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 83%, rgba(74, 39, 17, .17) 0 1px, transparent 2px);
}

.edge { position: absolute; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, rgba(82,42,17,.22), transparent); opacity: .38; }
.edge.left { left: 0; } .edge.right { right: 0; transform: scaleX(-1); }
.flap { position: absolute; pointer-events: none; }
.flap-left, .flap-right, .flap-bottom, .flap-top {
  background: linear-gradient(155deg, rgba(255,231,190,.28), rgba(83,43,18,.10));
  border: 1px solid rgba(60,34,18,.16);
}
.flap-left { left: -8%; top: 0; width: 62%; height: 100%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.flap-right { right: -8%; top: 0; width: 62%; height: 100%; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.flap-bottom { left: -8%; bottom: -7%; width: 116%; height: 52%; clip-path: polygon(0 100%, 100% 100%, 50% 0); opacity: .7; }
.flap-top {
  left: -8%; top: -7%; width: 116%; height: 56%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: rotateX(var(--lift));
  box-shadow: 0 24px 34px rgba(74, 37, 14, calc(.14 + var(--progress) * .18));
  transition: transform .18s linear;
}
.thread { position: absolute; left: -12%; width: 124%; height: 1px; top: 50%; background: linear-gradient(90deg, transparent, rgba(60,32,15,.28), transparent); }
.t1 { transform: rotate(28deg); } .t2 { transform: rotate(-28deg); }

.wax {
  position: absolute;
  left: 50%; top: 50%;
  width: 78px; height: 78px;
  transform: translate(-50%, -50%) rotate(-8deg) scale(var(--seal-scale));
  display: grid; place-items: center;
  border-radius: 50% 48% 52% 46%;
  color: #ffd1d1;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(0,0,0,.22), transparent 32%),
    radial-gradient(circle, #a83a39, #68201f 74%);
  box-shadow: inset 0 2px 10px rgba(255,255,255,.16), inset 0 -9px 16px rgba(0,0,0,.24), 0 12px 24px rgba(54,23,12,.3);
  z-index: 7;
  transition: transform .16s linear;
}
.wax span { font-family: "Caveat", cursive; font-size: 2.35rem; transform: translateY(-1px); }
.letter.is-open .wax { animation: sealBreak .62s cubic-bezier(.17,.8,.3,1) both; }

.cover-copy { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.cover-copy em { margin-top: -31dvh; font-family: "Caveat", cursive; font-style: normal; font-size: clamp(2.7rem, 12vw, 5.1rem); color: rgba(36,22,13,.5); transform: rotate(-4deg); }
.cover-copy small { position: absolute; bottom: max(26px, env(safe-area-inset-bottom)); padding: 9px 14px; border-radius: 999px; background: rgba(34,19,10,.12); color: rgba(31,20,14,.62); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }

.paper-fold { position: absolute; left: -8%; width: 116%; height: 2px; background: linear-gradient(90deg, transparent, rgba(70,43,24,.2), rgba(255,255,255,.16), transparent); }
.f1 { top: 24%; transform: rotate(-1.1deg); } .f2 { top: 51%; transform: rotate(.5deg); opacity: .8; } .f3 { top: 76%; transform: rotate(-.4deg); opacity: .56; }
.date { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); white-space: nowrap; color: rgba(34,20,12,.42); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.script-lines { position: relative; width: min(100%, 420px); display: grid; gap: clamp(9px, 1.4dvh, 15px); transform: rotate(-1.25deg); }
.script-lines span { display: block; opacity: 0; filter: blur(5px); transform: translateY(12px); font-family: "Homemade Apple", "Caveat", cursive; font-size: clamp(1.55rem, 6.4vw, 3.35rem); line-height: 1.16; color: var(--ink); text-align: left; text-shadow: 0 1px 0 rgba(255,255,255,.14); }
.script-lines span:nth-child(even) { transform: translateY(12px) rotate(.45deg); }
.script-lines em { color: #6b1e1e; font-style: normal; text-shadow: 0 0 16px rgba(139,47,43,.12); }
.letter.is-open .script-lines span { animation: inkArrives .82s cubic-bezier(.2,.86,.22,1) both; }
.letter.is-open .script-lines span:nth-child(1) { animation-delay: .28s; }
.letter.is-open .script-lines span:nth-child(2) { animation-delay: .43s; }
.letter.is-open .script-lines span:nth-child(3) { animation-delay: .58s; }
.letter.is-open .script-lines span:nth-child(4) { animation-delay: .73s; }
.letter.is-open .script-lines span:nth-child(5) { animation-delay: .91s; }
.letter.is-open .script-lines span:nth-child(6) { animation-delay: 1.08s; }
.letter.is-open .script-lines span:nth-child(7) { animation-delay: 1.23s; }
.signature { position: absolute; right: clamp(24px, 9vw, 54px); bottom: max(68px, calc(env(safe-area-inset-bottom) + 54px)); font-family: "Caveat", cursive; font-size: clamp(1.55rem, 7vw, 3rem); color: rgba(31,18,10,.64); opacity: 0; transform: rotate(-5deg) translateY(8px); }
.letter.is-open .signature { animation: inkArrives .78s 1.46s cubic-bezier(.2,.86,.22,1) both; }
.slide-note { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); color: rgba(31,20,14,.46); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; opacity: 0; }
.letter.is-open .slide-note { animation: fadeUp .7s 1.75s ease both; }

.instruction { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.noscript { padding: 24px; color: var(--cream); font-family: Georgia, serif; }

@keyframes roomBreath { 0%,100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.035); } }
@keyframes auraPulse { 0%,100% { opacity: .5; transform: scale(.96); } 50% { opacity: .86; transform: scale(1.04); } }
@keyframes floatDust { 0%,100% { opacity: .18; transform: translate3d(0, 18px, 0) scale(.8); } 50% { opacity: .95; transform: translate3d(10px, -18px, 0) scale(1.15); } }
@keyframes sealBreak { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(.92); opacity: 1; } 55% { transform: translate(-50%, -50%) rotate(8deg) scale(1.08); opacity: .9; } 100% { transform: translate(-50%, -50%) rotate(22deg) scale(.65); opacity: 0; } }
@keyframes inkArrives { to { opacity: 1; filter: blur(0); transform: translateY(0) rotate(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 760px) {
  .letter { height: min(92dvh, 920px); min-height: unset; border-radius: 38px; overflow: hidden; }
  .envelope, .paper { border-radius: 38px; }
  .script-lines span { font-size: clamp(1.6rem, 4.5dvh, 2.9rem); }
}
@media (max-width: 390px) {
  .script-lines { gap: 8px; }
  .script-lines span { font-size: clamp(1.34rem, 5.8vw, 2.4rem); }
  .date { font-size: .58rem; }
}
@media (max-height: 740px) {
  .script-lines { gap: 5px; }
  .script-lines span { font-size: clamp(1.18rem, 5.1vw, 2.1rem); }
  .signature { bottom: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .script-lines span, .signature, .slide-note { opacity: 1; filter: none; transform: none; }
}