/* CEO Trust — effetti della piattaforma interna (prova) */

/* ---------- Panoramica: hero con cielo stellato e squadra ---------- */
#vApp .hero{isolation:isolate}
#vApp .hero canvas.stars{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#vApp .hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 48px;align-items:center}
#vApp .hero .wrap > *{grid-column:1}
#vApp .hero .wrap > .squad{grid-column:2;grid-row:1 / span 4;align-self:center}
#vApp .hero .wrap > .kpis{grid-column:1 / -1}
#vApp .hero h1 em{background:linear-gradient(100deg,var(--rose) 0%,var(--rose) 35%,#F6D9A8 50%,var(--rose) 65%,var(--rose) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shimmer 5s ease-in-out infinite}
@keyframes fx-shimmer{0%{background-position:100% 0}60%,100%{background-position:0 0}}
#vApp .hero h1{animation:fx-up .9s cubic-bezier(.2,.7,.2,1) both}
#vApp .hero .eyebrow{animation:fx-up .7s cubic-bezier(.2,.7,.2,1) both}

.squad{position:relative;width:100%;max-width:400px;aspect-ratio:1;justify-self:end}
.squad svg.sq-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.squad .sq-line{stroke:#4A3640;stroke-width:1.3;stroke-dasharray:5 6;fill:none;animation:fx-dash 1.6s linear infinite}
.squad .sq-line.on{stroke:rgba(224,140,156,.55)}
.squad .sq-orbit{fill:none;stroke:var(--gold-stitch);stroke-width:1;stroke-dasharray:2 7;transform-origin:50% 50%;animation:fx-spin 60s linear infinite}
@keyframes fx-dash{to{stroke-dashoffset:-22}}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.squad .sq-hub{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 35%,#3A2029,#1D1519 70%);border:1px solid #5A3542;box-shadow:0 0 0 1px rgba(224,140,156,.08),0 0 60px -10px rgba(224,140,156,.55)}
.squad .sq-hub::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--rose);animation:fx-halo 3s ease-out infinite}
@keyframes fx-halo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.squad .sq-hub b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1;color:var(--ink)}
.squad .sq-hub b i{font-style:italic;color:var(--rose)}
.squad .sq-hub span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.25;padding-inline:10px}
.squad .sq-node{position:absolute;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s,color .3s;padding:0}
.squad .sq-node svg{width:42%;height:42%}
.squad .sq-node.on{color:var(--rose);border-color:#7A4A5A;box-shadow:0 0 30px -8px rgba(224,140,156,.6)}
.squad .sq-node.on::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(224,140,156,.5);animation:fx-halo 2.6s ease-out infinite;animation-delay:var(--dl,0s)}
.squad .sq-node:hover,.squad .sq-node:focus-visible{transform:translate(-50%,-50%) scale(1.12);border-color:var(--rose);color:var(--rose)}
.squad .sq-node .sq-tip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;color:var(--ink);background:var(--surface2);border:1px solid var(--line2);border-radius:99px;padding:3px 10px;opacity:0;pointer-events:none;transition:opacity .2s}
.squad .sq-node:hover .sq-tip,.squad .sq-node:focus-visible .sq-tip{opacity:1}
.squad .sq-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#F6D9A8;box-shadow:0 0 10px 2px rgba(246,217,168,.7);pointer-events:none}
.squad-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:4px}
.squad-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
@media (max-width:860px){
  #vApp .hero .wrap{grid-template-columns:1fr}
  #vApp .hero .wrap > .squad{grid-column:1;grid-row:auto;justify-self:center;max-width:300px;margin-top:8px}
}

/* ---------- Numeri chiave ---------- */
#vApp .kpi{position:relative;transition:transform .3s}
#vApp .kpi .v{transition:color .3s}
#vApp .kpi:hover .v{color:var(--rose)}
#vApp .kpis .kpi{animation:fx-up .8s cubic-bezier(.2,.7,.2,1) both}
#vApp .kpis .kpi:nth-child(2){animation-delay:.1s}#vApp .kpis .kpi:nth-child(3){animation-delay:.2s}#vApp .kpis .kpi:nth-child(4){animation-delay:.3s}

/* ---------- Pulsanti luminosi ---------- */
#vApp .btn.accent{position:relative;overflow:hidden;box-shadow:0 10px 30px -14px rgba(224,140,156,.75);animation:fx-glow 3.2s ease-in-out infinite}
#vApp .btn.accent::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:fx-sweep 4.5s ease-in-out infinite;pointer-events:none}
#vApp .btn.accent:hover{box-shadow:0 0 0 6px rgba(224,140,156,.16),0 14px 40px -10px rgba(224,140,156,.95)}
#vApp .btn.accent:disabled{animation:none}
#vApp .btn.ghost:hover{box-shadow:0 0 22px -6px rgba(214,181,126,.55);border-color:var(--gold)}
@keyframes fx-glow{0%,100%{box-shadow:0 10px 30px -14px rgba(224,140,156,.75)}50%{box-shadow:0 0 0 6px rgba(224,140,156,.1),0 12px 38px -10px rgba(224,140,156,.9)}}
@keyframes fx-sweep{0%,55%{left:-60%}85%,100%{left:130%}}

/* ---------- Primo passo: bordo luminoso che gira ---------- */
#vApp .profile{isolation:isolate;overflow:hidden}
#vApp .profile::before{content:"";position:absolute;inset:-60%;z-index:-1;background:conic-gradient(from var(--fx-a,0deg),transparent 0 70%,rgba(224,140,156,.55) 80%,rgba(246,217,168,.6) 85%,transparent 92%);animation:fx-rot 6s linear infinite}
#vApp .profile > *{position:relative}
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fx-rot{to{--fx-a:360deg}}
#vApp .profile .profile-head,#vApp .profile .profile-form{z-index:1}
#vApp .profile .fx-cover{position:absolute;inset:1.5px;border-radius:inherit;background:var(--surface);z-index:-1}

/* ---------- Agenti ---------- */
#vApp .agent{transform-style:preserve-3d;will-change:transform}
#vApp .agent .ic{position:relative}
#vApp .agent.has-data .ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(224,140,156,.55);animation:fx-halo 2.8s ease-out infinite;animation-delay:var(--dl,0s)}
#vApp .agent .fx-state{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:auto}
#vApp .agent .fx-state i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
#vApp .agent.has-data .fx-state{color:var(--ok)}
#vApp .agent.has-data .fx-state i{background:var(--ok);box-shadow:0 0 0 0 rgba(134,205,160,.6);animation:fx-ping 2.4s infinite}
@keyframes fx-ping{0%{box-shadow:0 0 0 0 rgba(134,205,160,.55)}70%,100%{box-shadow:0 0 0 7px rgba(134,205,160,0)}}
#vApp .agent:hover{box-shadow:0 22px 50px -24px rgba(224,140,156,.6)}

/* ---------- Luce che segue il mouse ---------- */
#vApp .fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;mix-blend-mode:screen;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(224,140,156,.18),transparent 65%);z-index:2}
#vApp .fx-spot:hover > .fx-glow{opacity:1}

/* ---------- Da guardare oggi ---------- */
#vApp .today .alert{animation:fx-up .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .1s)}
#vApp .today .alert.crit{box-shadow:0 0 0 1px rgba(240,135,126,.18),0 18px 40px -24px rgba(240,135,126,.6)}
#vApp .today .alert.crit .pill{animation:fx-crit 2s ease-in-out infinite}
@keyframes fx-crit{50%{box-shadow:0 0 0 4px rgba(240,135,126,.15)}}
#vApp .today .alert.ok{box-shadow:0 18px 40px -26px rgba(134,205,160,.5)}
#vApp .today .alert:hover{transform:translateY(-3px)}
.fx-skel{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--surface);position:relative;overflow:hidden;min-height:150px}
.fx-skel span{display:block;height:12px;border-radius:6px;background:var(--surface2)}
.fx-skel span:nth-child(1){width:34%;height:18px;border-radius:99px}
.fx-skel span:nth-child(2){width:88%}.fx-skel span:nth-child(3){width:70%}.fx-skel span:nth-child(4){width:46%}
.fx-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(224,140,156,.12) 50%,transparent 80%);transform:translateX(-100%);animation:fx-scan 1.4s ease-in-out infinite}
@keyframes fx-scan{to{transform:translateX(100%)}}
.fx-reading{grid-column:1/-1;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.fx-reading i{width:8px;height:8px;border-radius:50%;background:var(--rose);animation:fx-ping-r 1.2s infinite}
@keyframes fx-ping-r{0%{box-shadow:0 0 0 0 rgba(224,140,156,.6)}100%{box-shadow:0 0 0 10px rgba(224,140,156,0)}}

/* ---------- Comparse e cambio pagina ---------- */
@keyframes fx-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fx-page{animation:fx-up .55s cubic-bezier(.2,.7,.2,1) both}
.fx-rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.fx-rv.in{opacity:1;transform:none}

/* ---------- Barra della prova ---------- */
#vApp .planbar{position:relative;overflow:hidden}
#vApp .planbar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(214,181,126,.08) 50%,transparent 70%);transform:translateX(-100%);animation:fx-scan 5s ease-in-out infinite;pointer-events:none}
#vApp .meter i{position:relative;overflow:hidden;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
#vApp .meter i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:fx-scan 2.2s ease-in-out infinite}

/* ---------- Stelline al clic ---------- */
.sparkle{position:fixed;z-index:9999;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;background:radial-gradient(circle,#fff 0,#F6D9A8 35%,rgba(224,140,156,0) 70%);border-radius:50%;animation:spark .9s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0}}

@media (prefers-reduced-motion:reduce){
  #vApp *,#vApp *::before,#vApp *::after{animation:none !important;transition:none !important}
  #vApp .hero canvas.stars{display:none}
  .fx-rv{opacity:1;transform:none}
}