/* benharveyfit ai — high-tech motion layer (fx.css, 2026-07-03).
   A cohesive premium-polish pass layered on top of the "Jailhouse" base + landing.css.
   Everything here is additive, dependency-free, GPU-cheap (transform/opacity only),
   and fully gated behind prefers-reduced-motion. Wired by fx.js, which injects the
   ambient DOM and drives the pointer-reactive custom properties (--mx/--my/--rx/--ry).
   Nothing in this file is required for content to be readable — it only adds motion. */

/* ── scroll-progress beam (thin rust line across the very top) ─────────────── */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rust), var(--rust2) 60%, #ffd9c4);
  box-shadow: 0 0 12px rgba(224,112,63,0.55);
  pointer-events: none; will-change: transform;
}

/* ── ambient aurora (slow-drifting rust light behind everything) ──────────── */
.fx-aurora {
  position: fixed; inset: -20vh -10vw; z-index: 0; pointer-events: none;
  overflow: hidden; filter: blur(60px); opacity: 0.9;
}
.fx-aurora span {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen; opacity: 0.5; will-change: transform;
}
.fx-aurora .a1 { width: 46vw; height: 46vw; left: 58%; top: -8%;
  background: radial-gradient(closest-side, rgba(224,112,63,0.42), transparent 70%);
  animation: fxDrift1 26s ease-in-out infinite; }
.fx-aurora .a2 { width: 40vw; height: 40vw; left: -6%; top: 32%;
  background: radial-gradient(closest-side, rgba(191,84,48,0.34), transparent 70%);
  animation: fxDrift2 32s ease-in-out infinite; }
.fx-aurora .a3 { width: 34vw; height: 34vw; left: 34%; top: 68%;
  background: radial-gradient(closest-side, rgba(224,112,63,0.24), transparent 70%);
  animation: fxDrift3 38s ease-in-out infinite; }
@keyframes fxDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-6vw,5vh,0) scale(1.12); } }
@keyframes fxDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7vw,-4vh,0) scale(1.15); } }
@keyframes fxDrift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4vw,-6vh,0) scale(0.9); } }

/* keep the base layers stacked above the aurora */
.land { position: relative; z-index: 1; }

/* ── pointer spotlight on cards (Linear/Vercel-style tracking highlight) ──── */
/* fx.js tags these with .fx-spot and feeds --mx/--my (px, element-local). */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(224,112,63,0.16), transparent 60%);
}
.fx-spot:hover::after { opacity: 1; }
/* animated gradient hairline that lights up on hover */
.fx-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              var(--rust2), rgba(224,112,63,0.15) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.fx-spot:hover::before { opacity: 1; }

/* ── 3D tilt (hero phone follows the pointer; cards lift on hover) ────────── */
.fx-tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; transform-style: preserve-3d; }

/* ── magnetic buttons (subtle pull toward the cursor) ────────────────────── */
.fx-magnet { transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .15s ease; will-change: transform; }

/* ── sheen sweep across the big numbers (kept rust, just a moving highlight) ─ */
.fx-shimmer { position: relative; background: linear-gradient(100deg, var(--rust) 30%, #ffcbb0 50%, var(--rust) 70%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fxSheen 5.5s ease-in-out infinite; }
@keyframes fxSheen { 0%, 20% { background-position: 130% 0; } 80%, 100% { background-position: -30% 0; } }

/* ── eyebrow gets a drawing underline beam ───────────────────────────────── */
.eyebrow { position: relative; }
html.js .eyebrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, var(--rust), transparent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2,.7,.2,1) .15s;
}
html.js .reveal.in .eyebrow::after,
html.js .eyebrow.in::after { transform: scaleX(1); }

/* ── nav links: animated underline on hover ──────────────────────────────── */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%;
  background: var(--rust); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* ── staggered cascade for grid reveals (delay set from --i by fx.js) ────── */
html.js .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* ── loop icons get a soft breathing glow ────────────────────────────────── */
.loop-ico, .where-ico { transition: box-shadow .3s ease, transform .3s ease; }
.loop-card:hover .loop-ico, .where:hover .where-ico {
  box-shadow: 0 0 0 1px var(--rust-mid), 0 0 26px rgba(224,112,63,0.35);
  transform: translateY(-2px);
}

/* ── primary CTA: living sheen sweep ─────────────────────────────────────── */
.appstore-btn { position: relative; overflow: hidden; }
.appstore-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); animation: fxCtaSweep 4.5s ease-in-out infinite; pointer-events: none;
}
@keyframes fxCtaSweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* ── reveal-in pop for the score ring number ─────────────────────────────── */
.ring-num { transition: filter .4s ease; }
.score-stage.in .ring-num { filter: drop-shadow(0 0 18px rgba(224,112,63,0.45)); }

/* ── honor reduced motion: strip every ambient/looping animation ─────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora, .fx-progress { display: none; }
  .fx-aurora span,
  .fx-shimmer,
  .appstore-btn::after { animation: none; }
  .fx-shimmer { -webkit-text-fill-color: var(--rust); color: var(--rust); }
  .fx-tilt { transform: none !important; }
  html.js .reveal { transition-delay: 0ms; }
  html.js .eyebrow::after { transition: none; }
}

/* small screens: tilt/spotlight/magnet are pointer effects — CSS no-ops on touch,
   but shrink the aurora so it never forces layout work on low-power phones */
@media (max-width: 640px) { .fx-aurora { filter: blur(44px); opacity: 0.7; } }