/* ============================================================
   Livello "wow": profondita', luce, movimento.
   Tutto e' fatto in modo che si spenga da solo se il sistema
   dice "meno animazioni" (prefers-reduced-motion) o se si
   attiva la modalita' calma.
   ============================================================ */

:root {
  --grad-blu:   linear-gradient(135deg, #1B5FA8 0%, #3E8FD8 55%, #56C6E8 100%);
  --grad-viola: linear-gradient(135deg, #6A3FA0 0%, #9B5DE5 60%, #E36BAE 100%);
  --grad-verde: linear-gradient(135deg, #157A46 0%, #2FB36B 60%, #8BE0A8 100%);
  --grad-caldo: linear-gradient(135deg, #C2410C 0%, #F59E0B 60%, #FDE68A 100%);
  --alone:      0 1px 2px rgba(30,20,10,.05), 0 8px 24px -8px rgba(30,20,10,.16), 0 2px 6px -2px rgba(30,20,10,.08);
  --alone-alto: 0 2px 4px rgba(30,20,10,.06), 0 22px 48px -14px rgba(30,20,10,.28);
  --luce:       inset 0 1px 0 rgba(255,255,255,.7);
  --velo:       rgba(255,255,255,.72);
}
html[data-tema="scuro"] {
  --alone:      0 1px 2px rgba(0,0,0,.5), 0 10px 30px -10px rgba(0,0,0,.7);
  --alone-alto: 0 2px 6px rgba(0,0,0,.55), 0 26px 60px -16px rgba(0,0,0,.85);
  --luce:       inset 0 1px 0 rgba(255,255,255,.08);
  --velo:       rgba(30,35,43,.75);
}

/* ---------- sfondo vivo, lentissimo, dietro a tutto ---------- */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  rgba(86,198,232,.20), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 14%, rgba(155,93,229,.18), transparent 62%),
    radial-gradient(40vmax 40vmax at 70% 92%, rgba(47,179,107,.16), transparent 62%),
    radial-gradient(30vmax 30vmax at 20% 85%, rgba(245,158,11,.14), transparent 62%);
  filter: blur(6px);
  animation: respiro 46s ease-in-out infinite alternate;
}
html[data-tema="scuro"] body::before { opacity: .55; }
@keyframes respiro {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* griglia tecnologica appena accennata */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(to right, rgba(120,110,95,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,110,95,.08) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120vmax 90vmax at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- barra in alto: vetro ---------- */
.barra {
  background: var(--velo);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 6px 26px -18px rgba(0,0,0,.6);
}
.barra .titolo { font-size: 1rem; }

/* ---------- riquadri: profondita' ---------- */
.riquadro, .quiz, .gioco, .scheda, .disegno {
  box-shadow: var(--alone), var(--luce);
  background-image: linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
}
html[data-tema="scuro"] .riquadro, html[data-tema="scuro"] .quiz,
html[data-tema="scuro"] .gioco, html[data-tema="scuro"] .scheda, html[data-tema="scuro"] .disegno {
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), transparent 42%);
}

.scheda { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s; }
.scheda:hover { transform: translateY(-5px); box-shadow: var(--alone-alto), var(--luce); }
.scheda::after {
  content: ""; display: block; height: 5px; border-radius: 999px; margin-top: auto;
  background: var(--grad-blu); opacity: .85;
}
.scheda.fatta::after   { background: var(--grad-verde); }
.scheda.bloccata::after{ background: var(--bordo); }

/* ---------- bottoni ---------- */
button, .bottone {
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, border-color .18s;
  box-shadow: 0 2px 0 var(--bordo), 0 6px 16px -10px rgba(0,0,0,.5);
  position: relative; overflow: hidden;
}
button:hover:not(:disabled), .bottone:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--bordo), 0 14px 26px -14px rgba(0,0,0,.55); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 var(--bordo); }
button.primario, .bottone.primario {
  background: var(--grad-blu); border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px -8px rgba(27,95,168,.75), var(--luce);
}
html[data-tema="scuro"] button.primario, html[data-tema="scuro"] .bottone.primario { color: #fff; }
button.primario:hover { box-shadow: 0 12px 28px -10px rgba(27,95,168,.85), var(--luce); }
button.verde { background: var(--grad-verde); border-color: transparent; color: #fff; box-shadow: 0 6px 20px -8px rgba(21,122,70,.7); }
html[data-tema="scuro"] button.verde { color: #fff; }
/* lampo di luce che attraversa il bottone principale */
button.primario::after, button.verde::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); animation: lampo 4.5s ease-in-out infinite;
}
@keyframes lampo { 0%,72% { left: -60%; } 88%,100% { left: 130%; } }

/* ---------- titoli ---------- */
h1 .brillante, .titolo-brillante {
  background: var(--grad-viola); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- copertina della lezione ---------- */
.copertina {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 2.2rem 2rem; margin: 1.4rem 0 1.8rem;
  color: #fff; background: var(--grad-viola);
  box-shadow: var(--alone-alto);
}
.copertina h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); margin-bottom: .3rem; color: #fff; }
.copertina p { color: rgba(255,255,255,.94); max-width: 46ch; margin: 0; }
.copertina .pillole { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.pillola {
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px; padding: .34em .95em; font-size: .82rem; font-weight: 800;
  backdrop-filter: blur(6px);
}
.copertina::after {
  content: ""; position: absolute; inset: -40% -10%; pointer-events: none;
  background: radial-gradient(40% 60% at 78% 20%, rgba(255,255,255,.36), transparent 70%);
  animation: respiro 30s ease-in-out infinite alternate;
}

/* ---------- slide: entrata a scalare ---------- */
.slide > * { animation: sali .5s cubic-bezier(.2,.8,.2,1) both; }
.slide > *:nth-child(1) { animation-delay: .02s }
.slide > *:nth-child(2) { animation-delay: .07s }
.slide > *:nth-child(3) { animation-delay: .12s }
.slide > *:nth-child(4) { animation-delay: .17s }
.slide > *:nth-child(5) { animation-delay: .22s }
.slide > *:nth-child(n+6) { animation-delay: .26s }
@keyframes sali { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.in-una-frase {
  background: linear-gradient(120deg, var(--giallo-chiaro), transparent 140%);
  border: 0; border-left: 12px solid var(--giallo);
  box-shadow: var(--alone);
  position: relative;
}
.in-una-frase::before {
  content: "💡"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.7rem; opacity: .5;
}

.numero-slide { background: var(--grad-viola); box-shadow: 0 6px 16px -8px rgba(106,63,160,.9); }

/* ---------- barra di avanzamento ---------- */
.avanzamento { height: 14px; box-shadow: inset 0 2px 5px rgba(0,0,0,.14); border: 0; background: var(--sfondo-3); }
.avanzamento > div {
  background: var(--grad-verde); position: relative; overflow: hidden;
  transition: width .55s cubic-bezier(.2,.8,.2,1);
}
.avanzamento > div::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 10px, transparent 10px 22px);
  animation: scorri 1.2s linear infinite;
}
@keyframes scorri { to { transform: translateX(22px) } }

/* ---------- gioco ---------- */
.gioco {
  border: 0; position: relative;
  background: var(--sfondo-2);
  box-shadow: var(--alone-alto), var(--luce);
}
.gioco::before {
  content: ""; position: absolute; inset: -3px; border-radius: calc(var(--raggio) + 3px); z-index: -1;
  background: var(--grad-viola); opacity: .9;
  animation: pulsa 6s ease-in-out infinite;
}
@keyframes pulsa { 0%,100% { filter: hue-rotate(0deg) } 50% { filter: hue-rotate(24deg) } }
.gioco .testata h3 { font-size: 1.15rem; }
.gioco canvas { border: 0; box-shadow: inset 0 0 0 2px var(--bordo), 0 10px 30px -18px rgba(0,0,0,.7); border-radius: 14px; }
.gioco .obiettivo { background: linear-gradient(135deg, var(--viola-chiaro), transparent 160%); border: 1px solid var(--bordo); }
.distintivo { background: var(--grad-verde); box-shadow: 0 6px 16px -8px rgba(21,122,70,.9); animation: comparsa .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes comparsa { from { transform: scale(.4); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.tessera { transition: transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s, background .16s; box-shadow: 0 2px 0 var(--bordo); }
.tessera:hover { transform: translateY(-3px) }
.tessera.scelta { background: linear-gradient(135deg, var(--blu-chiaro), transparent 180%); }

.messaggio.ok { animation: scatto .4s cubic-bezier(.2,1.6,.4,1) both }
.messaggio.no { animation: scuoti .35s ease-in-out both }
@keyframes scatto { from { transform: scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes scuoti { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-7px) } 75% { transform: translateX(7px) } }

/* ---------- note ---------- */
.nota { box-shadow: var(--alone); border-radius: 14px; animation: sali .4s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- disegni ---------- */
.disegno svg .traccia {
  stroke-dasharray: var(--lung, 900); stroke-dashoffset: var(--lung, 900);
  animation: traccia 1.5s cubic-bezier(.4,0,.2,1) .2s forwards;
}
@keyframes traccia { to { stroke-dashoffset: 0 } }
.disegno svg .apparire { animation: sali .6s cubic-bezier(.2,.8,.2,1) both; }
.disegno svg .lampeggia { animation: brilla 2.6s ease-in-out infinite }
@keyframes brilla { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

/* ---------- contatore XP ---------- */
.xp { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; font-size: .9rem;
      background: var(--grad-caldo); color: #fff; padding: .3em .9em; border-radius: 999px;
      box-shadow: 0 6px 18px -8px rgba(194,65,12,.8); }
.xp.sale { animation: scatto .45s cubic-bezier(.2,1.6,.4,1) }

/* ---------- anello di avanzamento nella mappa ---------- */
.anello { width: 3.1rem; height: 3.1rem; flex: none; }
.anello circle { fill: none; stroke-width: 7; }
.anello .fondo { stroke: var(--sfondo-3) }
.anello .pieno { stroke: var(--verde); stroke-linecap: round; transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1) }

/* ---------- modalita' calma / meno movimento ---------- */
html[data-calma="si"] *, html[data-calma="si"] *::before, html[data-calma="si"] *::after {
  animation: none !important; transition: none !important;
}
html[data-calma="si"] body::before { background: none }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  body::before { animation: none }
}