/* ============================================================
   PARALLAX / DEPTH SYSTEM — hero layers + ambient drift
   JS (parallax.js) writes --px/--py (-1..1) + --mx/--my (%) on
   .hero / .page-hero. These rules turn those into REAL layer
   movement: pattern drifts with pointer, gold sheen follows it,
   ambient keyframes keep the hero alive without input.
   ============================================================ */

/* ---------- hero pseudo geometry (base has none for ::after) ---------- */
.hero::before {
  /* dot pattern (base styles it) — now given pointer depth */
  transform: translate3d(
    calc(var(--px, 0) * 10px),
    calc(var(--py, 0) * 8px), 0);
  transition: transform 0.1s linear;
  will-change: transform;
}

.hero::after {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: 1;                    /* under .hero-inner (z-index:2) */
  pointer-events: none;
  background: radial-gradient(560px 380px at var(--mx, 70%) var(--my, 20%),
    rgba(200, 169, 81, 0.13), transparent 64%);
}

/* ---------- page-hero (internal pages): pattern depth ---------- */
.page-hero::after {
  transform: translate3d(
    calc(var(--px, 0) * 7px),
    calc(var(--py, 0) * 6px), 0);
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ---------- generic [data-parallax] elements (future use) ---------- */
[data-parallax] {
  will-change: transform;
  transform: translate3d(
    calc(var(--px, 0) * var(--depth, 0) * 1px),
    calc(var(--py, 0) * var(--depth, 0) * 1px),
    0);
}

/* ---------- ambient drift — imperceptible light movement ----------
   Animated on the .hero-bg layer (not .hero itself): a scale() on the
   hero element painted its background over the ticker strip above.
   .hero-bg is inset:0 inside .hero, so overflow:hidden clips it. */
@keyframes heroAmbient {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(1.4%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.hero-bg { animation: heroAmbient 30s ease-in-out infinite; }

/* ============================================================
   HERO SCROLL DEPTH — layered cinematic scroll response
   JS (parallax.js) measures the hero's on-screen scroll journey and
   writes on .hero:
     --sp  (0..1) full journey progress — drives parallax drift + scale
     --ft  (0..1) late-fade phase     — drives blur + the dimming wash
   Each layer moves on the `translate` property (independent channel):
   transforms on these layers are owned by pointer parallax and ambient
   keyframes, so the two never overwrite each other. Depth gradient:
   background slowest → content minimal, so scrolling reads as the
   camera pulling away through the scene, not elements sliding.
   ============================================================ */

/* Layer 1 — base gradient field: slowest, deep pull */
.hero-bg {
  translate: 0 calc(var(--sp, 0) * 5.5%);
  scale: calc(1 + var(--sp, 0) * 0.035);
  will-change: translate, scale;
}
/* Layer 2 — dot pattern: mid depth (transform here is pointer-only) */
.hero::before {
  translate: 0 calc(var(--sp, 0) * 18px);
}
/* Layer 2b — gold sheen: sinks slightly as the scene recedes */
.hero::after {
  translate: 0 calc(var(--sp, 0) * 14px);
}
/* Layer 3 — hero visual: moderate counter-drift (its child img keeps
   its own ken-burns transform; this sits on .hero-visual) */
.hero-visual {
  translate: 0 calc(var(--sp, 0) * -16px);
  will-change: translate;
}
/* Layer 5 — copy column: minimal drift, reads as slight depth */
.hero-copy {
  translate: 0 calc(var(--sp, 0) * -7px);
}

/* Late-fade phase (--ft): progressive atmosphere + dimming wash.
   Blur is applied to the LAYERS, never to text elements, so glyphs
   stay crisp for the majority of the reading zone; the wash (a fade
   toward the page background that follows) sells the "hand-off" into
   the next section without touching contrast mid-read. */
.hero-bg {
  filter: blur(calc(var(--ft, 0) * 6px));
  transition: filter 0.12s linear;
}
.hero::before {
  opacity: calc(1 - var(--ft, 0) * 0.55);
}
/* The dedicated wash layer (real div, aria-hidden): the gold sheen
   already owns .hero::after, so it gets its own element rather than
   overriding that pseudo. */
.hero-wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, var(--background) 100%);
  opacity: var(--ft, 0);
  will-change: opacity;
}

/* Exit scale — "camera moving away", applied to the content container
   (no entrance animation owns .hero-inner's transform) */
.hero-inner {
  scale: calc(1 - var(--sp, 0) * 0.03);
  will-change: scale;
}

/* Floating stat tiles: floaty (transform) + pointer depth (translate
   property — independent channel, no keyframe collision) */
.hero-float.one { animation: floaty 7s ease-in-out infinite, floatDepthA 11s ease-in-out infinite; }
.hero-float.two { animation: floaty 7s ease-in-out -3.5s infinite, floatDepthB 13s ease-in-out infinite; }
@keyframes floatDepthA {
  0%, 100% { translate: 0 0; }
  50%      { translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 7px); }
}
@keyframes floatDepthB {
  0%, 100% { translate: 0 0; }
  50%      { translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -6px); }
}

/* Hero image: slow ken-burns + counter-depth (child of tilted .hero-visual) */
.hero-visual .hero-img {
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1)    translate3d(calc(var(--px,0) * -3px), calc(var(--py,0) * -3px), 0); }
  to   { transform: scale(1.06) translate3d(calc(var(--px,0) *  3px), calc(var(--py,0) *  3px), 0); }
}

/* ---------- scroll progress bar ---------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: calc(var(--z-nav) + 10);
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- subtle depth on images ---------- */
.img-depth {
  transition: transform var(--motion-slow) var(--ease-fluid),
              box-shadow var(--motion-slow) var(--ease-soft);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .hero-visual .hero-img { animation: none; }
  .hero-float.one, .hero-float.two { animation: floaty 7s ease-in-out infinite; }
  .hero::before, .page-hero::after, [data-parallax] { transform: none !important; transition: none !important; }
  #scroll-progress { display: none; }
}