/* ============================================================
   HYSAD — shared aesthetic effects (v1)
   Solo decorativo, progressive enhancement. Linkato per ULTIMO
   (prima di </body>) su index + 6 pagine servizi: le regole qui
   vincono in cascata su style.css e sui blocchi inline a parità
   di specificità. Nessuna regola tocca layout, testo o colori
   dei contenuti: solo layer ambientali, pseudo-elementi liberi
   (verificati: html/body::before/after, .worldWrap::before/after,
   .sectionHead h2::after, .failIntro h2::after) e stati hover su
   card che non ne avevano (.phase, .processCard, .failCard —
   tutte con entrance ad animation, senza transition proprie).
   Convenzioni: keyframes hysadFx*, variabili --hfx*.
   ============================================================ */

/* ---- 1. Palette effetti per-pagina (fallback: brand mint) ----
   Il tint segue la palette per-servizio del nav (vedi RELAZIONE
   §2), agganciato a un id univoco presente solo in quella pagina.
   Browser senza :has() restano sul default mint: solo estetica. */
body{
  --hfx1:#94ffd1;
  --hfx2:#2e6f78;
}
body:has(#aiGraph){        --hfx1:#d8ffad; --hfx2:#83dcc2; } /* AI Solution */
body:has(#malwareCanvas){  --hfx1:#ffd0a0; --hfx2:#ff9b9b; } /* Cyber Security */
body:has(#radarGrid){      --hfx1:#8fffd2; --hfx2:#44a98c; } /* IT Governance */
body:has(#supportCanvas){  --hfx1:#d6c9ff; --hfx2:#9db1ff; } /* IT Support */
body:has(#fallimenti){     --hfx1:#b7e8ff; --hfx2:#7aa7ff; } /* Project Management */
body:has(#sysCanvas){      --hfx1:#c8e7ff; --hfx2:#86d7bd; } /* System Administration */

/* ---- 2. Aurora ambientale ----
   Layer fisso tra il background del body (#061110) e il contenuto:
   .site è a z-index:2 e .noise a z-index:1, quindi z-index:0 resta
   sotto entrambi. Alpha massima ~9%: i contrasti misurati (min
   4.95:1) restano ampiamente sopra 4.5:1. */
body::before{
  content:"";
  position:fixed;
  inset:-22%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(42% 34% at 18% 24%, color-mix(in srgb, var(--hfx1), transparent 91%), transparent 70%),
    radial-gradient(38% 32% at 84% 74%, color-mix(in srgb, var(--hfx2), transparent 89%), transparent 70%),
    radial-gradient(26% 22% at 64% 6%,  color-mix(in srgb, var(--hfx1), transparent 94%), transparent 72%);
}

/* ---- 3. Barra di progresso scroll ----
   Solo dove il browser supporta le scroll-driven animations
   (guardia @supports: altrove il layer non esiste). Legata allo
   scroll dell'utente, quindi accettabile anche in reduced-motion.
   Sopra la topbar (z-index:60). */
@supports (animation-timeline: scroll(root)){
  body::after{
    content:"";
    position:fixed;
    left:0; top:0;
    width:100%; height:2px;
    z-index:70;
    pointer-events:none;
    background:linear-gradient(90deg, var(--hfx2), var(--hfx1));
    box-shadow:0 0 10px color-mix(in srgb, var(--hfx1), transparent 55%);
    transform-origin:0 50%;
    transform:scaleX(0);
    animation:hysadFxScrollProgress auto linear both;
    animation-timeline:scroll(root);
  }
  @keyframes hysadFxScrollProgress{
    from{ transform:scaleX(0); }
    to{   transform:scaleX(1); }
  }
}

/* ---- 4. Sottolineatura gradiente dei titoli di sezione ----
   .sectionHead h2::after e .failIntro h2::after sono liberi su
   tutte le pagine (mappa pseudo-elementi verificata). */
.sectionHead h2:not(.protocolTitle):not(.partnersTitle)::after,
.head h2::after, /* system-administration usa .head, non .sectionHead */
.failIntro h2::after{
  content:"";
  display:block;
  width:76px;
  height:3px;
  margin-top:16px;
  border-radius:99px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--hfx2), transparent 20%),
    var(--hfx1) 45%,
    color-mix(in srgb, var(--hfx2), transparent 20%));
  background-size:220% 100%;
  background-position:0% 50%;
  box-shadow:0 0 14px color-mix(in srgb, var(--hfx1), transparent 62%);
}
/* I titoli di index (.protocolTitle/.partnersTitle) sono esclusi:
   sono flex row con accenti .grad propri, l'::after finirebbe di
   fianco al testo invece che sotto. */

/* ---- 5. (rimosso) ----
   Gli anelli decorativi extra sulla hero di index (.worldWrap::
   before/::after) sono stati eliminati su richiesta dell'utente:
   risultavano troppo invadenti. I due pseudo-elementi tornano
   liberi per usi futuri. */

/* ---- 6. Micro-interazioni hover su card senza hover progettati ----
   .phase (index), .processCard (AI), .failCard (PM): entrance ad
   animation e nessuna transition propria → aggiungerla qui è
   sicuro. Lift con la proprietà `translate` (si compone con i
   transform esistenti senza toccarli). */
@media (hover:hover) and (pointer:fine){
  .phase,
  .processCard,
  .failCard{
    transition:translate .35s cubic-bezier(.2,.8,.2,1),
               box-shadow .45s ease,
               border-color .45s ease;
  }
  .phase:hover{
    translate:0 -5px;
    border-color:color-mix(in srgb, var(--hfx1), transparent 58%);
    box-shadow:0 24px 70px rgba(0,0,0,.26),
               0 22px 64px -20px color-mix(in srgb, var(--hfx1), transparent 68%);
  }
  .processCard:hover{
    translate:0 -5px;
    border-color:color-mix(in srgb, var(--hfx1), transparent 50%);
    box-shadow:0 26px 70px -24px color-mix(in srgb, var(--hfx1), transparent 66%);
  }
  .failCard:hover{
    translate:0 -3px;
    border-color:color-mix(in srgb, var(--hfx1), transparent 62%);
    box-shadow:0 18px 54px -22px color-mix(in srgb, var(--hfx1), transparent 70%);
  }
}

/* ---- 7. Footer: hairline animata ----
   Stessa specificità del file condiviso (.footer.hysadFooter:before)
   ma caricato dopo → vince. Stesso linguaggio visivo, con sweep. */
.footer.hysadFooter:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  pointer-events:none;
  opacity:.72;
  background:linear-gradient(90deg,
    transparent 12%,
    color-mix(in srgb, var(--hfx1), transparent 62%) 38%,
    color-mix(in srgb, var(--hfx1), transparent 28%) 50%,
    color-mix(in srgb, var(--hfx1), transparent 62%) 62%,
    transparent 88%);
  background-size:240% 100%;
  background-position:0% 50%;
}

/* ============================================================
   v2 — rifinitura "international grade": dettagli di piattaforma
   (selection, scrollbar, focus ring) + micro-interazioni su nav,
   form e CTA. Tutto additivo, nessun override di stati progettati:
   - .csTrigger/.csOption/.submitBtn (index) hanno già stati propri;
   - .btn:hover esiste già su it-support e system-administration →
     il lift qui sotto è scoped via :has() alle sole 4 pagine che
     non lo avevano (AI, cyber, it-gov, PM);
   - su PM btnPulse anima box-shadow all'infinito → l'hover usa
     solo `translate` (si compone, non combatte i keyframes).
   ============================================================ */

/* ---- 9. Selezione testo col tint di pagina ---- */
::selection{
  background:color-mix(in srgb, var(--hfx1, #94ffd1), transparent 68%);
  color:#ffffff;
  text-shadow:none;
}

/* ---- 10. Scrollbar in tinta brand (Firefox + Chromium 121+).
   Colore statico: le variabili --hfx vivono su body, qui siamo su
   html. Nessun ::-webkit-scrollbar: forzerebbe la scrollbar sempre
   visibile su macOS overlay. ---- */
html{
  scrollbar-color:rgba(79,166,135,.55) rgba(10,22,20,.35);
}

/* ---- 11. Focus ring coerente per la navigazione da tastiera.
   :where() = specificità zero: qualsiasi focus progettato (es.
   .csTrigger:focus-visible su index) continua a vincere. ---- */
:where(a, button, [role="button"], summary, input[type="checkbox"]):focus-visible{
  outline:2px solid color-mix(in srgb, var(--hfx1, #94ffd1), #ffffff 18%);
  outline-offset:3px;
}

/* ---- 12. Nav: hover con tint per-pagina ----
   La base .navLinks a ha già transition:.22s (copre anche translate
   e box-shadow). Solo pointer fine: nel menu mobile non serve. */
@media (hover:hover) and (pointer:fine){
  .navLinks a:hover{
    translate:0 -1px;
    border-color:color-mix(in srgb, var(--hfx1), transparent 55%);
    background:rgba(255,255,255,.055);
    box-shadow:0 10px 26px -14px color-mix(in srgb, var(--hfx1), transparent 40%);
  }
}

/* ---- 13. Form index: label che "risponde" al focus del campo ---- */
.field label{
  transition:color .25s ease;
}
.field:focus-within label{
  color:#94ffd1;
}

/* ---- 14. CTA servizi: lift dove non c'era un hover progettato ---- */
@media (hover:hover) and (pointer:fine){
  body:has(#aiGraph) .btn,
  body:has(#malwareCanvas) .btn,
  body:has(#radarGrid) .btn,
  body:has(#fallimenti) .btn{
    transition:translate .3s cubic-bezier(.2,.8,.2,1);
  }
  body:has(#aiGraph) .btn:hover,
  body:has(#malwareCanvas) .btn:hover,
  body:has(#radarGrid) .btn:hover,
  body:has(#fallimenti) .btn:hover{
    translate:0 -3px;
  }
}

/* ---- 15. Tipografia: niente righe orfane sui blocchi chiave ---- */
.sectionHead h2, .head h2, .failIntro h2{
  text-wrap:balance;
}
.sectionHead p, .heroSub{
  text-wrap:pretty;
}

/* ---- 15b. Anchor navigation: i target non finiscono sotto la
   topbar sticky (nessuna regola scroll-margin esisteva nel sito).
   Vale solo per lo scroll-into-view: zero impatto sul layout. ---- */
[id]{
  scroll-margin-top:calc(var(--header, 72px) + 18px);
}

/* ---- 15b2. Hero servizi: stop al vuoto sotto il testo. Ogni pagina
   servizio fissava min-height:100svh inline: con contenuti brevi
   restavano 200-400px morti tra hero e primo blocco (misurati).
   Il tetto vale solo per le 6 pagine servizi (scope via id univoci);
   dove il contenuto dell'hero è più alto del tetto (PM, sysadmin
   mobile) vince il contenuto e non cambia nulla. index NON è toccata
   (.heroWorld non è selezionata). L'!important serve a scavalcare in
   un punto solo TUTTE le altezze sparse: 100svh inline per pagina,
   100vh!important desktop in hysad-desktop-80.css, gli step 92/88svh
   di it-support — questo è ora l'unico posto che decide l'altezza. ---- */
body:has(#radarGrid) .pageHero,
body:has(#radarGrid) .hero,
body:has(#fallimenti) .hero,
body:has(#aiGraph) .hero,
body:has(#malwareCanvas) .hero,
body:has(#sysCanvas) .hero,
body:has(#supportCanvas) .hero{
  min-height:min(72svh, 640px)!important;
}

/* ---- 15c. Nav: evidenza pagina corrente (aria-current="page").
   Usa il --c1 del singolo link (inline nell'HTML): il colore è quello
   del servizio. Nel menu mobile vincono comunque le regole !important
   di hysad-shared-mobile-menu.css, che gestisce lo stesso attributo. ---- */
.navLinks a[aria-current="page"]{
  border-color:color-mix(in srgb, var(--c1, #94ffd1), transparent 55%);
  background:color-mix(in srgb, var(--c1, #94ffd1), transparent 92%);
}

/* ---- 16. Movimento: solo per chi non chiede reduced-motion ---- */
@media (prefers-reduced-motion: no-preference){
  body::before{
    animation:hysadFxAuroraDrift 52s ease-in-out infinite alternate;
  }
  @keyframes hysadFxAuroraDrift{
    from{ transform:translate3d(-1.6%,1.2%,0) scale(1); }
    to{   transform:translate3d(1.6%,-1.4%,0) scale(1.05); }
  }

  .sectionHead h2:not(.protocolTitle):not(.partnersTitle)::after,
  .head h2::after,
  .failIntro h2::after{
    animation:hysadFxUnderlineSheen 5.5s ease-in-out infinite alternate;
  }
  @keyframes hysadFxUnderlineSheen{
    from{ background-position:0% 50%; }
    to{   background-position:100% 50%; }
  }

  .footer.hysadFooter:before{
    animation:hysadFxFooterSweep 7s ease-in-out infinite alternate;
  }
  @keyframes hysadFxFooterSweep{
    from{ background-position:0% 50%; }
    to{   background-position:100% 50%; }
  }
}

/* ---- 17. Firme di settore (v3): micro-animazioni caratterizzanti.
   Un tratto distintivo per pagina, sempre discreto. Il movimento del
   puntatore è gestito da hysad-service-fx.js (solo `translate`). ---- */

/* 17a. Parallasse dei canvas ambientali: la transition ammorbidisce
   i valori scritti dal JS. #radarGrid è l'unico canvas dentro l'hero
   (overflow:hidden): lo scale copre i bordi durante lo spostamento. */
@media (hover:hover) and (pointer:fine){
  #radarGrid, #aiGraph, #malwareCanvas, #supportCanvas, #sysCanvas{
    transition:translate .6s cubic-bezier(.15,.65,.3,1);
  }
  #radarGrid{ scale:1.04; }
}

@media (prefers-reduced-motion: no-preference){
  /* 17b. Cyber: scanline di perlustrazione sull'hero. Anchor su
     .heroInner (già relative, zero discendenti absolute — misurato);
     larghezza 100vw, il clip lo fa l'overflow:hidden dell'hero.
     Sta sopra al testo ma a opacità bassissima: effetto CRT/scan. */
  body:has(#malwareCanvas) .hero .heroInner::after{
    content:"";
    position:absolute;
    left:calc(50% - 50vw);
    width:100vw;
    top:-140px;
    height:120px;
    pointer-events:none;
    z-index:3;
    background:linear-gradient(180deg,
      transparent,
      rgba(255,208,160,.05) 42%,
      rgba(255,155,155,.13) 50%,
      rgba(255,208,160,.05) 58%,
      transparent);
    animation:hysadFxScan 8.5s cubic-bezier(.4,.05,.6,.95) infinite;
  }
  @keyframes hysadFxScan{
    0%, 16%{ translate:0 0;     opacity:0; }
    26%    {                    opacity:1; }
    72%    {                    opacity:1; }
    84%,100%{ translate:0 88vh; opacity:0; }
  }

  /* 17c. PM: il flusso del kanban hero — le colonne To do → In process
     → Done si "accendono" in sequenza, come un progetto che avanza.
     Anima solo border-color e box-shadow, nessun pseudo nuovo. */
  body:has(#fallimenti) .pmKanbanCol{
    animation:hysadFxKanbanFlow 6.3s ease-in-out infinite;
  }
  body:has(#fallimenti) .pmKanbanCol.process{ animation-delay:2.1s; }
  body:has(#fallimenti) .pmKanbanCol.done{    animation-delay:4.2s; }
  @keyframes hysadFxKanbanFlow{
    0%, 14%, 100%{
      border-color:rgba(183,232,255,.12);
      box-shadow:0 0 0 0 rgba(122,167,255,0);
    }
    7%{
      border-color:rgba(183,232,255,.42);
      box-shadow:0 8px 26px -10px rgba(122,167,255,.30);
    }
  }

  /* 17d. SysAdmin: riflesso periodico sulle barre CPU/RAM/DISK della
     dashboard hero — il "sistema vivo". Il fill è l'<i> inline-width. */
  body:has(#sysCanvas) .bar i{
    position:relative;
    overflow:hidden;
  }
  body:has(#sysCanvas) .bar i::after{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:34%;
    translate:-130% 0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    animation:hysadFxBarSheen 4.8s ease-in-out infinite;
  }
  @keyframes hysadFxBarSheen{
    0%, 52%  { translate:-130% 0; }
    88%, 100%{ translate:340% 0; }
  }
}

/* Reduced-motion: la parallasse si azzera anche se il JS ha già
   scritto un translate (il JS stesso smette e resetta, doppia rete). */
@media (prefers-reduced-motion: reduce){
  #radarGrid, #aiGraph, #malwareCanvas, #supportCanvas, #sysCanvas{
    translate:none!important;
    scale:none!important;
  }
}