/* Us in action: centred heading over the field trial videos, with sparks and embers rising off the red glow below, in the shared media
   viewer like Product (styles/viewer.css: one video at a time, arrows over its sides, thumbnails under it; field.js). The shown video
   loops a short silent preview while on screen and opens full screen in a modal dialog with a × to close. The viewer reveals at the
   reading line and the content fades out as the section leaves, like Specifications. */
/* the page's closing gradient (--glow-* in tokens.css) starts 15% into this section and rises on an eased curve (barely at first,
   steady by the bottom: 12%, 38%, 69% of the way at the quarter stops), so the black gives way to red without a visible edge; its
   left-to-right lift (--glow-side) is faded in from black on the same curve, arriving at full strength at the contact section */
.field {
  position: relative;
  z-index: 3;
  overflow-x: clip;
  background:
    linear-gradient(var(--bg) 15%, color-mix(in srgb, var(--bg) 88%, transparent) 36%, color-mix(in srgb, var(--bg) 62%, transparent) 57%,
      color-mix(in srgb, var(--bg) 31%, transparent) 79%, transparent) top / 100% calc(100% - 2px) no-repeat,
    var(--glow-side),
    linear-gradient(var(--bg) 15%, color-mix(in srgb, var(--glow-1) 12%, var(--bg)) 36%, color-mix(in srgb, var(--glow-1) 38%, var(--bg)) 57%,
      color-mix(in srgb, var(--glow-1) 69%, var(--bg)) 79%, var(--glow-1));
  padding: 64px var(--gutter) 72px;
  /* reaches 1px into the contact section (it sits above it, z-index 3 over 2): the 16:9 frame and thumbnails leave this section a
     fractional height, and phones then show the page black through a hairline gap at the seam; the two meet on the same colour. The
     black fade stops 2px short of the bottom (it is all but clear there): ending on that fractional edge with the layers under it, it
     left a dark hairline along the seam at fractional pixel ratios */
  margin-bottom: -1px;
  display: grid;
  justify-items: center;
}

/* sparks and embers rising off the red glow in the lower half, after the contact map's strike (its ember and debris colours, added onto
   the glow like its additive blast): two layers of dots, each a column taller than the box by one tile height and moved up by exactly that
   per loop (transform only, so it stays on the compositor), swaying side to side; embers few, large and slow, sparks small, bright and fast.
   Each layer is one wide SVG tile of scattered dots (seeded positions, kept off the tile's edges so none is cut at a seam), so the field
   never reads as rows. The box runs from 60px above the section to 85% of it, so the sparks stay out of the contact section and its map
   below, and is masked so they fade in a little above its bottom edge, stay bright up past the heading (it starts 88px into the section
   on phones, 144px wider) and die out over its last 120px, above the heading. Not shown under reduced motion */
.field-sparks {
  position: absolute;
  z-index: -1;
  inset: -60px 0 15%;
  overflow: hidden;
  pointer-events: none;
  mask: linear-gradient(to top, transparent, #000 25%, #000 calc(100% - 120px), transparent);
  mix-blend-mode: plus-lighter;
  opacity: .35;
}

.field-sparks i {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + var(--tile-h));
  animation: field-rise var(--rise) linear infinite, field-sway var(--sway) ease-in-out infinite alternate;
}

.field-sparks i:first-child {
  --tile-h: 1200px;
  --rise: 30s;
  --sway: 5s;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cdefs%3E%3CradialGradient id='a'%3E%3Cstop offset='0' stop-color='%23ffd0a0'/%3E%3Cstop offset='.35' stop-color='%23ff6a2a'/%3E%3Cstop offset='1' stop-color='%23ff6a2a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%23ffb070'/%3E%3Cstop offset='.35' stop-color='%23ff4306'/%3E%3Cstop offset='1' stop-color='%23ff4306' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='538.4' cy='385.3' r='1.5' fill='url(%23a)'/%3E%3Ccircle cx='1018.1' cy='495.7' r='3.3' fill='url(%23b)'/%3E%3Ccircle cx='562.3' cy='568.4' r='2.4' fill='url(%23a)'/%3E%3Ccircle cx='273.5' cy='843.5' r='5.6' fill='url(%23b)'/%3E%3Ccircle cx='461.1' cy='700.4' r='1.6' fill='url(%23a)'/%3E%3Ccircle cx='463.9' cy='126.5' r='1.7' fill='url(%23b)'/%3E%3Ccircle cx='872.9' cy='705.3' r='8.1' fill='url(%23a)'/%3E%3Ccircle cx='575.3' cy='297.7' r='8.2' fill='url(%23b)'/%3E%3Ccircle cx='943.6' cy='43.2' r='8.4' fill='url(%23a)'/%3E%3Ccircle cx='688.2' cy='842.9' r='6.1' fill='url(%23b)'/%3E%3Ccircle cx='465.6' cy='1041.2' r='2.0' fill='url(%23a)'/%3E%3Ccircle cx='132.4' cy='726.1' r='7.7' fill='url(%23b)'/%3E%3Ccircle cx='391.8' cy='1057.6' r='6.5' fill='url(%23a)'/%3E%3Ccircle cx='852.2' cy='951.2' r='4.9' fill='url(%23b)'/%3E%3C/svg%3E") 0 0 / 1200px var(--tile-h);
}

.field-sparks i:last-child {
  --tile-h: 840px;
  --rise: 12s;
  --sway: 3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='840'%3E%3Ccircle cx='379.1' cy='397.2' r='0.5' fill='%23fff6d8'/%3E%3Ccircle cx='381.4' cy='153.1' r='0.5' fill='%23ffd27a'/%3E%3Ccircle cx='549.7' cy='768.5' r='2.0' fill='%23ffc070'/%3E%3Ccircle cx='969.9' cy='825.1' r='0.5' fill='%23fff6d8'/%3E%3Ccircle cx='563.8' cy='313' r='0.7' fill='%23ffd27a'/%3E%3Ccircle cx='643.1' cy='421.8' r='0.7' fill='%23ffc070'/%3E%3Ccircle cx='532.2' cy='220.4' r='2.9' fill='%23fff6d8'/%3E%3Ccircle cx='568' cy='756.5' r='0.5' fill='%23ffd27a'/%3E%3Ccircle cx='166.1' cy='798.5' r='0.6' fill='%23ffc070'/%3E%3Ccircle cx='292.4' cy='687.7' r='1.7' fill='%23fff6d8'/%3E%3Ccircle cx='871.4' cy='406.3' r='0.5' fill='%23ffd27a'/%3E%3Ccircle cx='236.6' cy='92.3' r='0.5' fill='%23ffc070'/%3E%3Ccircle cx='865.9' cy='225.2' r='2.0' fill='%23fff6d8'/%3E%3Ccircle cx='343.5' cy='716.7' r='0.9' fill='%23ffd27a'/%3E%3Ccircle cx='10.9' cy='26.8' r='2.7' fill='%23ffc070'/%3E%3Ccircle cx='556.1' cy='252.4' r='0.7' fill='%23fff6d8'/%3E%3Ccircle cx='320.5' cy='534' r='0.7' fill='%23ffd27a'/%3E%3Ccircle cx='493.1' cy='630.7' r='1.1' fill='%23ffc070'/%3E%3Ccircle cx='650.6' cy='415.7' r='3.2' fill='%23fff6d8'/%3E%3Ccircle cx='269.7' cy='417.7' r='2.7' fill='%23ffd27a'/%3E%3Ccircle cx='459.9' cy='257.1' r='3.2' fill='%23ffc070'/%3E%3Ccircle cx='509.3' cy='106.4' r='0.6' fill='%23fff6d8'/%3E%3Ccircle cx='810' cy='417.1' r='0.5' fill='%23ffd27a'/%3E%3Ccircle cx='219.6' cy='644.2' r='0.8' fill='%23ffc070'/%3E%3Ccircle cx='112.2' cy='479.1' r='2.4' fill='%23fff6d8'/%3E%3Ccircle cx='203.4' cy='429.6' r='3.0' fill='%23ffd27a'/%3E%3Ccircle cx='396' cy='144.3' r='1.8' fill='%23ffc070'/%3E%3Ccircle cx='827.1' cy='605.5' r='1.7' fill='%23fff6d8'/%3E%3Ccircle cx='286.8' cy='203.3' r='1.9' fill='%23ffd27a'/%3E%3Ccircle cx='910' cy='577' r='0.7' fill='%23ffc070'/%3E%3Ccircle cx='423.9' cy='431' r='0.8' fill='%23fff6d8'/%3E%3Ccircle cx='737.3' cy='21.4' r='0.8' fill='%23ffd27a'/%3E%3Ccircle cx='776.1' cy='25.4' r='0.5' fill='%23ffc070'/%3E%3Ccircle cx='486.5' cy='514' r='2.3' fill='%23fff6d8'/%3E%3Ccircle cx='837.9' cy='809.7' r='0.6' fill='%23ffd27a'/%3E%3Ccircle cx='253.5' cy='147.8' r='0.7' fill='%23ffc070'/%3E%3Ccircle cx='476' cy='828.5' r='1.3' fill='%23fff6d8'/%3E%3Ccircle cx='470.1' cy='160.8' r='0.5' fill='%23ffd27a'/%3E%3Ccircle cx='602.2' cy='824.4' r='1.2' fill='%23ffc070'/%3E%3Ccircle cx='93' cy='391.3' r='0.6' fill='%23fff6d8'/%3E%3Ccircle cx='826' cy='68.8' r='2.3' fill='%23ffd27a'/%3E%3Ccircle cx='719.8' cy='714.1' r='0.6' fill='%23ffc070'/%3E%3Ccircle cx='366.7' cy='159.6' r='0.6' fill='%23fff6d8'/%3E%3Ccircle cx='655.6' cy='123' r='0.5' fill='%23ffd27a'/%3E%3Ccircle cx='347' cy='536.6' r='0.7' fill='%23ffc070'/%3E%3Ccircle cx='36.7' cy='470.8' r='0.5' fill='%23fff6d8'/%3E%3C/svg%3E") 0 0 / 1000px var(--tile-h);
}

@keyframes field-rise {
  to { transform: translateY(calc(-1 * var(--tile-h))); }
}

@keyframes field-sway {
  from { translate: -12px 0; }
  to { translate: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .field-sparks { display: none; }
}

/* the heading, then the viewer when its top reaches the reading line */
.field :is(h2, .viewer) { transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }

.field :is(h2, .viewer)[data-state="pending"] {
  opacity: 0;
  translate: 0 24px;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .field { view-timeline: --field block; }

    .field > :not(.field-sparks) {
      animation: field-out linear both;
      animation-timeline: --field;
      animation-range: exit 40% exit 100%;
    }
  }
}

@keyframes field-out {
  to { opacity: 0; }
}

.field-stage {
  display: grid;
  width: 100%;
  max-width: 1280px;
}

.field h2 {
  margin: 0 0 72px;
  text-align: center;
  font: 800 clamp(28px, 3.4vw, 52px)/1.1 var(--font-display);
  font-synthesis: none;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* the viewer centred under the heading, its frame at most 880px wide */
.field-viewer {
  justify-self: center;
  width: 100%;
  --frame-max: 880px;
  max-width: var(--frame-max);
}

/* each slide is a button holding its preview in a 16:9 box with its corners rounded, the video shown whole at its own ratio on the page
   black (most are 16:9; the full mission cycle is a little taller, the sped-up planning wider); height auto, or the height attribute
   overrides the ratio. The video's title sits under it, so the title
   changes with the slide shown (the tile's aria-label already reads it out). The frame drops the shared 16:9 ratio and takes the tile's
   height instead; it is a size container so the arrows can centre on the video rather than on video and title together (below) */
.field-viewer .viewer-frame {
  aspect-ratio: auto;
  border-radius: 0;
  container-type: inline-size;
}

.field-tile {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  cursor: zoom-in;
}

.field-tile video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg);
}

/* set like the Why Sentry item titles (features.css .feat h3); no room is held for the longest title, so the thumbnails sit right under
   a short one and move with the title's line count as the slides change (on a tap, so not counted as layout shift) */
.field-tile-title {
  padding-top: 12px;
  color: var(--ink);
  font: 500 var(--text-title)/1.15 var(--font-body);
  text-align: start;
  text-wrap: balance;
}

@media (min-width: 761px) {
  .field-tile-title {
    padding-top: 16px;
    font-size: clamp(20px, 1.7vw, 26px);
  }
}

.field-tile:focus-visible {
  outline: 2px solid var(--circle-base);
  outline-offset: -2px;
}

/* phones flip the videos by swipe and thumbnails, with no arrows over the picture; wider screens show them beside the frame (below) */
.field-viewer .viewer-arrow { display: none; }

/* the poster thumbnails share the frame's width equally and sit on the page black, not the photo thumbnails' white; on phones six across
   would leave each a thin strip at 16:9, so they are square (cropped to the centre) and go back to 16:9 on wider screens */
.field-viewer .viewer-thumb {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  background: var(--bg);
}

@media (min-width: 761px) {
  .field { padding: 120px var(--gutter); }

  .field h2 { margin-bottom: 120px; }

  .field-viewer .viewer-thumb { aspect-ratio: 16 / 9; }

  /* the arrows leave the picture for the space beside the frame: the viewer widens by their room on each side and pads it back in, so
     the frame and thumbnails keep their width; phones have no room beside it and go without them */
  .field-viewer {
    --arrow-room: 72px;
    max-width: calc(var(--frame-max) + 2 * var(--arrow-room));
    padding-inline: var(--arrow-room);
  }

  .field-viewer .viewer-frame { overflow: visible; }

  /* centred on the 16:9 video (half its height, from the frame's width), not on the frame, which also holds the title */
  .field-viewer .viewer-arrow { display: grid; top: calc(100cqi * 9 / 32); }

  .field-viewer .viewer-arrow-prev { left: calc(-1 * var(--arrow-room)); }
  .field-viewer .viewer-arrow-next { right: calc(-1 * var(--arrow-room)); }

}

@media (min-width: 1024px) {
  .field h2 { margin-bottom: 144px; }
}