/* ============================================================
   TORVO — the fly-through (frankly.html).
   Scroll drives a camera forward through 3D space; each panel
   of the install snaps into focus as you fly through it.
   Blur → sharp is the brand's motion law at page scale.
   Orange appears only on what Torvo found.
   ============================================================ */

.fly-track { height: calc(var(--stages) * 120vh); position: relative; }

.fly-viewport {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  perspective: 1100px; perspective-origin: 50% 50%;
}

.fly-camera {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.fly-panel {
  position: absolute; left: 50%; top: 50%;
  width: min(760px, 88vw);
  transform-style: preserve-3d;
  opacity: 0;
  will-change: opacity, filter;
  padding: 10px;
  text-align: center;
}

/* type inside panels */
.fp-eyebrow {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px;
}
.fly-panel.find .fp-eyebrow { color: var(--orange); }
.fp-title { font-size: clamp(64px, 12vw, 140px); letter-spacing: -0.02em; }
.fp-h { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; }
.fp-lede { margin-top: 22px; font-size: clamp(17px, 2vw, 21px); color: var(--ink-soft); }
.fp-body { margin-top: 20px; font-size: clamp(15.5px, 1.8vw, 18px); color: var(--ink-soft); line-height: 1.6; }
.fp-sig { color: var(--orange); font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.45; }
.fp-receipt { margin-top: 18px; font-size: 13.5px; color: var(--ink-faint); letter-spacing: 0.04em; }
.fp-hint { margin-top: 40px; color: var(--ink-faint); font-size: 14px; animation: hint-bob 2.2s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translateY(6px); opacity: 0.5; } }

.fp-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 24px; }
.fp-chips span {
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 15px; font-size: 13.5px; color: var(--ink-soft);
  background: rgba(13, 20, 48, 0.6);
}

.fp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 34px; margin-top: 30px; }
.fs-num { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 5vw, 52px); color: var(--orange); letter-spacing: -0.02em; }
.fs-label { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.fp-note { margin-top: 26px; font-size: 12.5px; color: var(--ink-faint); }
.fp-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* the dust field — depth cues; orange dots only at the finds */
.fly-dust i {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}
.fly-dust i.found { background: var(--orange); opacity: 0.8; width: 4px; height: 4px; }

/* progress: how deep into the install you are */
.fly-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  background: rgba(255, 255, 255, 0.07);
}
.fly-progress-fill { height: 100%; width: 0%; background: rgba(255, 255, 255, 0.45); }
.fly-progress-label { font-size: 13px; color: var(--ink-faint); }

/* ---------- reduced motion / fallback: a calm vertical read ---------- */
.fly-static .fly-track { height: auto; }
.fly-static .fly-viewport { position: static; height: auto; overflow: visible; perspective: none; }
.fly-static .fly-camera { position: static; transform: none !important; }
.fly-static .fly-panel {
  position: relative; left: auto; top: auto;
  transform: none !important; opacity: 1 !important; filter: none !important;
  margin: 14vh auto;
}
.fly-static .fly-dust, .fly-static .fly-progress, .fly-static .fp-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fp-hint { animation: none; }
}