/* Spot a tutto schermo (awld_spot) e sua versione nel modale del portfolio. File a sé: serve anche sulle
   pagine del portfolio, dove landing.css non va caricato (imposta lo sfondo della pagina). */
.awld.awld-el-spot{max-width:none;padding:clamp(24px,4vw,64px) 0;background:transparent}
.awld-spot{--s:0;--w0:min(1100px,84%);--wmax:min(100%,170vh);position:relative;isolation:isolate}
.awld-spot-frame{position:relative;z-index:1;margin:0 auto;width:calc(var(--w0) + (var(--wmax) - var(--w0)) * var(--s));aspect-ratio:16/9;border-radius:calc(28px * (1 - var(--s)));overflow:hidden;background:#000;box-shadow:0 50px 140px -50px rgba(0,0,0,.9)}
.awld-spot .awld-spot-poster{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transform:scale(calc(1.14 - .14 * var(--s)));transition:opacity .6s}
.awld-spot-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.72));transition:opacity .6s}
.awld-spot-testa{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(18px,3.4vw,48px);display:flex;flex-direction:column;gap:6px;color:#fff;font-family:"Graphik",Helvetica,Arial,sans-serif;transition:opacity .5s}
.awld-spot-occ{font-size:clamp(13px,1.1vw,16px);opacity:.75}
.awld-spot-tit{font-size:clamp(34px,6vw,96px);line-height:.95;letter-spacing:-.035em;font-weight:500}
.awld-spot-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;background:none;border:0;padding:0;cursor:pointer;color:#fff;font-family:"Graphik",Helvetica,Arial,sans-serif;transition:opacity .5s}
.awld-spot-cerchio{display:flex;align-items:center;justify-content:center;width:clamp(72px,7vw,104px);height:clamp(72px,7vw,104px);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 0 rgba(255,255,255,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.awld-spot-cerchio svg{width:38%;height:38%;margin-left:6%;fill:#000}
.awld-spot-play:hover .awld-spot-cerchio,.awld-spot-play:focus-visible .awld-spot-cerchio{transform:scale(1.1);box-shadow:0 0 0 18px rgba(255,255,255,.12)}
.awld-spot-et{font-size:clamp(14px,1.05vw,16px);letter-spacing:.01em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.awld-spot-et em{font-style:normal;opacity:.7;margin-left:8px}
.awld-spot-alone{position:absolute;z-index:0;left:50%;top:50%;width:calc(var(--w0) + (var(--wmax) - var(--w0)) * var(--s));aspect-ratio:16/9;transform:translate(-50%,-50%);opacity:calc(.55 - .25 * var(--s));pointer-events:none}
.awld-spot-alone img{width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(70px) saturate(1.5);transform:scale(1.05)}
.awld-spot-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.awld-spot.is-playing .awld-spot-poster,.awld-spot.is-playing .awld-spot-velo,.awld-spot.is-playing .awld-spot-testa,.awld-spot.is-playing .awld-spot-play{opacity:0;pointer-events:none}
/* la transizione solo al clic: durante lo scorrimento comanda lo scrub */
.awld-spot.is-playing .awld-spot-frame,.awld-spot.is-playing .awld-spot-alone{transition:width .7s cubic-bezier(.2,.8,.2,1),border-radius .7s,opacity .7s}
html body .awld-spot p.awld-spot-nota{margin:clamp(16px,1.6vw,22px) auto 0;text-align:center;font-size:13px;color:#86868b!important}
@media (max-width:767px){.awld-spot{--w0:calc(100% - 32px)}.awld-spot-play{gap:10px}}
/* nel modale del portfolio: niente allargamento, lo spot occupa la larghezza del modale */
.awld-spot--fisso .awld-spot{--s:1}
.awld-spot--fisso.awld-el-spot{padding:0}
.awld-spot-modale{background:#000;color:#f5f5f7;font-family:"Graphik",Helvetica,Arial,sans-serif;border-radius:20px;overflow:hidden}
.awld-spot-modale .awld-spot-frame{border-radius:0;box-shadow:none}
.awld-spot-modale .awld-spot-alone{display:none}
.awld-spot-modale-testo{padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
html body .awld-spot-modale-testo h2{margin:0;color:#f5f5f7;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:500}
html body .awld-spot-modale-testo p{margin:0;color:#c7c7cc;font-size:clamp(15px,1.15vw,17px);line-height:1.5;max-width:720px}
html body .awld-spot-modale-testo p.awld-spot-modale-occ{color:#86868b;font-size:14px}
html body .awld-spot-modale-apri{display:inline-flex;gap:8px;align-items:center;margin-top:6px;padding:12px 20px;border-radius:300px;background:#f5f5f7;color:#1d1d1f!important;font-size:14px;text-decoration:none}
html body .awld-spot-modale p.awld-spot-nota{margin:12px auto 0;padding:0 16px}

/* le regole del portfolio (img altezza automatica) non devono toccare locandina e alone */
.awld-spot .awld-spot-alone img{height:100%!important;max-width:none!important}
/* formato cinema: la locandina perde le bande nere; al play il riquadro torna 16:9 per il player */
.awld-spot--cinema .awld-spot-frame,.awld-spot--cinema .awld-spot-alone{aspect-ratio:2.39/1}
.awld-spot--cinema.is-playing .awld-spot-frame,.awld-spot--cinema.is-playing .awld-spot-alone{aspect-ratio:16/9}
.awld-spot--cinema.is-playing .awld-spot-frame{transition:width .7s cubic-bezier(.2,.8,.2,1),border-radius .7s,aspect-ratio .7s}
/* telefono: riquadro basso, restano il pulsante tondo e il nome */
@media (max-width:767px){.awld-spot-et,.awld-spot-occ{display:none}.awld-spot .awld-spot-tit{font-size:26px}.awld-spot-cerchio{width:60px;height:60px}}
/* il modale del portfolio diventa nero quando mostra uno spot (frecce e chiusura chiare) */
.vp-ajax-wrapper:has(.awld-spot-modale),.vp-ajax-wrapper:has(.awld-spot-modale) .vp-ajax-inner,.vp-ajax-wrapper:has(.awld-spot-modale) .vp-ajax-content{background:#000!important}
.vp-ajax-wrapper:has(.awld-spot-modale) .vp-ajax-actions-wrapper{background:#000!important}
.vp-ajax-wrapper:has(.awld-spot-modale) .vp-ajax-actions{filter:invert(1);background:transparent!important}