/* ============================================================
   enhance.css — animazioni minimali professionali + background dinamico
   Additivo a style.css. Rispetta prefers-reduced-motion.
   ============================================================ */

/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,var(--navy),var(--azure),var(--gold));
  transition:transform .08s linear}

/* hero canvas (live market lines) */
.hero-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:1;pointer-events:none}
.hero .container{position:relative;z-index:3}
.hero-bg{animation:glowFloat 14s ease-in-out infinite}
.hero-grid{animation:gridDrift 7s linear infinite}
/* AURORA dinamica (CSS puro, sempre visibile) */
.hero::before{content:"";position:absolute;top:-60%;left:-30%;width:160%;height:220%;z-index:1;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(59,157,216,.22), rgba(30,58,138,0) 22%,
    rgba(232,181,75,.14) 45%, rgba(59,157,216,0) 62%,
    rgba(111,194,239,.22) 82%, rgba(59,157,216,.22));
  filter:blur(60px);will-change:transform;animation:auroraSpin 26s linear infinite}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 25%,rgba(59,157,216,.18),transparent 60%);
  animation:auroraPulse 9s ease-in-out infinite}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
@keyframes auroraPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes glowFloat{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}

/* headline gradient shimmer */
.gradient{background-size:220% auto;animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* badge dot pulse ring */
.hero-badge .dot{position:relative}
.hero-badge .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--green);opacity:.6;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:.6}100%{transform:scale(2.2);opacity:0}}

/* staggered reveals within grids */
.strat-grid .strat:nth-child(2){transition-delay:.08s}
.strat-grid .strat:nth-child(3){transition-delay:.16s}
.strat-grid .strat:nth-child(4){transition-delay:.24s}
.val-grid .val:nth-child(2){transition-delay:.06s}
.val-grid .val:nth-child(3){transition-delay:.12s}
.val-grid .val:nth-child(4){transition-delay:.18s}
.val-grid .val:nth-child(5){transition-delay:.24s}
.val-grid .val:nth-child(6){transition-delay:.30s}
.hero-stats .hero-stat{opacity:0;transform:translateY(14px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.hero-stats.in .hero-stat{opacity:1;transform:none}
.hero-stats.in .hero-stat:nth-child(2){transition-delay:.07s}
.hero-stats.in .hero-stat:nth-child(3){transition-delay:.14s}
.hero-stats.in .hero-stat:nth-child(4){transition-delay:.21s}

/* card hover sheen + lift refinement */
.strat::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(59,157,216,.10),transparent 45%);
  opacity:0;transition:opacity .35s}
.strat:hover::after{opacity:1}
.metric .v{transition:color .3s}
.val{transition:.25s cubic-bezier(.2,.7,.2,1)}
.val:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow)}
.val:hover .ico{background:rgba(59,157,216,.18);transform:scale(1.06)}
.val .ico{transition:.25s}

/* animated equity sparkline in callout */
.eq-spark{width:100%;height:64px;margin:6px 0 18px;display:block}
.eq-spark path.line{fill:none;stroke:url(#eqgrad);stroke-width:2.4;
  stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.2s ease-out .2s}
.callout.in .eq-spark path.line{stroke-dashoffset:0}
.eq-spark path.area{fill:url(#eqfill);opacity:0;transition:opacity 1.2s ease .9s}
.callout.in .eq-spark path.area{opacity:1}

/* subtle dynamic glow in alt sections */
.sec.bg-alt::before,#strategies::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(680px 380px at 85% 10%,rgba(59,157,216,.07),transparent 60%);
  animation:secGlow 16s ease-in-out infinite}
.sec.bg-alt>.container,#strategies>.container{position:relative;z-index:1}
@keyframes secGlow{0%,100%{opacity:.5;background-position:85% 10%}50%{opacity:1;background-position:60% 30%}}

/* nav cta subtle shine */
.nav-cta,.btn-primary{position:relative;overflow:hidden}
.nav-cta::after,.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);
  animation:sheen 5.5s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-120%}80%,100%{left:140%}}

@media (prefers-reduced-motion: reduce){
  .hero-bg,.hero-grid,.gradient,.hero-badge .dot::after,.sec.bg-alt::before,#strategies::before,
  .nav-cta::after,.btn-primary::after,.hero::before,.hero::after{animation:none!important}
  .eq-spark path.line{stroke-dashoffset:0;transition:none}
  .eq-spark path.area{opacity:1;transition:none}
  .scroll-progress{display:none}
}