/* ============================================================
   CERP System — fx layer (additive on top of styles.css)
   Aurora hero, 3D tilt, chart draw, count-up, spotlight cards,
   beams, marquee, trial band. GPU-only animations, RM-safe.
   ============================================================ */

/* scroll progress */
#fxprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;background:linear-gradient(90deg,var(--blue),var(--indigo),var(--violet));transition:width .08s linear}

/* ---- hero aurora ---- */
.hero-bg .fxb{position:absolute;border-radius:50%;filter:blur(82px);pointer-events:none;opacity:.55}
.fxb1{width:520px;height:520px;background:rgba(37,99,235,.32);top:-180px;right:-90px;animation:fxdrift 16s ease-in-out infinite alternate}
.fxb2{width:430px;height:430px;background:rgba(124,58,237,.24);bottom:-210px;left:-130px;animation:fxdrift 21s -7s ease-in-out infinite alternate-reverse}
.fxb3{width:300px;height:300px;background:rgba(14,165,233,.22);top:26%;left:44%;animation:fxdrift 25s -13s ease-in-out infinite alternate}
@keyframes fxdrift{from{transform:translate(0,0) scale(1)}to{transform:translate(58px,40px) scale(1.16)}}

/* ---- app window: 3D tilt + glow ---- */
.hero-visual{perspective:1300px}
.hero-visual::before{content:"";position:absolute;inset:8% 0 -4% 0;background:radial-gradient(closest-side,rgba(37,99,235,.26),transparent 72%);filter:blur(16px);z-index:0;pointer-events:none}
.app-window{position:relative;z-index:1;transform:rotateY(var(--fxry,-6deg)) rotateX(var(--fxrx,2.5deg));transition:transform .25s ease-out;will-change:transform}

/* ---- chart draw-in ---- */
.aw-chart .fx-line{stroke-dasharray:1;stroke-dashoffset:1}
.aw-chart.fx-play .fx-line{animation:fxdraw 1.9s .45s cubic-bezier(.4,0,.2,1) forwards}
.aw-chart .fx-area{opacity:0}
.aw-chart.fx-play .fx-area{animation:fxarea .9s 1.8s forwards}
@keyframes fxdraw{to{stroke-dashoffset:0}}
@keyframes fxarea{to{opacity:1}}

/* ---- floating cards: stagger + third card ---- */
.float-card.fc-1{animation-delay:0s}
.float-card.fc-2{animation-delay:-1.6s}
.float-card.fc-3{top:40%;left:-54px;animation-delay:-2.8s}
.fc-3 .fx-dot{width:10px;height:10px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.55);animation:fxpulse 2.2s infinite;flex:none}
.fc-3 span{display:block;color:var(--muted);font-size:.78rem}
@keyframes fxpulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@media(max-width:1100px){.float-card.fc-3{display:none}}

/* ---- primary button shine sweep ---- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.38) 50%,transparent 58%);transform:translateX(-130%);pointer-events:none}
.btn-primary:hover::after{animation:fxsweep .8s ease}
@keyframes fxsweep{to{transform:translateX(130%)}}

/* ---- spotlight on cards (prati kursor) ---- */
.mod-card,.why-card{position:relative;overflow:hidden}
.mod-card::after,.why-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--fxmx,50%) var(--fxmy,50%),rgba(29,78,216,.10),transparent 62%);opacity:0;transition:opacity .25s;pointer-events:none}
.mod-card:hover::after,.why-card:hover::after{opacity:1}
.mod-card,.why-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.mod-card:hover,.why-card:hover{transform:translateY(-5px)}

/* ---- beams over dark metrics ---- */
.metric{position:relative;overflow:hidden}
.metric .fx-beam{position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,transparent,rgba(147,183,255,.9),transparent);transform:translateX(-100%);animation:fxbeam 3.4s ease-in-out infinite}
@keyframes fxbeam{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---- compliance marquee (trustbar) ---- */
.fx-marq{margin-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fx-marq .fx-track{display:flex;gap:38px;width:max-content;animation:fxmarq 30s linear infinite;color:var(--muted);font-weight:600;font-size:.92rem;white-space:nowrap}
.fx-marq .fx-track span{display:flex;align-items:center;gap:9px}
.fx-marq svg{color:#059669;flex:none}
@keyframes fxmarq{to{transform:translateX(-50%)}}

/* ---- trial band ---- */
.fx-trial-sec{padding-top:0}
.fx-trial{position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;background:linear-gradient(120deg,var(--blue-700),var(--blue) 55%,var(--indigo));background-size:170% 170%;animation:fxg 9s ease-in-out infinite alternate;border-radius:var(--radius-lg);padding:44px 48px;color:#fff;box-shadow:var(--shadow-blue)}
@keyframes fxg{from{background-position:0% 30%}to{background-position:100% 70%}}
.fx-trial::before{content:"";position:absolute;inset:0;background:radial-gradient(480px 240px at 88% -18%,rgba(255,255,255,.22),transparent 60%)}
.fx-trial h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 8px;position:relative}
.fx-trial p{color:#dbe6ff;margin:0;position:relative;max-width:34em}
.fx-trial-act{position:relative;display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-self:end}
.fx-btn-w{background:#fff;color:var(--blue-700);box-shadow:0 10px 26px rgba(11,19,34,.25)}
.fx-btn-w:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(11,19,34,.32);color:var(--blue-700)}
.fx-trial-act .fx-fine{font-size:.82rem;color:#c7d7ff;font-weight:600}
@media(max-width:860px){.fx-trial{grid-template-columns:1fr;padding:34px 26px}.fx-trial-act{justify-self:start}}

/* ---- hero trial link ---- */
.fx-hero-trial{margin-top:14px;font-size:.95rem;color:var(--muted)}
.fx-hero-trial a{color:var(--blue);font-weight:700;text-decoration:none}
.fx-hero-trial a:hover{text-decoration:underline}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .hero-bg .fxb,.fx-trial,.metric .fx-beam,.fx-marq .fx-track,.fc-3 .fx-dot{animation:none}
  .app-window{transform:none;transition:none}
  .aw-chart .fx-line{stroke-dasharray:none;stroke-dashoffset:0}
  .aw-chart .fx-area{opacity:1}
}