/*
 * La home dello studio con le due porte (07.10.2026, docs/sito-pubblico.md).
 * Era un video di 25 secondi con un bottone, e chi arrivava non sapeva cosa
 * vendesse Opero finché il filmato non lo portava da sé a /servizi. Adesso il
 * titolo lo dice subito, due porte separano chi ha una ditta da chi cerca un
 * sito, e il video sta dietro, velato. Foglio a sé, caricato per ultimo, perché
 * styles.css è quello dell'export e opero-sito.css vale per tutte le pagine.
 */
.home-porte{
  --home-text:#f7f8fa;
  --home-muted:#c3ccd8;
  --home-accent:#66D3F7;
  --home-line:rgba(206,235,255,.26);
  --home-card:rgba(8,16,26,.66);
  display:flex;flex-direction:column;min-height:100svh;
  font-family:var(--font-inter);color:var(--home-text);
}

/* Il fotogramma d'apertura sta sotto il video, e si vede finché il video non suona:
   con l'autoplay bloccato, senza script o con «riduci il movimento» resta lui. */
.home-porte .film{background:#080e16 url(/sito/opero/assets/poster-raccordo-allineato.jpg) center/cover no-repeat}
.home-porte .film video{object-fit:cover;opacity:0;transition:opacity .8s ease;
  /* il filmato ha scritte sue: sfocato appena, non fanno concorrenza al titolo */
  filter:blur(3px);transform:scale(1.03)}
.home-porte.film-live .film video{opacity:1}
/* La velatura: tutta un po', e molto dove stanno le parole (in basso a sinistra). */
.home-porte .film-shade{background:
  linear-gradient(90deg,rgba(8,14,22,.82) 0%,rgba(8,14,22,.6) 45%,rgba(8,14,22,.25) 80%,rgba(8,14,22,.2) 100%),
  linear-gradient(180deg,rgba(8,14,22,.55) 0%,rgba(8,14,22,.2) 25%,rgba(8,14,22,.6) 55%,rgba(8,14,22,.94) 100%)}

/* In alto a destra, discreti: chi deve scrivere e chi deve entrare. */
.home-top{display:flex;align-items:center;gap:6px}
.home-top a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;color:var(--home-text);text-decoration:none;transition:background .2s,border-color .2s}
.home-top a:hover{background:rgba(255,255,255,.1)}
.home-top a:last-child{border:1px solid var(--home-line)}
.home-top a:last-child:hover{border-color:var(--home-accent)}
.home-porte a:focus-visible,.home-porte button:focus-visible{outline:2px solid var(--home-accent);outline-offset:3px}

.home-hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:132px 4.5vw 36px;max-width:1240px}
.home-title{font-size:clamp(34px,4.6vw,66px);font-weight:600;line-height:1.04;letter-spacing:-.035em;margin:0;max-width:15em;text-wrap:balance}
.home-title span{display:block;color:var(--home-accent)}
.home-lead{margin:18px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--home-muted)}

/* Le due porte: grandi, tutta la carta è il collegamento. */
.porte{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:940px}
.porta{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;min-height:44px;padding:22px 64px 22px 24px;border:1px solid var(--home-line);border-radius:18px;background:var(--home-card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--home-text);text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.porta:hover{border-color:var(--home-accent);background:rgba(4,40,58,.72);transform:translateY(-2px)}
.porta-chi{font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.porta-cosa{font-size:15px;font-weight:600;color:var(--home-accent)}
.porta-dettaglio{font-size:14px;line-height:1.45;color:var(--home-muted)}
.porta-freccia{position:absolute;right:22px;top:50%;width:26px;height:26px;margin-top:-13px;fill:none;stroke:var(--home-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.porta:hover .porta-freccia{transform:translateX(4px)}

/* Sotto: le pagine legali e il comando del video, nel flusso e non sopra le porte. */
.home-porte .film-controls{position:static;padding:0 4.5vw 22px;flex-wrap:nowrap}
.home-porte .intro-legal{order:0;flex-basis:auto;gap:4px 18px}
.home-porte .intro-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.home-porte .playback-button{padding:0 4px;font-size:13px}

@media(max-width:760px){
  .home-top a{padding:0 12px;font-size:14px}
  .home-hero{padding:112px 20px 24px}
  .porte{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .porta{padding:18px 56px 18px 20px}
  .home-porte .film-controls{padding:0 20px 14px}
}
@media(max-width:700px){
  .home-porte .film{background-image:url(/sito/opero/assets/poster-raccordo-telefono.jpg)}
  .home-porte .film-shade{background:linear-gradient(180deg,rgba(8,14,22,.6) 0%,rgba(8,14,22,.45) 20%,rgba(8,14,22,.8) 38%,rgba(8,14,22,.95) 70%,#080e16 100%)}
}
@media(max-width:380px){.home-top a:first-child{padding:0 8px}}