/* Stile condiviso del sito "La Matematica e le Scienze in Movimento" (Prof. T)
   Tema scuro, ispirato alla strumentazione scientifica. Solo CSS; l'unico script del sito e' frasi.js (frasi della home). */

:root {
  /* Base */
  --sfondo: #0a0f1a;
  --pannello: #111a2b;
  --pannello-off: #0d1422;
  --linea: #22304a;
  --linea-off: #1b2840;
  --testo: #e6ecf5;
  --testo-soft: #8fa0b8;
  --testo-card: #c3cfe0;
  --testo-dim: #6f819c;

  /* Colore delle quattro aree (titolo di blocco) */
  --area-numeri: #6aa5ff;
  --area-materia: #ffb454;
  --area-viventi: #6fd08c;
  --area-cosmo: #b38cff;

  /* Sfumature per disciplina: dentro ogni area, dal più chiaro al più scuro */
  --aritmetica: #9cc5ff;
  --algebra: #6aa5ff;
  --geometria: #4a86f0;
  --statistica: #3470d8;

  --fisica: #ffd08a;
  --chimica: #e0902a;

  --biologia: #8ee0a6;
  --anatomia: #5cc47f;
  --ecologia: #3fa862;

  --astronomia: #c9aaff;
  --terra: #9a6fe8;

  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--testo);
  font-family: Calibri, Carlito, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
  /* alone in alto e griglia sottile, solo con gradienti CSS */
  background-color: var(--sfondo);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(74, 134, 240, 0.18), transparent 60%),
    linear-gradient(rgba(143, 160, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 160, 184, 0.06) 1px, transparent 1px);
  background-size: 100% 560px, 36px 36px, 36px 36px;
  background-repeat: no-repeat, repeat, repeat;
  background-position: top center, 0 0, 0 0;
}

h1, h2, h3, .firma {
  font-family: Cambria, Georgia, "Times New Roman", serif;
}

a { color: inherit; text-decoration: none; }

.contenitore {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  counter-reset: sezione;
}

/* Etichetta piccola in monospazio */
.etichetta {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-soft);
}

/* ---------- Intestazione home ---------- */
/* Testo a sinistra (firma e titolo), caricatura a destra, linea luminosa sotto a tutto */
.hero {
  padding: 56px 20px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "testo persona"
    "frase frase"
    "filo filo";
  column-gap: 28px;
}
.hero .hero-testo { grid-area: testo; align-self: center; }
.hero .persona {
  grid-area: persona;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.hero .filo { grid-area: filo; }
.hero .titolo-sito {
  margin: 12px 0 14px;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--testo);
}
.hero .riga-firma {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.hero .logo {
  width: 44px;
  height: 44px;
  align-self: center;
  border-radius: 10px;
}
/* La firma "Prof. T" e' un'immagine SVG (firma.svg), ricavata dal font Nothing You Could Do, licenza SIL OFL.
   In home sta dentro il titolo, sopra "La Matematica e le Scienze in Movimento".
   Il trattino che la separa dal resto del titolo e' nascosto alla vista ma resta per gli screen reader. */
.hero .firma-titolo {
  display: block;
  height: clamp(2.8rem, 8vw, 3.8rem);
  width: auto;
  margin: 0 0 8px -6px;
}
.hero .titolo-sito .sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero .sottotitolo {
  color: var(--testo-soft);
  font-size: 1.1rem;
}
.hero .filo {
  width: 100%;
  height: 2px;
  margin: 26px 0 0;
  background: linear-gradient(90deg, #e6ecf5, rgba(106, 165, 255, 0.55) 40%, rgba(106, 165, 255, 0));
  box-shadow: 0 0 10px rgba(106, 165, 255, 0.7);
}

/* Caricatura di Prof. T: occhi aperti, poi ogni tanto un occhiolino e un bagliore sulla lente.
   Le immagini hanno sfondo trasparente; il busto sfuma in basso verso la linea. */
.mascotte {
  position: relative;
  flex-shrink: 0;
  width: clamp(170px, 25vw, 260px);
  aspect-ratio: 700 / 769;
  -webkit-mask-image: linear-gradient(#000 86%, transparent);
  mask-image: linear-gradient(#000 86%, transparent);
}
.mascotte img { display: block; width: 100%; height: auto; }
.mascotte .occhiolino {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: ammicca 9s infinite;
}
.mascotte .bagliore {
  position: absolute;
  left: 31.06%;
  top: 37.88%;
  width: 12%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  animation: bagliore 9s infinite;
}
@keyframes ammicca {
  0%, 90% { opacity: 0; }
  90.5%, 95% { opacity: 1; }
  95.5%, 100% { opacity: 0; }
}
@keyframes bagliore {
  0%, 72% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  79% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(30deg); }
  86%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(70deg); }
}

/* Fumetto di Prof. T: sotto titolo e caricatura, con la codina rivolta verso di lui.
   Le frasi sono sovrapposte nella stessa cella della griglia: il fumetto ha l'altezza della frase piu' lunga
   e la pagina non "salta" quando la frase cambia. Le gestisce frasi.js (senza JavaScript resta la frase .attiva). */
.fumetto {
  grid-area: frase;
  position: relative;
  margin-top: 18px;
  padding: 14px 20px 13px;
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: 14px;
}
.fumetto::before {
  content: "";
  position: absolute;
  top: -7px;
  right: calc(clamp(170px, 25vw, 260px) / 2 - 6px);   /* al centro della colonna della caricatura */
  width: 12px;
  height: 12px;
  background: var(--pannello);
  border: solid var(--linea);
  border-width: 1px 0 0 1px;
  transform: rotate(45deg);
}
.frasi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.frasi li {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
}
.frasi li.attiva {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 1s ease, transform 1s ease, visibility 0s;
}
.frasi.senza-transizione li { transition: none; }
.frasi .frase {
  margin: 0 0 6px;
  font: italic 1.12rem/1.45 Cambria, Georgia, "Times New Roman", serif;
  color: var(--testo);
}
.frasi .fonte {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-dim);
}
.frasi .disc { color: var(--colore, var(--testo-soft)); }   /* colore della disciplina, dalla classe del <li> */

/* ---------- Intestazione pagine interne ---------- */
.testata {
  padding: 22px 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--linea);
}
.testata .firma {
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
  color: #9cc5ff;
}

.titolo-pagina {
  margin: 26px 0 6px;
  font-size: 2.2rem;
  color: var(--colore, var(--testo));
}
.intro-pagina {
  margin: 0 0 24px;
  color: var(--testo-soft);
}

/* ---------- Blocchi (aree) ---------- */
.blocco { margin: 30px 0 0; }
.blocco h2 {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 14px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--area);
  color: var(--testo);
}
/* numerazione automatica "Sezione 01", "Sezione 02", ... */
.blocco h2::before {
  counter-increment: sezione;
  content: "Sezione " counter(sezione, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-dim);
}

.numeri  { --area: var(--area-numeri); }
.materia { --area: var(--area-materia); }
.viventi { --area: var(--area-viventi); }
.cosmo   { --area: var(--area-cosmo); }

/* ---------- Card ---------- */
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  counter-reset: scheda;
}

.card {
  position: relative;
  display: block;
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 12px 16px 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--colore, var(--testo));
}
/* numerazione automatica delle schede: 01, 02, ... */
.card h3::before {
  counter-increment: scheda;
  content: counter(scheda, decimal-leading-zero);
  display: block;
  margin-bottom: 2px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--testo-dim);
}
.card p { margin: 0; font-size: 0.95rem; color: var(--testo-soft); }

/* angoli segnati, come un mirino */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--colore, var(--linea));
}
.card::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.card::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Schede attive (con link): bordo acceso e leggero bagliore */
a.card {
  border-color: var(--colore);
  box-shadow: 0 0 16px -6px var(--colore);
}
a.card p { color: var(--testo-card); }
a.card:hover,
a.card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 22px -2px var(--colore);
  outline: none;
}

/* Colore di ogni disciplina */
.aritmetica { --colore: var(--aritmetica); }
.algebra    { --colore: var(--algebra); }
.geometria  { --colore: var(--geometria); }
.statistica { --colore: var(--statistica); }
.fisica     { --colore: var(--fisica); }
.chimica    { --colore: var(--chimica); }
.biologia   { --colore: var(--biologia); }
.anatomia   { --colore: var(--anatomia); }
.ecologia   { --colore: var(--ecologia); }
.terra      { --colore: var(--terra); }
.astronomia { --colore: var(--astronomia); }

/* Discipline senza animazioni: spente, bordo tratteggiato */
.card.in-arrivo {
  background: var(--pannello-off);
  border: 1px dashed var(--linea-off);
  cursor: default;
}
.card.in-arrivo h3 { opacity: 0.6; }
.card.in-arrivo p { color: var(--testo-dim); }

/* ---------- Piè di pagina ---------- */
footer {
  margin-top: 48px;
  padding: 22px 20px 64px;
  text-align: center;
  color: var(--testo-soft);
  font-size: 0.9rem;
  border-top: 1px solid var(--linea);
}
footer .firma-img {
  display: block;
  height: 3rem;
  width: auto;
  margin: -0.4rem auto 0;
}
footer .motto { display: block; }
footer .copyright { display: block; margin-top: 8px; font-size: 0.78rem; color: var(--testo-dim); }

/* Firma cliccabile (pagine di disciplina): porta alla home, bagliore al passaggio */
footer .firma-home {
  display: block;
  width: fit-content;
  margin: -0.4rem auto 0;
}
footer .firma-home .firma-img { margin: 0; transition: filter 0.2s ease; }
footer .firma-home:hover .firma-img,
footer .firma-home:focus-visible .firma-img {
  filter: drop-shadow(0 0 8px rgba(106, 165, 255, 0.75));
}

/* ---------- Bottone di ritorno (in basso a sinistra) ----------
   Stesso aspetto di quello delle animazioni: sale di un livello.
   Il colore al passaggio e' l'accento dell'area (classe materia, viventi, cosmo, numeri). */
.torna-sito {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 9999;
  padding: 5px 12px;
  background: rgba(17, 26, 43, 0.95);
  color: var(--testo);
  border: 1px solid #3a4d70;
  border-radius: 999px;
  font: italic 700 15px Cambria, Georgia, "Times New Roman", serif;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
.torna-sito:hover,
.torna-sito:focus-visible {
  border-color: var(--accento, #6aa5ff);
  color: #fff;
  box-shadow: 0 0 14px 1px var(--accento-glow, rgba(106, 165, 255, 0.55));
  animation: torna-vibra 0.35s ease-in-out;
  outline: none;
}
.torna-sito.numeri  { --accento: #6aa5ff; --accento-glow: rgba(106, 165, 255, 0.55); }
.torna-sito.materia { --accento: #ffb454; --accento-glow: rgba(255, 180, 84, 0.55); }
.torna-sito.viventi { --accento: #6fd08c; --accento-glow: rgba(111, 208, 140, 0.55); }
.torna-sito.cosmo   { --accento: #b38cff; --accento-glow: rgba(179, 140, 255, 0.55); }
@keyframes torna-vibra {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .torna-sito:hover, .torna-sito:focus-visible { animation: none; }
}

/* Su schermi stretti il titolo va a capo da solo */
@media (max-width: 560px) {
  .hero .titolo-sito br { display: none; }
}

/* Su schermi stretti la caricatura passa sotto il titolo */
@media (max-width: 720px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "testo"
      "persona"
      "frase"
      "filo";
  }
  .hero .persona { justify-self: center; margin-top: 16px; }
  .fumetto::before { right: auto; left: 50%; margin-left: -6px; }
  .frasi .frase { font-size: 1.05rem; }
  .mascotte { width: min(46vw, 200px); }
}

/* Chi preferisce meno movimento non vede lo spostamento delle schede ne' l'animazione della caricatura */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  a.card:hover, a.card:focus-visible { transform: none; }
  .mascotte .occhiolino, .mascotte .bagliore { animation: none; }
  /* le frasi cambiano con una semplice dissolvenza, senza il leggero spostamento */
  .frasi li, .frasi li.attiva { transform: none; }
}