/* Video player: avvio esplicito con audio e nessun controllo temporale. */

.film { background: var(--white); padding: 88px 0 96px; }
@media (min-width: 1069px) { .film { padding: 120px 0 128px; } }
.film .h2 { margin-bottom: 0; }

.film__frame {
  position: relative;
  margin: 40px auto 0;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #042067;
  box-shadow: 0 0 0 1px var(--hairline), 0 50px 100px -50px rgba(2, 8, 23, .45);
  isolation: isolate;
}
@media (min-width: 734px) { .film__frame { border-radius: 28px; margin-top: 56px; } }
.film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }

.film__start {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--white);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset;
  transform: translate(-50%, -50%);
  transition: background-color .25s var(--ease), opacity .2s var(--ease), transform .3s var(--ease);
}
.film__start:hover { background: color-mix(in srgb, var(--ink) 94%, transparent); transform: translate(-50%, -50%) scale(1.025); }
.film__start:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.film__start:active { transform: translate(-50%, -50%) scale(.97); }
.film__start:disabled { cursor: wait; opacity: .78; }
.film__start svg { width: 20px; height: 20px; fill: currentColor; }
.film.is-started .film__start { opacity: 0; visibility: hidden; pointer-events: none; }
.film.is-error .film__start { box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 430px) {
  .film__start { width: calc(100% - 32px); min-height: 48px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
}

.film__end {
  position: absolute;
  inset: 0;
  z-index: 3;
  visibility: hidden;
}
.film.is-ended .film__end { visibility: visible; }
/* area cliccabile sopra il bottone disegnato nell'ultima schermata del film */
.film__hit {
  position: absolute;
  left: 29.5%;
  top: 64.5%;
  width: 41%;
  height: 12.5%;
  border-radius: 999px;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}
.film__hit:hover { box-shadow: 0 0 0 3px rgba(61, 107, 255, .35); }
.film__hit:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.film__caption { margin-top: 18px; font-size: 14px; color: var(--text-2); text-align: center; }
.film__hit--oh { left: 30.5%; top: 61%; width: 39%; height: 11.5%; }

@media (prefers-reduced-motion: reduce) {
  .film__start { transition: opacity .15s linear; }
}