/* Reel di un minuto della landing (Pages/Shared/_Reel.cshtml).
   .reel anima --tempo da 0 a 60 (secondi) in loop; tutto il resto è calcolato:
   --p = avanzamento lineare dell'elemento tra --a e --a + --d, --e = lo stesso con uscita morbida (cubica).
   Le misure sono in cqw (larghezza dello schermo), così il video scala come un'immagine.
   Il video resta scuro anche col tema chiaro del sito: è uno schermo. */

@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("../fonts/FiraCode-Medium.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* Linea del tempo e contatori */
@property --tempo { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --reel-secondi { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-sole { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-casa { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-rete { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-batt { syntax: "<integer>"; inherits: true; initial-value: 48; }
@property --reel-servizi { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-barca { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-oggi { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-autos { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-lux { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --reel-ota { syntax: "<integer>"; inherits: true; initial-value: 0; }

/* ─── Sezione della landing che ospita il video ─── */

.reel-section { padding: 90px 24px 100px; }
.reel-section .reel-lede {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--foam-dim);
  max-width: 600px;
  margin: 16px auto 48px;
}
.reel-section .reel-video { max-width: 1180px; margin: 0 auto; text-align: left; }

/* ─── Schermo ─── */

.reel-video {
  --fondo: #02080f;
  --testo: #eaf6ff;
  --tenue: #8ea3ba;
  --linea: rgba(234, 246, 255, .1);
  --sole: #ffb547;
  --verde: #35f0a1;
  --ciano: #3dd6ff;
  --casa: #5b9dff;
  --viola: #a08cff;
  --inchiostro: #02170f;

  margin: 0;
  display: grid;
  gap: .9rem;
}

.reel-video .schermo {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1.6vw, 20px);
  overflow: hidden;
  background: var(--fondo);
  border: 1px solid rgba(61, 214, 255, .18);
  box-shadow:
    0 50px 140px -50px rgba(53, 240, 161, .35),
    0 30px 90px -40px rgba(255, 181, 71, .25),
    0 0 0 1px rgba(0, 0, 0, .5);
  color: var(--testo);
  font-family: "Fira Sans", -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.reel { position: absolute; inset: 0; animation: tempo 60s linear infinite; }

/* Contatori: percentuali = secondi / 60 · 100 (gli inizi delle scene sono le costanti S... del partial). */
@keyframes tempo {
  0% { --tempo: 0; --reel-secondi: 0; --reel-sole: 0; --reel-casa: 0; --reel-rete: 0; --reel-batt: 48; --reel-servizi: 0; --reel-barca: 0; --reel-oggi: 0; --reel-autos: 0; --reel-lux: 0; --reel-ota: 0; }
  .833% { --reel-secondi: 0; }
  12% { --reel-sole: 0; }                      /* flussi: 7,2 → 9,2 s */
  12.667% { --reel-casa: 0; }                  /* 7,6 → 9,2 s */
  13% { --reel-rete: 0; }                      /* 7,8 → 9,4 s */
  13.333% { --reel-batt: 48; }                 /* 8 → 13 s, la batteria si carica */
  15.333% { --reel-sole: 5840; --reel-casa: 1260; }
  15.667% { --reel-rete: 3100; }
  21.667% { --reel-batt: 72; }
  35% { --reel-servizi: 0; }                   /* 4": 21 → 22,8 s */
  35.333% { --reel-barca: 0; }                 /* 21,2 → 23 s */
  38% { --reel-servizi: 86; }
  38.333% { --reel-barca: 420; }
  47.667% { --reel-oggi: 0; }                  /* 7": 28,6 → 30,4 s */
  50.667% { --reel-oggi: 32; }
  58.333% { --reel-autos: 0; }                 /* 10": 35 → 36,8 s */
  61.333% { --reel-autos: 78; }
  66.667% { --reel-lux: 0; }                   /* sensore: 40 → 41,6 s */
  69.333% { --reel-lux: 317; }
  86.333% { --reel-ota: 0; }                   /* OTA: 51,8 → 53,8 s */
  89.667% { --reel-ota: 100; }
  99.167% { --reel-secondi: 59; }
  100% { --tempo: 60; --reel-secondi: 59; --reel-sole: 5840; --reel-casa: 1260; --reel-rete: 3100; --reel-batt: 72; --reel-servizi: 86; --reel-barca: 420; --reel-oggi: 32; --reel-autos: 78; --reel-lux: 317; --reel-ota: 100; }
}

/* ─── Motore delle animazioni ─── */

/* :where() tiene la specificità a una classe, così le regole dei singoli elementi possono ridefinire translate */
:where(.reel) .x, :where(.reel) .traccia, :where(.reel) .lampo, :where(.reel) .impulso-css {
  --p: clamp(0, (var(--tempo) - var(--a)) / var(--d, .55), 1);
  --e: calc(1 - (1 - var(--p)) * (1 - var(--p)) * (1 - var(--p)));
}

:where(.reel) .x { opacity: var(--e); translate: 0 calc((1 - var(--e)) * 1.6cqw); }

.reel .sc {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 5.5cqw 7cqw 8cqw;
  display: flex;
  flex-direction: column;
  scale: calc(1 + (var(--tempo) - var(--s)) * .005);
  pointer-events: none;
}

/* Scene, e fasi dentro una scena, entrano ed escono in dissolvenza (0,2 s) */
.reel .sc, .reel .fase {
  --in: clamp(0, (var(--tempo) - var(--s)) * 5, 1);
  --out: clamp(0, (var(--f) - var(--tempo)) * 5, 1);
  opacity: calc(var(--in) * var(--out));
}

/* Tracciati SVG che si disegnano (pathLength = 100) */
.reel .traccia {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100px 100px;
  stroke-dashoffset: calc((1 - var(--p)) * 100px);
}

/* ─── Fondo: cielo, griglia in prospettiva, pulviscolo ─── */

.cielo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 78% 30%, rgba(255, 181, 71, .16), transparent 70%),
    radial-gradient(ellipse 50% 55% at 12% 85%, rgba(53, 240, 161, .10), transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(61, 214, 255, .06), transparent 70%),
    linear-gradient(180deg, #030c18, var(--fondo) 60%);
}

.pavimento {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: 0;
  height: 48%;
  transform-origin: 50% 100%;
  transform: perspective(28cqw) rotateX(62deg);
  background-image:
    linear-gradient(rgba(61, 214, 255, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 214, 255, .2) 1px, transparent 1px);
  background-size: 5cqw 5cqw;
  background-position: 0 calc(var(--tempo) * 1.6cqw);
  mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  opacity: .5;
}

.polvere i {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: .32cqw;
  height: .32cqw;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 .8cqw var(--verde);
  opacity: calc(.25 + .35 * (1 + sin(var(--tempo) * 40deg * var(--v) + var(--f) * 1deg)) / 2);
  translate:
    calc(sin(var(--tempo) * 12deg * var(--v) + var(--f) * 1deg) * 2cqw)
    calc(cos(var(--tempo) * 9deg * var(--v) + var(--f) * 1deg) * 2.5cqw);
}
.polvere i:nth-child(3n) { background: var(--sole); box-shadow: 0 0 .8cqw var(--sole); }
.polvere i:nth-child(4n) { background: var(--ciano); box-shadow: 0 0 .8cqw var(--ciano); }

.lampo {
  position: absolute;
  z-index: 2;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 18cqw;
  background: linear-gradient(90deg, transparent, rgba(53, 240, 161, .25), rgba(234, 255, 246, .55), rgba(61, 214, 255, .25), transparent);
  translate: calc(-22cqw + var(--p) * 145cqw) 0;
  rotate: 14deg;
  opacity: calc(min(var(--p), 1 - var(--p)) * 2);
  filter: blur(1.2cqw);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ─── Elementi comuni ─── */

.capitolo {
  margin: 0 0 3cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 1.5cqw;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
}
.capitolo b {
  padding: .35cqw .9cqw;
  border: 1px solid rgba(53, 240, 161, .45);
  border-radius: .5cqw;
  font-family: "Fira Code", monospace;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--verde);
  box-shadow: 0 0 1.4cqw rgba(53, 240, 161, .25) inset;
}

.vetro {
  display: flex;
  flex-direction: column;
  gap: .6cqw;
  padding: 1.8cqw 2cqw;
  border-radius: 1.2cqw;
  background: linear-gradient(160deg, rgba(234, 246, 255, .07), rgba(234, 246, 255, .02));
  border: 1px solid var(--linea);
  backdrop-filter: blur(6px);
}
.vetro > small,
.vetro small { font-size: 1.1cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.vetro.evidenza {
  border-color: rgba(53, 240, 161, .4);
  background: linear-gradient(160deg, rgba(53, 240, 161, .14), rgba(61, 214, 255, .03));
  box-shadow: 0 0 4cqw -1cqw rgba(53, 240, 161, .35);
}
.tenue { font-size: 1.3cqw; line-height: 1.4; color: var(--tenue); }

.numero-grande {
  font-family: "Fira Code", monospace;
  font-size: 5cqw;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--sole), var(--verde) 60%, var(--ciano));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.binario { fill: none; stroke: rgba(234, 246, 255, .08); }
.arco { fill: none; stroke-linecap: round; }

.nuovo-badge {
  padding: .35cqw 1cqw;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sole), var(--verde));
  color: var(--inchiostro);
  font-size: 1.1cqw;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 0 2cqw rgba(53, 240, 161, .5);
}

.contesti { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .8cqw; }
.contesti li {
  padding: .45cqw 1.3cqw;
  border-radius: 99px;
  border: 1px solid rgba(61, 214, 255, .35);
  background: rgba(61, 214, 255, .07);
  font-size: 1.25cqw;
  font-weight: 600;
  color: #bfefff;
}

.claim { margin: auto 0 0; font-size: 2.2cqw; font-weight: 600; letter-spacing: -.01em; text-align: center; }
.claim em { font-style: normal; color: var(--verde); }
.claim.piccolo { font-size: 1.7cqw; }

/* Contatori */
.k-sole { counter-reset: n var(--reel-sole); }
.k-sole::before { content: counter(n) " W"; }
.k-casa { counter-reset: n var(--reel-casa); }
.k-casa::before { content: counter(n) " W"; }
.k-rete { counter-reset: n var(--reel-rete); }
.k-rete::before { content: counter(n) " W"; }
.k-batt { counter-reset: n var(--reel-batt); }
.k-batt::before { content: counter(n) " %"; }
.k-servizi { counter-reset: n var(--reel-servizi); }
.k-servizi::before { content: counter(n) "%"; }
.k-barca { counter-reset: n var(--reel-barca); }
.k-barca::before { content: counter(n) " W"; }
.k-oggi { counter-reset: n var(--reel-oggi); }
.k-oggi::before { content: counter(n) " kWh"; }
.k-autos { counter-reset: n var(--reel-autos); }
.k-autos::before { content: counter(n) "%"; }
.k-lux { counter-reset: n var(--reel-lux); }
.k-lux::before { content: counter(n) " lux"; }
.k-ota { counter-reset: n var(--reel-ota); }
.k-ota::before { content: counter(n) "%"; }

/* ─── 1 · Apertura ─── */

.apertura { justify-content: center; }

.astro {
  position: absolute;
  width: 46cqw;
  aspect-ratio: 1;
  right: -4cqw;
  top: 50%;
  translate: 0 calc(-50% + (1 - var(--e)) * 18cqw);
  scale: calc(.8 + var(--e) * .2);
}
.astro svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita { fill: none; stroke-width: 1.2; transform-origin: 200px 200px; }
.orbita.o1 { stroke: rgba(61, 214, 255, .35); stroke-dasharray: 2 10; rotate: calc(var(--tempo) * 14deg); }
.orbita.o2 { stroke: rgba(53, 240, 161, .4); stroke-dasharray: 60 24; rotate: calc(var(--tempo) * -22deg); }
.orbita.o3 { stroke: rgba(255, 181, 71, .5); stroke-dasharray: 1 6; rotate: calc(var(--tempo) * 30deg); }
.astro .tacca { stroke: rgba(234, 246, 255, .3); stroke-width: 1.4; stroke-linecap: round; }
.astro svg { rotate: calc(var(--tempo) * 4deg); }
.nucleo {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff6dc, var(--sole) 32%, #ff8a3d 62%, #f0621f 100%);
  box-shadow:
    0 0 6cqw 1cqw rgba(255, 181, 71, .55),
    0 0 16cqw 4cqw rgba(255, 140, 50, .25);
  scale: calc(1 + sin(var(--tempo) * 90deg) * .02);
}

.occhiello {
  margin: 0 0 1.6cqw;
  font-family: "Fira Code", monospace;
  font-size: 1.4cqw;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verde);
}

.titolo { position: relative; margin: 0; max-width: 60cqw; font-size: 7cqw; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.parola { display: inline-block; filter: blur(calc((1 - var(--e)) * .6cqw)); }
.titolo em {
  display: block;
  font-style: normal;
  background: linear-gradient(90deg, var(--sole), var(--verde) 55%, var(--ciano));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(calc((1 - var(--e)) * .6cqw)) drop-shadow(0 0 2cqw rgba(53, 240, 161, .35));
}

.sottolinea {
  display: block;
  width: 34cqw;
  height: .4cqw;
  margin-top: 2.4cqw;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sole), var(--verde), var(--ciano));
  box-shadow: 0 0 1.6cqw rgba(53, 240, 161, .6);
  transform-origin: left;
  scale: var(--e) 1;
  translate: none;
}

.sommario { position: relative; margin: 2.2cqw 0 0; max-width: 52cqw; font-size: 1.9cqw; line-height: 1.4; color: var(--tenue); }

/* ─── 2 · Flussi di energia ─── */

.flussi-corpo { flex: 1; display: grid; grid-template-columns: 50cqw 1fr; gap: 5cqw; align-items: start; }

.schema { position: relative; aspect-ratio: 520 / 300; margin-top: .5cqw; }
.schema svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.condotto { stroke: rgba(234, 246, 255, .14); stroke-width: 6; }
.flusso {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1 17;
  stroke-dashoffset: calc(var(--tempo) * -60px);
  translate: none;
}
.flusso.sole { stroke: var(--sole); filter: drop-shadow(0 0 5px var(--sole)); }
.flusso.casa { stroke: var(--casa); filter: drop-shadow(0 0 5px var(--casa)); }
.flusso.batt { stroke: var(--verde); filter: drop-shadow(0 0 5px var(--verde)); }
.flusso.rete { stroke: var(--viola); filter: drop-shadow(0 0 5px var(--viola)); }

.nodo {
  --c: var(--verde);
  position: absolute;
  left: calc(var(--l) * 1%);
  top: calc(var(--t) * 1%);
  width: 6.4cqw;
  height: 6.4cqw;
  translate: -50% calc(-50% + (1 - var(--e)) * 1.6cqw);
  scale: calc(.7 + var(--e) * .3);
}
.nodo.t-sole { --c: var(--sole); }
.nodo.t-inv { --c: var(--ciano); width: 5cqw; height: 5cqw; }
.nodo.t-casa { --c: var(--casa); }
.nodo.t-rete { --c: var(--viola); }
.disco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: .22cqw solid var(--c);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 6%, var(--fondo)) 70%);
  box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--c) 55%, transparent), 0 0 0 .8cqw color-mix(in srgb, var(--c) 8%, transparent);
}
.disco svg { position: static; width: 52%; height: 52%; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nodo b, .nodo small { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; text-align: center; }
.nodo b { top: calc(100% + .7cqw); font-family: "Fira Code", monospace; font-size: 1.9cqw; font-weight: 600; color: var(--c); }
.nodo small { top: calc(100% + 3.2cqw); font-size: 1.1cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.nodo.t-sole b, .nodo.t-sole small, .nodo.t-inv small { left: calc(100% + 1.4cqw); translate: none; text-align: left; }
.nodo.t-sole b { top: .6cqw; }
.nodo.t-sole small { top: 3.4cqw; }
.nodo.t-inv small { top: 50%; translate: 0 -50%; }

.flussi-lato { display: grid; gap: 1.6cqw; }
.spark { width: 100%; height: 6cqw; margin-top: .6cqw; overflow: visible; }
.spark .linea, .curva .linea { stroke: var(--verde); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(53, 240, 161, .7)); }
.spark .area, .curva .area { fill: rgba(53, 240, 161, .12); translate: none; }

.pillole { margin: 0; padding: 0; list-style: none; display: grid; gap: .9cqw; }
.pillole li {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 1.55cqw;
  color: var(--testo);
}
.pillole li::before {
  content: "";
  width: .8cqw;
  height: .8cqw;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 1cqw var(--verde);
}

/* ─── 3 · Tre formati ─── */

.vetrina { display: flex; justify-content: center; align-items: flex-end; gap: 4.5cqw; margin-top: 1cqw; }

.modello { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cornice {
  position: relative;
  padding: .6cqw;
  border-radius: 1.2cqw;
  background: linear-gradient(160deg, #1b2636, #070c14);
  box-shadow:
    0 0 0 1px rgba(234, 246, 255, .12),
    0 2cqw 4cqw -1.5cqw rgba(0, 0, 0, .8),
    0 0 4cqw -1cqw rgba(61, 214, 255, .35);
}
.m4 .cornice { width: 11cqw; height: 11cqw; }
.m7 .cornice { width: 21cqw; height: 12.6cqw; }
.m10 .cornice { width: 30cqw; height: 18.75cqw; box-shadow: 0 0 0 1px rgba(53, 240, 161, .4), 0 2cqw 4cqw -1.5cqw rgba(0, 0, 0, .8), 0 0 6cqw -1cqw rgba(53, 240, 161, .45); }

.mini-ui {
  display: grid;
  gap: .5cqw;
  height: 100%;
  padding: .7cqw;
  border-radius: .7cqw;
  background: #050d18;
}
.mini-ui.q { grid-template-columns: 1fr 1fr; }
.mini-ui.l { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1.6fr; }
.mini-ui.xl { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1.8fr; }
.mini-ui i {
  border-radius: .4cqw;
  background:
    linear-gradient(100deg, transparent 30%, rgba(234, 246, 255, .18) 50%, transparent 70%) calc(var(--tempo) * 30%) 0 / 300% 100% no-repeat,
    color-mix(in srgb, var(--k, var(--verde)) 26%, #0b1626);
  border-top: .15cqw solid var(--k, var(--verde));
}
.mini-ui i:nth-child(1) { --k: var(--sole); }
.mini-ui i:nth-child(2) { --k: var(--casa); }
.mini-ui i:nth-child(3) { --k: var(--viola); }
.mini-ui i:nth-child(4) { --k: var(--verde); }
.mini-ui i:nth-child(5) { --k: #ff7a5c; }
.mini-ui.l .largo { grid-column: 1 / -1; --k: var(--ciano); }
.mini-ui.xl .largo { grid-column: span 3; --k: var(--ciano); }
.mini-ui.xl .largo:last-child { grid-column: span 2; --k: var(--sole); }

.diagonale {
  position: absolute;
  inset: .6cqw;
  background: linear-gradient(to top right, transparent calc(50% - .1cqw), rgba(234, 246, 255, .7) 50%, transparent calc(50% + .1cqw));
  clip-path: inset(calc((1 - var(--e)) * 100%) calc((1 - var(--e)) * 100%) 0 0);
  translate: none;
  opacity: calc(var(--e) * .8);
}

.modello > b {
  margin-top: 1.6cqw;
  font-family: "Fira Code", monospace;
  font-size: 3.6cqw;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(90deg, var(--sole), var(--verde));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.modello > span { margin-top: .7cqw; font-size: 1.45cqw; font-weight: 600; }
.modello > small { margin-top: .3cqw; font-size: 1.15cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.modello .nuovo-badge { position: absolute; top: -1.2cqw; right: -1.2cqw; z-index: 1; rotate: 6deg; translate: none; scale: calc(.5 + var(--e) * .5); }

.formati .claim { margin-top: 3cqw; }

/* ─── 4 · Smart Solar 4" ─── */

.onde {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 125%;
  height: 22cqw;
  translate: calc((var(--tempo) - var(--s)) * -2.4cqw) 0;
  opacity: .5;
}
.onde path { fill: none; stroke: rgba(61, 214, 255, .35); stroke-width: 1.5; }
.onde path + path { stroke: rgba(53, 240, 161, .22); }

.device-corpo { position: relative; flex: 1; display: grid; grid-template-columns: 25cqw 1fr; gap: 5cqw; align-items: start; }
.device-corpo.larga { grid-template-columns: 44cqw 1fr; gap: 4cqw; }

.dispositivo {
  position: relative;
  padding: 1.4cqw;
  border-radius: 1.6cqw;
  background: #050c16;
  border: .5cqw solid #121c2b;
  box-shadow:
    0 0 0 1px rgba(234, 246, 255, .14),
    0 3cqw 6cqw -2cqw rgba(0, 0, 0, .9),
    0 0 6cqw -1cqw rgba(61, 214, 255, .3);
  scale: calc(.92 + var(--e) * .08);
}
.dispositivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, .08), transparent 40%);
  pointer-events: none;
}

.d4 { width: 25cqw; aspect-ratio: 1; display: flex; flex-direction: column; gap: 1cqw; }
.d4-anello { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.d4-anello svg { position: absolute; top: 0; left: 50%; translate: -50% 0; height: 100%; aspect-ratio: 1; }
.d4-anello .binario { stroke-width: 9; }
.arco.servizi {
  stroke: var(--verde);
  stroke-width: 9;
  stroke-dasharray: calc(var(--reel-servizi) * 1px) 100px;
  filter: drop-shadow(0 0 4px var(--verde));
}
.d4-anello .pc { position: relative; font-family: "Fira Code", monospace; font-size: 3cqw; font-weight: 600; line-height: 1; }
.d4-anello small { position: relative; margin-top: .4cqw; font-size: .8cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.d4-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: .6cqw; }
.d4-griglia span { display: flex; flex-direction: column; padding: .6cqw .8cqw; border-radius: .6cqw; background: rgba(234, 246, 255, .05); border-top: .15cqw solid var(--ciano); }
.d4-griglia small { font-size: .85cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.d4-griglia b { font-family: "Fira Code", monospace; font-size: 1.45cqw; font-weight: 600; }
.d4-griglia span:first-child { border-top-color: var(--sole); }

.punti { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5cqw; }
.punti li { display: grid; grid-template-columns: 4cqw 1fr; column-gap: 1.4cqw; align-items: center; }
.punti i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  height: 4cqw;
  border-radius: .8cqw;
  border: 1px solid rgba(53, 240, 161, .4);
  background: rgba(53, 240, 161, .08);
  font-family: "Fira Code", monospace;
  font-style: normal;
  font-size: 1.3cqw;
  color: var(--verde);
}
.punti b { font-size: 2cqw; font-weight: 600; }
.punti span { font-size: 1.35cqw; color: var(--tenue); }

.bordo .contesti { margin: 2.2cqw 0 0 30cqw; }

/* ─── 5 · Smart Solar 7" ─── */

.d7 { width: 44cqw; aspect-ratio: 1024 / 600; display: flex; flex-direction: column; gap: 1cqw; }
.d7-tessere { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
:where(.d7-tessere span, .xl-tessere > span) { --c: var(--verde); }
.d7-tessere span, .xl-tessere > span {
  display: flex;
  flex-direction: column;
  padding: .8cqw 1cqw;
  border-radius: .7cqw;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, transparent), rgba(234, 246, 255, .03));
  border-top: .18cqw solid var(--c);
}
.t-sole { --c: var(--sole); }
.t-casa { --c: var(--casa); }
.t-rete { --c: var(--viola); }
.t-batt { --c: var(--verde); }
.d7-tessere small, .xl-tessere small { font-size: .95cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.d7-tessere b { font-family: "Fira Code", monospace; font-size: 1.9cqw; font-weight: 600; color: var(--c); }

.d7-grafico {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: .45cqw;
  padding: 1cqw .8cqw 0;
  border-radius: .7cqw;
  background:
    repeating-linear-gradient(0deg, rgba(234, 246, 255, .06) 0 1px, transparent 1px 2.4cqw),
    rgba(234, 246, 255, .02);
}
.d7-grafico i {
  flex: 1;
  height: calc(var(--h) * var(--e) * 100%);
  border-radius: .3cqw .3cqw 0 0;
  background: linear-gradient(0deg, rgba(255, 181, 71, .35), var(--sole));
  box-shadow: 0 0 1cqw rgba(255, 181, 71, .35);
  opacity: 1;
  translate: none;
}
.d7-asse { display: flex; justify-content: space-between; padding: 0 .8cqw; font-family: "Fira Code", monospace; font-size: .85cqw; color: var(--tenue); }

.casa-lato { display: grid; gap: 1.6cqw; }
.bilancio { margin: 0; display: grid; gap: .2cqw; }
.bilancio div { display: flex; justify-content: space-between; padding: .8cqw 0; border-bottom: 1px solid var(--linea); font-size: 1.5cqw; }
.bilancio dt { color: var(--tenue); }
.bilancio dd { margin: 0; font-family: "Fira Code", monospace; font-weight: 600; }

/* ─── 6 · Smart Solar 10" XL ─── */

.capitolo .statico { font-size: 1cqw; }

.xl .fase { position: absolute; inset: 10cqw 7cqw 8cqw; }

.xl-home { display: grid; grid-template-columns: 26cqw 1fr; gap: 4cqw; align-items: center; }
.autosuff { position: relative; width: 26cqw; aspect-ratio: 1; }
.autosuff svg { width: 100%; height: 100%; overflow: visible; rotate: calc((var(--tempo) - var(--s)) * 3deg); }
.autosuff .binario { stroke-width: 18; }
.arco.autos {
  stroke: var(--verde);
  stroke-width: 18;
  stroke-dasharray: calc(var(--reel-autos) * 1px) 100px;
  filter: drop-shadow(0 0 10px rgba(53, 240, 161, .7));
}
.autosuff .tacca { stroke: rgba(234, 246, 255, .25); stroke-width: 1.5; }
.autosuff-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.autosuff-centro span {
  font-family: "Fira Code", monospace;
  font-size: 6.4cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff, var(--verde));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.autosuff-centro small { margin-top: .6cqw; font-size: 1.1cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--tenue); }

.xl-tessere { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.xl-tessere > span { padding: 1.1cqw 1.2cqw; }
.xl-tessere b { font-family: "Fira Code", monospace; font-size: 2.2cqw; font-weight: 600; color: var(--c); }
.xl-tessere .meteo, .xl-tessere .bilancio-xl { --c: var(--ciano); grid-column: span 2; gap: .4cqw; }
.xl-tessere .bilancio-xl { --c: var(--sole); }
.xl-tessere em { display: flex; justify-content: space-between; font-style: normal; font-size: 1.3cqw; color: var(--testo); }
.xl-tessere em b { font-size: 1.3cqw; color: var(--testo); }
.xl-tessere .meteo em b { color: var(--tenue); font-family: inherit; font-weight: 400; }

.xl-novita { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; align-items: start; }
.novita { gap: .8cqw; }
.novita > b { font-size: 2.1cqw; font-weight: 700; }

.luce-corpo { display: grid; grid-template-columns: 1fr 13cqw; gap: 2cqw; align-items: center; height: 15cqw; margin-bottom: 2.6cqw; }
.gauge { position: relative; }
.gauge svg { width: 100%; overflow: visible; }
.gauge .binario { stroke-width: 12; stroke-linecap: round; }
.arco.lux {
  stroke: var(--sole);
  stroke-width: 12;
  stroke-dasharray: calc(var(--reel-lux) / 4 * 1px) 100px;
  filter: drop-shadow(0 0 6px var(--sole));
}
.gauge .lancetta { transform-box: view-box; transform-origin: 100px 104px; rotate: calc(-90deg + var(--reel-lux) / 400 * 180deg); }
.gauge .lancetta line { stroke: var(--testo); stroke-width: 3; stroke-linecap: round; }
.gauge .lancetta circle { fill: var(--testo); }
.gauge span { position: absolute; left: 0; right: 0; bottom: -2.6cqw; text-align: center; font-family: "Fira Code", monospace; font-size: 2.2cqw; font-weight: 600; color: var(--sole); }

.schermino {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5cqw;
  aspect-ratio: 16 / 10;
  padding: .7cqw;
  border-radius: .8cqw;
  border: .35cqw solid #121c2b;
  background: #07101c;
  filter: brightness(calc(.3 + var(--reel-lux) / 317 * .85));
  box-shadow: 0 0 calc(var(--reel-lux) / 317 * 3cqw) rgba(255, 181, 71, .45);
}
.schermino i { border-radius: .3cqw; background: linear-gradient(160deg, var(--sole), #ff8a3d); }
.schermino i:nth-child(2) { background: linear-gradient(160deg, var(--casa), #3156c9); }
.schermino i:nth-child(3) { background: linear-gradient(160deg, var(--viola), #5b47c9); }
.schermino i:nth-child(4) { background: linear-gradient(160deg, var(--verde), #12a86a); }

.radar {
  position: relative;
  width: 15cqw;
  aspect-ratio: 1;
  margin: .4cqw auto 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle, transparent 0 2.3cqw, rgba(53, 240, 161, .22) 2.3cqw calc(2.3cqw + 1px)),
    linear-gradient(rgba(53, 240, 161, .14), rgba(53, 240, 161, .14)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(53, 240, 161, .14), rgba(53, 240, 161, .14)) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle, rgba(53, 240, 161, .1), rgba(2, 8, 15, .9));
  border: 1px solid rgba(53, 240, 161, .4);
}
.radar-fascio {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(53, 240, 161, .55), rgba(53, 240, 161, 0) 70deg, transparent);
  rotate: calc(var(--tempo) * 220deg);
}
.eco, .impulso-css {
  position: absolute;
  left: calc(var(--dx) * 1%);
  top: calc(var(--dy) * 1%);
  width: .8cqw;
  height: .8cqw;
  margin: -.4cqw 0 0 -.4cqw;
  border-radius: 50%;
}
.eco { background: rgba(234, 246, 255, .6); translate: none; }
.eco.trovato { background: var(--verde); box-shadow: 0 0 1.4cqw var(--verde); scale: 1.4; }
.impulso-css {
  border: .2cqw solid var(--verde);
  scale: calc(1 + var(--p) * 5);
  opacity: calc((1 - var(--p)) * min(1, var(--p) * 30));
}
.esito-logger {
  align-self: center;
  padding: .45cqw 1.2cqw;
  border-radius: 99px;
  background: rgba(53, 240, 161, .12);
  border: 1px solid rgba(53, 240, 161, .45);
  font-family: "Fira Code", monospace;
  font-size: 1.2cqw;
  color: var(--verde);
}

/* ─── 7 · Portal web ─── */

.portal-corpo { flex: 1; display: grid; grid-template-columns: 1fr 19cqw; gap: 4cqw; align-items: start; }

.browser {
  display: flex;
  flex-direction: column;
  border-radius: 1.2cqw;
  overflow: hidden;
  background: rgba(8, 16, 28, .92);
  border: 1px solid rgba(234, 246, 255, .14);
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .9), 0 0 5cqw -2cqw rgba(61, 214, 255, .4);
}
.browser-testa { display: flex; align-items: center; gap: .6cqw; padding: .9cqw 1.2cqw; background: rgba(234, 246, 255, .05); border-bottom: 1px solid var(--linea); }
.browser-testa i { width: .8cqw; height: .8cqw; border-radius: 50%; background: rgba(234, 246, 255, .2); }
.browser-testa i:first-child { background: #ff6b5c; }
.browser-testa span {
  margin-left: 1.2cqw;
  padding: .3cqw 1.4cqw;
  border-radius: 99px;
  background: rgba(234, 246, 255, .06);
  font-family: "Fira Code", monospace;
  font-size: 1cqw;
  color: var(--tenue);
}
.browser-corpo { padding: 1.4cqw 1.8cqw 1.6cqw; display: grid; gap: 1.2cqw; }

.schede {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--linea);
  font-size: 1.25cqw;
  font-weight: 600;
  color: var(--tenue);
}
.schede span { padding: .6cqw 0 .8cqw; text-align: center; }
.indicatore {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 25%;
  height: .28cqw;
  border-radius: 99px;
  background: var(--verde);
  box-shadow: 0 0 1cqw rgba(53, 240, 161, .8);
  translate: calc((clamp(0, (var(--tempo) - var(--k1)) * 4, 1) + clamp(0, (var(--tempo) - var(--k2)) * 4, 1) + clamp(0, (var(--tempo) - var(--k3)) * 4, 1)) * 100%) 0;
}

.curva { width: 100%; height: 11cqw; overflow: visible; }
.griglia-p { fill: none; stroke: rgba(234, 246, 255, .07); stroke-width: 1; }
.curva .linea2 { stroke: var(--casa); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(91, 157, 255, .6)); }

.impianti { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.impianti li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3cqw .6cqw;
  padding: .7cqw 1cqw;
  border-radius: .7cqw;
  background: rgba(234, 246, 255, .05);
  font-size: 1.3cqw;
  font-weight: 600;
}
.impianti i { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--verde); box-shadow: 0 0 .8cqw var(--verde); }
.impianti span { flex-basis: 100%; font-size: 1cqw; font-weight: 400; color: var(--tenue); }

.telefono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
  padding: 2cqw 1.6cqw;
  border-radius: 2.6cqw;
  border: .45cqw solid #121c2b;
  background: linear-gradient(180deg, #0a1422, #050b14);
  box-shadow: 0 0 0 1px rgba(234, 246, 255, .14), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .9);
}
.telefono > small { font-size: 1cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.qr { position: relative; width: 12cqw; aspect-ratio: 1; padding: .8cqw; border-radius: .8cqw; background: #eaf6ff; box-sizing: content-box; }
.qr i:not(.scansione) {
  position: absolute;
  left: calc(.8cqw + var(--c) * 12cqw / 21);
  top: calc(.8cqw + var(--r) * 12cqw / 21);
  width: calc(12cqw / 21 + .5px);
  height: calc(12cqw / 21 + .5px);
  background: #02080f;
}
.scansione {
  position: absolute;
  left: -.4cqw;
  right: -.4cqw;
  top: calc(var(--p) * 100%);
  height: .3cqw;
  background: var(--verde);
  box-shadow: 0 0 1.6cqw .3cqw var(--verde);
  opacity: calc(min(1, var(--p) * 8) * min(1, (1 - var(--p)) * 8));
  translate: none;
}
.codice { display: flex; gap: .4cqw; }
.codice span {
  display: grid;
  place-items: center;
  width: 2.2cqw;
  height: 3cqw;
  border-radius: .5cqw;
  border: 1px solid rgba(53, 240, 161, .45);
  background: rgba(53, 240, 161, .08);
  font-family: "Fira Code", monospace;
  font-size: 1.8cqw;
  font-weight: 600;
  color: var(--verde);
}
.codice span:nth-child(3) { margin-right: .6cqw; }
.abbinato {
  padding: .5cqw 1.2cqw;
  border-radius: 99px;
  background: var(--verde);
  color: var(--inchiostro);
  font-size: 1.1cqw;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 2cqw rgba(53, 240, 161, .6);
}
.portal .claim { margin-top: 2cqw; }

/* ─── 8 · Sempre aggiornato ─── */

.ota-corpo { flex: 1; display: grid; grid-template-columns: 24cqw 1fr; gap: 5cqw; align-items: center; }
.ota-anello { position: relative; width: 24cqw; aspect-ratio: 1; }
.ota-anello svg { width: 100%; height: 100%; overflow: visible; }
.ota-anello .binario { stroke-width: 10; }
.arco.ota-arco {
  stroke: var(--ciano);
  stroke-width: 10;
  stroke-dasharray: calc(var(--reel-ota) * 1px) 100px;
  filter: drop-shadow(0 0 8px var(--ciano));
}
.ota-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ota-centro span { font-family: "Fira Code", monospace; font-size: 5cqw; font-weight: 600; line-height: 1; color: var(--testo); }
.ota-centro small { margin-top: .6cqw; font-size: 1cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }

.ota-voci { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6cqw; }
.ota-voci li { display: grid; gap: .3cqw; padding: 1.4cqw 1.8cqw; border-left: .3cqw solid var(--ciano); border-radius: 0 1cqw 1cqw 0; background: linear-gradient(90deg, rgba(61, 214, 255, .1), transparent); }
.ota-voci b { font-size: 2.1cqw; font-weight: 700; }
.ota-voci span { font-size: 1.4cqw; color: var(--tenue); }

.installato {
  position: absolute;
  left: 7cqw;
  bottom: 8.5cqw;
  width: 24cqw;
  padding: .6cqw 0;
  border-radius: 99px;
  background: var(--verde);
  color: var(--inchiostro);
  font-size: 1.35cqw;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 2.4cqw rgba(53, 240, 161, .6);
}

/* ─── 9 · Chiusura ─── */

.finale { align-items: center; justify-content: center; text-align: center; }
.alone {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 90cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 181, 71, .2), rgba(53, 240, 161, .1) 35%, transparent 62%);
  scale: calc(.5 + var(--e) * .7);
}
.logo {
  position: relative;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff6dc, var(--sole) 45%, #ff7a2f 75%);
  box-shadow: 0 0 4cqw rgba(255, 181, 71, .7), 0 0 0 1.2cqw rgba(255, 181, 71, .1), 0 0 0 2.4cqw rgba(53, 240, 161, .06);
  scale: calc(.6 + var(--e) * .4);
}
.marca { position: relative; margin: 2.4cqw 0 0; font-size: 5.6cqw; font-weight: 800; letter-spacing: -.04em; }
.motto { position: relative; margin: .6cqw 0 0; font-size: 2.4cqw; color: var(--tenue); }
.motto em {
  font-style: normal;
  background: linear-gradient(90deg, var(--sole), var(--verde), var(--ciano));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.listino { position: relative; display: flex; gap: 1.4cqw; margin-top: 2.6cqw; }
.listino span {
  display: flex;
  align-items: baseline;
  gap: .8cqw;
  padding: .7cqw 1.6cqw;
  border-radius: 1cqw;
  border: 1px solid rgba(234, 246, 255, .16);
  background: rgba(234, 246, 255, .05);
  font-family: "Fira Code", monospace;
  font-size: 2cqw;
  font-weight: 600;
}
.listino b { font-size: 1.3cqw; color: var(--verde); }
.riepilogo { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .8cqw; max-width: 90cqw; margin: 2cqw 0 0; padding: 0; list-style: none; }
.riepilogo li { padding: .45cqw 1.2cqw; border-radius: 99px; border: 1px solid rgba(53, 240, 161, .35); background: rgba(53, 240, 161, .06); font-size: 1.25cqw; }

/* ─── Comandi ─── */

.reel .hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.hud-marca {
  position: absolute;
  top: clamp(10px, 2.4cqw, 26px);
  right: clamp(12px, 2.8cqw, 30px);
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: "Fira Code", monospace;
  font-size: clamp(9px, 1.1cqw, 12px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(234, 246, 255, .55);
}
.hud-marca i { width: .7em; height: .7em; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px var(--verde); animation: reel-batte 1.2s ease-in-out infinite; }

.hud-basso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4cqw, 16px);
  padding: clamp(8px, 1.6cqw, 18px) clamp(10px, 2.2cqw, 24px);
  background: linear-gradient(0deg, rgba(2, 8, 15, .9), transparent);
}

.reel .play {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(28px, 3.4cqw, 38px);
  height: clamp(28px, 3.4cqw, 38px);
  border-radius: 50%;
  background: rgba(234, 246, 255, .12);
  pointer-events: auto;
  cursor: pointer;
  transition: background-color .2s;
}
.reel .play:hover { background: rgba(53, 240, 161, .28); }
.reel .play:has(:focus-visible) { outline: 2px solid var(--testo); outline-offset: 2px; }
.reel .play input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.reel .play svg { grid-area: 1 / 1; width: 50%; height: 50%; fill: var(--testo); pointer-events: none; }
.icona-play { display: none; }

.reel-video:has(.alterna:checked) .reel { animation-play-state: paused; }
.reel-video:has(.alterna:checked) .icona-pausa { display: none; }
.reel-video:has(.alterna:checked) .icona-play { display: block; }

.avanzamento { position: relative; flex: 1; height: 3px; border-radius: 99px; background: rgba(234, 246, 255, .18); }
.riempimento {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sole), var(--verde), var(--ciano));
  transform-origin: left;
  scale: calc(var(--tempo) / 60) 1;
}
.avanzamento i { position: absolute; top: -2px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: rgba(234, 246, 255, .5); }

.timecode { flex: none; font-family: "Fira Code", monospace; font-size: clamp(9px, 1.15cqw, 12px); font-weight: 600; color: rgba(234, 246, 255, .7); counter-reset: s var(--reel-secondi); }
.timecode::before { content: "00:" counter(s, decimal-leading-zero) " / 01:00"; }

@keyframes reel-batte { 50% { opacity: .35; } }

@container (max-width: 640px) {
  .hud-marca { display: none; }
}

/* ─── Didascalia ─── */

.reel-video figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--foam-dim, #8ea3ba);
}
.reel-video .illustrativi { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

/* Con "riduci movimento" il video parte fermo su un fotogramma significativo (le novità del 10"): si avvia
   col pulsante. Gli !important vincono sulla regola globale di marketing.css che azzera le animazioni. */
@media (prefers-reduced-motion: reduce) {
  .reel { animation-duration: 60s !important; animation-iteration-count: infinite !important; animation-delay: -42s; animation-play-state: paused; }
  .hud-marca i { animation: none; }
  .icona-pausa { display: none; }
  .icona-play { display: block; }
  .reel-video:has(.alterna:checked) .reel { animation-play-state: running; }
  .reel-video:has(.alterna:checked) .icona-pausa { display: block; }
  .reel-video:has(.alterna:checked) .icona-play { display: none; }
}