/* The ending letter (js/ui/letter.js). Link after main.css:
   <link rel="stylesheet" href="css/letter.css"> */

.letter {
  --paper-hi: #f6efe1;
  --paper-lo: #ebe1cd;
  --letter-ink: #2c2640;
  --letter-soft: #5a4f6b;
  --letter-rose: #f5a9b8;
  --letter-rose-ink: #2c2640;
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: auto;
  overflow: hidden;
}

/* a warm veil, about 35% dark: the sunrise still shows around the edges. No blur. */
.letter-veil {
  position: absolute;
  inset: 0;
  background: rgba(46, 24, 20, 0.35);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.letter.on .letter-veil { opacity: 1; }

/* the sheet is the scroller: a tall ivory paper rising from the bottom */
.letter-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  top: calc(var(--safe-t, 0px) + 5dvh);
  width: min(calc(100% - 20px), 480px);
  padding: 44px 26px calc(var(--safe-b, 0px) + 26dvh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: pointer;
  -webkit-user-select: text;
  user-select: text;
  color: var(--letter-ink);
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(255, 255, 250, 0.7), rgba(255, 255, 250, 0) 60%),
    linear-gradient(170deg, var(--paper-hi), var(--paper-lo));
  border-radius: 4px 4px 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 0 3px #efe6d4,
    0 0 0 4.5px #b08442,
    0 24px 60px rgba(6, 4, 16, 0.55),
    0 4px 12px rgba(6, 4, 16, 0.35);
  transform: translate(-50%, 104%);
  transition: transform 1.5s cubic-bezier(.16, .84, .24, 1);
}

.letter.on .letter-sheet { transform: translate(-50%, 0); }
.letter.leaving .letter-sheet { transition-duration: 0.95s; transition-timing-function: cubic-bezier(.6, 0, .84, .2); }

/* once the button has arrived there is no more room to keep below it */
.letter-sheet.done { padding-bottom: calc(var(--safe-b, 0px) + 64px); }

.letter-body {
  max-width: 34ch;
  margin: 0 auto;
}

/* ---------- the handwriting ---------- */

.letter-line {
  margin: 0 0 0.62em;
  font-family: var(--hand, "Caveat", "Bradley Hand", "Segoe Print", cursive);
  font-weight: 500;
  font-size: clamp(22px, 5.7vw, 27px);
  line-height: 1.42;
  letter-spacing: 0.005em;
  color: var(--letter-ink);
  text-shadow: none;
}

.letter-salutation { margin-bottom: 0.9em; font-size: clamp(26px, 7vw, 32px); }
.letter-place,
.letter-closing { margin-bottom: 0.78em; }
.letter-opening:first-of-type { margin-top: 0; }
.letter-closing:first-of-type { margin-top: 1.4em; }
.letter-signoff { margin-top: 1.5em; margin-bottom: 0; text-align: right; }

/* the masked line reveal (also in main.css; repeated so this file stands alone) */
.letter .rl {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.12em 0.2em;
  margin: -0.08em -0.12em -0.2em;
}

.letter .rl > .rl-in { display: inline-block; will-change: transform; }

/* reduced motion: lines fade in instead of rising */
.letter-line.fade { animation: letter-fade 1.1s ease both; }

@keyframes letter-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the button ---------- */

.letter-end {
  margin-top: 2.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.16, .84, .24, 1);
}

.letter-end.on { opacity: 1; transform: none; }
.letter-end.now { transition: none; }

.letter-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 170px;
  padding: 14px 40px;
  border-radius: 26px;
  border: 1px solid rgba(176, 70, 104, 0.55);
  background: var(--letter-rose);
  color: var(--letter-rose-ink);
  font-family: var(--sans, -apple-system, "Helvetica Neue", Arial, sans-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(176, 70, 104, 0.28);
}

.letter-call[data-missing="true"] { cursor: default; }

.letter-note {
  margin: 22px 0 6px;
  max-width: 24em;
  font-family: var(--sans, -apple-system, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--letter-soft);
}

.letter-stay {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  background: none;
  color: var(--letter-soft);
  font-family: var(--sans, -apple-system, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .letter-sheet { transform: translate(-50%, 0); opacity: 0; transition: opacity 0.9s ease; }
  .letter.on .letter-sheet { opacity: 1; }
  .letter.leaving .letter-sheet { opacity: 0; }
  .letter-end { transform: none; }
}