/* ============================================================
   Click the envelope -> flap opens like a real envelope ->
   the letter slides up out of the pocket and grows to the
   center to read -> close sends it back in.
   Main thing you might tweak: the jade color below.
   ============================================================ */

:root {
  --jade:        #7fc9a2;
  --jade-deep:   #5fb088;
  --jade-soft:   #a8ddc3;
  --paper:       #fbfaf5;
  --ink:         #40514a;
  --blush:       #e8a7a7;
  --lotus:       #f77fb0;
  --lavender:    #b9a3e6;
  --serena-pink: #f8b8c8;   /* sampled straight from the heart sticker */
}

/* ---------- self-hosted fonts (identical on every device) ---------- */
@font-face {
  font-family: "Great Vibes";
  src: url("assets/fonts/GreatVibes-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("assets/fonts/Lora.ttf") format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Lora", "Georgia", "Times New Roman", serif;
  background: radial-gradient(circle at 50% 25%, #eaf7f0 0%, #d9f0e6 45%, #cbe9d9 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

.sprite { position: absolute; width: 0; height: 0; }

/* ---------- music control (button + volume slider) ---------- */
.music-control {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 30px;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 6px 14px rgba(80,130,105,.28);
}
.music-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--jade);
  color: #fff;
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(80,130,105,.35);
  transition: transform .2s ease, background .2s ease;
}
/* the volume slider */
.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 6px;
  border-radius: 6px;
  background: rgba(95,176,136,.35);
  outline: none;
  cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--jade-deep);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.vol-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--jade-deep);
  border: 2px solid #fff;
}
.music-btn:hover { transform: scale(1.08); background: var(--jade-deep); }
.music-btn .note { display: inline-block; }
/* gently pulse the note while music plays */
.music-btn.is-on .note { animation: notebeat 1.1s ease-in-out infinite; }
@keyframes notebeat { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.25);} }
/* dim + slash when off/muted */
.music-btn.is-off { background: #9fbcae; }
.music-btn.is-off::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transform: translateY(-50%) rotate(-45deg);
}

/* ============================================================
   FLOATING SHAPES
   ============================================================ */
.floaters { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.floater {
  position: absolute;
  bottom: -60px;
  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.floater .ic { display: block; fill: currentColor; animation: sway ease-in-out infinite; }
.f-heart { color: var(--jade);     opacity: .55; }
.f-cat   { color: var(--jade);     opacity: .5;  }
.f-lotus { color: var(--lotus);    opacity: .5;  }
.f-lav   { color: var(--lavender); opacity: .5;  }

@keyframes floatUp {
  0%   { transform: translateY(0);      opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-118vh); opacity: 0; }
}
@keyframes sway {
  0%, 100% { transform: translateX(-9px) rotate(-8deg); }
  50%      { transform: translateX(9px)  rotate(8deg);  }
}

/* ============================================================
   SCENE  (also the perspective + stacking context)
   ============================================================ */
.scene {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  perspective: 1300px;      /* gives the flap real 3D depth */
}

/* ---------------- the envelope ---------------- */
.envelope {
  position: relative;
  width: 330px;
  height: 200px;
  max-width: 90vw;
  cursor: pointer;
  transition: transform .75s cubic-bezier(.3,.7,.28,1), opacity .6s ease;
}
/* the envelope drops down (and fades) as the letter takes over */
.app.lifted .envelope { transform: translateY(160px); opacity: .22; }
.back {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--jade) 0%, var(--jade-deep) 100%);
  border-radius: 12px;
  z-index: 1;
  box-shadow: 0 16px 26px rgba(80,130,105,.32);
}
.pocket {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58%;
  background: linear-gradient(160deg, var(--jade) 0%, var(--jade-deep) 100%);
  border-radius: 0 0 12px 12px;
  z-index: 6;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
}

/* flap = a single triangle that lifts up and open */
.flap-group {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  transform-origin: top center;
  z-index: 7;
  transition: transform .65s cubic-bezier(.4,.1,.25,1);
}
.flap {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--jade-soft) 0%, var(--jade) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 12px 12px 0 0;
  backface-visibility: visible;
}
.seal {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 60px;
  height: auto;
  transform: translate(-50%, -58%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.22));
  backface-visibility: hidden;   /* hides as the flap passes vertical */
}

/* her name, in a romantic cursive, just under the sticker */
.env-name {
  position: absolute;
  left: 50%;
  top: 61%;
  transform: translateX(-50%);
  z-index: 8;                    /* above the pocket, below the closed flap */
  color: #d9f0e6;                /* same jade as the page background */
  font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script",
               "Lucida Handwriting", cursive;
  font-size: 30px;
  font-style: italic;
  letter-spacing: .5px;
  /* matching little 3D extrusion, scaled down for the small text */
  text-shadow:
    1px 1px 0 #a9d5bf,
    2px 2px 0 #93c5ac,
    3px 4px 5px rgba(45, 80, 62, .3);
  pointer-events: none;
  white-space: nowrap;
}

/* faint "1 MONTH" watermark near the top of the screen */
.month-bg {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 800;
  font-size: clamp(52px, 14vw, 150px);
  letter-spacing: 10px;
  line-height: 1;
  color: #cbe9d9;                       /* light top face of the letters */
  /* stacked layers = real extruded 3D depth, plus a soft cast shadow */
  text-shadow:
    1px 1px 0 #b6ddc8,
    2px 2px 0 #aad6bf,
    3px 3px 0 #9ecdb5,
    4px 4px 0 #92c4ab,
    6px 8px 12px rgba(45, 80, 62, .32);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.month-bg { display: flex; align-items: baseline; justify-content: center; gap: .22em; }
.month-bg .one { font-size: 1.5em; line-height: 1; }
/* flap opens up and stands open like a real envelope, and drops BEHIND the
   letter so the letter can rise above the envelope while staying tucked in
   (letter z4 sits above the open flap z2, but below the front pocket z6) */
.app.flap-open .flap-group { transform: rotateX(150deg); z-index: 2; }

.hint {
  position: absolute;
  bottom: 24vh;
  left: 0; right: 0;
  text-align: center;
  font-size: 16px;
  color: var(--jade-deep);
  animation: nudge 2.2s ease-in-out infinite;
  transition: opacity .3s ease;
}
@keyframes nudge { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }
.app.flap-open .hint { opacity: 0; }

/* ============================================================
   THE LETTER  (starts inside the envelope, slides out, grows)
   ============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(56, 92, 76, .28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.app.lifted .backdrop { opacity: 1; pointer-events: auto; }

.letter {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 640px;
  max-width: 92vw;
  height: 84vh;
  background-color: var(--paper);
  /* super-subtle jade heart pattern woven into the paper */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-5-7.5-10.5A4.2 4.2 0 0 1 12 6.6 4.2 4.2 0 0 1 19.5 10.5C19.5 16 12 21 12 21z' fill='%237fc9a2' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 54px 54px;
  background-attachment: local;
  border-radius: 14px;
  z-index: 4;                 /* starts BEHIND the pocket (z6) = inside the envelope */
  overflow-y: hidden;
  box-shadow: 0 14px 30px rgba(50,90,70,.25);
  transform-origin: center center;
  /* base = tucked inside the envelope, hidden by the flap + pocket */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(8px) scale(.205);
  transition: transform .8s cubic-bezier(.32,.72,.28,1),
              opacity .45s ease, box-shadow .5s ease;
}
/* 1) flap open -> the letter sitting inside becomes visible */
.app.flap-open .letter { opacity: 1; }
/* 2) it slides UP, out of the envelope (still small) */
.app.sliding .letter { transform: translate(-50%, -50%) translateY(-90px) scale(.22); }
/* 3) it comes to the front, then expands to the centre to read */
.app.front  .letter { z-index: 50; overflow-y: auto; pointer-events: auto; }
.app.lifted .letter {
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 30px 70px rgba(50,90,70,.45);
}

.letter-inner { padding: 44px 48px 40px; text-align: left; }

.close-btn {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px -34px 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--jade-soft);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease;
}
.close-btn:hover { background: var(--jade-deep); }

/* ---------- letter typography ---------- */
.letter h1 { font-family: "Playfair Display", serif; font-size: 32px; color: var(--jade-deep); font-weight: 700; margin-bottom: 4px; }
.letter .date { font-style: italic; font-size: 14px; color: var(--blush); margin-bottom: 22px; }
.letter p { font-size: 17px; line-height: 1.75; margin-bottom: 18px; }
.dropcap {
  float: left; font-size: 52px; line-height: .8; padding: 8px 10px 0 0;
  color: var(--jade-deep); font-weight: bold;
}

/* ---------- photos with text wrapping around them ---------- */
.photo {
  width: 40%;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}
.photo.left  { float: left;  margin: 4px 24px 10px 0; }
.photo.right { float: right; margin: 4px 0 10px 24px; }

.signoff { clear: both; margin-top: 26px; font-style: italic; font-size: 19px; color: var(--jade-deep); }
.signoff span { color: var(--ink); font-size: 16px; }
.letter-footer {
  clear: both;
  text-align: center;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(95,176,136,.28);
}
.letter-footer img { width: 150px; height: auto; }

.letter::-webkit-scrollbar { width: 9px; }
.letter::-webkit-scrollbar-thumb { background: var(--jade-soft); border-radius: 9px; }

@media (max-width: 480px) {
  .letter-inner { padding: 34px 22px 28px; }
  .photo { width: 66%; display: block; float: none; margin: 14px auto; }
}