/* ==========================================================================
   LVS AirSearch — home page (loader + pinned scroll-explosion sequence)
   ========================================================================== */

:root{
  --sequence-length: 510vh;
}

/* Phones and portrait tablets walk through the components one at a time
   (see the compact layout in home.js), so give each of them more scroll. */
@media (max-width: 600px), (max-width: 900px) and (max-aspect-ratio: 1/1), (max-height: 559px) and (min-aspect-ratio: 1/1){
  :root{ --sequence-length: 640vh; }
}

main{ padding-top: 0; }

/* ---------- Loader ---------- */

#loader{
  position: fixed;
  inset: 0;
  background: var(--studio-1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-mark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.loader-rail{
  width: min(220px, 60vw);
  height: 2px;
  background: var(--hairline);
  overflow: hidden;
}

.loader-fill{
  height: 100%;
  width: 0%;
  background: var(--signal);
  transition: width 0.15s ease-out;
}

.loader-pct{
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--slate);
}

/* ---------- Pinned sequence (Home) ---------- */

.pin-section{
  position: relative;
  height: var(--sequence-length);
}

.pin-wrap{
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  counter-reset: label-number;
  background:
    radial-gradient(80% 55% at 50% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--studio-1) 0%, var(--studio-2) 100%);
}

.studio-shadow{
  position: absolute;
  left: 59%; /* matches the drone's horizontal center — see dx in home.js */
  bottom: 9%;
  width: 50%;
  height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(30,32,36,0.24), rgba(30,32,36,0) 72%);
  filter: blur(3px);
  z-index: 0;
}

#sequence-canvas{
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

/* Connector lines from each label to its exact spot on the drone — drawn
   here (not as a div per label) so a line can run at any angle once
   positionLabels() nudges a label to avoid overlapping its neighbor.
   Split into two layers on purpose: the "back" layer (just the lines)
   sits BEHIND the canvas, so a line tucks in behind any opaque drone part
   it crosses (propeller blades, arms) instead of drawing over it — the
   frames are transparent PNGs, so it only shows through empty space. The
   "front" layer (just the dots) stays above the canvas so the marker
   itself is always visible, even though it sits right on an opaque part
   of the drone by definition. */
.callout-lines{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.callout-lines--back{ z-index: 0; }
.callout-lines--front{ z-index: 4; }

.callout-lines line{
  stroke: var(--signal);
  stroke-width: 1;
}

.callout-lines circle{
  fill: var(--signal);
}

.progress-rail{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--hairline);
  z-index: 6;
}

.progress-fill{
  height: 100%;
  width: 0%;
  background: var(--signal);
}

.scroll-fade{
  position: absolute;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 5;
}

.scroll-hero{
  --hero-w: 460px;
  top: 7.5rem;
  left: 10%;
  width: var(--hero-w);
  text-align: left;
}

.scroll-hero h1{
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.scroll-hero p{
  margin: 0;
  max-width: 34ch;
  color: var(--slate);
  font-size: 1.1rem;
  line-height: 1.6;
}

.scroll-cue{
  top: auto;
  bottom: 2.6rem;
  left: 7%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--slate);
  font-size: 0.85rem;
}

.scroll-cue svg{ animation: cue-bob 1.8s ease-in-out infinite; }

@keyframes cue-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(5px); }
}

.technical-head{
  top: 7.5rem;
  left: 7%;
}

.technical-head h2{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.technical-head h2::before{
  content: "";
  width: 8px;
  height: 8px;
  background: var(--signal);
  display: inline-block;
}

.label{
  max-width: 240px;
  counter-increment: label-number;
}

/* The box sits at a fixed screen-edge margin (plain, responsive CSS) —
   only its vertical position is computed in home.js. The leader line
   dynamically bridges the gap from this edge to the exact component
   position on the drone, so it stays accurate at any window size without
   the label box itself ever overlapping the drone artwork. */
.label--point-left{ right: 9%; }
.label--point-right{ left: 9%; }

/* Pushed further out than the shared margin — its anchor sits close to
   where the drone artwork is widest at this row, so the extra reach keeps
   the box (and its now-longer connector) clear of it. */
.label--compute{ right: 17%; }

.label h3{
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.label p{
  margin: 0;
  color: var(--slate);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Vertical position (top) is computed and set inline by positionLabels()
   in home.js — it tracks each label's data-anchor-x/data-anchor-y fraction
   against the drone's actual on-screen box, then nudges labels apart if
   they'd otherwise overlap a neighbor on the same side. The connector to
   the drone itself is drawn in the #callout-lines SVG layer above, since a
   nudged label needs an angled line, not just a horizontal one. Adjust the
   anchor points in index.html, not here. */

/* ---------- Specs row (revealed once the drone is fully exploded) ---------- */

.specs-row{
  left: 7%;
  right: 7%;
  bottom: 2.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.spec-item{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.specs-row .spec-value{
  font-family: var(--font-data);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--ink);
}

.specs-row .spec-label{
  font-size: 0.82rem;
  color: var(--slate);
}

/* ---------- Compact layout (phones, portrait tablets) ----------
   home.js adds .is-compact to the pinned wrapper. Callouts stop being
   side labels with pointer lines: the drone gets numbered markers and a
   single caption slot at the bottom shows one component at a time. */

.callout-badge{ display: none; }

.pin-wrap.is-compact .callout-badge{ display: block; }
.pin-wrap.is-compact .callout-lines--back line,
.pin-wrap.is-compact .callout-dot{ display: none; }

.callout-badge{ pointer-events: none; outline: none; }

/* Markers are buttons in compact mode, but only once they've appeared. */
.pin-wrap.is-compact .callout-badge.is-visible{
  pointer-events: auto;
  cursor: pointer;
}

/* Invisible, finger-sized hit area around each marker. !important because
   the active/inactive colour rules below would otherwise paint it. */
.callout-badge .callout-hit{
  fill: transparent !important;
  stroke: none !important;
}

.callout-badge:focus-visible circle:not(.callout-hit){
  stroke-width: 3;
}

.callout-badge circle{
  fill: #fff;
  stroke: var(--signal);
  stroke-width: 1.5;
  transition: fill 0.2s ease;
}

.callout-badge text{
  fill: var(--signal);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  transition: fill 0.2s ease;
}

.callout-badge.is-active circle{ fill: var(--signal); }
.callout-badge.is-active text{ fill: #fff; }

.pin-wrap.is-compact .label{
  left: 1.5rem;
  right: 1.5rem;
  width: auto;
  max-width: none;
}

.pin-wrap.is-compact .label h3{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
}

.pin-wrap.is-compact .label h3::before{
  content: counter(label-number);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 600;
}

.pin-wrap.is-compact .label p{
  padding-left: 2.15rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* One-line hint under the section title, only where markers are tappable. */
.technical-hint{ display: none; }

.pin-wrap.is-compact .technical-hint{
  display: block;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--slate);
}

/* Smooths the switch when a marker is tapped (scroll-driven fades are
   unaffected in practice: they change in small steps). */
.pin-wrap.is-compact .label{ transition: opacity 0.2s ease; }

/* Landscape phone: text in a left column, drone on the right. */
.pin-wrap.is-landscape .technical-head{ top: 5.2rem; left: 5%; }
.pin-wrap.is-landscape .technical-head h2{ font-size: clamp(1.4rem, 3.6vw, 1.9rem); }
.pin-wrap.is-landscape .scroll-hero{ top: 5.2rem; left: 5%; --hero-w: 38vw; }
.pin-wrap.is-landscape .scroll-hero h1{ font-size: clamp(1.6rem, 4.2vw, 2.2rem); }
.pin-wrap.is-landscape .scroll-hero p{ font-size: 0.95rem; }
.pin-wrap.is-landscape .scroll-cue{ bottom: 1rem; left: 5%; }
.pin-wrap.is-landscape .label{ left: 5%; right: auto; width: 35vw; }

/* The captions use the bottom of the screen on phones. */
.pin-wrap.is-compact .specs-row{ display: none; }

@media (max-width: 600px){
  /* Two lines of headline on every phone, down to 320px wide. */
  .scroll-hero h1{ font-size: clamp(1.85rem, 8.6vw, 2.3rem); }
  .scroll-hero p{ font-size: 1rem; }
}

@media (max-width: 760px){
  .technical-head{ top: 6.2rem; left: 6%; }
  .technical-head h2{ font-size: clamp(1.45rem, 6.2vw, 1.9rem); gap: 0.5rem; }
  .scroll-hero{
    top: 6.2rem;
    --hero-w: 88vw;
  }
  .scroll-cue{ left: 6%; }
  .label{ max-width: 180px; }

  .specs-row{
    left: 6%;
    right: 6%;
    bottom: 1.4rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue svg{ animation: none; }
  #loader{ transition: none; }
}