/* ==========================================================================
   Homepage — Chapter 1 hero scene
   The scene is composed in a fixed 2400 × 1000 coordinate space so every
   layer keeps its native aspect ratio and its overlaps are predictable.
   home.js scales the stage to cover the hero (like object-fit: cover on a
   single composite image). Without JS the stage still renders at 1:1,
   bottom-anchored and centered.
   ========================================================================== */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(680px, 100svh, 960px);
  padding: calc(var(--header-h) + 48px) 0 120px;
  background: linear-gradient(180deg, #6fbfe9 0%, #a6dcf4 55%, #d6f0fb 100%);
  color: #fff;
}

.scene {
  position: absolute; left: 50%; bottom: 0; z-index: 0;
  width: 2400px; height: 1000px;
  transform: translateX(-50%) scale(var(--scene-scale, 1));
  transform-origin: 50% 100%;
  pointer-events: none; user-select: none;
  background: linear-gradient(180deg, #6fbfe9 0%, #a6dcf4 55%, #d6f0fb 100%);
}
.scene .layer, .scene-frame .layer { position: absolute; display: block; max-width: none; will-change: transform; }
.scene .layer img, .scene-frame .layer img { display: block; width: 100%; height: 100%; max-width: none; }

/* parallax: home.js sets --px / --py on .hero; each layer moves by its depth */
.scene .layer, .scene-frame .layer { transform: translate(calc(var(--px, 0px) * var(--depth, 0)), calc(var(--py, 0px) * var(--depth, 0))); }

/* clouds: soft, cheap, scale with the stage */
.cloud { --depth: .25; height: 70px; border-radius: 99px; background: rgba(255, 255, 255, .85); filter: blur(1px); }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 18px; border-radius: 50%; background: inherit; }
.cloud::before { left: 22%; width: 46%; height: 150%; }
.cloud::after { left: 52%; width: 36%; height: 120%; }
.cloud-1 { left: 220px; top: 110px; width: 300px; opacity: .9; animation: drift 90s linear infinite; }
.cloud-2 { left: 1100px; top: 60px; width: 220px; opacity: .7; animation: drift 120s linear infinite reverse; }
.cloud-3 { left: 1750px; top: 150px; width: 180px; opacity: .55; animation: drift 140s linear infinite; }

/* Stage is 2400 × 1000. Wider than 2:1 so that on wide screens the scale is driven by width
   and the tree canopies always stay below the header instead of being cut by the top edge. */

/* distant forest: 4:1 panel, 3200 × 800; trunks end at y=820, buried behind the hills */
.back-trees { left: -400px; top: 20px; width: 3200px; height: 800px; --depth: .3; opacity: .92; filter: saturate(.85) brightness(1.06); }
/* rolling hills: 2600 × 650; hard cut at ~74% (y≈958) sits under the opaque part of the ground */
.hills { left: -100px; top: 480px; width: 2600px; height: 650px; --depth: .45; }
/* ground: 2600 × 1300, grassy top on stage (tufts from y≈817, opaque from y≈851) */
.ground { left: -100px; top: 760px; width: 2600px; height: 1300px; --depth: .7; }
/* framing trees live OUTSIDE the scaled stage (.scene-frame) and are anchored to the hero's own left/right
   edges, so they are never cropped at the sides. They are sized from the hero's HEIGHT so the canopies
   reach up behind the nav at any viewport; mounds sit on the grass line (stage y≈885). */
.scene-frame { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; overflow: hidden; }
.scene-frame .layer { position: absolute; aspect-ratio: 1; }
.tree-left { left: -2.5vw; bottom: calc(112px * var(--scene-scale, 1) - 1%); height: calc(96% * var(--tree-k, 1)); --depth: 1; }
.tree-right { right: -3vw; bottom: calc(110px * var(--scene-scale, 1) - 13%); height: calc(100% * var(--tree-k, 1)); --depth: 1; }
.tree-left img, .tree-right img { transform-origin: 50% 96%; }
.tree-left img { animation: sway 7s ease-in-out infinite alternate; }
.tree-right img { animation: sway 8.5s ease-in-out infinite alternate-reverse; }

/* light haze between hills and grass sells the distance */
.haze { left: -100px; top: 640px; width: 2600px; height: 230px; --depth: .5;
  background: linear-gradient(180deg, transparent, rgba(214, 240, 251, .5) 80%, rgba(214, 240, 251, .5)); }

@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes drift { from { translate: 0 0; } to { translate: 140px 0; } }

/* readability + handoff into the dark page */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 10, 40, .72) 0%, rgba(14, 10, 40, .5) 30%, rgba(14, 10, 40, .12) 58%, rgba(14, 10, 40, 0) 75%),
    linear-gradient(180deg, rgba(14, 10, 40, .45) 0%, rgba(14, 10, 40, 0) 22%, rgba(14, 10, 40, 0) 70%, var(--ink) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-copy { max-width: 720px; text-shadow: 0 3px 18px rgba(0, 0, 0, .45); }
.hero-logo { display: block; width: clamp(150px, 16vw, 210px); margin-bottom: 18px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.hero h1 { font-size: clamp(2.7rem, 5.6vw, 5.4rem); line-height: .94; margin-bottom: 20px; text-shadow: 0 5px 0 rgba(20, 10, 50, .55), 0 14px 30px rgba(0, 0, 0, .4); }
.hero h1 .line { display: block; }
.hero h1 .line--gold { color: var(--gold); }
.hero-lead { max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: #f4f1ff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: .9rem; font-weight: 700; color: #dcd6f5; }

/* one orchestrated entrance on load (scene settles, copy rises) */
.hero.is-ready .scene { animation: settle 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.hero.is-ready .hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero.is-ready .hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero.is-ready .hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero.is-ready .hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero.is-ready .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes settle { from { transform: translateX(-50%) scale(calc(var(--scene-scale, 1) * 1.06)); } to { transform: translateX(-50%) scale(var(--scene-scale, 1)); } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 880px) {
  .hero { --tree-k: .6; }
  /* phones/tablets: the trees become side framing — capped by viewport width and pushed outwards */
  .tree-left { left: -14vw; height: min(calc(96% * var(--tree-k, 1)), 60vw); }
  .tree-right { right: -16vw; height: min(calc(100% * var(--tree-k, 1)), 64vw); }
  .hero { min-height: clamp(640px, 100svh, 860px); padding: calc(var(--header-h) + 36px) 0 110px; text-align: center; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(14, 10, 40, .55) 0%, rgba(14, 10, 40, .3) 30%, rgba(14, 10, 40, .25) 60%, var(--ink) 100%);
  }
  .hero-copy { margin-inline: auto; }
  .hero-logo { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
}
@media (max-width: 600px) {
  /* phones: the framing trees are off — at this width they only ever read as cropped stubs */
  .scene-frame { display: none; }
}
@media (max-width: 480px) {
  .hero { --tree-k: .45; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .scene .layer, .scene .layer img, .scene-frame .layer img, .cloud { animation: none !important; }
  .hero.is-ready .scene, .hero.is-ready .hero-copy > * { animation: none; }
}