/* public/static/iot/scena.css — la scena «una frase → Oravio OS → un dispositivo».
   Condivisa dalla home (#iot) e dalla pagina /iot: un file solo, così le due non divergono.
   Il riquadro è sempre scuro (è «dentro la macchina»), quindi sta bene sul tema chiaro e sullo scuro.
   Niente emoji: icone Material Symbols, classe .msr già caricata dalle due pagine. */
.iots{--iots-c1:#35C6E8;--iots-c2:#7B5CF0;--iots-c3:#C42FE8;--iots-ok:#3ddc97;
  position:relative;background:radial-gradient(120% 90% at 50% 40%,#141a3a 0%,#0a0d22 55%,#070915 100%);
  border-radius:24px;padding:18px 16px 16px;color:#eaf0ff;overflow:hidden;
  box-shadow:0 30px 80px rgba(16,20,60,.35),inset 0 0 0 1px rgba(255,255,255,.06);isolation:isolate}
.iots::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 75%)}
.iots .msr{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;
  text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:'liga'}

/* la frase della persona */
.iots-bolla{display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:16px 16px 16px 4px;padding:11px 14px;min-height:64px;font-size:15px;line-height:1.45;backdrop-filter:blur(6px)}
.iots-chi{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0a0d22;
  background:linear-gradient(135deg,var(--iots-c1),var(--iots-c2));border-radius:999px;padding:3px 9px;margin-top:2px}
.iots-frase{flex:1;min-width:0}
.iots-cursore{display:inline-block;width:2px;height:1.05em;background:var(--iots-c1);vertical-align:-2px;margin-left:2px;animation:iots-blink 1s steps(1) infinite}
@keyframes iots-blink{50%{opacity:0}}

/* il campo: nucleo al centro, dispositivi in orbita */
.iots-campo{position:relative;aspect-ratio:1/1;max-width:440px;margin:6px auto 18px}
.iots-fili{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.iots-fili line{stroke:rgba(140,160,255,.22);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .4s,stroke-width .4s}
.iots-fili line.on{stroke:#8f7bff;stroke-width:2.4}
.iots-orbita{position:absolute;left:50%;top:50%;width:76%;height:76%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px dashed rgba(140,160,255,.18);animation:iots-ruota 60s linear infinite}
@keyframes iots-ruota{to{transform:translate(-50%,-50%) rotate(360deg)}}

.iots-nucleo{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
             linear-gradient(135deg,var(--iots-c1),var(--iots-c2) 50%,var(--iots-c3));
  box-shadow:0 0 0 6px rgba(123,92,240,.14),0 0 46px rgba(123,92,240,.55);transition:box-shadow .5s,transform .5s}
.iots-nucleo b{font-size:clamp(10px,2.6vw,14px);font-weight:800;color:#fff;letter-spacing:.02em;text-shadow:0 1px 6px rgba(20,10,60,.4)}
.iots-nucleo .msr{font-size:clamp(20px,5.5vw,30px);color:#fff}
.iots.pensa .iots-nucleo{box-shadow:0 0 0 10px rgba(123,92,240,.22),0 0 80px rgba(196,47,232,.75);transform:translate(-50%,-50%) scale(1.06)}
.iots.pensa .iots-nucleo .msr{animation:iots-giro 1.1s linear infinite}
@keyframes iots-giro{to{transform:rotate(360deg)}}

.iots-nodo{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;width:84px;text-align:center;z-index:2}
.iots-nodo i{display:flex;align-items:center;justify-content:center;width:clamp(42px,12vw,56px);aspect-ratio:1/1;border-radius:16px;
  position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:background .4s,border-color .4s,transform .4s,box-shadow .4s;font-style:normal}
.iots-nodo .msr{font-size:clamp(20px,6vw,26px);color:#c9d3ff;transition:color .4s}
.iots-nodo b{font-size:clamp(10px,2.7vw,12px);font-weight:600;color:#aab4dc;line-height:1.2;transition:color .4s}
.iots-nodo.on i{background:linear-gradient(135deg,var(--iots-c1),var(--iots-c2));border-color:transparent;transform:scale(1.14);
  box-shadow:0 0 0 5px rgba(53,198,232,.16),0 10px 30px rgba(53,198,232,.45)}
.iots-nodo.on .msr{color:#fff}
.iots-nodo.on b{color:#fff}
.iots-nodo.fatto i::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--iots-ok);
  box-shadow:0 0 0 3px #0a0d22}

.iots-impulso{position:absolute;width:12px;height:12px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;z-index:1;
  background:#fff;box-shadow:0 0 0 4px rgba(53,198,232,.35),0 0 18px #35C6E8;
  transition:left .9s cubic-bezier(.22,1,.36,1),top .9s cubic-bezier(.22,1,.36,1),opacity .2s}

/* l'esito */
.iots-esito{display:flex;align-items:flex-start;gap:9px;min-height:48px;font-size:14.5px;line-height:1.45;color:#d9f7ea;
  opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.iots-esito .msr{color:var(--iots-ok);font-size:22px;flex:0 0 auto}
.iots.esito .iots-esito{opacity:1;transform:none}

/* i puntini di avanzamento: si toccano per saltare a un esempio */
.iots-punti{display:flex;justify-content:center;gap:4px;margin-top:6px}
.iots-punti button{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.iots-punti button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
.iots-punti button.on::before{width:20px;border-radius:4px;background:linear-gradient(90deg,var(--iots-c1),var(--iots-c2))}
.iots-punti button:focus-visible{outline:2px solid var(--iots-c1);outline-offset:2px;border-radius:6px}

@media (max-width:380px){.iots{padding:14px 12px}.iots-nodo{width:70px}.iots-bolla{font-size:14px}}
@media (prefers-reduced-motion:reduce){
  .iots-orbita,.iots-cursore,.iots.pensa .iots-nucleo .msr{animation:none}
  .iots-impulso{display:none}
  .iots *{transition:none!important}
}