/* IL CAMMINO — esperienza di viaggio del corso. Rainbow neon, AA, mobile-first, prefers-reduced-motion. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:jrFadeOut .28s ease both}
::view-transition-new(root){animation:jrFadeIn .38s ease both}
@keyframes jrFadeOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes jrFadeIn{from{opacity:0;transform:translateY(8px)}}
html{scroll-behavior:smooth}
main.page{animation:jrEnter .45s ease-out}
@keyframes jrEnter{from{opacity:0}}

/* Bentornato */
.jwelcome{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;margin:0 0 1.3rem;padding:clamp(1.2rem,4vw,2.2rem);background:linear-gradient(var(--card),var(--card)) padding-box,var(--nx-rainbow) border-box;border:1.5px solid transparent;box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 34px rgba(0,212,255,.16)}
.jw-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42}
.jwelcome::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(7,7,9,.94) 0%,rgba(7,7,9,.82) 48%,rgba(7,7,9,.35) 100%)}
[data-theme="light"] .jwelcome::before{background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.5) 100%)}
.jw-body{max-width:640px}
.jw-body h2{font-size:clamp(1.45rem,4.5vw,2.1rem);line-height:1.15}
.jw-cta{box-shadow:0 0 0 1px rgba(255,215,0,.5),0 0 26px rgba(255,180,0,.45)}
.jw-step{font-size:.92rem}
.jw-intent{margin:1.1rem 0 0;display:inline-flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.45rem .9rem;border-radius:999px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.35);font-size:.95rem}
.jw-intent span{font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#7fe7ff}
[data-theme="light"] .jw-intent span{color:#006b8f}

/* Mappa del viaggio */
.jmap-wrap{margin:0 0 1.3rem;padding:1.1rem 1.1rem .8rem;border-radius:20px;background:radial-gradient(800px 300px at 20% 0%,rgba(0,212,255,.10),transparent 60%),radial-gradient(700px 300px at 90% 100%,rgba(184,41,255,.10),transparent 60%),var(--card);border:1px solid rgba(255,255,255,.08)}
.jmap{position:relative}
.jmap-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:.4rem 0 .2rem;-webkit-overflow-scrolling:touch}
.jmap-canvas{position:relative;min-width:760px;width:100%}
.jmap-compact .jmap-canvas{min-width:520px}
.jmap-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jmap-svg path{fill:none;stroke-linecap:round}
.jmap-trail{stroke:rgba(255,255,255,.18);stroke-width:3;stroke-dasharray:2 9}
[data-theme="light"] .jmap-trail{stroke:rgba(0,0,0,.22)}
.jmap-lit{stroke-width:4}
.jmap-glow{stroke-width:10;opacity:.65}
.jnode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;text-decoration:none;color:var(--ink);z-index:1;outline-offset:6px}
.jn-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:800;font-size:.82rem;background:#0b0e16;color:#cfe9ff;border:2px solid rgba(255,255,255,.25);transition:transform .25s ease,box-shadow .25s ease}
[data-theme="light"] .jn-dot{background:#fff;color:#123}
.jn-lab{position:absolute;top:calc(100% + .1rem);text-align:center;width:118px;line-height:1.15}
.jn-lab b{display:block;font-size:.78rem;letter-spacing:.06em}
.jn-lab small{display:block;font-size:.72rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jnode.done .jn-dot{background:radial-gradient(circle at 35% 30%,#fff7c2,#ffd700 45%,#ff9a00);color:#1a1200;border-color:#ffe66d;box-shadow:0 0 14px rgba(255,215,0,.65),0 0 30px rgba(255,160,0,.35)}
.jnode.open .jn-dot{border-color:#36d1ff;box-shadow:0 0 12px rgba(0,212,255,.45)}
.jnode.now .jn-dot{width:56px;height:56px;font-size:.95rem;color:#fff;background:radial-gradient(circle at 35% 30%,#7ff3ff,#0099ff 55%,#5b2bff);border-color:#fff;box-shadow:0 0 0 4px rgba(0,212,255,.25),0 0 24px rgba(0,212,255,.9),0 0 50px rgba(184,41,255,.55);animation:jrPulse 2.8s ease-in-out infinite}
@keyframes jrPulse{50%{box-shadow:0 0 0 9px rgba(0,212,255,.08),0 0 34px rgba(0,212,255,1),0 0 70px rgba(184,41,255,.65)}}
.jnode.veil{opacity:.45;filter:saturate(.3)}
.jnode.veil .jn-dot{border-style:dashed;color:var(--muted)}
.jnode.here .jn-dot{outline:2px solid #ffd700;outline-offset:4px}
a.jnode:hover .jn-dot,a.jnode:focus-visible .jn-dot{transform:scale(1.12)}
.jn-here{position:absolute;bottom:calc(100% + .35rem);white-space:nowrap;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .55rem;border-radius:999px;background:#ffd700;color:#1a1200;box-shadow:0 0 14px rgba(255,215,0,.6)}
.jmap-canvas{margin-bottom:2.6rem;margin-top:1.4rem}
.jmap-compact .jmap-canvas{margin-bottom:1.6rem;margin-top:.4rem}
.jmap-compact .jn-dot{width:30px;height:30px;font-size:.68rem}
.jmap-compact .jnode.now .jn-dot{width:38px;height:38px}
.jmap-legend{display:flex;flex-wrap:wrap;gap:.9rem;margin:.2rem 0 0;font-size:.8rem;color:var(--muted)}
.jmap-legend .lg::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.35rem;vertical-align:-1px;border:2px solid rgba(255,255,255,.3)}
.lg.done::before{background:#ffd700;border-color:#ffe66d}.lg.now::before{background:#00b7ff;border-color:#fff}.lg.open::before{border-color:#36d1ff}.lg.veil::before{border-style:dashed}
.jmap-unit{margin:0 0 1rem;padding:.3rem .8rem;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07)}
[data-theme="light"] .jmap-unit{background:rgba(255,255,255,.6)}

/* Diario di viaggio */
.jdiary{margin-bottom:1.3rem}
.jd-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem;border-left:2px solid transparent;border-image:var(--nx-rainbow) 1}
.jd-list li{position:relative;padding:.1rem 0 .1rem 1.1rem}
.jd-list li::before{content:"";position:absolute;left:-6px;top:.35rem;width:10px;height:10px;border-radius:50%;background:#00d4ff;box-shadow:0 0 10px rgba(0,212,255,.8)}
.jd-when{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* Barra di avanzamento come sentiero */
.progress.progress-lg{height:16px;overflow:visible;background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 8px,transparent 8px 16px) center/100% 3px no-repeat,rgba(255,255,255,.04);border-radius:999px}
[data-theme="light"] .progress.progress-lg{background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 8px,transparent 8px 16px) center/100% 3px no-repeat,rgba(0,0,0,.04)}
.progress.progress-lg > span{position:relative;display:block;height:100%;min-width:16px;border-radius:999px}
.progress.progress-lg > span::after{content:"";position:absolute;right:-9px;top:50%;width:22px;height:22px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#7ff3ff 40%,#00a2ff);box-shadow:0 0 0 3px rgba(255,255,255,.25),0 0 18px rgba(0,212,255,.95)}

/* Badge come tappe del cammino */
.badge-list .badge-card{position:relative;padding-left:3.6rem}
.badge-list .badge-card::before{content:"✦";position:absolute;left:1rem;top:1rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;font-size:1rem;color:#1a1200;background:radial-gradient(circle at 35% 30%,#fff7c2,#ffd700 50%,#ff9a00);box-shadow:0 0 14px rgba(255,215,0,.6)}

/* Rituali */
.jritual{position:relative;margin:0 0 1.3rem;border-radius:18px;padding:1rem 1.2rem;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,rgba(0,212,255,.75),rgba(184,41,255,.75),rgba(255,215,0,.75)) border-box;border:1.5px solid transparent;box-shadow:0 0 28px rgba(0,212,255,.14)}
.jritual summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline}
.jritual summary::-webkit-details-marker{display:none}
.jritual summary::after{content:"＋";margin-left:auto;color:var(--muted)}
.jritual[open] summary::after{content:"－"}
.jr-k{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7fe7ff;margin:0}
[data-theme="light"] .jr-k{color:#006b8f}
.jr-sum{color:var(--muted);font-size:.92rem}
.jr-grid{display:grid;gap:1.1rem;margin-top:.9rem}
@media(min-width:760px){.jr-grid{grid-template-columns:240px 1fr;align-items:start}}
.jr-img{width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 26px rgba(0,212,255,.25)}
.jr-anchor{margin:0 0 .8rem;padding:0;border:0;font-size:clamp(1.15rem,3.6vw,1.45rem);line-height:1.35;font-weight:700;background:var(--nx-rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.jr-anchor{color:var(--ink)}}
.jr-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.jr-chip{font:inherit;font-size:.9rem;padding:.45rem .85rem;border-radius:999px;cursor:pointer;color:var(--ink);background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.4);min-height:40px;transition:box-shadow .2s,background .2s}
.jr-chip:hover,.jr-chip:focus-visible,.jr-chip[aria-pressed="true"]{background:rgba(0,212,255,.18);box-shadow:0 0 14px rgba(0,212,255,.45)}
.jr-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.4rem 0 .9rem}
.jr-form input,.jr-form textarea{flex:1 1 260px;font:inherit;padding:.65rem .8rem;border-radius:12px;border:1px solid var(--line,rgba(255,255,255,.18));background:var(--card-subtle,rgba(255,255,255,.04));color:var(--ink)}
.jr-form input:focus,.jr-form textarea:focus{outline:none;border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,212,255,.25)}
.jr-take{display:block}
.jr-take label{display:block;font-weight:700;margin-bottom:.35rem}
.jr-take textarea{width:100%;margin-bottom:.6rem}
.jr-ok{font-size:.9rem;color:#4dff9a}
[data-theme="light"] .jr-ok{color:#0a7a3b}
.jr-out{overflow:hidden;isolation:isolate;margin-top:1.6rem;padding:1.3rem 1.3rem 1.1rem}
.jr-out.is-done{box-shadow:0 0 34px rgba(255,215,0,.22)}
.jr-next{margin:.9rem 0 0}
.jr-light{position:absolute;inset:-40%;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 60%,rgba(255,240,170,.55),rgba(0,212,255,.25) 30%,rgba(184,41,255,.12) 45%,transparent 62%)}
.jr-out.celebrate .jr-light{animation:jrLight 2.6s ease-out both}
@keyframes jrLight{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:.25;transform:scale(1.1)}}
.jr-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;background:#fff;box-shadow:0 0 10px currentColor,0 0 20px currentColor;animation:jrSpark 1.8s ease-out forwards}
@keyframes jrSpark{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

/* Lezioni: comparsa morbida + transizione a fine lezione */
.lesson{scroll-margin-top:90px}
.lesson.jr-arrive{animation:jrArrive .9s ease both}
@keyframes jrArrive{0%{box-shadow:0 0 0 0 rgba(0,212,255,0)}40%{box-shadow:0 0 0 3px rgba(0,212,255,.5),0 0 40px rgba(0,212,255,.35)}100%{box-shadow:none}}

@media (max-width:600px){
  .jmap-wrap{padding:.9rem .7rem .6rem;border-radius:16px}
  .jw-intent{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  main.page,.jnode.now .jn-dot,.lesson.jr-arrive{animation:none !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important}
  .jr-out.celebrate .jr-light{animation:none;opacity:.55;transform:none}
  .jr-spark{display:none}
}
/* contenimento: la mappa scorre in orizzontale senza allargare la pagina */
.jmap-wrap,.jmap,.jmap-unit,.jwelcome,.jdiary,.jritual{min-width:0;max-width:100%}
.jmap-scroll{max-width:100%}
.jn-lab{width:104px}
.jmap-compact .jn-lab{top:calc(100% + .45rem)}
.jmap-compact .jnode.now .jn-lab,.jmap-compact .jnode.here .jn-lab{top:calc(100% + .6rem)}
/* header mobile: tutto entra in 390px (il link al sito resta nel menu) */
@media (max-width:480px){.header-actions{gap:.4rem;flex-shrink:0}.header-actions .btn-rainbow-outline.small{padding:.4rem .6rem;font-size:.78rem}.topbar .brand{min-width:0;overflow:hidden}}
@media (max-width:440px){.header-actions .btn-rainbow-outline.small{display:none !important}}
/* i pulsanti oro restano oro anche in hover/focus (evita il ripiego blu scuro del tema base) */
.btn.btn-gold:hover,.btn.btn-gold:focus,.btn.btn-gold:active,.btn-gold:hover{background:linear-gradient(135deg,#fff07a 0%,#ffd700 45%,#ff9a1f 100%) !important;color:#14110a !important}