/* Products, rebuilt as two structures standing in the world the crossing ends in.

   What it replaces: a container holding two equal col-lg-6 cards on a pair of radial gradients.
   That shape is what made the section read as a brochure, and tinting it a different colour was
   never going to change that. So the change here is structural, not chromatic:

     - the ground the hero ended on carries on behind the section, so the visitor has not left
     - the two products are different sizes, at different heights, overlapping
     - the flagship breaks the container and runs off the right edge of the screen
     - the world shows between and behind them instead of a flat panel
     - the header is off the centre axis

   Loads after style.css and body.css, and every selector is under .products-world, so nothing
   outside this section moves. */

.products-world {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 0 0 clamp(4rem, 9vw, 8rem);
  background: var(--cx-void, #04010b);
}

/* The section's own gradient wash is what "structure over tint" is a reaction to. */
.products-world > .orb-body-pool {
  display: none;
}

/* ---------- the ground continues ---------- */

/* The same two layers the hero's world is cut from, so the land under the section is literally the
   land the crossing ended on. Same URLs, so they come from cache and cost no bytes. They hang from
   the top of the section and dissolve downward into the void. */
.products-land {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(178%, 2200px);
  /* it needs a height of its own: absolutely positioned with only absolutely positioned children it
     collapses to nothing, and a mask on a zero-height box hides the lot */
  aspect-ratio: 1536 / 940;
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0.5) 58%, rgba(0, 0, 0, 0.18) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0.5) 58%, rgba(0, 0, 0, 0.18) 80%, rgba(0, 0, 0, 0) 100%);
}

.products-land img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
}

/* The second band, lower down. The painted layers are only about 830px tall however large the box
   is, so extending the first one just adds empty space; the valley has to be placed again to be
   present where the lower half of the section is. */
.products-land.is-low {
  top: auto;
  bottom: 0;
  aspect-ratio: 1536 / 700;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 26%, #000 58%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 26%, #000 58%, #000 100%);
}

.products-land.is-low img {
  top: auto;
  bottom: 0;
}

.products-land .products-land-low { opacity: 0.34; }
.products-land .products-land-near { z-index: 1; opacity: 0.62; }
.products-land .products-land-fore { z-index: 2; opacity: 0.78; top: 8%; }

/* A horizon glow where the ground meets the dark, so the join is atmosphere and not an edge. */
/* The far side of the valley at the foot of the section, so it hands on to whatever follows still
   inside the world rather than ending on a flat panel. */
.products-world::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150%;
  height: 30%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(24, 6, 52, 0.95), rgba(4, 1, 11, 0) 74%),
    radial-gradient(38% 62% at 22% 100%, rgba(0, 150, 255, 0.13), rgba(4, 1, 11, 0) 70%),
    radial-gradient(34% 56% at 78% 100%, rgba(255, 107, 0, 0.10), rgba(4, 1, 11, 0) 70%);
}

.products-world::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 140%;
  height: 46%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(0, 140, 255, 0.16), rgba(4, 1, 11, 0) 72%);
}

/* ---------- the field ---------- */

.products-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, 82rem);
  margin: 0 auto;
  padding-top: clamp(4rem, 10vw, 9rem);
}

/* Off the centre axis. The centred header over two centred columns is the brochure. */
.products-world .section-header {
  text-align: left;
  max-width: 34rem;
  margin: 0 0 clamp(2rem, 5vw, 4rem);
}

.products-field {
  position: relative;
  display: grid;
  /* deliberately not two equal columns */
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* A structure, not a card: no full border box, a lit face and a footing on the ground. */
.product-structure {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(14, 2, 30, 0.90), rgba(6, 1, 16, 0.82));
  border: 1px solid rgba(255, 0, 255, 0.16);
  border-top-color: rgba(0, 212, 255, 0.28);
  box-shadow: 0 30px 70px rgba(4, 1, 11, 0.7);
  will-change: transform;
}

/* The lit top edge, on both. Echorb had the same background and border as Guardian Forge but no
   drawn top, so with its left shoulder under the smaller panel it read as the unfinished one. */
.product-structure::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0) 0%, rgba(0, 212, 255, 0.75) 18%, rgba(255, 0, 255, 0.55) 72%, rgba(255, 0, 255, 0) 100%);
  pointer-events: none;
}

/* the footing: it stands on the ground rather than floating over it */
.product-structure::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -26px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 190, 255, 0.30), rgba(4, 1, 11, 0) 72%);
  pointer-events: none;
}

.product-structure.is-forge::after {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 107, 0, 0.26), rgba(4, 1, 11, 0) 72%);
}

/* Guardian Forge: smaller, set higher, further into the landscape. */
.product-structure.is-forge {
  margin-top: clamp(0rem, 3vw, 3rem);
  font-size: 0.94em;
  z-index: 2;
}

/* Echorb: the flagship. Larger, lower, nearer, and it runs off the right edge of the screen. */
.product-structure.is-echorb {
  margin-top: clamp(4rem, 11vw, 10rem);
  margin-right: calc(50% - 50vw);
  padding-right: max(clamp(1.6rem, 2.6vw, 2.4rem), calc(50vw - 50% + 1.25rem));
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1;
  /* it leaves the frame by dissolving into the world, not by being cut off at the edge */
  background: linear-gradient(97deg, rgba(14, 2, 30, 0.92) 0%, rgba(11, 2, 24, 0.88) 62%, rgba(8, 1, 19, 0.44) 88%, rgba(6, 1, 16, 0) 100%);
}

.product-structure.is-echorb::before {
  right: 0;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0) 0%, rgba(0, 212, 255, 0.75) 14%, rgba(255, 0, 255, 0.5) 58%, rgba(255, 0, 255, 0) 92%);
}

.product-structure.is-echorb::after {
  right: 22%;
}

/* they overlap: the smaller one stands in front of the larger one's shoulder */
@media (min-width: 992px) {
  .product-structure.is-forge {
    margin-right: -6%;
  }

  /* the overlap must not sit on Echorb's own edge or its content */
  .product-structure.is-echorb {
    padding-left: clamp(2.4rem, 5vw, 4.5rem);
  }
}

/* The mascot artwork carries its own navy ground, the same as on echorb.html. Screen blending and
   a soft radial mask drop that ground, so the square edge goes without re-cutting or regenerating
   any art. It was the only flat-edged object left in the frame. */
.product-structure .product-icon-echorb img {
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 47%, #000 56%, rgba(0, 0, 0, 0) 76%);
  mask-image: radial-gradient(circle at 50% 47%, #000 56%, rgba(0, 0, 0, 0) 76%);
}

/* ---------- the pair below, also not a 50/50 row ---------- */

.products-shots {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: end;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(3.5rem, 9vw, 7rem);
}

.products-shots-label {
  grid-column: 1 / -1;
  margin: 0 0 0.4rem;
}

.products-shot {
  display: block;
  text-decoration: none;
  position: relative;
  will-change: transform;
}

.products-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.products-shot.is-forge img {
  border-color: rgba(255, 107, 0, 0.3);
}

.products-shot.is-forge {
  margin-bottom: clamp(1.5rem, 5vw, 4.5rem);
}

.products-shot p {
  color: var(--light-gray);
  font-size: 0.8rem;
  text-align: left;
  margin-top: 0.75rem;
}

/* ---------- narrow frames ---------- */

@media (max-width: 991.98px) {
  .products-field,
  .products-shots {
    grid-template-columns: minmax(0, 1fr);
  }

  /* stacked, but still not two identical blocks: the flagship is wider and still leaves the frame */
  .product-structure.is-forge {
    width: 92%;
    margin-top: 0;
  }

  .product-structure.is-echorb {
    margin-top: clamp(2.5rem, 8vw, 5rem);
  }

  .products-shot.is-forge {
    width: 84%;
    margin-left: auto;
    margin-bottom: 0;
  }
}

/* ---------- reduced motion ---------- */

html[data-motion="still"] .products-land img,
html[data-motion="still"] .product-structure,
html[data-motion="still"] .products-shot {
  transform: none !important;
}