/* ======================================================================
   MODALITÀ MATRIX — verde fosforo su nero, pioggia di caratteri
   Agisce solo con html.matrix-mode (messa subito in head.php, niente lampo).
   Si appoggia allo strato design.css: cambia i colori e il font, il layout
   resta quello del sito. La pioggia è un <canvas id="matrix-pioggia">
   creato dallo script in pdp.php.
   ====================================================================== */

html.matrix-mode{
  --bg:          #000;
  --bg-2:        rgba(0, 14, 5, .86);
  --bg-3:        #031a0b;
  --line:        #0e4420;
  --line-soft:   #0a2e16;
  --fg:          #d2ffdc;
  --fg-muted:    #9ae6ab;
  --dim:         #5aa96d;
  --orange:      #00ff41;
  --orange-2:    #6bff93;
  --orange-neon: #00ff41;
  --orange-dim:  #00b82e;
  --orange-glow: rgba(0, 255, 65, .35);
  --orange-soft: rgba(0, 255, 65, .1);
  --on-accent:   #001a07;
  --font-body:   var(--font-mono);
  --font-sans:   var(--font-mono);
  color-scheme: dark;
  background: #000 !important;
}
html.matrix-mode body{
  background: transparent !important;
  color: var(--fg);
  font-family: var(--font-mono);
}
html.matrix-mode ::selection{ background: #00ff41; color: #000; }

/* pioggia dietro a tutto */
#matrix-pioggia{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
}
html:not(.matrix-mode) #matrix-pioggia{ display: none; }

/* titoli con un leggero bagliore da monitor */
html.matrix-mode :is(h1, h2, h3){
  color: #e6ffec;
  text-shadow: 0 0 12px rgba(0, 255, 65, .35);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
html.matrix-mode h1 .hl, html.matrix-mode h2 .hl{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #00ff41;
}
html.matrix-mode :is(p, li){ color: var(--fg-muted); }

/* pannelli: vetro scuro sopra la pioggia */
html.matrix-mode :is(.card, .post, .tool-block, .oss-card, .mp-card, .terminal, details, .callout, .articolo, article, .widgets){
  background: rgba(0, 10, 4, .88) !important;
  border-color: var(--line) !important;
}
html.matrix-mode body.pagina-articolo > .container{
  background: rgba(0, 0, 0, .8);
  border-radius: 16px;
}
html.matrix-mode .navbar.sito-nav{
  background: rgba(0, 0, 0, .82) !important;
  border-bottom-color: var(--line) !important;
}
html.matrix-mode .nav-brand img{ filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(6) brightness(.95); }
html.matrix-mode .logohome{ animation: none !important; filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(6) brightness(.95); }

/* il tema chiaro/scuro non serve in modalità Matrix */
html.matrix-mode #toggle-tema{ display: none !important; }

/* pulsanti pieni: verde con testo nero */
html.matrix-mode :is(.btn-sostieni, .reply-btn, .btn.primary, .btn-primary, .btn:not(.btn-outline):not(.ghost):not(.secondary)){
  background: #00ff41 !important;
  color: #001a07 !important;
}
html.matrix-mode :is(input, textarea, select){
  background: #000 !important;
  color: #d2ffdc !important;
  border-color: var(--line) !important;
}

/* cursore lampeggiante dopo il titolo principale */
html.matrix-mode h1::after{
  content: "_";
  margin-left: .1em;
  color: #00ff41;
  animation: matrix-cursore 1s steps(1) infinite;
}
@keyframes matrix-cursore{ 50%{ opacity: 0; } }

/* ---------- pulsante nel footer ---------- */
.matrix-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: #000;
  border: 1px solid var(--line);
  color: #00ff41;
  font: 700 11px/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: -0.5px;
  cursor: pointer;
  vertical-align: middle;
}
.matrix-toggle::before{ content: "01"; text-shadow: 0 0 6px rgba(0, 255, 65, .7); }
.matrix-toggle:hover{ border-color: #00ff41; }
html.matrix-mode .matrix-toggle{ border-color: #00ff41; box-shadow: 0 0 0 3px rgba(0, 255, 65, .18); }
html.retro-mode .matrix-toggle{ border-radius: 0; width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce){
  html.matrix-mode h1::after{ animation: none; }
}
@media print{
  #matrix-pioggia{ display: none !important; }
}