/* =====================================================================
   letter.css  —  Screen 4: the handwritten letter
   ===================================================================== */

/* Letter page ka apna ROMANTIC PINK background (base.css ko override) */
body {
  background: linear-gradient(135deg, #6d1a40, #a82e63 48%, #d94f86);
  background-attachment: fixed;
}

.letter-content {
  width: 100%;
  max-width: 600px;
}

/* =====================================================================
   ENVELOPE GATE  —  click karte hi music + letter (guaranteed sound)
   ===================================================================== */
.letter-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: fadeUp 0.9s both;
}
.letter-gate.fade-out { animation: gateOut 0.5s ease forwards; }
@keyframes gateOut { to { opacity: 0; transform: scale(0.9); visibility: hidden; } }

.envelope-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  animation: envPulse 1.7s ease-in-out infinite;
}
.envelope-btn:active { transform: scale(0.95); }

.envelope {
  position: relative;
  width: 240px;
  height: 160px;
  filter: drop-shadow(0 16px 34px rgba(255, 92, 138, 0.5));
}

/* envelope body */
.env-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffc2d6, #ff5c8a);
  border-radius: 12px;
}
/* bottom inner fold (halka sa, depth ke liye) */
.env-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(45deg,  rgba(255,255,255,0.12) 0 50%, transparent 50%),
    linear-gradient(-45deg, rgba(0,0,0,0.08) 0 50%, transparent 50%);
}
/* closed flap (upar se neeche triangle) */
.env-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-top: 94px solid #e04f81;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}
/* heart seal (flap ki tip par) */
.env-seal {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 2rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.envelope-label {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@keyframes envPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.paper {
  position: relative;
  /* notebook feel:
     1) horizontal ruled lines — text ke BOTTOM par (content-box se align)
     2) vertical margin line — poori height (padding-box)
     3) cream paper base */
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      rgba(224, 58, 122, 0.16) 26px,
      rgba(224, 58, 122, 0.16) 27px,
      transparent 27px,
      transparent 32px
    ),
    linear-gradient(
      to right,
      transparent 22px,
      rgba(255, 92, 138, 0.32) 22px,
      rgba(255, 92, 138, 0.32) 24px,
      transparent 24px
    ),
    linear-gradient(180deg, #fffdf6, #fff6ea);
  background-origin: content-box, padding-box, padding-box;
  background-attachment: local, local, local;   /* content ke saath scroll */
  color: #4a3b2e;
  border-radius: 14px;
  padding: 17px 30px 30px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  max-height: 56vh;
  overflow-y: auto;
}

/* ---- Greeting (Fredoka — heart "Click me" wala font) ---- */
.lp-greeting {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  color: #4a3b2e;
  line-height: 32px;            /* grid par (ruled line ke saath) */
  margin-bottom: 32px;          /* ek blank ruled line */
}
.lp-greeting .lp-name {
  font-weight: 700;                 /* Kinzah bold */
  color: #e03a7a;                   /* Kinzah pink (cream paper par readable) */
}

/* ---- Body paragraphs (Fredoka — heading jaisa hi font) ---- */
.lp {
  font-family: "Fredoka", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 3.2vw, 1.15rem);
  line-height: 32px;            /* ruled lines ke barabar → text line par baithe */
  margin-bottom: 32px;          /* ek blank ruled line gap */
}
.lp:last-child { margin-bottom: 0; }

/* inline helper: koi word pink karna ho */
.lp-pink { color: #e03a7a; font-weight: 600; }

/* ---- Gentle reveal (ek ek line) ---- */
.reveal-line {
  opacity: 0;
  animation: lineUp 0.7s ease forwards;
}
@keyframes lineUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* blinking cursor while typewriter is running */
.letter-text.typing::after {
  content: "|";
  color: var(--pink);
  animation: blink 0.8s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.letter-sign {
  font-family: "Fredoka", sans-serif;    /* baaqi letter jaisa font */
  font-weight: 600;
  font-size: clamp(1.05rem, 3.5vw, 1.3rem);
  text-align: right;
  margin-top: 18px;
  color: #c3379b;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.letter-sign.show { opacity: 1; }

/* pretty scrollbar */
.paper::-webkit-scrollbar { width: 6px; }
.paper::-webkit-scrollbar-thumb {
  background: rgba(255, 92, 138, 0.4);
  border-radius: 10px;
}