/* flight.css: the real drone flight behind the hero + story, and the flight-report section.
   2026-09-17 v2: the three.js canvas is gone, so the footage is the only thing behind the copy. */
.flight{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--navy);pointer-events:none}
.flight img,.flight video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.flight video{opacity:0;transition:opacity .45s var(--ease)}
.flight video.is-painted{opacity:1}
.flight img{transition:opacity .45s .15s var(--ease)}
.flight img.is-hidden{opacity:0}

.story{height:420vh}

/* ---------- flight report: a real still with markers ---------- */
.fr-grid{display:grid;gap:1.3rem}
.fr-still{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(90,176,242,.16);box-shadow:var(--shadow-card);line-height:0}
.fr-still img{width:100%;height:auto;display:block}
.fr-still figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.1rem .8rem;font-family:var(--font-head);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#D7E2F2;font-weight:700;line-height:1.4;
  background:linear-gradient(180deg,rgba(6,10,20,0),rgba(6,10,20,.72))}

.mark{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:none;border:0;padding:0;transition:transform .25s var(--ease-out)}
.mark i{width:19px;height:19px;border-radius:50%;border:2px solid var(--c);background:rgba(255,255,255,.16);
  box-shadow:0 0 0 4px rgba(6,10,20,.28),0 2px 10px rgba(6,10,20,.6);transition:box-shadow .25s var(--ease-out)}
.mark::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--c);opacity:0;
  animation:markPing 2.6s var(--ease-out) infinite}
.mark.high{--c:var(--red)}
.mark.medium{--c:var(--amber)}
.mark.low{--c:var(--teal)}
.mark:nth-of-type(2)::after{animation-delay:.42s}
.mark:nth-of-type(3)::after{animation-delay:.84s}
.mark:nth-of-type(4)::after{animation-delay:1.26s}
.mark:nth-of-type(5)::after{animation-delay:1.68s}
.mark:nth-of-type(6)::after{animation-delay:2.1s}
.mark:hover,.mark.on{transform:scale(1.2)}
.mark:hover i,.mark.on i{box-shadow:0 0 0 8px rgba(6,10,20,.34),0 2px 14px rgba(6,10,20,.75)}
.mark:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mark:active{transform:scale(1.06)}
@keyframes markPing{0%{opacity:.8;transform:scale(1)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}

.fr-list .findings{max-height:none;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.fr-list .find{cursor:pointer;align-items:start}
.fr-list .find .status{align-self:center}

@media (max-width:1000px){
  .fr-list .findings{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- phones: the clip is a square crop, shown as a band with the copy beneath it,
   so the whole shot is on screen instead of a narrow slice of a 16:9 frame ---------- */
@media (max-width:700px){
  .flight{bottom:auto;height:min(100vw,52vh);height:min(100vw,52svh)}
  .flight video,.flight img{object-position:50% 50%}
  .vignette{bottom:auto;height:min(100vw,52vh);height:min(100vw,52svh)}
  .hero{align-items:start;padding-top:calc(min(100vw,52svh) + 1.4rem);padding-bottom:1.5rem}
  .scroll-cue{display:none}
  .hero-meta{display:none}
  .on-wide{display:none}
  .story{height:380vh}
  .beat{bottom:2.2rem}
  .beat .wrap{max-width:none}
  .mark{width:38px;height:38px;margin:-19px 0 0 -19px}
  .mark i{width:16px;height:16px}
  .fr-list .findings{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.mark::after{animation:none}}