/* =============================================================
   FIMAS — Video della homepage (06/11/2026)

   .vh26          contenitore di un video, con il caricamento sopra
   .vh26--hero    il trailer in testa alla pagina (scuro, 12:5)
   .vh26--show    lo showcase dei prodotti al posto dello slider
                  delle basole (bianco, 16:9 su computer, 4:5 su telefono)

   Il caricamento: le due mattonelle del logo che ruotano, dentro un
   riquadro bianco. Compare solo se il video tarda (dopo un quarto di
   secondo, cosi' con una buona connessione non lampeggia) e sparisce
   in dissolvenza appena il video parte.
   ============================================================= */

.vh26 {
  position: relative;
  overflow: hidden;
}
.vh26 > video {
  display: block;
  width: 100%;
}

/* ---------- caricamento ---------- */
.vh26__load {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease-in-out, visibility 0s linear .45s;
  z-index: 3;
}
.vh26.is-loading .vh26__load {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease-in-out, visibility 0s;
}
.vh26__badge {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(20, 16, 12, .45), 0 0 0 1px rgba(20, 16, 12, .05);
}
.vh26__badge img {
  width: 80px;
  height: 80px;
  display: block;
}
/* testo per i lettori di schermo: chi vede ha le mattonelle */
.vh26__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- trailer in testa ---------- */
.vh26--hero {
  background: #0b0a09;
}
.vh26--hero > video {
  aspect-ratio: 12 / 5;          /* 1920x800: l'altezza c'e' gia' prima che il video arrivi */
  height: auto;
  object-fit: cover;
  background: #0b0a09;
}

/* ---------- showcase dei prodotti ---------- */
.vh26--show {
  max-width: 1320px;
  margin: 34px auto 30px;
  border-radius: 18px;
  background: #f1f1ef;          /* il bianco caldo del video */
  box-shadow: 0 30px 60px -40px rgba(25, 20, 15, .45);
}
.vh26--show > video {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: #f1f1ef;
}
@media (max-width: 767px) {
  .vh26--show {
    margin: 22px 16px 24px;
    border-radius: 14px;
  }
  .vh26--show > video { aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
  .vh26__badge { width: 84px; height: 84px; border-radius: 20px; }
  .vh26__badge img { width: 64px; height: 64px; }
}

/* ---------- pulsante dell'audio (la musica parte muta: lo vogliono i browser) ---------- */
.vh26__audio {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(27, 27, 27, .72);
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease-in-out, transform .35s ease-in-out, background .2s ease;
  pointer-events: none;
}
.vh26.is-playing .vh26__audio {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.vh26__audio:hover { background: rgba(232, 119, 34, .92); }
.vh26__audio svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.vh26__audio .ico-on { display: none; }
.vh26__audio[aria-pressed="true"] .ico-on { display: block; }
.vh26__audio[aria-pressed="true"] .ico-off { display: none; }
@media (max-width: 767px) {
  .vh26__audio { right: 12px; bottom: 12px; padding: 8px 13px 8px 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .vh26__load, .vh26.is-loading .vh26__load, .vh26__audio { transition: none; }
}