:root {
  --black: #070707;
  --ink: #1d1a16;
  --cream: #eee4d2;
  --cream-light: #f5eddf;
  --gold: #d6ae52;
  --gold-light: #e7c66a;
  --muted: #aaa69d;
  --ease: cubic-bezier(.22,.72,.23,1);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { min-height: 100%; }
html { overflow: hidden; }

body {
  margin: 0;
  overflow: hidden;
  color: #f5f3ed;
  background:
    radial-gradient(circle at 50% 35%, rgba(214,174,82,.055), transparent 31rem),
    linear-gradient(145deg, #070707 0%, #0d0d0d 48%, #070707 100%);
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

button { font: inherit; }
button:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 5px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.experience {
  position: relative;
  width: min(100%, 52rem);
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(2.5rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .8s ease, visibility 0s linear .8s;
}

.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.intro-copy {
  width: min(100%, 31rem);
  text-align: center;
  transform: translateY(-2vh);
}

.intro-date {
  margin: 0 0 2.25rem;
  color: var(--gold-light);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .38em;
}

.intro-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.15rem, 10vw, 3.7rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.025em;
}

.intro-subtitle {
  max-width: 24rem;
  margin: 1.75rem auto 2.65rem;
  color: #c8c4bc;
  font-size: .9rem;
  line-height: 1.8;
}

.text-button {
  min-width: 9rem;
  min-height: 3rem;
  padding: .75rem 1rem;
  border: 0;
  color: #f5f3ed;
  background: transparent;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .21em;
}

.text-button i {
  display: block;
  width: 2.25rem;
  height: 1px;
  margin: .65rem auto 0;
  background: var(--gold);
  transform-origin: center;
  transition: width .35s var(--ease);
}

.text-button:hover i { width: 4.2rem; }

.reveal { opacity: 0; transform: translateY(9px); animation: introReveal 1.05s var(--ease) forwards; }
.reveal--1 { animation-delay: .35s; }
.reveal--2 { animation-delay: 1.18s; }
.reveal--3 { animation-delay: 2.08s; }
.reveal--4 { animation-delay: 3.1s; }

.scene--notes { grid-template-rows: 1fr auto; padding-inline: .9rem; }

.notes-stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  perspective: 900px;
}

.paper {
  --rotation: -1.4deg;
  --paper: #eee3cf;
  position: relative;
  display: grid;
  place-items: center;
  width: min(88vw, 31rem);
  min-height: clamp(14.5rem, 42vh, 21rem);
  padding: 3rem 2rem;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 25% 12%, rgba(255,255,255,.5), transparent 32%),
    repeating-linear-gradient(8deg, rgba(94,72,40,.025) 0 1px, transparent 1px 4px),
    var(--paper);
  filter: drop-shadow(0 1.4rem 1.15rem rgba(0,0,0,.35)) drop-shadow(0 .3rem .25rem rgba(0,0,0,.32));
  clip-path: polygon(2% 5%, 9% 3%, 18% 5%, 27% 2%, 38% 4%, 49% 1%, 61% 4%, 72% 2%, 84% 5%, 97% 3%, 99% 16%, 97% 30%, 100% 44%, 98% 59%, 99% 75%, 96% 96%, 84% 98%, 72% 96%, 61% 99%, 49% 97%, 39% 100%, 28% 97%, 17% 99%, 3% 95%, 1% 81%, 3% 65%, 0 50%, 2% 34%, 0 19%);
  transform: rotate(var(--rotation)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .22s ease-out, filter .35s ease;
  will-change: transform, opacity;
}

.paper::before,
.letter-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(101deg, transparent 0 46%, rgba(92,67,34,.09) 48%, rgba(255,255,255,.18) 50%, transparent 53%),
    radial-gradient(ellipse at 80% 75%, rgba(97,67,31,.08), transparent 40%);
  mix-blend-mode: multiply;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(91,62,30,.08);
  clip-path: inherit;
  pointer-events: none;
}

.paper__crease {
  position: absolute;
  top: 7%;
  bottom: 8%;
  left: 51%;
  width: 1px;
  opacity: .5;
  background: linear-gradient(transparent, rgba(80,61,35,.12) 20%, rgba(255,255,255,.3) 50%, rgba(80,61,35,.08) 80%, transparent);
  transform: rotate(1.2deg);
}

.paper__text {
  position: relative;
  z-index: 1;
  margin: 0;
  white-space: pre-line;
  text-align: center;
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: clamp(1.75rem, 7.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.19;
  letter-spacing: .005em;
  text-wrap: balance;
}

.paper--2 { --rotation: 1.8deg; --paper: #f2e8d7; width: min(84vw, 29rem); clip-path: polygon(1% 3%, 15% 5%, 29% 2%, 46% 5%, 61% 2%, 79% 4%, 98% 1%, 97% 19%, 100% 39%, 98% 58%, 100% 79%, 96% 98%, 79% 96%, 63% 99%, 47% 96%, 31% 99%, 14% 96%, 2% 99%, 4% 78%, 1% 61%, 3% 42%, 0 21%); }
.paper--3 { --rotation: -2.6deg; --paper: #e8dcc7; width: min(90vw, 32rem); min-height: clamp(13.5rem, 39vh, 19rem); }
.paper--4 { --rotation: .7deg; --paper: #f1e6d3; width: min(82vw, 28rem); }
.paper--5 { --rotation: 2.5deg; --paper: #eadfcd; width: min(89vw, 30rem); clip-path: polygon(3% 2%, 19% 4%, 34% 1%, 49% 5%, 65% 2%, 82% 5%, 98% 3%, 96% 24%, 99% 49%, 97% 72%, 99% 96%, 81% 98%, 64% 95%, 47% 99%, 29% 96%, 12% 99%, 1% 95%, 3% 72%, 0 51%, 4% 29%); }
.paper--6 { --rotation: -1deg; --paper: #f4e9d5; min-height: clamp(15rem, 46vh, 22rem); }
.paper--7 { --rotation: -2deg; --paper: #ece0cc; width: min(81vw, 28rem); }
.paper--8 { --rotation: 1.4deg; --paper: #f2e7d4; width: min(86vw, 30rem); }

.paper--favorite {
  --rotation: -.5deg;
  --paper: #f4e7cf;
  width: min(89vw, 32rem);
  min-height: clamp(16rem, 45vh, 22rem);
  filter: drop-shadow(0 1.8rem 1.6rem rgba(0,0,0,.44)) drop-shadow(0 .2rem .45rem rgba(214,174,82,.12));
  clip-path: polygon(2% 4%, 14% 2%, 26% 5%, 39% 2%, 52% 4%, 66% 1%, 80% 4%, 97% 2%, 99% 18%, 97% 34%, 100% 51%, 98% 68%, 99% 84%, 96% 97%, 81% 99%, 67% 96%, 52% 99%, 38% 96%, 24% 99%, 3% 96%, 1% 79%, 3% 62%, 0 45%, 2% 27%);
}

.paper--favorite .paper__text {
  font-size: clamp(2.4rem, 10vw, 4rem);
  line-height: 1.04;
  color: #201a11;
}

.note-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(88vw, 31rem);
  min-height: 4.25rem;
  margin: 0 auto;
}

.note-count { color: var(--muted); font-size: .72rem; letter-spacing: .16em; }

.next-button,
.letter-continue {
  min-height: 3rem;
  padding: .7rem .2rem .7rem 1.2rem;
  border: 0;
  color: #ddd8ce;
  background: transparent;
  cursor: pointer;
  font-size: .78rem;
  letter-spacing: .06em;
}

.next-button span,
.letter-continue span { display: inline-block; margin-left: .6rem; color: var(--gold-light); transition: transform .25s var(--ease); }
.next-button:hover span,
.letter-continue:hover span { transform: translateX(4px); }
.next-button { transition: opacity .35s ease; }
.next-button.is-waiting { opacity: 0; pointer-events: none; }
.next-button:disabled { cursor: default; }

.note-enter { animation: paperIn .78s var(--ease) both; }
.paper--2.note-enter,
.paper--5.note-enter { animation-name: paperInSide; }
.paper--3.note-enter,
.paper--7.note-enter { animation-name: paperUnfold; }
.paper--4.note-enter,
.paper--8.note-enter { animation-name: paperInSoft; }
.note-leave { animation: paperOut .42s ease-in both; }

.music-control {
  position: fixed;
  top: max(1.15rem, env(safe-area-inset-top));
  right: max(1.15rem, env(safe-area-inset-right));
  z-index: 15;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 0;
  color: #c9c4ba;
  background: transparent;
  cursor: pointer;
  font-size: .72rem;
  letter-spacing: .06em;
}

.music-control__note { display: inline-block; margin-right: .35rem; color: var(--gold); }
.music-control.is-playing .music-control__note { animation: musicPulse 1.8s ease-in-out infinite; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--gold-light); opacity: 0; animation: drift 9s linear infinite; }
.ambient span:nth-child(1) { left: 12%; top: 70%; animation-delay: 1s; }
.ambient span:nth-child(2) { left: 82%; top: 78%; animation-delay: 5s; }
.ambient span:nth-child(3) { left: 68%; top: 62%; animation-delay: 8s; }
.ambient span:nth-child(4) { left: 25%; top: 80%; animation-delay: 11s; }
.ambient span:nth-child(5) { left: 91%; top: 58%; animation-delay: 14s; }
.ambient span:nth-child(6) { left: 42%; top: 85%; animation-delay: 17s; }

.tap-glow { position: fixed; z-index: 30; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(231,198,106,.25); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.4); }
.tap-glow.is-visible { animation: tapFeedback .5s ease-out both; }

.scene--notes.is-dimming { opacity: 0; transition-duration: .85s; }

.letter-intro-copy {
  display: grid;
  justify-items: center;
  width: min(100%, 32rem);
  text-align: center;
}

.letter-intro-copy > p {
  max-width: 26rem;
  margin: 0 0 3.4rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 7.5vw, 2.75rem);
  line-height: 1.17;
  text-wrap: balance;
}

.envelope-button {
  display: grid;
  justify-items: center;
  gap: 1.35rem;
  min-width: 13rem;
  min-height: 10rem;
  padding: .6rem 1.2rem;
  border: 0;
  color: #e8e3d9;
  background: transparent;
  cursor: pointer;
}

.envelope {
  position: relative;
  display: block;
  width: 9.6rem;
  height: 6.15rem;
  filter: drop-shadow(0 1.15rem .9rem rgba(0,0,0,.5));
  perspective: 600px;
}

.envelope i { position: absolute; display: block; }
.envelope__back { inset: .55rem 0 0; border-radius: 2px; background: #dbcdb6; }
.envelope__paper { left: .85rem; right: .85rem; top: .8rem; height: 4.5rem; background: #f2e8d8; transition: transform .7s .3s var(--ease); }
.envelope__front { inset: .55rem 0 0; overflow: hidden; background: #e8dac4; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.envelope__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.22), transparent 48%, rgba(85,57,25,.06)); }
.envelope__flap { top: .55rem; left: 0; width: 100%; height: 3.7rem; background: #efe3d0; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform .55s var(--ease); }

.envelope-label {
  position: relative;
  font-size: .75rem;
  letter-spacing: .11em;
}

.envelope-label::after { content: ""; position: absolute; left: 50%; bottom: -.6rem; width: 2rem; height: 1px; background: var(--gold); transform: translateX(-50%); transition: width .3s ease; }
.envelope-button:hover .envelope-label::after { width: 3.7rem; }
.envelope-button.is-opening .envelope__flap { transform: rotateX(178deg); }
.envelope-button.is-opening .envelope__paper { transform: translateY(-2.8rem); }
.envelope-button.is-opening .envelope-label { opacity: 0; transition: opacity .3s ease; }

.scene--letter { padding-inline: .8rem; }

.letter-paper {
  position: relative;
  width: min(94vw, 39rem);
  max-height: calc(100svh - 3.2rem);
  overflow: visible;
  padding: clamp(2.25rem, 7vw, 4.2rem) clamp(1.6rem, 7vw, 4.4rem) 2.2rem;
  color: #262019;
  background:
    repeating-linear-gradient(4deg, rgba(93,68,37,.018) 0 1px, transparent 1px 5px),
    #f2e8d7;
  box-shadow: 0 1.9rem 4rem rgba(0,0,0,.55), 0 .2rem .5rem rgba(0,0,0,.34);
  clip-path: polygon(.5% 1%, 13% .3%, 27% .8%, 40% .2%, 55% .7%, 70% .2%, 84% .8%, 99% .3%, 99.6% 18%, 99% 36%, 99.7% 53%, 99% 70%, 99.5% 86%, 99% 99%, 84% 99.6%, 69% 99%, 54% 99.7%, 39% 99%, 23% 99.7%, 1% 99%, .4% 82%, 1% 64%, .3% 46%, 1% 27%);
  scrollbar-width: thin;
  scrollbar-color: rgba(113,84,45,.35) transparent;
  animation: letterIn .95s var(--ease) both;
}

.letter-paper header { position: relative; text-align: center; margin-bottom: 2rem; }
.letter-kicker { margin: 0 0 .5rem; color: #8d6a34; font-size: .68rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }
.letter-paper h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.2rem, 9vw, 3.5rem); font-weight: 600; line-height: 1; }
.letter-body { position: relative; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 3.8vw, 1.1rem); line-height: 1.76; }
.letter-body p { margin: 0 0 1.3em; }
.letter-signature { position: relative; margin: 1.7rem 0 .8rem; text-align: right; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.65rem; color: #5d4930; }
.letter-continue { position: relative; display: block; margin: 1.2rem 0 0 auto; color: #4f4538; }
.letter-continue span { color: #9a722f; }

.ending-copy { width: min(100%, 35rem); text-align: center; }
.ending-line { opacity: 0; transform: translateY(8px); }
.ending-line--1, .ending-line--2, .ending-line--4 { margin: 0; color: #cbc6bd; font-size: .9rem; line-height: 1.7; }
.ending-line--1 { margin-bottom: 1rem; }
.ending-line--2 { margin-bottom: 3.2rem; }
.ending-line--4 { margin-top: 3rem; }
.ending-heart h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.05rem, 9vw, 4.5rem); font-weight: 500; line-height: .98; color: #f4efe6; text-wrap: balance; }
.ending-heart p { margin: 1.15rem 0 0; color: var(--gold-light); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.35rem, 5.6vw, 2rem); }
.butterfly { width: 3rem; height: auto; margin-bottom: 1.25rem; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .45rem rgba(214,174,82,.18)); }

.scene--ending.is-sequencing .ending-line--1 { animation: endingReveal .8s .35s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-line--2 { animation: endingReveal .9s 1.55s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-line--3 { animation: endingReveal 1.1s 3s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-line--4 { animation: endingReveal .9s 4.55s var(--ease) forwards; }
.scene--ending.is-sequencing .butterfly { animation: butterflyFloat 4.5s 4.1s ease-in-out infinite; }

@keyframes introReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes paperIn { from { opacity: 0; transform: translate3d(0,22px,0) rotate(calc(var(--rotation) - .8deg)) scale(.97); } to { opacity: 1; transform: rotate(var(--rotation)) scale(1); } }
@keyframes paperInSide { from { opacity: 0; transform: translate3d(24px,8px,0) rotate(calc(var(--rotation) + 1deg)) scale(.975); } to { opacity: 1; transform: rotate(var(--rotation)) scale(1); } }
@keyframes paperUnfold { from { opacity: 0; transform: translate3d(-9px,16px,0) rotateX(-8deg) rotate(calc(var(--rotation) - .5deg)) scaleY(.96); } to { opacity: 1; transform: rotateX(0) rotate(var(--rotation)) scaleY(1); } }
@keyframes paperInSoft { from { opacity: 0; transform: translate3d(-18px,5px,0) rotate(calc(var(--rotation) - 1deg)) scale(.985); } to { opacity: 1; transform: rotate(var(--rotation)) scale(1); } }
@keyframes paperOut { to { opacity: 0; transform: translate3d(-8px,-12px,0) rotate(calc(var(--rotation) + .6deg)) scale(.985); } }
@keyframes musicPulse { 50% { transform: translateY(-2px); color: var(--gold-light); } }
@keyframes drift { 0%,100% { opacity: 0; transform: translateY(0) scale(.7); } 20% { opacity: .25; } 80% { opacity: .08; } 100% { transform: translateY(-24vh) scale(1.2); } }
@keyframes tapFeedback { from { opacity: .38; transform: translate(-50%,-50%) scale(.4); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.35); } }
@keyframes letterIn { from { opacity: 0; transform: translateY(22px) rotateX(-2deg) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes endingReveal { to { opacity: 1; transform: none; } }
@keyframes butterflyFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }

@media (min-width: 48rem) {
  .paper { padding-inline: 3rem; }
  .intro-copy { transform: translateY(-1rem); }
}

@media (max-height: 43rem) {
  .scene { padding-top: 1.4rem; padding-bottom: 1rem; }
  .paper { min-height: 12.5rem; padding-top: 2rem; padding-bottom: 2rem; }
  .paper__text { font-size: clamp(1.65rem, 6.5vw, 2.35rem); }
  .note-navigation { min-height: 3.4rem; }
  .letter-intro-copy > p { margin-bottom: 1.8rem; }
  .envelope-button { transform: scale(.9); }
  .ending-line--2 { margin-bottom: 1.8rem; }
  .ending-line--4 { margin-top: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .ambient { display: none; }
  .scene--ending.is-sequencing .ending-line { opacity: 1; transform: none; animation: none; }
}

/* Segunda pasada: profundidad, ritmo y movimiento artesanal. */
.particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ambient { display: none; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(214,174,82,.055), transparent 34%),
    rgba(0,0,0,0);
  opacity: .9;
  transition: background 1.1s ease, opacity 1.1s ease;
}

.experience { z-index: 1; }
.scene { z-index: 2; }

.intro-date { position: relative; display: inline-block; }
.intro-date::before,
.intro-date::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 .6rem rgba(231,198,106,.28);
  opacity: .42;
  animation: dateDust 4.8s ease-in-out infinite;
}
.intro-date::before { left: -1.35rem; }
.intro-date::after { right: -1.1rem; animation-delay: -2.2s; }

.intro-transition .intro-title,
.intro-transition .intro-subtitle,
.intro-transition .text-button {
  animation: introCopyAway .9s var(--ease) both;
}
.intro-transition .intro-subtitle { animation-delay: .07s; }
.intro-transition .text-button { animation-delay: .13s; }
.intro-transition .intro-date { animation: introDateDissolve 1.45s .12s ease-in both; }

.paper {
  --move-x: 0px;
  --move-y: 0px;
  outline: none;
  cursor: pointer;
  touch-action: manipulation;
  transform:
    translate3d(var(--move-x), var(--move-y), 0)
    rotate(var(--rotation)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .28s cubic-bezier(.2,.75,.25,1), filter .32s ease;
}

.paper::after {
  inset: 4px 5px 6px;
  border-color: rgba(91,62,30,.11);
  box-shadow: inset 0 0 1.4rem rgba(116,82,40,.045);
}

.paper:focus-visible { filter: drop-shadow(0 1.45rem 1.1rem rgba(0,0,0,.4)) drop-shadow(0 0 .32rem rgba(214,174,82,.26)); }
.paper.is-pressed {
  transform:
    translate3d(calc(var(--move-x) + 1px), calc(var(--move-y) + 2px), 0)
    rotate(calc(var(--rotation) + .12deg)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(.989);
  filter: drop-shadow(0 .85rem .75rem rgba(0,0,0,.32)) drop-shadow(0 .16rem .16rem rgba(0,0,0,.3));
  transition-duration: .11s;
}

.paper--2::before { background: linear-gradient(82deg, rgba(76,54,29,.08), transparent 14% 76%, rgba(255,255,255,.2)), radial-gradient(ellipse at 66% 20%, rgba(255,255,255,.2), transparent 40%); }
.paper--3::before { background: linear-gradient(177deg, transparent 44%, rgba(78,55,28,.08) 48%, rgba(255,255,255,.18) 51%, transparent 54%); }
.paper--4::before { background: radial-gradient(ellipse at 13% 82%, rgba(87,59,28,.11), transparent 36%), linear-gradient(93deg, transparent, rgba(255,255,255,.17) 72%, transparent); }
.paper--5::before { background: linear-gradient(128deg, transparent 67%, rgba(82,57,28,.1) 70%, rgba(255,255,255,.18) 72%, transparent 75%); }
.paper--6::before { background: radial-gradient(ellipse at 50% 7%, rgba(255,255,255,.33), transparent 34%), linear-gradient(101deg, transparent 45%, rgba(95,69,34,.07) 49%, transparent 53%); }

.note-enter.enter--0 { animation: paperDropSettle 1.05s cubic-bezier(.17,.78,.24,1) both; }
.note-enter.enter--1 { animation: paperTableSlide .92s cubic-bezier(.2,.72,.18,1) both; }
.note-enter.enter--2 { transform-origin: 8% 52%; animation: paperOpenFold 1.08s cubic-bezier(.16,.72,.25,1) both; }
.note-enter.enter--3 { animation: paperFromDepth .95s cubic-bezier(.18,.76,.23,1) both; }
.note-enter.enter--4 { transform-origin: 92% 8%; animation: paperCornerRelease 1.05s cubic-bezier(.18,.77,.24,1) both; }
.note-enter.enter--favorite { animation: favoritePaperIn 1.25s cubic-bezier(.18,.74,.23,1) both; }

.note-leave.exit--0 { animation: paperLeaveSide .57s cubic-bezier(.55,.02,.74,.35) both; }
.note-leave.exit--1 { animation: paperLeaveDown .57s cubic-bezier(.55,.02,.75,.36) both; }
.note-leave.exit--2 { animation: paperLeaveBack .57s ease-in both; }
.note-leave.exit--3 { animation: paperLeaveLift .57s cubic-bezier(.55,.02,.75,.36) both; }
.paper.favorite-leave { animation: favoritePaperOut .95s ease-in both; }

.paper__text--writing .handwritten-word {
  display: inline-block;
  opacity: 0;
  filter: blur(2.5px);
  clip-path: inset(0 100% 0 0);
  transform: translateY(2px);
  animation: handwritingReveal .54s cubic-bezier(.2,.72,.22,1) forwards;
  animation-delay: calc(.14s + var(--word-index) * .075s);
}

.note-count { display: inline-flex; align-items: center; min-width: 4.1rem; overflow: hidden; font-variant-numeric: tabular-nums; }
.note-count__current { display: inline-block; min-width: 1.45rem; }
.note-count__current.is-changing { animation: countRoll .38s var(--ease); }

.favorite-moment::after {
  background:
    radial-gradient(ellipse at 50% 49%, rgba(214,174,82,.045), transparent 26%),
    rgba(0,0,0,.36);
}
.favorite-moment .note-navigation { transition: opacity .55s ease; }
.favorite-moment:not(.favorite-revealed) .note-navigation { opacity: 0; }
.favorite-moment .paper--favorite {
  width: min(78vw, 27rem);
  min-height: clamp(12.5rem, 36vh, 18rem);
  padding-inline: 2.3rem;
  filter: drop-shadow(0 2rem 2.1rem rgba(0,0,0,.54)) drop-shadow(0 0 .75rem rgba(214,174,82,.1));
}
.favorite-moment .paper--favorite::before { opacity: .22; }
.favorite-closing::after { background: rgba(0,0,0,.62); }

.music-control {
  display: flex;
  align-items: center;
  gap: .52rem;
  min-width: 3.3rem;
  min-height: 2.75rem;
  border-radius: 2rem;
  opacity: .72;
  transition: opacity .3s ease, background .3s ease;
}
.music-control:hover { opacity: 1; background: rgba(255,255,255,.025); }
.music-control__note { margin: 0; font-size: .86rem; }
.music-control__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.music-control__bars i { display: block; width: 2px; height: 4px; border-radius: 2px; background: var(--gold-light); opacity: .62; transform-origin: bottom; }
.music-control.is-playing .music-control__bars i { animation: audioBar .82s ease-in-out infinite alternate; }
.music-control.is-playing .music-control__bars i:nth-child(2) { animation-delay: -.42s; }
.music-control.is-playing .music-control__bars i:nth-child(3) { animation-delay: -.18s; }

.letter-intro-moment::after {
  background:
    radial-gradient(ellipse at 50% 57%, rgba(214,174,82,.09), transparent 28%),
    rgba(0,0,0,.22);
}
.scene--letter-intro { perspective: 1100px; }
.letter-intro-copy { transform-style: preserve-3d; }
.scene--letter-intro.is-active .letter-intro-copy > p { animation: letterPreludeIn 1.1s .18s var(--ease) both; }
.scene--letter-intro.is-active .envelope-button { animation: envelopeArrives 1.25s .48s cubic-bezier(.17,.75,.22,1) both; }
.envelope-button { perspective: 900px; transform-style: preserve-3d; }
.envelope-button:focus-visible { outline: none; }
.envelope-button:focus-visible .envelope { filter: drop-shadow(0 1.45rem 1.05rem rgba(0,0,0,.56)) drop-shadow(0 0 .35rem rgba(214,174,82,.24)); }
.envelope-button:focus-visible .envelope-label::after { width: 3.7rem; }
.envelope {
  width: 10.2rem;
  height: 6.55rem;
  transform: rotateX(4deg) rotateZ(-.45deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 1.45rem 1.05rem rgba(0,0,0,.56));
  transition: transform .85s var(--ease), filter .85s ease;
}
.envelope i { backface-visibility: hidden; }
.envelope__lining { inset: .45rem 0 0; z-index: 0; background: linear-gradient(145deg, #b99b63, #e2c98e 52%, #a98a55); clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); opacity: .4; }
.envelope__back { z-index: 1; inset: .58rem 0 0; background: linear-gradient(155deg, #e4d7c2, #cdbda4); box-shadow: inset 0 0 1.1rem rgba(85,57,25,.08); }
.envelope__paper { z-index: 2; left: .82rem; right: .82rem; top: .9rem; height: 5rem; background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(111,84,47,.035) 12px), #f4ebdc; box-shadow: 0 -.18rem .4rem rgba(0,0,0,.1); transform-origin: bottom center; transition: none; }
.envelope__paper::before { content: ""; position: absolute; left: 18%; right: 18%; top: 24%; height: 1px; background: rgba(130,92,39,.2); box-shadow: 0 .7rem rgba(130,92,39,.12), 0 1.4rem rgba(130,92,39,.08); }
.envelope__front { z-index: 4; inset: .58rem 0 0; background: linear-gradient(145deg, #eaddc7, #d2c0a5); filter: drop-shadow(0 -.08rem .08rem rgba(90,62,28,.08)); }
.envelope__flap { z-index: 5; top: .58rem; height: 3.95rem; background: linear-gradient(165deg, #f1e6d4, #d7c6ab); box-shadow: 0 .14rem .2rem rgba(71,48,22,.12); transition: none; }
.envelope__seal { z-index: 6; left: calc(50% - .38rem); top: 3.53rem; width: .76rem; height: .76rem; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #e5c675, #aa7f2f); box-shadow: 0 .12rem .2rem rgba(66,42,16,.26); transition: opacity .28s ease, transform .38s ease; }
.envelope-button.is-opening .envelope { animation: envelopeBodyOpen 1.55s var(--ease) both; }
.envelope-button.is-opening .envelope__flap { animation: flapOpen .58s cubic-bezier(.46,.05,.32,1) forwards; }
.envelope-button.is-opening .envelope__seal { opacity: 0; transform: scale(.75); }
.envelope-button.is-opening .envelope__paper { animation: letterLeavesEnvelope 1.08s .43s cubic-bezier(.17,.74,.24,1) forwards; }
.envelope-camera .letter-intro-copy { animation: cameraPush 1.55s var(--ease) both; }

.scene--letter { perspective: 1200px; }
.letter-opened .scene--letter-intro { opacity: 0; visibility: hidden; transition: none; }
.letter-paper {
  border: 1px solid rgba(102,73,37,.08);
  background:
    linear-gradient(92deg, transparent 0 7%, rgba(116,82,43,.018) 12%, transparent 18%),
    radial-gradient(ellipse at 84% 10%, rgba(255,255,255,.35), transparent 32%),
    repeating-linear-gradient(4deg, rgba(93,68,37,.018) 0 1px, transparent 1px 5px),
    #f2e8d7;
  box-shadow: 0 2.3rem 5.2rem rgba(0,0,0,.64), 0 .32rem .65rem rgba(0,0,0,.3), inset 0 0 2.5rem rgba(112,78,35,.035);
  animation: letterCinematicIn 1.1s cubic-bezier(.18,.76,.23,1) both;
}
.letter-paper::after { content: ""; position: absolute; inset: .45rem; pointer-events: none; border: 1px solid rgba(103,74,37,.035); clip-path: inherit; }
.scene--letter.is-leaving .letter-paper { animation: letterIntoDark 1.12s cubic-bezier(.42,0,.78,.32) both; overflow: hidden; }
.letter-opened::after { background: radial-gradient(ellipse at 50% 42%, rgba(214,174,82,.045), transparent 34%), rgba(0,0,0,.24); }

.butterfly-anchor { display: block; width: 3.4rem; height: 2.65rem; margin: 0 auto .82rem; }
.ending-heart { position: relative; }
.ending-heart h2 { position: relative; }
.ending-heart h2::after { content: ""; position: absolute; inset: -.35rem -1rem; pointer-events: none; background: linear-gradient(105deg, transparent 25%, rgba(241,216,137,.12) 48%, transparent 70%); opacity: 0; transform: translateX(-35%); }
.scene--ending.is-sequencing .ending-line--1 { animation: endingReveal .8s .45s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-line--2 { animation: endingReveal .9s 1.7s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-line--3 { animation: endingReveal 1.15s 3.05s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-heart h2::after { animation: titleGlint 1.55s 3.45s ease-out both; }
.scene--ending.is-sequencing .ending-line--4 { animation: endingReveal .9s 6.65s var(--ease) forwards; }
.ending-moment::after { background: radial-gradient(ellipse at 50% 52%, rgba(214,174,82,.055), transparent 30%), rgba(0,0,0,.18); }

@keyframes dateDust { 0%,100% { opacity: .18; transform: translate3d(0,2px,0) scale(.75); } 50% { opacity: .58; transform: translate3d(0,-3px,0) scale(1.15); } }
@keyframes introCopyAway { to { opacity: 0; filter: blur(5px); transform: translateY(-9px) scale(.985); } }
@keyframes introDateDissolve { 45% { opacity: .82; letter-spacing: .46em; } to { opacity: 0; filter: blur(8px); letter-spacing: .62em; transform: scale(1.045); } }
@keyframes paperDropSettle { 0% { opacity: 0; transform: translate3d(0,-72px,0) rotate(calc(var(--rotation) - 2deg)) scale(.975); } 68% { opacity: 1; transform: translate3d(0,4px,0) rotate(calc(var(--rotation) + .45deg)) scale(1.004); } 84% { transform: translate3d(0,-1px,0) rotate(calc(var(--rotation) - .18deg)); } 100% { transform: translate3d(var(--move-x),var(--move-y),0) rotate(var(--rotation)); } }
@keyframes paperTableSlide { 0% { opacity: 0; transform: translate3d(68px,15px,-25px) rotate(calc(var(--rotation) + 2deg)) scale(.985); filter: drop-shadow(0 .6rem .55rem rgba(0,0,0,.25)); } 72% { opacity: 1; transform: translate3d(-3px,0,0) rotate(calc(var(--rotation) - .25deg)); } 100% { transform: translate3d(var(--move-x),var(--move-y),0) rotate(var(--rotation)); } }
@keyframes paperOpenFold { 0% { opacity: 0; transform: perspective(800px) rotateY(-28deg) rotate(calc(var(--rotation) - 1.4deg)) scaleX(.9); filter: brightness(.72) drop-shadow(0 .8rem .8rem rgba(0,0,0,.32)); } 65% { opacity: 1; transform: perspective(800px) rotateY(2.5deg) rotate(calc(var(--rotation) + .2deg)) scaleX(1.006); } 100% { transform: translate3d(var(--move-x),var(--move-y),0) rotate(var(--rotation)); } }
@keyframes paperFromDepth { 0% { opacity: 0; transform: translate3d(0,13px,-130px) rotate(calc(var(--rotation) - 1deg)) scale(.92); filter: blur(2px) drop-shadow(0 .5rem .5rem rgba(0,0,0,.2)); } 72% { opacity: 1; transform: translate3d(0,-1px,5px) rotate(calc(var(--rotation) + .18deg)) scale(1.006); filter: blur(0) drop-shadow(0 1.4rem 1.15rem rgba(0,0,0,.35)); } 100% { transform: translate3d(var(--move-x),var(--move-y),0) rotate(var(--rotation)); } }
@keyframes paperCornerRelease { 0% { opacity: 0; transform: translate3d(16px,-22px,0) rotate(calc(var(--rotation) + 3deg)) skew(-1deg,1deg) scale(.965); } 58% { opacity: 1; transform: translate3d(-2px,2px,0) rotate(calc(var(--rotation) - .35deg)) scale(1.004); } 100% { transform: translate3d(var(--move-x),var(--move-y),0) rotate(var(--rotation)); } }
@keyframes favoritePaperIn { 0% { opacity: 0; transform: translate3d(0,10px,-90px) rotate(-.4deg) scale(.94); filter: blur(2px) drop-shadow(0 .5rem .5rem rgba(0,0,0,.2)); } 100% { opacity: 1; transform: rotate(var(--rotation)); } }
@keyframes paperLeaveSide { to { opacity: 0; transform: translate3d(-72px,7px,-25px) rotate(calc(var(--rotation) - 2deg)) scale(.975); filter: drop-shadow(0 .5rem .5rem rgba(0,0,0,.16)); } }
@keyframes paperLeaveDown { to { opacity: 0; transform: translate3d(7px,64px,-15px) rotate(calc(var(--rotation) + 1.6deg)) scale(.98); filter: drop-shadow(0 .35rem .3rem rgba(0,0,0,.16)); } }
@keyframes paperLeaveBack { to { opacity: 0; transform: translate3d(0,-5px,-150px) rotate(calc(var(--rotation) - .4deg)) scale(.91); filter: blur(2px) drop-shadow(0 .4rem .4rem rgba(0,0,0,.12)); } }
@keyframes paperLeaveLift { to { opacity: 0; transform: translate3d(58px,-34px,0) rotate(calc(var(--rotation) + 2.3deg)) scale(.985); filter: drop-shadow(0 2.1rem 1.5rem rgba(0,0,0,.18)); } }
@keyframes favoritePaperOut { to { opacity: 0; transform: translate3d(0,18px,-120px) rotate(calc(var(--rotation) - .3deg)) scale(.93); filter: blur(2px) drop-shadow(0 .4rem .4rem rgba(0,0,0,.12)); } }
@keyframes handwritingReveal { to { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transform: translateY(0); } }
@keyframes countRoll { 0% { opacity: 1; transform: translateY(0); } 42% { opacity: 0; transform: translateY(-7px); } 43% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes audioBar { from { height: 3px; opacity: .45; } to { height: 11px; opacity: .95; } }
@keyframes letterPreludeIn { from { opacity: 0; filter: blur(3px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes envelopeArrives { from { opacity: 0; transform: translate3d(0,22px,-110px) rotateX(7deg) scale(.92); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes flapOpen { 0% { transform: rotateX(0); } 100% { transform: rotateX(178deg); z-index: 1; filter: brightness(.88); } }
@keyframes letterLeavesEnvelope { 0% { transform: translateY(0) scale(.98); } 68% { transform: translateY(-4.5rem) scale(1.015); } 100% { transform: translateY(-5.2rem) translateZ(35px) scale(1.08); box-shadow: 0 1rem 1.5rem rgba(0,0,0,.22); } }
@keyframes envelopeBodyOpen { 0%,45% { transform: rotateX(4deg) rotateZ(-.45deg); } 100% { transform: translateY(19px) rotateX(8deg) rotateZ(.25deg) scale(.96); filter: drop-shadow(0 .8rem .65rem rgba(0,0,0,.44)); } }
@keyframes cameraPush { 0%,45% { transform: scale(1); } 100% { transform: translateY(-1.2rem) scale(1.075); } }
@keyframes letterCinematicIn { from { opacity: 0; transform: translate3d(0,54px,-150px) rotateX(-5deg) scale(.88); filter: blur(2px) brightness(.72); } 70% { opacity: 1; transform: translate3d(0,-2px,6px) rotateX(.4deg) scale(1.005); filter: none; } to { transform: none; } }
@keyframes letterIntoDark { 0% { opacity: 1; transform: none; filter: brightness(1); } 45% { opacity: .72; transform: translate3d(0,5px,-35px) scale(.975); filter: brightness(.78); } 100% { opacity: 0; transform: translate3d(0,62px,-120px) scale(.91); filter: brightness(.4) blur(2px); } }
@keyframes titleGlint { 0% { opacity: 0; transform: translateX(-38%); } 38% { opacity: 1; } 100% { opacity: 0; transform: translateX(38%); } }

@media (max-width: 25rem) {
  .paper { width: min(90vw, 31rem); padding-inline: 1.55rem; }
  .paper__text { font-size: clamp(1.65rem, 7.5vw, 2.5rem); }
  .note-navigation { width: 90vw; }
  .favorite-moment .paper--favorite { width: 82vw; }
  .letter-paper { width: 95vw; padding-inline: 1.35rem; }
}

@media (min-width: 48rem) and (pointer: fine) {
  .notes-stage { perspective: 1100px; }
  .paper:hover:not(.is-pressed) { filter: drop-shadow(0 1.65rem 1.35rem rgba(0,0,0,.39)) drop-shadow(0 .25rem .25rem rgba(0,0,0,.29)); }
}

@media (prefers-reduced-motion: reduce) {
  .particle-canvas { opacity: .42; }
  .intro-date::before, .intro-date::after { animation: none; }
  .paper__text--writing .handwritten-word { opacity: 1; filter: none; clip-path: none; transform: none; animation: none; }
  .paper { transform: rotate(var(--rotation)); }
  .butterfly-anchor { position: relative; width: 2.7rem; height: 2rem; opacity: .7; background: linear-gradient(var(--gold), var(--gold)) center .36rem / 1px 1.15rem no-repeat; }
  .butterfly-anchor::before,
  .butterfly-anchor::after { content: ""; position: absolute; top: .35rem; width: 1.1rem; height: .8rem; border: 1px solid var(--gold); border-radius: 80% 25% 70% 30%; }
  .butterfly-anchor::before { left: .22rem; transform: rotate(-24deg); }
  .butterfly-anchor::after { right: .22rem; transform: rotate(24deg); }
}

/* Superficies PNG: conservan texto HTML, animaciones y perspectiva. */
.notes-stage { position: relative; isolation: isolate; }
.notes-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(96vw, 38rem);
  aspect-ratio: 1.45;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(214,174,82,.072), rgba(214,174,82,.018) 42%, transparent 72%);
  opacity: .62;
  transform: translate(-50%,-50%) scale(.94);
  transition: opacity .65s ease, transform .85s var(--ease);
  pointer-events: none;
}
.scene--notes.is-active .notes-stage::before { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.scene--notes.is-dimming .notes-stage::before,
.favorite-closing .notes-stage::before { opacity: .12; transform: translate(-50%,-50%) scale(.9); }

.paper {
  --safe-top: 20%;
  --safe-right: 13.5%;
  --safe-bottom: 18%;
  --safe-left: 13.5%;
  width: min(89vw, 31rem);
  height: auto;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1448 / 1086;
  border: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  filter:
    drop-shadow(0 1.15rem 1.45rem rgba(0,0,0,.34))
    drop-shadow(0 .2rem .32rem rgba(214,174,82,.055));
}
.paper::before,
.paper::after,
.paper__crease { display: none; }
.paper__asset {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.paper__text {
  position: absolute;
  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  color: rgba(36,32,27,.96);
  font-size: clamp(1.44rem, 6vw, 2.35rem);
  line-height: 1.14;
  overflow-wrap: anywhere;
  text-shadow: 0 .25px .25px rgba(74,52,31,.18);
}
.paper__text-inner { display: block; width: 100%; }
.paper[data-paper-asset="01"] { --safe-top: 21%; --safe-right: 13%; --safe-bottom: 18%; --safe-left: 14%; }
.paper[data-paper-asset="02"] { --safe-top: 20%; --safe-right: 14%; --safe-bottom: 18%; --safe-left: 14%; }
.paper[data-paper-asset="03"] { --safe-top: 18%; --safe-right: 13%; --safe-bottom: 17%; --safe-left: 14%; }
.paper[data-paper-asset="04"] { --safe-top: 20%; --safe-right: 13%; --safe-bottom: 18%; --safe-left: 13%; }
.paper[data-paper-asset="favorite"] { --safe-top: 19%; --safe-right: 14%; --safe-bottom: 18%; --safe-left: 14%; aspect-ratio: 1478 / 1064; }

.paper--1 { width: min(89vw, 31rem); }
.paper--2 { width: min(86vw, 29.8rem); }
.paper--3 { width: min(90vw, 31.5rem); min-height: 0; }
.paper--4 { width: min(85vw, 29.5rem); }
.paper--5 { width: min(88vw, 30.5rem); }
.paper--6 { width: min(87vw, 30rem); min-height: 0; }
.paper--7 { width: min(84vw, 29rem); }
.paper--8 { width: min(89vw, 30.8rem); }
.paper--favorite,
.favorite-moment .paper--favorite {
  width: min(78vw, 27rem);
  min-height: 0;
  padding: 0;
  background: none;
  clip-path: none;
  filter:
    drop-shadow(0 1.45rem 1.8rem rgba(0,0,0,.43))
    drop-shadow(0 0 .65rem rgba(214,174,82,.07));
}
.paper--favorite .paper__text {
  font-size: clamp(1.95rem, 8vw, 3.25rem);
  line-height: 1.03;
  color: rgba(36,32,27,.97);
}
.paper:focus-visible,
.paper:hover:not(.is-pressed) {
  filter:
    drop-shadow(0 1.35rem 1.65rem rgba(0,0,0,.38))
    drop-shadow(0 0 .35rem rgba(214,174,82,.12));
}
.paper.is-pressed {
  filter:
    drop-shadow(0 .72rem .85rem rgba(0,0,0,.3))
    drop-shadow(0 .12rem .2rem rgba(214,174,82,.05));
}

.scene--letter { position: absolute; isolation: isolate; }
.scene--letter::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 49%;
  width: min(110vw, 46rem);
  height: min(88vh, 46rem);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(214,174,82,.065), rgba(214,174,82,.014) 48%, transparent 74%);
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.letter-paper {
  width: min(92vw, 36rem, 65svh);
  height: auto;
  max-height: none;
  padding: 0;
  aspect-ratio: 1086 / 1448;
  overflow: visible;
  border: 0;
  color: #262019;
  background: none;
  box-shadow: none;
  clip-path: none;
}
.letter-paper:focus,
.letter-paper:focus-visible { outline: none; }
.letter-paper::before,
.letter-paper::after { display: none; }
.letter-paper__asset {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 1.45rem 2rem rgba(0,0,0,.43))
    drop-shadow(0 .2rem .32rem rgba(214,174,82,.05));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.letter-paper__content {
  position: absolute;
  inset: 7.5% 10.5% 8%;
  z-index: 1;
  padding: .45rem .35rem 1rem;
  overflow: visible;
  scrollbar-width: none;
}
.letter-paper__content::-webkit-scrollbar { display: none; }
.letter-paper header { margin-bottom: 1.1rem; }
.letter-paper h2 { font-size: clamp(1.8rem, 7vw, 3rem); }
.letter-body { font-size: clamp(.91rem, 3.55vw, 1.04rem); line-height: 1.58; }
.letter-body p { margin-bottom: 1em; }
.letter-signature { margin: 1.2rem 0 .55rem; font-size: clamp(1.35rem, 5.2vw, 1.65rem); }
.letter-continue { min-height: 2.75rem; margin-top: .55rem; }

@media (max-width: 25rem) {
  .paper,
  .paper--1,
  .paper--2,
  .paper--3,
  .paper--4,
  .paper--5,
  .paper--6,
  .paper--7,
  .paper--8 { padding: 0; }
  .paper__text { font-size: clamp(1.38rem, 6.15vw, 2.15rem); }
  .letter-paper { width: min(94vw, 65svh); padding: 0; }
  .letter-paper__content { inset-inline: 10%; padding-inline: .28rem; }
  .letter-body { font-size: .9rem; line-height: 1.56; }
}

@media (max-height: 43rem) {
  .paper { min-height: 0; padding: 0; }
  .letter-paper { width: min(88vw, 64svh); }
}

/* Carta móvil: lectura natural, tinta nítida y desplazamiento de página. */
html.letter-scroll { overflow-x: hidden; overflow-y: auto; }
body.letter-opened { min-height: 100%; overflow: visible; }
body.letter-opened .tap-glow { display: none; }
.letter-opened .experience { height: auto; min-height: 100svh; overflow: visible; }
.letter-opened .scene--letter {
  position: relative;
  inset: auto;
  display: block;
  min-height: 100svh;
  padding: max(1rem, env(safe-area-inset-top)) .25rem max(2.5rem, env(safe-area-inset-bottom));
  overflow: visible;
}
.letter-opened .scene--letter::before { position: fixed; width: 100vw; }
.letter-paper {
  --letter-body-size: 16px;
  --letter-line-height: 1.62;
  --letter-paragraph-gap: 1rem;
  --letter-title-size: 33px;
  --letter-signature-size: 20px;
  width: min(96vw, 39rem);
  height: auto;
  max-height: none;
  margin: 0 auto;
  aspect-ratio: auto;
  overflow: visible;
  color: #241d17;
}
.letter-paper__asset { display: none; }
.letter-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border: 88px solid transparent;
  border-width: 88px 44px;
  border-image-source: url("../assets/papers/paper_carta.png");
  border-image-slice: 220 160 220 160 fill;
  border-image-width: 88px 44px;
  border-image-repeat: stretch;
  filter:
    brightness(1.07)
    saturate(1.04)
    drop-shadow(0 1.5rem 2.1rem rgba(0,0,0,.46))
    drop-shadow(0 .18rem .3rem rgba(214,174,82,.045));
  pointer-events: none;
}
.letter-paper__content {
  position: relative;
  inset: auto;
  display: block;
  padding: clamp(3.75rem, 12vw, 5.5rem) clamp(1.8rem, 8vw, 3.4rem) clamp(4.5rem, 13vw, 6.25rem);
  overflow: visible;
  scrollbar-width: none;
}
.letter-paper__content::-webkit-scrollbar { display: none; }
.letter-paper header { margin-bottom: 1.4rem; }
.letter-kicker { margin-bottom: .35rem; color: #86601b; font-size: .66rem; letter-spacing: .23em; }
.letter-paper h2 { color: #1f1813; font-size: var(--letter-title-size); line-height: 1; }
.letter-body { color: #241d17; font-size: var(--letter-body-size); line-height: var(--letter-line-height); }
.letter-body p { margin: 0 0 var(--letter-paragraph-gap); }
.letter-body p:last-child { margin-bottom: 0; }
.letter-paper__footer {
  display: grid;
  justify-items: end;
  gap: 1.15rem;
  margin-top: 1.45rem;
}
.letter-signature { max-width: 23rem; margin: 0; color: #4a3423; font-size: var(--letter-signature-size); line-height: 1.15; text-align: right; white-space: normal; }
.letter-continue {
  min-width: 9rem;
  min-height: 3rem;
  margin: 0;
  padding: .72rem 1rem;
  border: 1px solid rgba(111,78,33,.55);
  border-radius: 2px;
  color: #2b2118;
  background: linear-gradient(110deg, rgba(214,174,82,.25), rgba(214,174,82,.12));
  box-shadow: 0 .35rem .8rem rgba(74,49,22,.14);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .075em;
  white-space: nowrap;
}
.letter-continue span { color: #7c5416; }
.letter-continue:hover,
.letter-continue:focus-visible { border-color: rgba(111,78,33,.68); background-color: rgba(214,174,82,.2); }
.letter-continue:active { transform: translateY(1px); box-shadow: 0 .18rem .4rem rgba(74,49,22,.08); }

/* Nuevo cierre: las frases previas son transitorias y la composición final permanece. */
.scene--ending {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 51%, rgba(214,174,82,.018), transparent 43%),
    linear-gradient(rgba(0,0,0,.04), rgba(0,0,0,.12));
}
.ending-copy {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 40rem;
}
.ending-transition,
.ending-finale {
  position: absolute;
  inset: 0;
}
.ending-transition { display: grid; place-items: center; pointer-events: none; }
.ending-transition__line {
  position: absolute;
  width: min(82vw, 28rem);
  margin: 0;
  color: #cbc6bd;
  font-size: clamp(.86rem, 3.7vw, 1rem);
  line-height: 1.65;
  text-align: center;
  opacity: 0;
}
.ending-finale {
  inset: auto;
  left: 50%;
  top: 50%;
  width: min(88vw, 22rem);
  height: min(56vh, 25rem);
  min-height: 21.5rem;
  transform: translate(-50%,-47%);
  isolation: isolate;
}
.ending-finale::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -20% -18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(214,174,82,.075), rgba(214,174,82,.018) 40%, transparent 70%);
  opacity: 0;
  transform: scale(.84);
}
.ending-finale::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8%;
  background:
    radial-gradient(circle at 12% 34%, rgba(241,216,137,.2) 0 1px, transparent 4px),
    radial-gradient(circle at 88% 67%, rgba(214,174,82,.16) 0 1px, transparent 5px);
  filter: blur(2px);
  opacity: 0;
}
.ending-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(214,174,82,.42);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
}
.ending-frame path { stroke-dasharray: 92; stroke-dashoffset: 92; }
.ending-date {
  position: absolute;
  top: 8.5%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .62rem;
  color: rgba(231,198,106,.78);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .42em;
  opacity: 0;
  transform: translate(-50%,6px);
  white-space: nowrap;
}
.ending-date i { display: block; width: 2.8rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(214,174,82,.62), transparent); transform: scaleX(0); }
.ending-heart {
  position: absolute;
  inset: 24% 6% 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.ending-heart h2 {
  position: relative;
  max-width: 17.5rem;
  margin: 0;
  color: #f4efe6;
  font-size: clamp(2.45rem, 10.7vw, 4rem);
  line-height: .9;
  opacity: 0;
  filter: blur(3px);
  clip-path: inset(0 0 100% 0);
  transform: translateY(8px);
}
.ending-heart h2::after {
  content: "";
  position: absolute;
  inset: -.3rem -1rem;
  background: linear-gradient(105deg, transparent 27%, rgba(241,216,137,.18) 49%, transparent 70%);
  opacity: 0;
  transform: translateX(-42%);
  pointer-events: none;
}
.ending-heart #endingFavorite {
  margin: 1.05rem 0 0;
  color: var(--gold-light);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 5.2vw, 1.72rem);
  line-height: 1.1;
  opacity: 0;
  transform: translateY(6px);
}
.ending-heart .butterfly-anchor { flex: 0 0 auto; width: 3.4rem; height: 2.65rem; margin: .72rem auto .35rem; }
.ending-reminder {
  margin: .4rem 0 0 !important;
  color: #aaa69d !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: .72rem !important;
  line-height: 1.5 !important;
  letter-spacing: .015em;
  opacity: 0;
  transform: translateY(5px);
}
.ending-moment::after {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(214,174,82,.04), transparent 32%),
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.42) 100%);
}

.scene--ending.is-sequencing .ending-transition__line--1 { animation: endingIntroPhrase 1.65s .45s var(--ease) both; }
.scene--ending.is-sequencing .ending-transition__line--2 { animation: endingIntroPhrase 1.75s 2.15s var(--ease) both; }
.scene--ending.is-sequencing .ending-finale::before { animation: finalHaloIn 1.4s 3.75s ease-out forwards; }
.scene--ending.is-sequencing .ending-finale::after { animation: finalDustIn 1.2s 4.05s ease-out forwards; }
.scene--ending.is-sequencing .ending-date { animation: finalDateIn .85s 4.32s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-date i { animation: finalLineDraw .8s 4.62s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-frame path { animation: finalFrameDraw 1.45s 4.72s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-heart h2 { animation: finalTitleIn 1.15s 4.92s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-heart h2::after { animation: finalTitleGlint 1.45s 5.4s ease-out both; }
.scene--ending.is-sequencing .ending-heart #endingFavorite { animation: finalCopyIn .85s 6.02s var(--ease) forwards; }
.scene--ending.is-sequencing .ending-reminder { animation: finalCopyIn .85s 9.95s var(--ease) forwards; }

@keyframes endingIntroPhrase {
  0% { opacity: 0; filter: blur(2px); transform: translateY(7px); }
  20%,58% { opacity: 1; filter: blur(0); transform: translateY(0); }
  100% { opacity: 0; filter: blur(1.5px); transform: translateY(-10px); }
}
@keyframes finalHaloIn { to { opacity: 1; transform: scale(1); } }
@keyframes finalDustIn { to { opacity: .72; } }
@keyframes finalDateIn { to { opacity: 1; transform: translate(-50%,0); } }
@keyframes finalLineDraw { to { transform: scaleX(1); } }
@keyframes finalFrameDraw { to { stroke-dashoffset: 0; } }
@keyframes finalTitleIn { to { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transform: translateY(0); } }
@keyframes finalTitleGlint { 0% { opacity: 0; transform: translateX(-42%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(42%); } }
@keyframes finalCopyIn { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 25rem) {
  .letter-paper { width: min(96vw, 39rem); height: auto; }
  .letter-paper__content { inset: auto; padding-inline: clamp(1.65rem, 7.5vw, 2rem); }
  .ending-finale { width: min(90vw, 22rem); }
  .ending-heart { inset-inline: 5%; }
}

@media (max-height: 43rem) {
  .letter-paper { width: min(96vw, 39rem); height: auto; }
  .ending-finale { height: min(66vh, 23rem); min-height: 18.5rem; }
  .ending-heart { top: 21%; }
}

@media (prefers-reduced-motion: reduce) {
  .scene--ending.is-sequencing .ending-transition { display: none; }
  .scene--ending.is-sequencing .ending-finale::before { opacity: 1; transform: scale(1); animation: none; }
  .scene--ending.is-sequencing .ending-finale::after { opacity: .72; animation: none; }
  .scene--ending.is-sequencing .ending-date,
  .scene--ending.is-sequencing .ending-heart h2,
  .scene--ending.is-sequencing .ending-heart #endingFavorite,
  .scene--ending.is-sequencing .ending-reminder { opacity: 1; filter: none; clip-path: none; transform: none; animation: none; }
  .scene--ending.is-sequencing .ending-date { transform: translateX(-50%); }
  .scene--ending.is-sequencing .ending-date i { transform: scaleX(1); animation: none; }
  .scene--ending.is-sequencing .ending-frame path { stroke-dashoffset: 0; animation: none; }
  .scene--ending.is-sequencing .ending-heart h2::after { display: none; }
}