/* OmniNeo — percorso della home: Medici / Infermieri (06/10/2026).
   Sotto la ricerca, un tracciato di monitor si divide in due rami che portano a due cerchi.
   La scelta trasforma la home sul posto (classe body.percorso-inf): mezzaluna verde attorno
   al logo, anelli e titolo in verde, aree infermieristiche subito sotto. Logica in
   js/home-percorso.js; il tracciato è disegnato in SVG su misura del contenitore. */

.hp-scelta {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 240px;
  margin: 18px auto 0;
}
.hp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hp-nodo {
  position: absolute;
  bottom: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.hp-nodo:active { transform: scale(.95); }
.hp-nodo:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.hp-nodo svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hp-med {
  left: calc(25% - 52px);
  color: #ccfbf1;
  background: radial-gradient(circle at 50% 30%, rgba(45,212,200,.30), rgba(8,47,73,.55));
  border: 2px solid rgba(45,212,200,.8);
}
.hp-inf {
  left: calc(75% - 52px);
  color: #dcfce7;
  background: radial-gradient(circle at 50% 30%, rgba(34,197,94,.34), rgba(5,46,22,.6));
  border: 2px solid rgba(74,222,128,.9);
}
.hp-scelta.sel-med .hp-med { box-shadow: 0 0 30px rgba(45,212,200,.6); transform: scale(1.06); }
.hp-scelta.sel-med .hp-inf { opacity: .6; }
.hp-scelta.sel-inf .hp-inf { box-shadow: 0 0 32px rgba(34,197,94,.7); transform: scale(1.06); animation: hp-pulsa 2.6s ease-in-out infinite; }
.hp-scelta.sel-inf .hp-med { opacity: .6; }
@keyframes hp-pulsa {
  0%, 100% { box-shadow: 0 0 0 5px rgba(34,197,94,.15), 0 0 22px rgba(34,197,94,.6); }
  50%      { box-shadow: 0 0 0 9px rgba(34,197,94,.08), 0 0 36px rgba(34,197,94,.9); }
}

/* Area ancora nascosta (prima del lancio): cerchio chiuso con lucchetto e «presto» */
.hp-inf .hp-lucchetto, .hp-inf .hp-presto { display: none; }
.hp-scelta.hp-chiuso .hp-inf { opacity: .8; border-style: dashed; }
.hp-scelta.hp-chiuso .hp-inf .hp-cuore { display: none; }
.hp-scelta.hp-chiuso .hp-inf .hp-lucchetto { display: block; width: 24px; height: 24px; }
.hp-scelta.hp-chiuso .hp-inf .hp-presto { display: block; margin-top: -4px; font-size: 11px; font-weight: 600; letter-spacing: .5px; opacity: .85; }
.hp-avviso {
  max-width: 340px;
  margin: 14px auto 0;
  padding: 12px 16px;
  border-radius: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: #dcfce7;
  background: rgba(5,46,22,.72);
  border: 1px solid rgba(74,222,128,.45);
  box-shadow: 0 0 24px rgba(34,197,94,.25);
  animation: hp-entra .4s ease-out;
}
.hp-avviso a { color: #86efac; font-weight: 700; }
:root[data-theme="light"] .hp-avviso { color: #14532d; background: #f0fdf4; border-color: #86efac; box-shadow: 0 6px 20px rgba(21,128,61,.15); }
:root[data-theme="light"] .hp-avviso a { color: #15803d; }

/* Indizio: la mezzaluna si affaccia per un attimo dietro al logo, senza scritta */
body.hp-sbircia .hp-luna { opacity: .5; transform: none; transition: opacity 1.1s ease, transform 1.4s ease; }
body.hp-sbircia .hp-luna text { opacity: 0; }

/* Aree infermieristiche: visibili solo nel percorso Infermieri */
.hp-aree { display: none; width: 100%; max-width: 580px; margin: 26px auto 4px; text-align: left; }
body.percorso-inf .hp-aree { display: block; animation: hp-entra .6s cubic-bezier(.2,.8,.2,1); }
@keyframes hp-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hp-aree .section-label-icon { background: rgba(34,197,94,.15); color: #4ade80; }
.hp-aree .section-label-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-ico { display: grid; place-items: center; }
.hp-ico svg { width: 40px; height: 40px; fill: none; stroke: #4ade80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-aree .chapter-card.hp-off { opacity: .55; pointer-events: none; }
.hp-aree .hp-off small { display: block; font-weight: 500; opacity: .75; }
.hp-sotto { text-align: center; color: var(--text-muted); font-size: 13px; margin: 18px 0 6px; }

/* Trasformazione della home: logo, anelli, titolo, sottotitolo */
.logo-glow-outer, .logo-ring { transition: border-color .8s, background .8s; }
body.percorso-inf .logo-glow-outer { background: radial-gradient(circle, rgba(34,197,94,.22) 0%, transparent 70%); }
body.percorso-inf .logo-ring-1 { border-top-color: rgba(74,222,128,.65); border-right-color: rgba(74,222,128,.25); }
body.percorso-inf .logo-ring-2 { border-top-color: rgba(45,212,200,.45); border-bottom-color: rgba(45,212,200,.2); }
body.percorso-inf .logo-ring-3 { border-left-color: rgba(74,222,128,.25); border-right-color: rgba(74,222,128,.4); }
body.percorso-inf .hero-title-main {
  background: linear-gradient(135deg, #ffffff 0%, #4ade80 50%, #2dd4c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-tagline { transition: color .6s; }
body.percorso-inf .hero-tagline { color: #86efac; }

/* Mezzaluna attorno al logo */
.hp-luna {
  position: absolute;
  z-index: 6;
  top: -14px;
  right: -72px;
  width: 150px;
  height: 228px;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: scale(.7) rotate(-35deg);
  transform-origin: 0 50%;
  transition: opacity .7s, transform .9s cubic-bezier(.2,.9,.25,1.2);
}
body.percorso-inf .hp-luna { opacity: 1; transform: none; pointer-events: auto; }
.hp-luna svg { width: 100%; height: 100%; overflow: visible; }
.hp-luna .hp-falce { fill: url(#hpLunaGrad); filter: drop-shadow(0 0 10px rgba(34,197,94,.75)); }
.hp-luna text { fill: #86efac; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
@media (max-width: 600px) {
  .hp-luna { top: -18px; right: -64px; width: 128px; height: 196px; }
}

/* Tema chiaro (cool-paper) */
:root[data-theme="light"] .hp-med { color: #0f766e; background: radial-gradient(circle at 50% 30%, rgba(45,212,200,.18), rgba(255,255,255,.9)); border-color: #14b8a6; }
:root[data-theme="light"] .hp-inf { color: #15803d; background: radial-gradient(circle at 50% 30%, rgba(34,197,94,.20), rgba(255,255,255,.9)); border-color: #22c55e; }
:root[data-theme="light"] .hp-scelta.sel-med .hp-med { box-shadow: 0 6px 24px rgba(13,148,136,.30); }
:root[data-theme="light"] .hp-scelta.sel-inf .hp-inf { box-shadow: 0 6px 24px rgba(21,128,61,.30); animation: none; }
:root[data-theme="light"] .hp-luna text { fill: #15803d; }
:root[data-theme="light"] .hp-ico svg { stroke: #16a34a; }
:root[data-theme="light"] .hp-aree .section-label-icon { color: #15803d; }
/* site-refresh.css usa !important sul titolo in tema chiaro: qui serve lo stesso per vincere */
:root[data-theme="light"] body.percorso-inf .hero-title-main { background: linear-gradient(120deg, #052e16 0%, #15803d 50%, #0f766e 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
:root[data-theme="light"] body.percorso-inf .hero-tagline { color: #15803d; }

@media (prefers-reduced-motion: reduce) {
  .hp-nodo, .hp-luna, .logo-glow-outer, .logo-ring, .hero-tagline { transition: none; }
  .hp-scelta.sel-inf .hp-inf, body.percorso-inf .hp-aree { animation: none; }
}