/* ============================================================
   RunOrJog — 3D & VARIETY layer (loads after polish.css)
   Pointer tilt glare, cursor spotlight, conic glow rings,
   per-section colour rhythm. Purely additive & decorative.
   ============================================================ */

/* ---------- Tilt targets: smooth, GPU, clip glare ---------- */
.feature, .bento-card, .tier, .calc-card, .step, .showcase .device, .hero .phone {
  will-change: transform;
}

/* glare sheen that follows the cursor while tilting (--gx/--gy set in JS) */
.feature, .bento-card, .tier, .calc-card, .step { position: relative; }
.feature::after, .bento-card::after, .tier::after, .calc-card::after, .step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 28%, transparent 52%);
  opacity: 0; transition: opacity 0.25s ease; z-index: 3;
}
.is-tilting::after { opacity: 1; }

/* ---------- Cursor spotlight ---------- */
.cursor-spot {
  position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(0, 220, 255, 0.10), rgba(170, 68, 255, 0.05) 38%, transparent 66%);
  mix-blend-mode: screen; will-change: transform;
}

/* ---------- Hero phone glow (single-accent, calm) ---------- */
.hero .phone { isolation: isolate; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* gold pulse ring on the featured tier */
.tier.featured { isolation: isolate; }
.tier.featured::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from 0deg, transparent, var(--gold), transparent 30%);
  opacity: 0.55; animation: ring-spin 6s linear infinite;
}

/* ---------- Floating 3D hex decorations (ambient variety) ---------- */
.hexfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hexfx i {
  position: absolute; width: 46px; height: 52px; opacity: 0.5;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hx, var(--cyan)) 40%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--hx, var(--cyan)) 55%, transparent);
  transform-style: preserve-3d; animation: hexspin var(--d, 14s) linear infinite;
}
@keyframes hexspin {
  0%   { transform: rotateX(0)    rotateY(0)    translateY(0); }
  50%  { transform: rotateX(180deg) rotateY(90deg) translateY(-18px); }
  100% { transform: rotateX(360deg) rotateY(180deg) translateY(0); }
}
.hexfx i:nth-child(1) { top: 16%; left: 8%;  --hx: var(--cyan);   --d: 13s; }
.hexfx i:nth-child(2) { top: 64%; left: 16%; --hx: var(--green);  --d: 17s; width: 34px; height: 38px; }
.hexfx i:nth-child(3) { top: 28%; right: 12%; --hx: var(--gold);  --d: 15s; width: 40px; height: 45px; }
.hexfx i:nth-child(4) { top: 70%; right: 9%; --hx: var(--pink);   --d: 19s; width: 30px; height: 34px; }
.hexfx i:nth-child(5) { top: 44%; left: 48%; --hx: var(--purple); --d: 21s; width: 26px; height: 30px; opacity: .35; }
@media (max-width: 820px) { .hexfx i:nth-child(n+4) { display: none; } }

/* ---------- Per-section colour rhythm (subtle top glows) ---------- */
#features::before, #explore::before, #video::before, #calc::before, #faq::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
#features::before { background: radial-gradient(820px 380px at 12% 0%, rgba(0, 220, 255, 0.08), transparent 70%); }
#explore::before  { background: radial-gradient(900px 420px at 88% 2%, rgba(170, 68, 255, 0.09), transparent 70%); }
#video::before    { background: radial-gradient(800px 360px at 50% 0%, rgba(0, 220, 255, 0.08), transparent 70%); }
#calc::before     { background: radial-gradient(820px 380px at 15% 0%, rgba(57, 255, 20, 0.07), transparent 70%); }
#faq::before      { background: radial-gradient(820px 380px at 85% 0%, rgba(255, 68, 170, 0.07), transparent 70%); }
section > .container { position: relative; z-index: 1; }
.final-cta > .container { position: relative; z-index: 1; }

/* ---------- ENDO bento card: extra depth ---------- */
.bento-card .spin3d { filter: drop-shadow(0 0 10px var(--green)); }

@media (prefers-reduced-motion: reduce) {
  .hero .phone::before, .tier.featured::before, .hexfx i { animation: none !important; }
  .cursor-spot { display: none; }
}