/* ==============================================
   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%;
  }
}

/* ══════════════════════════════════════════════
   INDEX SCENE STACKING ORDER
   birds-wrap (11) sits above all grass layers so birds
   are visible. Near trees (7) sit above grass-far (6)
   so trunks are visible. Foreground animals at 12-13.
   ══════════════════════════════════════════════ */
.page-index .sky               { z-index: 0; }
.page-index .cloud-layer       { z-index: 1; }
.page-index .canopy-ceiling    { z-index: 2; }
.page-index .owl-wrap          { z-index: 3; }
.page-index .trees-bg          { z-index: 4; }   /* far + mid trees */
.page-index .forest-light      { z-index: 5; }
.page-index .grass-far         { z-index: 6; }
.page-index .trees-near-wrap   { z-index: 7; }   /* above grass-far — trunks visible */
.page-index .grass-mid         { z-index: 8; }
.page-index .plants-layer      { z-index: 9; }
.page-index .grass-near        { z-index: 10; }
.page-index .birds-wrap        { z-index: 11; }  /* perched on trunks, above all grass */
.page-index .fox-wrap          { z-index: 12; }
.page-index .deer-wrap--2      { z-index: 12; }
.page-index .squirrel-wrap     { z-index: 12; }
.page-index .deer-wrap         { z-index: 13; }
.page-index .butterflies-layer { z-index: 14; }

/* ── Expand both tree containers to full viewport ── */
.page-index .trees-bg,
.page-index .trees-near-wrap {
  top: 0;
  bottom: 0;
  height: auto;
}

/* ══════════════════════════════════════════════
   CANOPY CEILING
   Dark irregular green mass at the top simulating
   overhead tree canopy — makes the viewer feel
   enclosed inside the forest, not just at its edge.
   The gap in the center lets sky peek through.
   ══════════════════════════════════════════════ */
.page-index .canopy-ceiling {
  background:
    /* left canopy mass — dense, extends from top-left */
    radial-gradient(ellipse 60% 90% at -5% -15%,
      rgba(10, 35, 5, 0.97) 0%,
      rgba(18, 55, 8, 0.85) 30%,
      rgba(28, 72, 14, 0.55) 55%,
      transparent 75%),
    /* right canopy mass */
    radial-gradient(ellipse 60% 90% at 105% -15%,
      rgba(10, 35, 5, 0.97) 0%,
      rgba(18, 55, 8, 0.85) 30%,
      rgba(28, 72, 14, 0.55) 55%,
      transparent 75%),
    /* upper-left fill */
    radial-gradient(ellipse 40% 55% at 18% -5%,
      rgba(15, 48, 8, 0.80) 0%,
      rgba(20, 60, 10, 0.45) 45%,
      transparent 70%),
    /* upper-right fill */
    radial-gradient(ellipse 40% 55% at 82% -5%,
      rgba(15, 48, 8, 0.80) 0%,
      rgba(20, 60, 10, 0.45) 45%,
      transparent 70%),
    /* top-center — thinner, lets sky breathe through */
    radial-gradient(ellipse 35% 40% at 50% -20%,
      rgba(12, 40, 6, 0.65) 0%,
      rgba(18, 55, 8, 0.30) 50%,
      transparent 80%);
}

/* ══════════════════════════════════════════════
   FAR TREES (inside .trees-bg)
   Small, desaturated, high up — deep background depth
   ══════════════════════════════════════════════ */
.tree--far {
  filter: blur(3px) saturate(0.4) brightness(0.72) hue-rotate(8deg);
  opacity: 0.55;
}
.tree--far-l1 { height: 55vh; width: calc(55vh * 100 / 360); bottom: 38%; left: -2%; }
.tree--far-l2 { height: 48vh; width: calc(48vh * 100 / 360); bottom: 38%; left: 8%;
                filter: blur(4px) saturate(0.35) brightness(0.68) hue-rotate(10deg); opacity: 0.5; }
.tree--far-r1 { height: 52vh; width: calc(52vh * 100 / 360); bottom: 38%; right: -1%; }
.tree--far-r2 { height: 46vh; width: calc(46vh * 100 / 360); bottom: 38%; right: 7%;
                filter: blur(4px) saturate(0.35) brightness(0.68) hue-rotate(10deg); opacity: 0.5; }

/* ══════════════════════════════════════════════
   MID TREES (inside .trees-bg)
   Positioned at inner edges — visible as forest depth
   ══════════════════════════════════════════════ */
.tree--mid {
  filter: blur(1.5px) saturate(0.75) brightness(0.85);
  opacity: 0.85;
}
.tree--mid-l1 { height: 85vh; width: calc(85vh * 100 / 360); bottom: 18%; left: 2%; }
.tree--mid-r1 { height: 82vh; width: calc(82vh * 100 / 360); bottom: 18%; right: 2%; }
.tree--mid-l2 { height: 78vh; width: calc(78vh * 100 / 360); bottom: 18%; left: 14%;
                filter: blur(2px) saturate(0.65) brightness(0.82); opacity: 0.75; }
.tree--mid-r2 { height: 75vh; width: calc(75vh * 100 / 360); bottom: 18%; right: 14%;
                filter: blur(2px) saturate(0.65) brightness(0.82); opacity: 0.75; }

/* ══════════════════════════════════════════════
   NEAR TREES (inside .trees-near-wrap, z-index 7)
   Very tall — trunks dominate lower viewport.
   z-index 7 puts them above grass-far (6) so trunks
   read against the far grass layer.
   ══════════════════════════════════════════════ */
.tree--near {
  filter: saturate(1.05) brightness(0.75);  /* darker, more imposing */
  opacity: 1;
}
.tree--near-l1 {
  height: 155vh;
  width: calc(155vh * 100 / 360);
  bottom: 0;
  left: -6%;
}
.tree--near-r1 {
  height: 160vh;
  width: calc(160vh * 100 / 360);
  bottom: 0;
  right: -6%;
}

/* ── Forest light clearing ── */
/* More aggressive: much darker edges for enclosed forest feel */
.page-index .forest-light {
  background:
    radial-gradient(ellipse 55% 65% at 50% 58%,
      transparent 20%,
      rgba(15, 30, 5, 0.45) 55%,
      rgba(8, 18, 2, 0.80) 100%),
    radial-gradient(ellipse 32% 30% at 50% 65%,
      rgba(200, 170, 60, 0.20) 0%,
      rgba(160, 140, 40, 0.10) 55%,
      transparent 100%);
}

/* ── Owl ── */
.page-index .owl-wrap {
  top: 14%;
  right: -25%;
  width: 160px;
  height: 64px;
  animation: owl-glide 45s linear infinite;
  animation-delay: -12s;
}
.page-index .owl-svg {
  width: 160px;
  height: 64px;
  animation: owl-wing-beat 2.4s ease-in-out infinite;
}

/* ── Clouds (subtle — sky mostly obscured by canopy) ── */
.cloud--1 {
  top: 22%; left: -10%;
  width: 180px;
  animation: cloud-drift 80s linear infinite;
  animation-delay: -20s;
  opacity: 0.45;
}
.cloud--2 {
  top: 30%; left: -20%;
  width: 130px;
  animation: cloud-drift 110s linear infinite;
  animation-delay: -55s;
  opacity: 0.30;
}
.cloud--3 {
  top: 18%; left: -30%;
  width: 110px;
  animation: cloud-drift 95s linear infinite;
  animation-delay: -40s;
  opacity: 0.22;
}

/* ── 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;
}

/* ── Perched birds (mid-tree branch level) ── */
.birds-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bird {
  position: absolute;
  pointer-events: none;
  opacity: 0.80;
}
.bird--1 {
  left: 27%;
  bottom: 30%;
  width: 42px;
  animation: bird-bob 5s ease-in-out infinite;
  animation-fill-mode: both;
  animation-delay: -1s;
}
.bird--2 {
  right: 25%;
  bottom: 27%;
  width: 38px;
  transform: scaleX(-1);
  animation: bird-bob 4.5s ease-in-out infinite;
  animation-fill-mode: both;
  animation-delay: -3s;
}

/* ── Fawn (second deer, smaller, mirrored) — right side of clearing ── */
.deer-wrap--2 {
  right: 28%;
  bottom: 18%;
  width: 88px;
}
.deer-wrap--2 svg {
  width: 88px;
  height: auto;
  filter: blur(0.4px) brightness(0.90);
  transform: scaleX(-1);
}

/* ── Fox sitting in clearing ── */
.fox-wrap {
  position: absolute;
  pointer-events: none;
  right: 17%;
  bottom: 20%;
  width: 74px;
}
.fox-wrap svg {
  width: 74px;
  height: auto;
}

/* ── Squirrel on near-right tree trunk ── */
.squirrel-wrap {
  position: absolute;
  pointer-events: none;
  right: 9%;
  bottom: 18%;
  width: 40px;
}
.squirrel-wrap svg {
  width: 40px;
  height: auto;
}

/* ── Login character (rabbit + speech bubble) ── */
.login-character .speech-bubble {
  max-width: 300px;
}