/* Burn a letter — self-contained styles (loaded after site.css) */

.letter-intro { text-align: center; padding-top: clamp(28px, 6vw, 56px); }
.letter-intro h1 {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05;
}
.letter-intro .lede { margin: 1rem auto 0; max-width: 600px; }
.letter-intro .private { display: inline-block; margin-top: 0.8rem; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); opacity: 0.8; }

/* ---- stage ---- */
.burn-stage {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 0; min-height: 54vh;
}

/* ---- the paper ---- */
.paper {
  position: relative; z-index: 2;
  width: clamp(280px, 90vw, 560px); min-height: 340px;
  margin: 0 auto; padding: 30px 32px 44px;
  color: #3a2a18; border-radius: 4px;
  background:
    repeating-linear-gradient(transparent 0 31px, rgba(120, 90, 50, 0.14) 31px 32px),
    linear-gradient(180deg, #f7ecd6, #efe0c2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(150, 110, 60, 0.12);
  transform-origin: 50% 100%;
  --burn: 0;
}
.paper textarea {
  width: 100%; min-height: 280px; border: 0; outline: 0; resize: none; background: transparent;
  font-family: "Cormorant Garamond", serif; font-size: 1.3rem; line-height: 1.6; color: #3a2a18;
}
.paper textarea::placeholder { color: rgba(58, 42, 24, 0.4); font-style: italic; }

/* burning state: mask eats the paper from the bottom up */
.paper.burning {
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--burn) * 100% - 1.5%), #000 calc(var(--burn) * 100% + 1.5%));
          mask-image: linear-gradient(to top, transparent calc(var(--burn) * 100% - 1.5%), #000 calc(var(--burn) * 100% + 1.5%));
}
.paper.burning textarea { pointer-events: none; }

/* the glowing, ragged burning edge that rides up the page */
.paper.burning::after {
  content: ""; position: absolute; left: -2%; width: 104%; height: 30px;
  bottom: calc(var(--burn) * 100%); transform: translateY(50%);
  background: linear-gradient(to top,
    rgba(60, 20, 0, 0) 0%, rgba(120, 40, 0, 0.6) 28%,
    rgba(255, 120, 30, 0.95) 54%, rgba(255, 214, 130, 0.95) 70%, rgba(255, 120, 30, 0) 100%);
  filter: blur(2px);
  box-shadow: 0 -7px 12px rgba(40, 12, 0, 0.55);
  pointer-events: none;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7px, rgba(0,0,0,0.35) 7px 11px);
          mask-image: repeating-linear-gradient(90deg, #000 0 7px, rgba(0,0,0,0.35) 7px 11px);
}

.paper.nudge { animation: nudge 0.4s; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ---- little candle beneath the letter ---- */
.candle-mini { position: relative; z-index: 3; width: 44px; height: 118px; margin: -22px auto 0; }
.candle-mini .stick {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 36px; height: 88px; border-radius: 8px 8px 4px 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.32), rgba(255,255,255,0.16) 30%, transparent 50%, rgba(0,0,0,0.34)),
    linear-gradient(#f4e4c4, #d9bd8e);
  box-shadow: 0 0 24px rgba(255, 160, 80, 0.4);
}
.candle-mini .flame {
  position: absolute; bottom: 84px; left: 50%; width: 22px; height: 46px;
  transform: translateX(-50%); transform-origin: 50% 100%;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 74%, #fff7d0 0%, #ffd166 30%, #ff8a2b 62%, #e5480d 100%);
  filter: blur(0.4px); box-shadow: 0 -6px 26px rgba(255, 150, 60, 0.6);
  animation: flick 1.6s ease-in-out infinite;
}
.candle-mini .flame .core {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 8px; height: 20px; border-radius: 50%;
  background: radial-gradient(#fff, #ffe08a); filter: blur(0.5px);
}
.candle-mini .halo {
  position: absolute; bottom: 60px; left: 50%; width: 200px; height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 170, 80, 0.2), transparent 65%);
  pointer-events: none;
}
@keyframes flick {
  0%, 100% { transform: translateX(-50%) scaleY(1) rotate(0deg); }
  50% { transform: translateX(-50%) scaleY(1.08) rotate(1.2deg); }
}

/* ---- embers ---- */
.embers { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
.ember {
  position: absolute; border-radius: 50%;
  background: radial-gradient(#fff2b0, #ff8a2b 60%, transparent);
  box-shadow: 0 0 6px rgba(255, 150, 60, 0.9);
  animation: rise var(--dur, 1.6s) ease-out forwards;
}
@keyframes rise {
  to { transform: translate(var(--dx, 0), -170px) scale(0.35); opacity: 0; }
}

/* ---- controls ---- */
.burn-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.sound-toggle {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 6px 15px; font-size: 0.82rem; cursor: pointer;
  font-family: inherit; transition: color .2s, border-color .2s;
}
.sound-toggle:hover { color: var(--text); border-color: var(--accent); }
.afterword { color: var(--muted); font-size: 1.05rem; }
.linklike { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

@media (max-width: 560px) {
  .paper { padding: 24px 22px 40px; min-height: 300px; }
  .paper textarea { font-size: 1.18rem; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .candle-mini .flame { animation: none; }
}