/* ═══════════════════════════════════════════════════════════════════
   ZEEKAY DEPTH ENGINE v1.0 — 3D Scroll Depth Layer
   Drop-in addition. Does NOT modify or override existing styles.
   Pairs with assets/js/depth.js
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Scroll Progress Bar (top of page) ─────────────────────────── */
.zk-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #c9a84c 0%, #e8c97a 50%, #c0392b 100%);
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.55);
}

/* ─── Depth Dust Canvas (global parallax star-field) ────────────── */
#zk-depth-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;            /* same layer as .bg-blobs, sits behind content */
  pointer-events: none;
}

/* ─── Sections that the engine animates ─────────────────────────── */
/* will-change is added/removed by JS only while a section is near
   the viewport, so we don't waste GPU memory here. We only set
   transform-origin + backface so rotation looks correct. */
.zk-depth {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

/* Hero camera-pull target */
.zk-hero-cam {
  transform-origin: 50% 0%;
  backface-visibility: hidden;
}

/* ─── Accessibility + print safety ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .zk-progress { display: none; }
  #zk-depth-canvas { display: none; }
}

@media print {
  .zk-progress,
  #zk-depth-canvas { display: none !important; }
}