/* Marzex Technologies, edition 4.3: the home hero film, on top of What we do (index.html #what-we-do, marzex-wwd.css,
   marzex-wwd-film.js). The clean intel-hero film plays in the lock-on photo's frame, opens to the full screen, runs to
   the globe's SIGNAL LOCK and zooms into the photo; from there What we do runs as in revamp.html. Without motion (no
   script, reduced motion) What we do is its plain layout and the frame shows the photo. Prototype:
   motion-graphics/hero-scroll (hero-film.css). */

/* ---------- Plain: the film layers stay out ---------- */
.hf__film, .trk { display: none; }

/* ---------- Scroll: ScrollTrigger moves the scroll position while it re-measures (any resize, browser zoom too).
   marzex.css's smooth scroll-behavior animated those moves, so a refresh away from the top measured the track from
   the wrong place and the top of the page played mid-sequence. Off while the sequence runs; the index rows still
   glide (the script scrolls them smoothly itself). ---------- */
html.wwd-live { scroll-behavior: auto; }

/* ---------- The card: the home page's frame, on the container like the hero above it (revamp's stands 24px off the
   screen edge). The figure keeps .wrap's side margins for the sizer and lets the frame fill the stage. ---------- */
.wwd__lock.wrap { margin-inline: auto; }   /* marzex-wwd.css zeroes the figure's margin */
.wwd-ready .wwd__lock.wrap { max-width: none; }
.wwd-ready .wwd__lock .wwd__sizer { max-width: var(--container); margin-inline: auto; }

/* ---------- Film: it and its 30x fast-forward clip fill the same 16:9 view as the photo, and zoom about the film's
   SIGNAL LOCK (1150, 470 of 1920 x 1080) ---------- */
.wwd-live .lock-view .hf__film {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  background: var(--ink); transform-origin: 59.9% 43.5%; will-change: transform, opacity;
}
.wwd-live .lock-view .hf__film--ff { visibility: hidden; }
.wwd-ready .lock-view .media, .wwd-ready .lock-view .lock { transform-origin: 32.4% 52.4%; }   /* the lock-on box centre in the photo */

/* The lock-on carries over from the globe's SIGNAL LOCK as the moving box (.wwd__ret), so the photo's own box and the
   load-time lock-on animations are off from first paint */
.wwd-live .lock__mark { display: none; }
.wwd-live .lock__scrim { animation: none; opacity: 0; }
.wwd-ready .wwd__ret-box, .wwd-ready .wwd__ret-box i, .wwd-ready .wwd__ret-tag { animation: none; }

/* ---------- Service lines (home): an objective, a label over the description. Plain, it starts the row after the
   line's number; live, it sits over the description bottom left and fades in with it (marzex-wwd-film.js). ---------- */
.wwd__obj { grid-column: 4 / 8; }
.wwd__obj .dim { margin-right: .5em; }
.wwd-live .wwd__obj { grid-column: 1 / 5; opacity: 0; }
@media (max-width: 768px) {
  .wwd__obj, .wwd-live .wwd__obj { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Tracking on the other three vessels, in the photo's pixels (the lock SVG's 2400 x 1350 view box) ---------- */
.wwd-ready .trk { display: inline; }
.trk path, .trk rect { fill: none; stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trk rect { stroke-width: 1; }
.trk text { fill: var(--paper); font: 400 22px/1 var(--label); letter-spacing: .06em; }
.trk .trk__sub { font-size: 18px; opacity: .6; }
.trk__v { opacity: 0; transform-box: view-box; }