:root {
  --paper: #fff6e6;
  --paper-edge: #f1dfbf;
  --ink: #4a2a1a;
  --wine: #7b0e2b;
  --scarf: #c8202f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --maple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4L57 22L68 16L64 38L80 28L84 36L96 34L88 50L94 56L72 68L76 76L54 72L52 96L48 96L46 72L24 76L28 68L6 56L12 50L4 34L16 36L20 28L36 38L32 16L43 22Z'/%3E%3C/svg%3E");
  --hand: "Segoe Print", "Bradley Hand", "Comic Neue", cursive;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: flex-end;
  min-height: 100dvh;
  background-color: #b9461c;
  color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
}

/* Background painting with a slow, gentle drift */
.scene {
  position: fixed;
  inset: 0;
  background: url('molemail.jpeg') no-repeat center 40% / cover;
  background-image: image-set(url('molemail.webp') type('image/webp'), url('molemail.jpeg') type('image/jpeg'));
  animation: drift 40s ease-in-out infinite alternate;
  z-index: 0;
}

/* Warm light from above + soft vignette */
.glow {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 55% 10%, rgba(255, 214, 140, 0.35), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(60, 15, 5, 0.55) 100%);
  animation: breathe 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes drift {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1%, -1.5%); }
}

@keyframes breathe {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}

/* Falling leaves */
.leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.leaf {
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6C76 24 82 56 52 84L52 97L48 97L48 84C18 56 24 24 50 6Z'/%3E%3C/svg%3E");
  position: absolute;
  top: -8vh;
  left: var(--x);
  /* Generous invisible hit area so moving leaves can actually be caught */
  padding: 14px;
  margin: -14px;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 4px rgba(60, 15, 5, 0.4));
  animation: fall var(--t) linear var(--delay) infinite;
}

.leaf.maple {
  --shape: var(--maple);
}

.leaf.oak {
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6C58 6 60 16 56 20C66 18 70 28 62 34C74 34 76 46 64 50C76 54 72 66 60 64C66 74 58 82 52 78L52 96L48 96L48 78C42 82 34 74 40 64C28 66 24 54 36 50C24 46 26 34 38 34C30 28 34 18 44 20C40 16 42 6 50 6Z'/%3E%3C/svg%3E");
}

.leaf::before {
  content: "";
  display: block;
  width: var(--s);
  height: var(--s);
  /* Midrib + light-to-dark shading, cut out by the leaf silhouette */
  background:
    linear-gradient(90deg, transparent 48%, rgba(70, 20, 0, 0.45) 49.5% 50.5%, transparent 52%),
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--c), #fff3c4 35%), var(--c) 55%, color-mix(in srgb, var(--c), #3a0a00 30%));
  mask: var(--shape) center / contain no-repeat;
  animation: sway calc(var(--t) / 4) ease-in-out var(--delay) infinite alternate;
}

.leaf.caught::before {
  animation: pop 0.35s ease-out forwards;
}

@keyframes pop {
  to { transform: scale(2) rotate(90deg); opacity: 0; }
}

/* Per-leaf position, size, speed, wind and colour */
.leaf:nth-child(1) { --x:4%; --s:29px; --t:14s; --delay:-2s; --wind:12vw; --c:#d9381e }
.leaf:nth-child(2) { --x:12%; --s:19px; --t:18s; --delay:-9s; --wind:6vw; --c:#f2a33a }
.leaf:nth-child(3) { --x:21%; --s:35px; --t:12s; --delay:-5s; --wind:15vw; --c:#b5172c }
.leaf:nth-child(4) { --x:30%; --s:22px; --t:16s; --delay:-12s; --wind:-4vw; --c:#e8661f }
.leaf:nth-child(5) { --x:38%; --s:16px; --t:20s; --delay:-1s; --wind:8vw; --c:#f6c35a }
.leaf:nth-child(6) { --x:47%; --s:26px; --t:13s; --delay:-7s; --wind:10vw; --c:#c8202f }
.leaf:nth-child(7) { --x:56%; --s:32px; --t:15s; --delay:-11s; --wind:-6vw; --c:#e8661f }
.leaf:nth-child(8) { --x:64%; --s:19px; --t:19s; --delay:-4s; --wind:5vw; --c:#d9381e }
.leaf:nth-child(9) { --x:72%; --s:38px; --t:11s; --delay:-8s; --wind:-10vw; --c:#f2a33a }
.leaf:nth-child(10) { --x:80%; --s:22px; --t:17s; --delay:-14s; --wind:7vw; --c:#b5172c }
.leaf:nth-child(11) { --x:88%; --s:29px; --t:14s; --delay:-3s; --wind:-8vw; --c:#f6c35a }
.leaf:nth-child(12) { --x:95%; --s:18px; --t:21s; --delay:-16s; --wind:-12vw; --c:#e8661f }

@keyframes fall {
  to { transform: translate(var(--wind), 118vh); }
}

/* Swing side to side while tumbling over, like a real leaf catching the air */
@keyframes sway {
  from { transform: translateX(-30px) rotate(-50deg) rotateY(0deg); }
  to   { transform: translateX(30px) rotate(60deg) rotateY(70deg); }
}

/* The postcard */
.letter {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  width: min(42rem, 100% - 4rem);
  margin: 2rem;
  padding: 1.75rem 2rem 2rem;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 20% 0%, #fffaf0, var(--paper) 60%, var(--paper-edge));
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 1px rgba(123, 14, 43, 0.08) inset,
    0 18px 40px -10px rgba(60, 15, 5, 0.6),
    0 4px 10px rgba(60, 15, 5, 0.25);
  transform-origin: bottom left;
  animation: arrive 1.1s cubic-bezier(0.2, 0.8, 0.2, 1.1) 0.3s both;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(40px) rotate(-4deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-1deg); }
}

.message {
  padding-right: 1.75rem;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--scarf);
}

h1 {
  margin: 0;
  color: var(--wine);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.tagline {
  margin: 0.4rem 0 0;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
}

.note {
  margin: 1.1rem 0 0;
  font-family: var(--hand);
  font-size: 1.15rem;
  line-height: 1.6;
  color: #5b3524;
}

.signoff {
  margin: 0.6rem 0 0;
  font-family: var(--hand);
  color: var(--wine);
}

/* Right half: stamp, postmark and address */
.address {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 1.75rem;
  border-left: 1px solid rgba(123, 14, 43, 0.2);
}

.stamp {
  position: relative;
  align-self: flex-end;
  width: 3.6rem;
  height: 4.3rem;
  background: linear-gradient(#e8661f, var(--scarf));
  border: 4px dotted var(--paper);
  outline: 1px solid rgba(123, 14, 43, 0.25);
  transform: rotate(4deg);
}

.stamp::after {
  content: "";
  position: absolute;
  inset: 18%;
  background: #f6c35a;
  mask: var(--maple) center / contain no-repeat;
}

.postmark {
  position: absolute;
  top: 1.6rem;
  right: 2.8rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 2px solid rgba(123, 14, 43, 0.5);
  border-radius: 50%;
  color: rgba(123, 14, 43, 0.6);
  font-size: 0.55rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: center;
  --r: -14deg;
  animation: stamp 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1.1s both;
}

.lines {
  margin: auto 0 0;
  padding: 1.5rem 0 0;
  list-style: none;
  font-family: var(--hand);
  font-size: 0.95rem;
  color: #5b3524;
}

.lines li {
  padding: 0.35rem 0 0.1rem;
  border-bottom: 1px solid rgba(123, 14, 43, 0.2);
}

.seal {
  position: absolute;
  right: -0.9rem;
  bottom: -0.9rem;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0434f, var(--wine) 70%);
  box-shadow: 0 4px 8px rgba(60, 15, 5, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  color: #ffd9c2;
  font-weight: bold;
  font-size: 1.4rem;
  --r: -12deg;
  animation: stamp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 1.5s both;
}

@keyframes stamp {
  from { opacity: 0; transform: scale(1.8) rotate(-40deg); }
  to   { opacity: 1; transform: scale(1) rotate(var(--r)); }
}

@media (max-width: 600px) {
  .letter {
    grid-template-columns: 1fr;
    width: calc(100% - 2rem);
    margin: 1rem 1rem 1.5rem;
    padding: 1.25rem;
  }

  .message {
    padding-right: 0;
  }

  h1 {
    margin-right: 3.5rem;
  }

  .note {
    font-size: 1rem;
  }

  /* Just the stamp in the corner; no room for the address side */
  .address {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0;
    border: 0;
  }

  .stamp {
    width: 2.6rem;
    height: 3.1rem;
  }

  .postmark,
  .lines {
    display: none;
  }
}

/* Easter egg: leaf gathering */
.plus {
  position: fixed;
  z-index: 5;
  font-family: var(--hand);
  font-weight: bold;
  font-size: 1.3rem;
  color: #fff3c4;
  text-shadow: 0 1px 3px rgba(60, 15, 5, 0.7);
  pointer-events: none;
  translate: -50% -50%;
  animation: rise 0.9s ease-out forwards;
}

@keyframes rise {
  to { transform: translateY(-50px) scale(1.2); opacity: 0; }
}

.tally {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  padding: 0.6rem 0.9rem;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 6px 16px -4px rgba(60, 15, 5, 0.55);
  font-size: 0.85rem;
  color: var(--ink);
  text-align: right;
  opacity: 0;
  transform: translateY(-12px) rotate(2deg);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}

.tally.show {
  opacity: 1;
  transform: translateY(0) rotate(2deg);
}

.tally b {
  display: inline-block;
  font-size: 1.3rem;
  color: var(--wine);
}

.tally b.bump {
  animation: bump 0.3s ease-out;
}

@keyframes bump {
  50% { transform: scale(1.35); }
}

.tally small {
  display: block;
  font-family: var(--hand);
  color: #5b3524;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before {
    animation: none !important;
  }

  .leaves {
    display: none;
  }
}