/* Scena fotografica, effetti meteo, chip di vetro (stile iOS), tema chiaro/scuro. 12/10 */

:root {
  --vetro-bg: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.07));
  --vetro-base: rgba(24,30,40,.34);
  --vetro-bordo: rgba(255,255,255,.34);
  --vetro-testo: #fff;
  --vetro-tenue: rgba(255,255,255,.72);
  --vetro-ombra: 0 10px 34px rgba(0,0,0,.28);
}
:root[data-theme="light"] {
  --fondo:#eef2f7; --fondo2:#e3e9f1; --carta:#ffffff; --carta2:#eef3f9; --riga:#cdd7e3;
  --testo:#0c1a2a; --tenue:#556678; --blu:#0a74d9;
  --vetro-base: rgba(255,255,255,.42); --vetro-bordo: rgba(255,255,255,.75);
  --vetro-testo:#0c1a2a; --vetro-tenue:rgba(12,26,42,.65); --vetro-ombra: 0 10px 30px rgba(20,40,70,.18);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fondo:#eef2f7; --fondo2:#e3e9f1; --carta:#ffffff; --carta2:#eef3f9; --riga:#cdd7e3;
    --testo:#0c1a2a; --tenue:#556678; --blu:#0a74d9;
    --vetro-base: rgba(255,255,255,.42); --vetro-bordo: rgba(255,255,255,.75);
    --vetro-testo:#0c1a2a; --vetro-tenue:rgba(12,26,42,.65); --vetro-ombra: 0 10px 30px rgba(20,40,70,.18);
  }
}

#b-tema { font-size:20px; line-height:1; }

/* --------------------------------------------------------------- scena */
.scena2 { position:relative; aspect-ratio:3 / 2; overflow:hidden; border-radius:28px; margin:0 auto 14px; max-width:calc(80vh * 1.5);
  background:#101820; box-shadow:0 18px 50px rgba(0,0,0,.35); isolation:isolate; --nuvole:0; --vento-v:30s; }
.scena2 .foto, .scena2 .foto img, .scena2 .effetti { position:absolute; inset:0; width:100%; height:100%; }
.scena2 .foto img { object-fit:cover; transition:opacity 2.5s ease, filter 1.5s ease; }
.scena2 .f-notte { opacity:0; }
.scena2.notte .f-notte { opacity:1; }
.scena2 .foto { filter:brightness(calc(1 - var(--nuvole) * .18)) saturate(calc(1 - var(--nuvole) * .3)); transition:filter 1.5s; }
.scena2.piove .foto, .scena2.nevica .foto { filter:brightness(.8) saturate(.7) contrast(.96); }
.scena2.spento .foto { filter:brightness(.92) saturate(.9); }
.effetti { pointer-events:none; overflow:hidden; }

/* sole e luna: in alto a destra, sul cielo del campo */
.sole, .luna { position:absolute; right:-6%; top:-12%; width:44%; aspect-ratio:1; border-radius:50%; opacity:0; transition:opacity 2s; }
.sole { background:radial-gradient(circle, rgba(255,246,214,.9) 0 5%, rgba(255,214,128,.4) 12%, rgba(255,190,90,.18) 38%, transparent 66%); mix-blend-mode:screen; }
.sole::after { content:""; position:absolute; inset:-30%; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,230,160,.11) 0 4deg, transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle, #000 12%, transparent 62%); mask:radial-gradient(circle, #000 12%, transparent 62%);
  animation:raggi 80s linear infinite; }
.scena2.sereno:not(.notte) .sole { opacity:1; }
.luna { right:17%; top:12%; width:7%; background:radial-gradient(circle at 38% 38%, #fff 0 52%, #dfe8f6 56%, rgba(190,210,255,.5) 62%, transparent 72%); box-shadow:0 0 50px 14px rgba(180,205,255,.35); }
.scena2.sereno.notte .luna { opacity:.95; }
@keyframes raggi { to { transform:rotate(360deg); } }

/* nuvole: strisce morbide che scorrono lente (piu' veloci con il vento) */
.nuvole i { position:absolute; left:-50%; height:14%; width:46%; border-radius:50%; opacity:calc(var(--nuvole) * .95);
  background:radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.95) 0, rgba(245,248,252,.7) 38%, transparent 70%);
  filter:blur(12px); animation:nuvola var(--vento-v) linear infinite; transition:opacity 2s; }
.nuvole i:nth-child(1) { top:1%; animation-delay:-4s; } .nuvole i:nth-child(2) { top:9%; width:38%; height:11%; animation-delay:-14s; animation-duration:calc(var(--vento-v) * 1.3); }
.nuvole i:nth-child(3) { top:17%; width:52%; animation-delay:-22s; } .nuvole i:nth-child(4) { top:4%; width:34%; animation-delay:-30s; animation-duration:calc(var(--vento-v) * .8); }
.nuvole i:nth-child(5) { top:13%; width:40%; height:12%; animation-delay:-9s; animation-duration:calc(var(--vento-v) * 1.6); }
.nuvole i:nth-child(6) { top:22%; width:44%; animation-delay:-18s; }
.scena2.notte .nuvole i { background:radial-gradient(ellipse at 50% 55%, rgba(120,140,175,.85) 0, rgba(70,88,120,.55) 40%, transparent 70%); }
.scena2.piove .nuvole i, .scena2.nevica .nuvole i { background:radial-gradient(ellipse at 50% 55%, rgba(120,130,142,.95) 0, rgba(95,105,118,.7) 40%, transparent 70%); }
.scena2.notte.piove .nuvole i { background:radial-gradient(ellipse at 50% 55%, rgba(60,72,95,.95) 0, rgba(40,52,75,.7) 40%, transparent 70%); }
@keyframes nuvola { from { transform:translateX(0); } to { transform:translateX(330%); } }
.velo { position:absolute; inset:0; background:linear-gradient(180deg, rgba(70,82,98,.55), rgba(70,82,98,0) 62%); opacity:calc(var(--nuvole) * .6); transition:opacity 2s; }
.scena2.notte .velo { background:linear-gradient(180deg, rgba(10,16,30,.6), rgba(10,16,30,0) 62%); }

/* bagliore sulla macchina quando scalda (caldo = una sorgente di calore e' accesa) */
.glow { position:absolute; transform:translate(-50%, -50%); border-radius:50%; mix-blend-mode:screen; opacity:0; transition:opacity 1.6s; }
.scena2.caldo .glow { opacity:1; background:radial-gradient(ellipse, rgba(255,150,60,.8) 0, rgba(255,110,30,.45) 34%, rgba(255,90,20,.16) 55%, transparent 72%); animation:respiro 3.6s ease-in-out infinite; }
.scena2.caldo:not(.gas) .glow { background:radial-gradient(ellipse, rgba(255,190,100,.78) 0, rgba(255,160,70,.4) 34%, rgba(255,140,50,.14) 55%, transparent 72%); }
.scena2.freddo .glow { opacity:.7; background:radial-gradient(ellipse, rgba(110,200,255,.4) 0, rgba(90,170,255,.18) 38%, transparent 70%); animation:respiro 5s ease-in-out infinite; }
.scena2.notte.caldo .glow { filter:saturate(1.25) brightness(1.2); }
@keyframes respiro { 0%,100% { transform:translate(-50%,-50%) scale(.96); } 50% { transform:translate(-50%,-50%) scale(1.06); } }
/* aria calda sopra il camino */
.calore { position:absolute; width:5%; height:16%; transform:translate(-50%, -100%); opacity:0; transition:opacity 1.5s; }
.scena2.caldo.gas .calore { opacity:1; }
.calore i { position:absolute; left:50%; bottom:0; width:60%; aspect-ratio:1; margin-left:-30%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.34), transparent 70%); filter:blur(5px); animation:sale 3.2s ease-out infinite; }
.calore i:nth-child(2) { animation-delay:-1.1s; } .calore i:nth-child(3) { animation-delay:-2.2s; }
@keyframes sale { from { transform:translateY(0) scale(.6); opacity:.9; } to { transform:translateY(-220%) scale(1.8); opacity:0; } }

.meteo-cv { position:absolute; inset:0; width:100%; height:100%; }

/* fili e punti dei chip */
.fili { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.fili line { stroke:rgba(255,255,255,.75); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-dasharray:2 4; }
.punto { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.4); }

/* chip in vetro stile iOS */
.chip { position:absolute; transform:translate(-50%, -50%); padding:9px 15px; border-radius:20px; line-height:1.2; white-space:nowrap;
  color:var(--vetro-testo); background:var(--vetro-bg), var(--vetro-base);
  -webkit-backdrop-filter:blur(22px) saturate(190%); backdrop-filter:blur(22px) saturate(190%);
  border:1px solid var(--vetro-bordo); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.08), var(--vetro-ombra);
  text-shadow:0 1px 2px rgba(0,0,0,.18); }
:root[data-theme="light"] .chip { text-shadow:none; }
.chip small { display:block; font-size:clamp(9px, 1.05vw, 12px); letter-spacing:.5px; text-transform:uppercase; color:var(--vetro-tenue); font-weight:600; }
.chip b { font-size:clamp(11px, 1.5vw, 18px); font-weight:650; font-variant-numeric:tabular-nums; }
.chip.grande { text-align:center; padding:12px 24px; border-radius:28px; }
.chip.grande b { display:block; font-size:clamp(24px, 4.8vw, 62px); font-weight:760; line-height:1.05; letter-spacing:-.5px; }
.chip.grande span { display:block; font-size:clamp(9px, 1.1vw, 13px); color:var(--vetro-tenue); }
.chip.grande i { font-style:normal; font-weight:700; color:var(--vetro-testo); }
.chip.c-stato-sis, .chip.c-fuori { transform:none; top:14px; }
.chip.c-stato-sis { right:14px; left:auto; padding:6px 16px; border-radius:999px; font-weight:800; letter-spacing:.8px; font-size:clamp(10px, 1.2vw, 14px); }
.chip.c-fuori { left:14px; padding:6px 14px; border-radius:16px; }
.chip.c-fuori small { display:block; }
.scena2.caldo .chip.c-bruciatore, .scena2.caldo .chip.c-pdc { box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 26px rgba(255,150,60,.5), var(--vetro-ombra); }
.scena2.allarme .chip.c-stato-sis { background:linear-gradient(135deg, rgba(255,90,82,.7), rgba(255,90,82,.4)); color:#fff; }
.scena2.spento .chip.c-stato-sis { opacity:.85; }

@media (max-width: 700px) {
  .scena2 { border-radius:20px; }
  .chip { padding:5px 9px; border-radius:13px; }
  .chip.grande { padding:7px 14px; border-radius:18px; }
  .chip.c-fuori { top:8px; left:8px; } .chip.c-stato-sis { top:8px; right:8px; }
  .chip small { font-size:8px; } .chip b { font-size:11px; }
  .chip.grande b { font-size:26px; }
  .fili, .punto, .chip.c-stato, .chip.c-mandata, .chip.c-bruciatore, .chip.c-pdc { display:none; }
  .chip.grande { left:50% !important; top:84% !important; }
  .cruscotto { grid-template-columns:1fr; } .cruscotto > * { min-width:0; }
}
@media (prefers-reduced-motion: reduce) { .scena2 * { animation:none !important; } }