/* TraQFitPro — effects: cursor, EKG, glow cards, magnetic CTAs, orbs, ticker */

/* ---------- LIVE LAYER: pulse cursor ---------- */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,summary,.brand-btn{cursor:none}
}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
.cursor-dot{width:7px;height:7px;background:var(--grad-cta)}
.cursor-ring{width:38px;height:38px;border:1.5px solid rgba(240,90,40,.9);transition:width .25s,height .25s,border-color .25s,background .25s;animation:heartbeat 1.15s ease-in-out infinite;display:grid;place-items:center}
.cursor-ring::after{content:attr(data-label);font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:#fff;opacity:0;transition:opacity .25s;text-transform:uppercase;white-space:nowrap}
.cursor-ring.hovering{width:62px;height:62px;border-color:rgba(229,57,53,.95);background:rgba(240,90,40,.14)}
.cursor-ring.hovering::after{opacity:1}
@keyframes heartbeat{0%,100%{transform:translate(-50%,-50%) scale(1)}14%{transform:translate(-50%,-50%) scale(1.18)}28%{transform:translate(-50%,-50%) scale(1)}42%{transform:translate(-50%,-50%) scale(1.12)}56%{transform:translate(-50%,-50%) scale(1)}}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- LIVE LAYER: EKG pulse line ---------- */
.ekg{position:absolute;left:0;right:0;bottom:26px;height:70px;pointer-events:none;opacity:.5;z-index:1;overflow:hidden}
.ekg svg{width:100%;height:100%}
.ekg path{fill:none;stroke:url(#ekggrad);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220 1400;stroke-dashoffset:1620;animation:ekgrun 5.5s linear infinite;filter:drop-shadow(0 0 6px rgba(240,90,40,.7))}
@keyframes ekgrun{to{stroke-dashoffset:0}}

/* ---------- LIVE LAYER: cursor-glow cards ---------- */
.glow-card{position:relative}
.glow-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(240,90,40,.14),rgba(229,57,53,.07) 40%,transparent 65%)}
.glow-card:hover::after{opacity:1}
.glow-card::before{z-index:2}

/* ---------- LIVE LAYER: 3D tilt dashboard ---------- */
.dash{perspective:1200px}
.dash-card.tilting{animation:none;transition:transform .18s ease-out;transform-style:preserve-3d}
.dash-card .depth{transform:translateZ(30px)}

/* ---------- LIVE LAYER: magnetic CTAs ---------- */
.magnetic{transition:transform .25s cubic-bezier(.22,1,.36,1)}

/* ---------- LIVE LAYER: activity ticker ---------- */
.ticker{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;height:28px}
.ticker .dot{width:7px;height:7px;border-radius:50%;background:var(--zone2);flex:none;animation:blink 1.4s ease infinite}
.ticker .feed{position:relative;flex:1;height:100%}
.ticker .feed span{position:absolute;left:0;top:50%;transform:translateY(80%);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;white-space:nowrap}
.ticker .feed span.on{transform:translateY(-50%);opacity:1}
.ticker .feed span.off{transform:translateY(-180%);opacity:0}
.ticker em{font-style:normal;color:var(--text)}

/* ---------- LIVE LAYER: mouse-parallax hero glows ---------- */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px);will-change:transform;z-index:0}
.orb-1{width:480px;height:480px;top:-8%;right:-6%;background:radial-gradient(circle,rgba(240,90,40,.24),transparent 65%)}
.orb-2{width:420px;height:420px;bottom:-14%;left:-8%;background:radial-gradient(circle,rgba(76,175,80,.2),transparent 65%)}
.orb-3{width:260px;height:260px;top:34%;left:38%;background:radial-gradient(circle,rgba(229,57,53,.16),transparent 65%)}
.hero::before,.hero::after{display:none}

/* responsive */
@media (max-width:1060px){
  .hero{grid-template-columns:1fr;padding-top:130px}
  .dash{max-width:560px}
  .pillars{grid-template-columns:1fr}
  .wl-grid{grid-template-columns:1fr}
  .cstrip-grid{grid-template-columns:repeat(2,1fr)}
  .pledges{grid-template-columns:1fr}
  .price-wrap{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-head{position:static;margin-bottom:10px}
  .nav-links{display:none}
}
@media (max-width:600px){
  .cstrip-grid{grid-template-columns:1fr}
  .dash-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat b{font-size:18px}
  .msg-pop{right:6px}
  .nav-cta .btn-ghost{display:none}
}