/* Landscape component (rev2). See landscape.js for usage.
   Dawn sky, stars, far ridges x2, mist, strata mid ridges x2, mist, near ridges
   x2 (smooth curves), front mist. The box has no z-index and no transform on
   purpose: its planes interleave with the host's own content by z-index.
     z 0-1  sky, stars, far, mist1      z 2-3  mid ridges, mist2
     z 4    (slot) the host's subject   z 5-6  near ridges     z 7  front mist
   Every plane is solid below its silhouette. Never pure black. */
.landscape { position: absolute; inset: 0; overflow: clip; pointer-events: none; background: #0B1626; }
.ls-sky { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #0B1626 0%, #0F1C32 28%, #1A2442 40%, #33305A 48%, #6B4F6B 54%, #A86F70 59%, #C98A76 63%, #9F6E70 69%, #2B2B48 82%); }
.ls-stars { position: absolute; inset: 0 0 45% 0; width: 100%; height: 55%; z-index: 0; opacity: 0.7; }
.ls-plane { position: absolute; left: -6%; right: -6%; will-change: transform; }
.ls-plane svg { width: 100%; height: 100%; max-width: none; display: block; }
.ls-far1 { bottom: 0; height: 66%; z-index: 1; }
.ls-far2 { bottom: 0; height: 58%; z-index: 1; }
.ls-mid1 { bottom: 0; height: 50%; z-index: 2; }
.ls-mid2 { bottom: 0; height: 44%; z-index: 2; }
/* near ridges keep the art's aspect (1600:600); their dip sits under the subject */
.ls-near1, .ls-near2 { height: auto; aspect-ratio: 1600 / 600; z-index: 5; }
.ls-near1 { top: calc(79% - 23.1vw); }
.ls-near2 { top: calc(82% - 27.3vw); z-index: 6; }
.ls-near1::after, .ls-near2::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 80vh; }
.ls-near1::after { background: #0E1A2C; }
.ls-near2::after { background: #070F1A; }
.ls-mist1, .ls-mist2, .ls-mist3 { left: -20%; right: -20%; }
.ls-mist1 { height: 22%; bottom: 40%; z-index: 1;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, #C9C2DA 16%, transparent) 50%, transparent);
  animation: ls-mist 38s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; }
.ls-mist2 { height: 20%; bottom: 27%; z-index: 3;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, #A9B9D6 11%, transparent) 50%, transparent);
  animation: ls-mist 52s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate-reverse; }
.ls-mist3 { height: 16%; bottom: 4%; z-index: 7;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, #9FB3D1 6%, transparent) 50%, transparent);
  animation: ls-mist 60s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; }
@keyframes ls-mist { from { translate: -3% 0; } to { translate: 3% 0; } }

/* sub pages: ridges sit low so the top ~60% holds a title and cards */
.landscape--sub .ls-far1 { height: 40%; }
.landscape--sub .ls-far2 { height: 34%; }
.landscape--sub .ls-mid1 { height: 28%; }
.landscape--sub .ls-mid2 { height: 23%; }
.landscape--sub .ls-mist1 { bottom: 22%; }
.landscape--sub .ls-mist2 { bottom: 12%; }
.landscape--sub .ls-near1 { top: calc(96% - 23.1vw); }
.landscape--sub .ls-near2 { top: calc(100% - 27.3vw); }

@media (prefers-reduced-motion: reduce) {
  .ls-mist1, .ls-mist2, .ls-mist3 { animation: none; }
}
@media (max-width: 860px) {
  .ls-far1, .ls-far2, .ls-mid1, .ls-mid2, .ls-near1, .ls-near2 { left: -60%; right: -60%; }
  .ls-far1 { height: 58%; }
  .ls-far2 { height: 52%; }
  .ls-mid1 { height: 44%; }
  .ls-mid2 { height: 38%; }
  .ls-near1 { top: calc(71% - 45.4vw); }
  .ls-near2 { top: calc(75% - 53.6vw); }
  .ls-mist3 { display: none; }
  .landscape--sub .ls-near1 { top: calc(88% - 45.4vw); }
  .landscape--sub .ls-near2 { top: calc(92% - 53.6vw); }
}
@media (max-width: 860px) and (max-height: 720px) {
  .ls-near1 { top: calc(74% - 45.4vw); }
  .ls-near2 { top: calc(78% - 53.6vw); }
}

/* rev5 (home only): aerial perspective. The far and mid ridges step from a
   light misty blue down to the dark near pair, so 4 smooth layers read on both
   sides of the subject, each with a haze band over its crest. Only the main
   silhouette (svg > path) is recoloured; the strata lines keep fill none.
   The mist bands sit at the crest heights of the next ridge when the host
   sets --win-top (the subject's top); without it they keep the rev2 spots. */
/* rev6 sky (sky.js paints .sky__canvas; see site.css for the CSS fallback).
   The SVG star field is replaced by canvas stars on home. Rim light uses the
   gradient defined in landscape.js; stops are theme variables. */
.landscape--home { --rim-l: rgba(120, 200, 225, 0.30); --rim-c: rgba(235, 170, 205, 0.34); --rim-r: rgba(255, 196, 160, 0.70); }
.landscape--home .ls-stars { display: none; }
.sky__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.ls-sky.is-drawn .sky__canvas { opacity: 1; }
.sky__twinkle { position: absolute; inset: 0; }
.sky__twinkle .tw { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, rgba(214, 226, 255, 0.55) 38%, rgba(214, 226, 255, 0) 70%);
  opacity: var(--o); animation: ls-tw var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes ls-tw { from { opacity: calc(var(--o) * 0.35); } to { opacity: var(--o); } }
.hero.is-off .sky__twinkle .tw { animation-play-state: paused; }
.sky__meteor { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sky__meteor i { position: absolute; right: 0; top: 0; width: 150px; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(235, 242, 255, 0.85) 85%, #fff);
  transform-origin: 100% 50%; }
.ls-rim { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ls-rim--soft { opacity: 0.55; }
.ls-rim-l { stop-color: var(--rim-l); } .ls-rim-c { stop-color: var(--rim-c); } .ls-rim-r { stop-color: var(--rim-r); }
@media (prefers-reduced-motion: reduce) {
  .sky__twinkle .tw { animation: none; }
  .sky__meteor { display: none; }
}

/* rev7: three ridges, value steps instead of many similar blues.
     far  #5E7399  light, hazy, carries the rim light
     mid  #1F2D49  clearly darker (strata lines removed)
     near #070F1A  darkest, carries the foot (same value the problem section
                   starts from, so the hand-over has no step) */
.landscape--home .ls-far1 svg > path:not(.ls-rim) { fill: #5E7399; }
.landscape--home .ls-mid1 svg > path { fill: #1F2D49; }
.landscape--home .ls-near1 svg > path { fill: #070F1A; }
.landscape--home .ls-near1::after { background: #070F1A; }
.landscape--home .ls-mist1 { bottom: calc(100% - var(--win-top, 50%) - 200px); height: 130px;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, #D8C8D2 18%, transparent) 50%, transparent); }