/* ==============================================
   PAGE: INDEX (letter page)
   Layout and positioning specific to index.html
   ============================================== */

/* ── Main layout ── */
.page-index {
  min-height: 100vh;
  overflow: hidden;
}

/* ── Letter stage (center of screen) ── */
.letter-stage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: min(520px, 90vw);
  animation: float-in var(--dur-slow) var(--ease-out) both;
}

/* On small screens, push it up a bit so rabbit doesn't overlap */
@media (max-height: 600px) {
  .letter-stage {
    top: 40%;
  }
}

/* ── Scene tree blobs ── */
.tree-blob--1 {
  width: 280px; height: 260px;
  background: #4e8040;
  bottom: 0; left: -40px;
}
.tree-blob--2 {
  width: 220px; height: 200px;
  background: #5a8a4a;
  bottom: 0; left: 100px;
}
.tree-blob--3 {
  width: 300px; height: 280px;
  background: #3d6b32;
  bottom: 0; right: -20px;
}
.tree-blob--4 {
  width: 200px; height: 190px;
  background: #5a8a4a;
  bottom: 0; right: 120px;
}

/* ── Clouds ── */
.cloud--1 {
  top: 8%; left: -10%;
  width: 220px;
  animation: cloud-drift 80s linear infinite;
  animation-delay: -20s;
}
.cloud--2 {
  top: 16%; left: -20%;
  width: 160px;
  animation: cloud-drift 110s linear infinite;
  animation-delay: -55s;
  opacity: 0.65;
}
.cloud--3 {
  top: 5%; left: -30%;
  width: 140px;
  animation: cloud-drift 95s linear infinite;
  animation-delay: -40s;
  opacity: 0.5;
}

/* ── Plant positions ── */
.plant--1  { left: 2%;  height: 80px;  width: 40px; }
.plant--2  { left: 6%;  height: 60px;  width: 50px; }
.plant--3  { left: 12%; height: 90px;  width: 45px; }
.plant--4  { left: 18%; height: 70px;  width: 38px; }
.plant--5  { left: 22%; height: 100px; width: 42px; }
.plant--6  { right: 3%; height: 85px;  width: 44px; }
.plant--7  { right: 9%; height: 70px;  width: 38px; }
.plant--8  { right: 15%;height: 95px;  width: 46px; }
.plant--9  { right: 22%;height: 65px;  width: 40px; }

/* ── Deer in foreground ── */
.deer-wrap {
  left: 8%;
  bottom: 19%;
  width: 130px;
}
.deer-wrap svg {
  width: 130px;
  height: auto;
}

/* ── Login character (rabbit + speech bubble) ── */
/* components.css handles base styles;
   index page overrides max-width for speech bubble */
.login-character .speech-bubble {
  max-width: 300px;
}