.film { position: relative; color: var(--kds-paper-ink); background: var(--surface-3); }
.film__stage { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.film__poster, .film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.film__canvas { display: none; max-width: none; }
.film__scrim {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-3) 88%, transparent) 0%, color-mix(in srgb, var(--surface-3) 48%, transparent) 44%, transparent 75%);
  transition: background var(--kds-duration-scene) var(--kds-spring);
}
.film__chapters { position: relative; z-index: 3; min-height: 100svh; }
.film__chapter {
  display: none;
  width: 100%;
  min-height: 100svh;
  padding: calc(var(--kds-nav-height) + var(--kds-space-8)) max(var(--kds-space-8), calc((100vw - var(--kds-container)) / 2 + var(--kds-space-8))) calc(var(--kds-space-20) + var(--kds-space-8));
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.film__chapter--intro { display: flex; }
.film__chapter h1 {
  max-width: 18ch;
  margin-top: var(--kds-space-4);
  font-size: clamp(2.5rem, 4.5vw, 4.35rem);
  font-weight: 740;
  letter-spacing: -0.038em;
  line-height: 0.98;
}
.film__chapter h1 em {
  font-family: var(--kds-font-editorial);
  font-size: 1.03em;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.film__chapter h2 {
  max-width: 16ch;
  font-size: clamp(2.3rem, 4.2vw, 4rem);
  font-weight: 740;
  letter-spacing: -0.035em;
}
.film__lede { max-width: 46ch; margin-top: var(--kds-space-6); color: var(--kds-dark-muted); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.65; }
.film__actions { margin-top: var(--kds-space-8); display: flex; align-items: center; flex-wrap: wrap; gap: var(--kds-space-4) var(--kds-space-6); }
.film__chapter--compact { justify-content: flex-end; }
.film__chapter--compact h2, .film__chapter--compact .film__lede, .film__chapter--compact .eyebrow { text-shadow: 0 2px 20px var(--surface-3); }
.film__chapter--network { justify-content: flex-end; }
.film__chapter--final { color: var(--text); }
.film__chapter--final .eyebrow { color: var(--muted); }
.film__chapter--final .film__lede { color: var(--muted); }
.film[data-scene="3"] .film__scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--surface-3) 86%, transparent) 0%, color-mix(in srgb, var(--surface-3) 32%, transparent) 48%, transparent 78%); }
.film[data-scene="4"] .film__scrim { background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 88%, transparent) 0%, color-mix(in srgb, var(--surface) 44%, transparent) 43%, transparent 72%); }
.film__progress {
  position: absolute;
  z-index: 4;
  left: max(var(--kds-space-8), calc((100vw - var(--kds-container)) / 2 + var(--kds-space-8)));
  right: max(var(--kds-space-8), calc((100vw - var(--kds-container)) / 2 + var(--kds-space-8)));
  bottom: var(--kds-space-6);
  display: none;
  align-items: center;
  gap: var(--kds-space-4);
  color: var(--kds-dark-muted);
  font-family: var(--kds-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.film[data-scene="4"] .film__progress { color: var(--muted); }
.film__progress-track { width: min(20vw, 180px); height: 1px; background: color-mix(in srgb, currentColor 28%, transparent); }
.film__progress-track i { display: block; width: 100%; height: 100%; background: var(--kds-accent-light); transform: scaleX(0); transform-origin: left; }
.film__progress-count { margin-left: auto; }
.film__progress-count b { color: currentColor; font-weight: 500; }

.film.is-enhanced { height: 480vh; }
.film.is-enhanced .film__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.film.is-enhanced .film__canvas { display: block; }
.film.is-enhanced .film__chapter { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); transition: opacity var(--kds-duration-scene) var(--kds-spring), transform var(--kds-duration-scene) var(--kds-spring), visibility 0s var(--kds-duration-scene); }
.film.is-enhanced .film__chapter.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.film.is-enhanced .film__progress { display: flex; }
.film.is-enhanced .film__static { display: none; }

.film__static { color: var(--text); background: var(--surface); }
.static-chapter { min-height: 80vh; display: grid; grid-template-columns: 7fr 5fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.static-chapter:nth-child(even) { grid-template-columns: 5fr 7fr; }
.static-chapter:nth-child(even) picture { order: 2; }
.static-chapter picture { min-height: 420px; overflow: hidden; }
.static-chapter img { width: 100%; height: 100%; object-fit: cover; }
.static-chapter > div { padding: var(--kds-space-16); align-self: center; }
.static-chapter h2 { font-size: clamp(2.3rem, 4vw, 4.2rem); }
.static-chapter > div > p:last-child { max-width: 48ch; margin-top: var(--kds-space-6); }

@media (max-width: 760px) {
  .film__chapter {
    padding: calc(var(--kds-nav-height) + var(--kds-space-4)) var(--kds-space-5) calc(var(--kds-space-12) + var(--kds-space-4));
    justify-content: flex-end;
    /* safe flex-end: se il contenuto eccede il viewport l'overflow
       va a fondo (sotto) invece di troncare l'h1 sotto l'header. */
    justify-content: safe flex-end;
  }
  .film__chapter--intro { justify-content: flex-end; justify-content: safe flex-end; }
  .film__chapter h1 { font-size: clamp(2.1rem, 9.5vw, 2.9rem); }
  .film__chapter h2 { font-size: clamp(1.95rem, 8.6vw, 2.6rem); }
  .film__lede { max-width: 36ch; margin-top: var(--kds-space-4); font-size: 0.94rem; }
  .film__actions { margin-top: var(--kds-space-5); gap: var(--kds-space-2) var(--kds-space-4); }
  .film__chapter--compact, .film__chapter--network {
    padding-bottom: calc(var(--kds-space-12) + var(--kds-space-4));
    justify-content: flex-end;
    justify-content: safe flex-end;
  }
  .film__scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--surface-3) 90%, transparent) 0%, color-mix(in srgb, var(--surface-3) 40%, transparent) 58%, transparent 88%); }
  .film[data-scene="4"] .film__scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--surface) 94%, transparent) 0%, color-mix(in srgb, var(--surface) 64%, transparent) 58%, transparent 90%); }
  .film__progress { left: var(--kds-space-5); right: var(--kds-space-5); bottom: var(--kds-space-4); }
  .film__progress-label { display: none; }
  .film__progress-track { width: 50vw; }
  .film.is-enhanced { height: 440vh; }
  .static-chapter, .static-chapter:nth-child(even) { min-height: 0; grid-template-columns: 1fr; }
  .static-chapter:nth-child(even) picture { order: 0; }
  .static-chapter picture { min-height: 0; aspect-ratio: 4 / 5; }
  .static-chapter > div { padding: var(--kds-space-8) var(--kds-space-5) var(--kds-space-12); }
}

@media (prefers-reduced-motion: reduce) {
  .film.is-enhanced { height: auto; }
  .film.is-enhanced .film__stage { position: relative; height: auto; min-height: 100svh; }
  .film.is-enhanced .film__canvas, .film.is-enhanced .film__progress { display: none; }
  .film.is-enhanced .film__chapter { display: none; }
  .film.is-enhanced .film__chapter--intro { position: relative; display: flex; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .film.is-enhanced .film__static { display: block; }
}