/* STRATA: the painting's planes placed again down the page, each showing a different part of the
   world at a different depth.

   Every variant below differs from the hero and from every other variant on at least three of:
   which plane, the scale, which part of the world is cropped in, the opacity, and the direction the
   placement dissolves. That is deliberate and it is the whole point. Two placements that look alike
   would reproduce the fault that got guardian-forge's act 2 rejected, "it's looking too much like
   the hero".

   No new bytes anywhere here: every file is one of the three already cut for the hero band, so all
   of them are in cache by the time any of these sections is reached. */

.strata {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.strata-plane {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
}

/* the section's own content must sit above its world */
[data-strata] ~ .container,
[data-strata] ~ .container-fluid { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- whats-new: SKY ALONE
   The hero shows the whole valley. This shows only what is above it: stars and cloud, no ground at
   all, wide and high, dissolving downward into the section. You have just left the world and this
   is what is still overhead. */
.strata.is-sky {
  top: 0;
  width: min(150%, 1900px);
  aspect-ratio: 1536 / 470;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,0.34) 72%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,0.34) 72%, rgba(0,0,0,0) 100%);
}
.strata.is-sky .strata-plane { top: 0; opacity: 0.30; }

/* ---------------------------------------------------------------- mobile: A RIDGE LINE
   The mid plane only, zoomed hard and anchored to the floor so nothing but the silhouette of the
   far ridges shows along the bottom edge. No sky, no city, no ground you could stand on. */
.strata.is-ridge {
  bottom: 0;
  width: min(210%, 2600px);
  aspect-ratio: 1536 / 300;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 40%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 40%, #000 100%);
}
.strata.is-ridge .strata-plane { bottom: 0; top: auto; opacity: 0.26; }

/* ---------------------------------------------------------------- how-it-works: THE NEAR GROUND
   The fore plane at the largest scale anywhere on the page, so this reads as standing ON the ground
   rather than looking at it from across the valley. The guard comes forward in this section, and it
   needs something to come forward over. */
.strata.is-ground {
  bottom: 0;
  width: min(240%, 3000px);
  aspect-ratio: 1536 / 380;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 34%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 34%, #000 100%);
}
.strata.is-ground .strata-plane { bottom: 0; top: auto; opacity: 0.38; }

/* ---------------------------------------------------------------- requirements: THE FAR VALLEY
   The only placement NARROWER than the viewport. Everything else is zoomed in; this pulls back, so
   after standing on the ground the world is small and distant again. Two planes, both faint, with
   the near one offset so they separate. */
.strata.is-far {
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(96%, 1200px);
  aspect-ratio: 1536 / 640;
  -webkit-mask-image: radial-gradient(72% 66% at 50% 52%, #000 0%, #000 46%, rgba(0,0,0,0.3) 78%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(72% 66% at 50% 52%, #000 0%, #000 46%, rgba(0,0,0,0.3) 78%, rgba(0,0,0,0) 100%);
}
.strata.is-far .strata-plane:nth-child(1) { top: 0; opacity: 0.22; }
.strata.is-far .strata-plane:nth-child(2) { top: 26%; opacity: 0.28; }

/* ---------------------------------------------------------------- the foot: THE RETURN
   The only place on the page where all three planes appear together, in their true relationship, at
   full strength and the largest complete scale. Everywhere above is partial and dim: one plane, or
   two faint ones. That is what makes this an arrival rather than one more band. */
.strata.is-return {
  bottom: 0;
  width: min(165%, 2400px);
  aspect-ratio: 1536 / 720;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 22%, #000 52%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 22%, #000 52%, #000 100%);
}
.strata.is-return .strata-plane { bottom: 0; top: auto; }
.strata.is-return .strata-plane:nth-child(1) { opacity: 0.55; }   /* sky */
.strata.is-return .strata-plane:nth-child(2) { opacity: 0.80; }   /* mid */
.strata.is-return .strata-plane:nth-child(3) { opacity: 1;    }   /* fore, full */

/* the foot band is its own strip between the last section and the footer */
.strata-foot {
  position: relative;
  height: 62vh;
  min-height: 380px;
  overflow: hidden;
}

html[data-motion="still"] .strata-plane { transform: none !important; }

/* THE FOOT. The band used to stop above the footer, and its own mask reaches full opacity at its
   bottom, so the lit valley cut off square against the dark footer: a hard horizontal edge across
   the full width, which is the fault class this whole redesign has been chasing all day.

   The ground has to CONTINUE under the footer instead of stopping above it, the way it does on
   guardian-forge. The strip and the footer are one block now, the world is anchored to the bottom of
   the block, and the footer's own content sits above it. The footer's background is transparent, so
   nothing had to be recoloured for the world to show through. */
.echorb-foot { position: relative; }
.echorb-foot .strata-foot { position: absolute; inset: 0; height: auto; min-height: 0; }
.echorb-foot > footer { position: relative; z-index: 2; }

/* The footer's two top rules were drawn for a flat dark footer, where a hairline reads as a
   divider. Over the painting it reads as a fault: a 1px line running edge to edge straight through
   the mountains, which is what Giovanni saw. Both go, and only here, because the shine line is
   style.css's and belongs to every other footer on the site.
     border-top      1px rgba(255,0,255,0.2)          secondary.css
     footer::before  1px animated neon-blue sweep      style.css
   The separation the rules were there to give is already done by the world itself: the ground
   arrives behind the footer, which is the whole point of the return band. */
.echorb-foot > footer.orb-sec-footer { border-top: 0; }
.echorb-foot > footer.orb-sec-footer::before { content: none; }
.echorb-foot .strata.is-return {
  /* tall enough to cover the strip AND the footer, so there is no lower edge to see */
  aspect-ratio: auto;
  height: 100%;
  min-height: 31vh;
}

/* THE TIPS OF THE MOUNTAINS ONLY. The strip was 62vh of full scene and read as too big. It is half
   that now, and the world is pushed down so what shows between the FAQ and the footer is the peaks,
   with the rest of the range continuing down behind the footer rather than being cropped away. */
.echorb-foot .strata.is-return .strata-plane { bottom: var(--foot-drop, -26%); } 

/* A percentage `bottom` resolves against the CONTAINING BLOCK, not against the plane, and at a phone
   width the fore plane is only about 194px tall inside a 641px block, so a -26% drop pushed it
   almost entirely out of the strip. The return measured DARKER than two of the placements above it
   at 390x844, which is the arrival flattening, exactly the risk of halving the height.

   Same fix as the reflection's on a narrow frame: widen the scene so the planes are tall enough to
   fill the strip, and drop them by much less. */
@media (max-width: 760px) {
  .strata.is-return { width: min(330%, 2400px); }
  /* and lifted, so what sits between the FAQ and the footer is the RIDGE LINE rather than sky.
     At -7% the peaks landed in the bottom fifth of the strip and the strip read as empty sky. */
  .echorb-foot .strata.is-return .strata-plane { bottom: 6%; }
}