@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Explora&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  color-scheme: dark;
  --forest: #062622;
  --cream: #fff4dc;
  --gold: #eecb87;
  --red: #a62738;
  --ink: #2c342c;
  --sans: "DM Sans", system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --hand: "Explora", "Bradley Hand", "Segoe Print", cursive;
  font: 16px/1.5 var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  isolation: isolate;
  margin: 0;
  background: var(--forest);
  color: var(--cream);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #f1bb52; outline-offset: 5px; }

.scene { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.landscape {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, #38664e20, transparent 60%),
    linear-gradient(0deg, #001713a6, transparent 28%),
    url("assets/noche.jpg") center bottom / cover no-repeat;
}
.moon {
  position: absolute;
  width: clamp(52px, 7.3vw, 102px);
  aspect-ratio: 1;
  right: 14%;
  top: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at 39% 38%, #fff4ce, #efd59d 73%, #e7bd77);
  box-shadow: 0 0 65px #ffe6a44d;
  opacity: .85;
}
.flight { position: absolute; left: 65%; top: 23%; width: clamp(220px, 29vw, 445px); }
.flight img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 9px 16px #00110e99);
  animation: drift 5s ease-in-out infinite alternate;
}
.flight.takeoff { animation: takeoff 2.6s cubic-bezier(.55,.12,.6,.97) both; }
@keyframes drift {
  from { transform: translateY(1px) rotate(-9deg); }
  to { transform: translateY(-13px) rotate(-5deg); }
}
@keyframes takeoff {
  0% { transform: translate(0,0); }
  26% { transform: translate(60vw,-24vh); }
  27% { transform: translate(-160vw,15vh); }
  76% { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
.snow { position: absolute; inset: 0; transition: opacity .3s; }
.snow.paused { opacity: 0; }
.flake {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff8e3;
  animation: fall var(--duration) var(--delay) linear infinite;
}
.snow.paused .flake { animation-play-state: paused; }
@keyframes fall {
  0% { transform: translate(0,0); opacity: 0; }
  12%, 78% { opacity: var(--opacity); }
  100% { transform: translate(var(--wind),105vh); opacity: 0; }
}

.topbar {
  min-height: 74px;
  margin-inline: clamp(18px, 4vw, 64px);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid #f5dca32b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); font-size: .88rem; }
.brand-mark {
  width: 33px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 1.1rem;
  border: 1px solid #dcb97b66;
  border-radius: 50%;
}
.snow-toggle, .back-button {
  border: 1px solid #f5dca34d;
  border-radius: 99px;
  min-height: 44px;
  padding: 7px 14px;
  background: #0a2c26d9;
  color: var(--cream);
  font-size: .82rem;
}
.snow-toggle { display: flex; align-items: center; gap: 7px; }
.snow-toggle [aria-hidden] { color: var(--gold); font-size: 1rem; }
.snow-toggle[aria-pressed="false"] [aria-hidden] { opacity: .5; }

main { flex: 1; display: grid; place-items: center; width: 100%; }
.cover { width: 100%; padding: clamp(34px, 6vh, 72px) 18px 22px; text-align: center; }
.eyebrow { color: var(--gold); margin: 0 0 16px; font-size: .7rem; font-weight: 700; letter-spacing: .22em; }
.eyebrow span { margin-inline: 5px; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; margin: 0; }
h1 { font-size: clamp(3.5rem, 7vw, 6.6rem); line-height: .98; text-shadow: 0 3px 32px #001814a0; }
h1 em { color: var(--gold); }
.intro { margin: 22px auto 0; font-size: clamp(.94rem, 1.6vw, 1.06rem); color: #ece4ce; line-height: 1.65; }
.envelope-stage {
  position: relative;
  width: min(390px, 100%);
  height: clamp(184px, 24vh, 246px);
  margin: 8px auto 4px;
  display: grid;
  place-items: center;
  perspective: 850px;
}
.envelope {
  position: relative;
  width: min(300px, 83%);
  aspect-ratio: 1.64;
  border: 0;
  padding: 0;
  color: #a32838;
  background: none;
  transform: rotate(-7deg);
  transition: transform .35s ease;
  isolation: isolate;
  border-radius: 6px;
}
.envelope:hover, .envelope:focus-visible { transform: rotate(-3deg) translateY(-5px); }
.envelope-back, .envelope-folds, .envelope-flap { position: absolute; inset: 0; border-radius: inherit; }
.envelope-back { background: #b77544; box-shadow: 0 18px 35px #001712a3, 0 0 56px #f3bc6633; }
.envelope-paper {
  position: absolute;
  inset: 7% 7% 5%;
  padding-top: 8px;
  border: 1px solid #e7ca93;
  background: repeating-linear-gradient(0deg, #fff3d8 0 17px, #eadabc 18px 19px);
  border-radius: 3px;
  font: italic 1.1rem var(--serif);
  transition: transform .52s .22s ease;
}
.envelope-folds {
  background:
    linear-gradient(32deg, transparent 49.2%, #b98f6190 50%, transparent 50.5%) left bottom / 51% 100% no-repeat,
    linear-gradient(-32deg, transparent 49.2%, #b98f6190 50%, transparent 50.5%) right bottom / 51% 100% no-repeat,
    linear-gradient(165deg, #fff0ca, #efd29a 86%);
}
.envelope-flap {
  background: linear-gradient(150deg, #fff0ca 4%, #f7ddb0 72%);
  clip-path: polygon(0 0, 100% 0, 54% 63%, 50% 66%, 46% 63%);
  transform-origin: top;
  transition: transform .55s ease;
}
.seal {
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 60px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 48% 53% 48% 46%;
  border: 2px solid #c14650;
  color: #ffcf9b;
  font-size: 1.3rem;
  background: radial-gradient(at 33% 20%, #b93949, #8d2132 70%);
  box-shadow: 0 3px 4px #6b32256b, inset 0 0 0 3px #7e1d2c88;
  transition: opacity .23s, transform .3s;
}
.seal span { border-radius: 50%; border: 1px solid #f0857c7d; width: 73%; aspect-ratio: 1; display: grid; place-items: center; }
.sparkle { position: absolute; color: var(--gold); text-shadow: 0 0 18px #f9d697a0; }
.sparkle-one { left: 2%; top: 33%; font-size: 1.5rem; }
.sparkle-two { right: 4%; top: 23%; font-size: .95rem; }
.sparkle-three { right: 0; bottom: 19%; font-size: 1.4rem; }
.opening .envelope { transform: rotate(0); }
.opening .envelope-flap { transform: rotateX(177deg); }
.opening .envelope-paper { transform: translateY(-56%); }
.opening .seal { opacity: 0; transform: translate(-50%,-50%) scale(1.25); }
.primary {
  border: 1px solid #d9706b;
  background: linear-gradient(145deg, #b53344, var(--red));
  color: #fff5e3;
  border-radius: 12px;
  padding: 12px 18px;
  min-height: 48px;
  font-weight: 700;
  transition: background .2s, transform .2s;
}
.primary:hover { background: #bb3749; }
.primary:active { transform: scale(.97); }
.open-button { display: inline-flex; align-items: center; gap: 12px; padding: 13px 21px; box-shadow: 0 9px 29px #12080853; }
.open-button span:first-child { color: #ffdbac; }
.open-button span:last-child { margin-left: 6px; }

.letter-view { width: min(806px, 100%); padding: 26px 16px 24px; animation: reveal .55s both; }
@keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.back-button { margin-bottom: 14px; }
.letter {
  color-scheme: light;
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 6vw, 57px) clamp(19px, 6.7vw, 72px);
  color: #263a4a;
  filter: drop-shadow(0 16px 22px #0016129c);
}
.letter::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(clamp(19px, 6.7vw, 72px) - 12px), #c36a6660 0 calc(clamp(19px, 6.7vw, 72px) - 11px), transparent 0),
    repeating-linear-gradient(0deg, transparent 0 30px, #839aa33b 30px 31px) top 33px left / 100% 100% no-repeat,
    repeating-linear-gradient(115deg, #8b623508 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 41% 26%, #fff5dc, #f0dfb7 94%);
  clip-path: polygon(0 0, 5% 2px, 8% 0, 16% 3px, 22% 1px, 28% 3px, 34% 0, 44% 2px, 53% 1px, 60% 3px, 67% 1px, 74% 4px, 83% 0, 90% 2px, 97% 0, 100% 2px, 100% 100%, 97% calc(100% - 4px), 94% calc(100% - 1px), 90% calc(100% - 6px), 86% calc(100% - 2px), 81% calc(100% - 5px), 76% 100%, 72% calc(100% - 4px), 67% calc(100% - 1px), 63% calc(100% - 5px), 59% calc(100% - 2px), 54% calc(100% - 6px), 49% 100%, 44% calc(100% - 4px), 38% calc(100% - 1px), 34% calc(100% - 6px), 29% calc(100% - 2px), 25% 100%, 20% calc(100% - 4px), 15% calc(100% - 1px), 9% calc(100% - 5px), 4% 100%, 0 calc(100% - 4px));
}
.letter-head { position: relative; }
.letter .eyebrow {
  color: #923b43;
  font: 400 clamp(1.5rem, 4.8vw, 1.85rem)/1 var(--hand);
  letter-spacing: .04em;
  text-transform: lowercase;
  margin: 0 0 5px;
  -webkit-text-stroke: .28px;
}
h2 {
  width: fit-content;
  max-width: 100%;
  font: 400 clamp(4.35rem, 12vw, 7rem)/.9 var(--hand);
  letter-spacing: -.02em;
  transform: rotate(-3deg);
  transform-origin: left center;
  -webkit-text-stroke: .65px;
}
h2 em {
  color: #a12f3d;
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: .025em;
  text-underline-offset: .1em;
}
.letter-head > p:not(.eyebrow) {
  max-width: 32ch;
  margin: 15px 0 24px;
  font: 400 clamp(1.85rem, 5.2vw, 2.35rem)/.95 var(--hand);
  -webkit-text-stroke: .38px;
}
.postage {
  display: grid;
  place-items: center;
  position: absolute;
  top: -10px;
  right: -6px;
  color: #963343;
  padding: 6px;
  border: 2px dotted #a24c54;
  transform: rotate(10deg);
  font-size: .53rem;
  letter-spacing: .12em;
  font-weight: 700;
}
.postage span { line-height: 1; font-size: 1.8rem; }
label { font-weight: 700; }
.add-row { display: flex; gap: 8px; margin-top: 8px; }
input, textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 16px;
  background: #fffaf0;
  border: 1px solid #aa8f69;
  border-radius: 9px;
}
.add-button { white-space: nowrap; }
.gift-link { margin-top: 5px; color: #675943; font-size: .85rem; }
.gift-link summary { cursor: pointer; width: fit-content; padding-block: 10px; }
.gift-link label { display: block; margin: 0 0 4px; }
.empty { color: #675943; font-style: italic; margin: 17px 0; }
.wish-list { list-style: none; padding: 0; margin: 6px 0 26px; }
.wish-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  border-bottom: 1px dashed #a893728f;
}
.wish-list li::before { content: "✧"; color: #9f353f; align-self: flex-start; padding-top: 5px; }
.wish-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  overflow-wrap: anywhere;
}
.wish-text > div:first-child { flex: 1 1 170px; min-width: 0; }
.wish-name {
  display: block;
  font: 400 clamp(1.9rem, 5.6vw, 2.65rem)/.95 var(--hand);
  -webkit-text-stroke: .5px;
}
.wish-note { display: block; color: #7c353b; font: 400 1.55rem/1.02 var(--hand); -webkit-text-stroke: .25px; margin-top: 5px; }
.clippings { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 100%; }
.clippings a { color: #842939; font-size: .84rem; text-underline-offset: 3px; }
.clippings a:not(.clipping) { display: inline-flex; align-items: center; min-height: 44px; }
.clipping {
  position: relative;
  display: block;
  width: 112px;
  max-width: 100%;
  padding: 6px 7px 9px;
  background: #fffaf0;
  text-decoration: none;
  transform: rotate(-5deg);
  box-shadow: 1px 3px 7px #624c3857;
  clip-path: polygon(0 2%, 16% 0, 35% 1%, 58% 0, 83% 1%, 100% 0, 99% 21%, 100% 40%, 98% 56%, 100% 77%, 99% 98%, 91% 97%, 83% 100%, 74% 98%, 66% 100%, 57% 98%, 49% 100%, 42% 98%, 35% 100%, 26% 98%, 16% 100%, 9% 98%, 1% 100%, 0 78%, 1% 61%, 0 39%);
  transition: transform .2s;
}
.wish-list li:nth-child(even) .clipping, .clipping:nth-child(2) { transform: rotate(4deg); }
.clipping:hover, .clipping:focus-visible { transform: rotate(0); outline: 2px solid #9f353f; outline-offset: -3px; }
.clipping::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 54%;
  height: 15px;
  left: 24%;
  top: 1px;
  background: repeating-linear-gradient(135deg, #d5996780 0 3px, #e7ba917d 3px 6px);
  transform: rotate(8deg);
  pointer-events: none;
}
.clipping img {
  display: block;
  width: 100%;
  aspect-ratio: 1.12;
  object-fit: contain;
  background: white;
  mix-blend-mode: multiply;
  filter: saturate(.72) contrast(.94);
}
.clipping > span { display: block; padding: 3px 1px 0; font: 600 .64rem/1.2 var(--sans); }
.wish-list button {
  color: #92273a;
  background: transparent;
  border: 0;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  font-size: 1.2rem;
}
.wish-list button:hover { background: #ad384318; }
.letter-end { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.letter-end > span { font: 400 2.35rem/1 var(--hand); -webkit-text-stroke: .4px; transform: rotate(-4deg); }
.letter-end b { color: #a1293a; }
.share-button {
  border: 1px solid #87775a;
  border-radius: 9px;
  padding: 8px 12px;
  min-height: 44px;
  font-weight: 700;
  background: #fff5df;
  color: #2e4937;
}
.share-button:disabled { opacity: .55; }
.list-note, .status { font-size: .78rem; color: #675943; margin: 9px 0 0; }
.status:empty { display: none; }
.share-fallback { margin-top: 12px; }
.share-fallback textarea { display: block; margin-top: 6px; resize: vertical; }
footer {
  color: #ece0c2;
  text-shadow: 0 2px 8px #00100a;
  text-align: center;
  padding: 14px 16px calc(19px + env(safe-area-inset-bottom, 0px));
  font-size: .76rem;
  letter-spacing: .02em;
}
footer span { color: #f3928d; margin-inline: 2px; }

@media (max-width: 760px) {
  .landscape { background-position: center, center, 71% bottom; }
  .moon { right: 8%; top: 15%; }
  .flight { left: auto; right: -6%; top: 20%; width: clamp(166px, 33vw, 225px); opacity: .9; }
}
@media (max-width: 520px) {
  .topbar { min-height: 64px; }
  .cover { padding-top: 105px; }
  .moon { top: 87px; right: 9%; }
  .flight { top: 119px; right: 8%; }
  .intro { margin-top: 16px; }
  .envelope-stage { margin-top: 5px; }
  .postage { display: none; }
  .add-button { padding-inline: 11px; }
  .wish-list li { gap: 5px; }
  .wish-list button { align-self: flex-start; }
  .clippings { gap: 8px; }
  .clipping { width: 98px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .flight.takeoff { animation: none; }
  .flake { display: none; }
}