/* ==========================================================================
   HOME — ELEMENTI DISTURBANTI (li anima js/disturbi.js)
   Gli errori che una UI/UX designer non farebbe mai, fatti apposta.
   Sono tutti finestre di Windows 95, lo stesso mondo dei popup: tra loro si
   somigliano in tutto, e dal resto del collage (blocchi bianchi e piatti)
   si staccano il piu' possibile. Salgono e si muovono come gli altri blocchi.
   ========================================================================== */

.w95{width:300px;background:#c0c0c0;padding:3px;color:#000;text-align:left;cursor:default;
  font:400 13px/1.4 'Heebo',sans-serif;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px #808080,inset 2px 2px #fff}
.w95__bar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:3px 3px 3px 6px;
  background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:900;font-size:12px}
.w95__bar i{width:16px;height:14px;flex:none;background:#c0c0c0;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080}
.w95__corpo{padding:14px 14px 14px}
.w95__corpo p{margin:0 0 12px}
.w95__tasti{display:flex;justify-content:center;gap:8px}
.w95 button{font:400 13px/1.4 'Heebo',sans-serif;cursor:pointer;color:#000;background:#c0c0c0;border:0;
  min-width:86px;padding:4px 12px;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
.w95 button:active{box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080}
.w95 button:first-child{outline:1px solid #000;outline-offset:-1px}
.w95 button:focus-visible{outline:1px dotted #000;outline-offset:-5px}

/* ---------- cookie: i pulsanti si scambiano ---------- */
.cookie .w95__tasti button{transition:transform .2s steps(2)}
.cookie .w95__tasti.scambiati .si{order:2}
.cookie .w95__tasti.scambiati .no{order:1}

/* ---------- caricamento al 99% ---------- */
.carica{width:320px}
.carica__barra{height:20px;padding:2px;background:#c0c0c0;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.carica__barra i{display:block;height:100%;width:99%;
  background:repeating-linear-gradient(90deg,#000080 0 9px,transparent 9px 11px);
  animation:ci-prova 7s steps(1) infinite}
@keyframes ci-prova{0%,92%{width:99%}93%{width:99.6%}96%{width:98%}}
.carica__resta{display:flex;justify-content:space-between;margin-top:8px;font-size:12px}
.carica__anni{font-weight:400}
/* il glitch: la finestra si sfasa per un attimo, rosso e azzurro */
.carica.glitch666 .w95__corpo{animation:glitch666 .42s steps(1) 1}
.carica.glitch666 .carica__anni{color:#ff0000;font-weight:900}
@keyframes glitch666{
  0%{transform:translate(-3px,0);filter:drop-shadow(3px 0 #ff0000) drop-shadow(-3px 0 #00dbff);clip-path:inset(0 0 45% 0)}
  25%{transform:translate(4px,1px);clip-path:inset(40% 0 10% 0)}
  50%{transform:translate(-2px,-1px);filter:drop-shadow(-2px 0 #ff0000) drop-shadow(2px 0 #00dbff);clip-path:none}
  75%{transform:translate(1px,0)}
  100%{transform:none;filter:none}
}

/* ---------- "Non cliccare" col tooltip giallo di sistema ---------- */
.nonclic{width:260px}
.nonclic .w95__corpo{position:relative;padding-top:76px}
.nonclic__tip{position:absolute;left:14px;right:14px;top:12px;background:#ffffe1;border:1px solid #000;
  padding:5px 8px;font-size:12px;line-height:1.35}
.nonclic__tasto{width:100%;padding:12px !important;font-weight:900 !important;font-size:15px !important}
.nonclic.trema{animation:nonclic-trema .35s steps(2) 1}
@keyframes nonclic-trema{25%{margin-left:-7px}50%{margin-left:7px}75%{margin-left:-4px}}

/* la punizione: tutto in bianco e nero, finche' non chiedi i colori */
.grigio{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:16px;
  -webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);opacity:0;transition:opacity 1.2s ease}
.grigio.acceso{opacity:1}
.grigio .w95{width:min(320px,100%)}

/* ---------- il campo che scappa ---------- */
.scappa .w95__corpo{position:relative;height:118px}
.scappa label{display:block;margin-bottom:2px}
.scappa small{display:block;font-size:12px;color:#333}
.scappa input{position:absolute;left:14px;top:64px;width:190px;padding:4px 6px;border:0;background:#fff;color:#000;
  font:400 13px 'Heebo',sans-serif;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #dfdfdf,inset 2px 2px #0a0a0a;
  transition:left .2s steps(3),top .2s steps(3)}
.scappa input:focus{outline:1px dotted #000;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .carica__barra i,.nonclic.trema,.carica.glitch666 .w95__corpo{animation:none}
  .scappa input,.cookie .w95__tasti button,.grigio{transition:none}
}