* { box-sizing: border-box; }

/* Scrollbar nascosta ovunque — desktop e mobile. La pagina scrolla
   ma senza barra visibile. */
* {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / legacy Edge */
}

*::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Opera */
  width: 0;
  height: 0;
}

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100%;
  overflow-y: scroll;
}

body {
  margin: 0;
  background: black;
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-style: normal;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.6s ease;
}

logo img {
  height: 26px;
  margin: 17px 40px 15px 65px;
}

menu {
  position: fixed;
  top: 50svh;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  margin: 0;        /* reset default browser margin-block (1em top + 1em bottom)
                       che spostava il menu ~16px sotto il centro */
  padding: 0;
  z-index: 200;
  pointer-events: none;
}

menu.visible {
  pointer-events: auto;
}

menu.dark logo img,
menu.dark nav a {
  filter: invert(1);
}

logo img {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-10px);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

menu.visible logo img {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  transition: gap 0.4s ease;
}

nav.submenu-open {
  gap: 0;
}

nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-12px);
  transition: opacity 0.35s ease, filter 0.4s ease, transform 0.4s ease;
}

menu.visible nav a {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

menu.visible nav a.sub-item:not(.show) {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-12px);
}

nav a:nth-child(1) { transition-delay: 0.03s; }
nav a:nth-child(2) { transition-delay: 0.06s; }
nav a:nth-child(3) { transition-delay: 0.09s; }
nav a:nth-child(4) { transition-delay: 0.12s; }
nav a:nth-child(5) { transition-delay: 0.15s; }

@media (min-width: 769px) {
  menu:hover:not(.animating) logo img,
  menu:hover:not(.animating) nav a,
  menu:hover:not(.animating) nav .sub-separator,
  menu:hover:not(.animating) nav .sub-comma,
  menu:hover:not(.animating) #back-btn.visible {
    opacity: 0.3 !important;
  }

  menu:hover:not(.animating) logo:hover img,
  menu:hover:not(.animating) nav a:hover {
    opacity: 1 !important;
  }

  /* back-btn hover → illumina */
  menu:hover:not(.animating) #back-btn.visible:hover {
    opacity: 1 !important;
  }

  /* quando back-btn ha .hover-linked, illumina come se fosse hover */
  menu:hover:not(.animating) #back-btn.visible.hover-linked {
    opacity: 1 !important;
  }

  /* quando il nav link non-collapsed ha .hover-linked */
  menu:hover:not(.animating) nav a.hover-linked {
    opacity: 1 !important;
  }
}

menu.visible nav a.collapsed {
  opacity: 0 !important;
  filter: blur(8px) !important;
  transform: translateX(-12px) !important;
  width: 0 !important;
  overflow: hidden;
  transition: opacity 0.25s ease, filter 0.3s ease, transform 0.3s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

/* DETAIL VIEW — quando si clicca un sub-item */
body.detail-view {
  background: white;
  transition: background 0.6s ease;
}

body.detail-view .container {
  opacity: 0;
  transition: opacity 0.4s ease;
}

nav .sub-item.detail-selected {
  opacity: 1 !important;
  filter: blur(0) !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

menu.detail-active logo img {
  opacity: 0 !important;
}

menu.detail-active nav .sub-item.detail-selected {
  color: black;
}

/* FILM DETAIL — sfondo nero, testo bianco */
body.film-detail-view menu.detail-active nav .sub-item.detail-selected {
  color: white;
}

body.film-detail-view nav .sub-item.detail-selected.film-fade {
  opacity: 0 !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease !important;
}

#film-video-bg {
  position: fixed;
  z-index: 250;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

#film-video-bg.visible {
  opacity: 1;
  visibility: visible;
}

#film-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.6s ease, transform 0.6s ease, opacity 0.25s linear;
}

#film-overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  z-index: 300;
  pointer-events: none;
}

#film-snap-first {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
}

/* Scroll hint: chevron animato che indica scrollabilità del testo sotto.
   Stesso comportamento di #film-playpause: appare/sparisce con
   l'attività utente (mousemove / scroll). Default hidden; .visible
   class lo mostra. Click → scroll alla section successiva. */
#film-scroll-hint {
  position: fixed;
  bottom: 33px;
  left: 50%;
  z-index: 2000;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

#film-scroll-hint.visible {
  opacity: 0.7;
  pointer-events: auto;
}

/* Mutual hover exclusion: quando la barra di progresso (#film-progress)
   è hovering o dragging, lo scroll-hint si nasconde. Il selettore ~
   funziona perché entrambi sono figli di <body>, e #film-scroll-hint
   viene appendato al body dopo che #film-progress è già nel DOM iniziale.
   L'inverso (hover sullo scroll-hint nasconde la barra) è gestito in JS
   in onProgressZoneCheck: se il mouse è sopra l'area dello scroll-hint
   non viene applicata .hovering alla barra. */
#film-progress.hovering ~ #film-scroll-hint,
#film-progress.dragging ~ #film-scroll-hint {
  opacity: 0 !important;
  pointer-events: none !important;
}

#film-scroll-hint img {
  display: block;
  height: 35px;
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* Scroll hint post-intro: stessa estetica del film-scroll-hint, ma
   fixed alla viewport. Si attiva via .visible quando finisce l'intro
   video e resta visibile finché non si è sull'ultimo slot reale o in
   detail-view/submenu (toggle gestito in animate()). Click → scroll
   smooth alla prossima sezione rispetto alla posizione corrente.
   .dismissed è legacy (non più applicata dal JS ma lasciata per
   eventuale ripristino futuro). z-index 2000 = sopra tutto. */
#intro-scroll-hint {
  position: fixed;
  bottom: 33px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#intro-scroll-hint.visible {
  opacity: 0.7;
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
  pointer-events: auto;
}

#intro-scroll-hint.dismissed {
  opacity: 0;
  animation: none;
  pointer-events: none;
}

#intro-scroll-hint img {
  display: block;
  height: 35px;
}

#film-snap-second {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#film-title {
  padding-top: calc(50svh - 21px);
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  color: white;
  transition: opacity 0.8s ease;
}

#film-overlay.visible {
  pointer-events: auto;
}


#film-block {
  position: relative;
  width: 650px;
  color: white;
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding-top: 30px;
  padding-bottom: 80px;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.6s ease 0.5s, filter 0.6s ease 0.5s;
}

#film-overlay.visible #film-block {
  opacity: 1;
  filter: blur(0);
}

#film-block p {
  margin: 0 0 1em 0;
}

/* Sub-item (Vivake/Charles) sparisce snap dopo la slide verso il logo. */
nav .sub-item.detail-hidden {
  opacity: 0 !important;
  transition: opacity 0s !important;
}

/* BIO OVERLAY — scrollabile */
#bio-overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 300;
  pointer-events: none;
}

#bio-overlay.visible {
  pointer-events: auto;
}

#bio-block {
  position: relative;
  width: 650px;
  color: black;
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding-top: 60px;
  padding-bottom: 80px;
  opacity: 0;
  filter: blur(6px);
  /* Snap: bio-block sparisce/appare insieme a .bio-role (anche transition 0s).
     Coerenza visiva nel back. */
  transition: opacity 0s, filter 0s;
}

#bio-overlay.visible #bio-block {
  opacity: 1;
  filter: blur(0);
}

/* Section video sotto la bio di Charles Darby (solo Charles).
   Replica il pattern .slot della home: la section è alta 45svh con
   margin 400px sopra/sotto, e contiene un .box centrato che parte
   piccolo (45svh × 16:9) e si espande a fullscreen via JS quando la
   section è centrata nello scroll del bio-overlay.
   z-index 2 = sopra il charles-bg-fade (z-index 1). */
#bio-overlay .charles-bio-video-section {
  position: relative;
  height: 45svh;
  margin: 400px 0;
  overflow: visible;
  z-index: 2;
}
#bio-overlay .charles-bio-video-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #000;
  /* Dimensioni iniziali 0 per evitare flash a dimensione nativa prima
     che JS imposti width/height via updateCharlesBox. */
  width: 0;
  height: 0;
}
#bio-overlay .charles-bio-video-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: video sotto bio Charles è STATICO (poster + blur overlay +
   play icon). Tap → fullscreen nativo. Section 75svh, box full-cover. */
@media (max-width: 768px) {
  #bio-overlay .charles-bio-video-section {
    height: 75svh;
    margin: 80px 0 0 0;
    z-index: 2;
  }
  #bio-overlay .charles-bio-video-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
}

/* Overlay blur + play icon su mobile (sopra al video poster).
   Tap → fullscreen + play. */
#bio-overlay .charles-bio-play-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
#bio-overlay .charles-bio-play-icon {
  width: 80px;
  height: 80px;
  opacity: 0.9;
}

/* Overlay nero fixed: opacity gestita da JS (sincronizzata con
   l'espansione del video box). Quando il video è fullscreen, lo
   sfondo bianco della bio diventa nero. */
#bio-overlay .charles-bg-fade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Disclaimer link nella bio di Charles, posizionato come nella home.
   Mascherato dal video box via clip-path (gestito da JS) — visibile
   solo dove si sovrappone al video, come #charles-disclaimer della home. */
.bio-disclaimer-link {
  position: fixed;
  bottom: 40px;
  right: 65px;
  color: white;
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  z-index: 60;
  /* Inizialmente full-clip, JS lo aggiorna */
  clip-path: inset(100% 0 0 0);
}

/* Sound toggle GLOBALE: angolo superiore destro, appare solo dopo
   che il video del logo intro è partito (al click sulla welcome).
   Click toggla mute di TUTTI i video del sito. */
#sound-toggle {
  position: fixed;
  top: 35px;
  right: 65px;
  color: white;
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#sound-toggle.visible {
  opacity: 0.5;
  pointer-events: auto;
}
@media (min-width: 769px) {
  #sound-toggle.visible:hover {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  #sound-toggle {
    display: none;
  }
}

/* Charles controls (desktop only): exit + play/pause + progress bar.
   Replica esattamente stile di #film-playpause / #film-exit-icon /
   #film-progress per consistenza visiva con Project Eve. */
.charles-controls-playpause {
  position: fixed;
  bottom: 33px;
  left: 100px;
  cursor: pointer;
  z-index: 350;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.charles-controls-playpause.visible {
  opacity: 1;
}
.charles-controls-playpause img {
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.charles-controls-exit {
  margin-right: 15px;
  transform: rotate(180deg);
}
.charles-controls-progress {
  position: fixed;
  bottom: 35px;
  left: 200px;
  right: 200px;
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  z-index: 350;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.charles-controls-progress.active {
  pointer-events: auto;
}
.charles-controls-progress.active.hovering {
  opacity: 1;
}
.charles-controls-progress-fill {
  height: 100%;
  width: 0%;
  background: white;
  pointer-events: none;
}
@media (max-width: 768px) {
  .charles-controls-playpause,
  .charles-controls-progress {
    display: none;
  }
}
@media (min-width: 769px) {
  .bio-disclaimer-link:hover {
    opacity: 1 !important;
  }
}

@media (max-width: 768px) {
  .bio-disclaimer-link {
    top: calc(100svh - 49px);
    bottom: auto;
    right: 25px;
  }
}

/* Fade-in solo dell'img (back button) dentro bio-title: il testo
   del nome appare istantaneamente, l'icona back entra in fade. */
#bio-overlay #bio-title img {
  opacity: 0;
  /* Snap-in istantaneo: back btn appare di colpo dopo la slide del sub-item. */
  transition: opacity 0s;
}

#bio-overlay.visible #bio-title img {
  opacity: 1;
}

/* Ruolo/funzione sotto il nome in bio-title (es. "Partner and Producer")
   Eredita tutte le proprietà tipografiche di #bio-title (font,
   size, letter-spacing, uppercase): stesso stile del nome.
   Fade-in sincronizzato con back button e bio-block. */
#bio-title .bio-role {
  display: block;
  margin-left: 33px;
  opacity: 0;
  /* Snap-in istantaneo: bio-role appare di colpo dopo la slide del sub-item. */
  transition: opacity 0s;
}

#bio-overlay.visible #bio-title .bio-role {
  opacity: 1;
}

#bio-title,
#services-title,
#contacts-title {
  padding-top: calc(50svh - 21px);
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  color: black;
  /* opacity/filter !important rimossi: bloccavano il bioTitle.style.opacity = '0'
     impostato da JS in goBack, impedendo lo snap-out del titolo. */
}

/* Contacts — testo bianco su sfondo nero (inverso di Services),
   usa un proprio overlay/block separato da bio */
body.contacts-view {
  background: black;
  transition: background 0.6s ease;
}

body.contacts-view .container {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.contacts-view #contacts-title {
  color: white;
}

/* CONTACT OVERLAY — scrollabile, testo bianco; contenuto dentro #contacts-title */
#contact-overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 300;
  pointer-events: none;
}

#contact-overlay.visible {
  pointer-events: auto;
}

#contact-overlay #contacts-title {
  opacity: 0 !important;
  filter: blur(6px) !important;
  /* Fade-in graduale (Careers + Contacts mantengono questa estetica). */
  transition: opacity 0.6s ease 0.5s, filter 0.6s ease 0.5s !important;
}

#contact-overlay.visible #contacts-title {
  opacity: 1 !important;
  filter: blur(0) !important;
}

#contact-overlay #contacts-title p {
  margin: 0 0 1em 0;
}

/* Hover su email o indirizzo: l'elemento su cui sei resta opaco, il resto a 0.3 */
#contact-overlay #contacts-title img,
#contact-overlay #contacts-title .contacts-name,
#contact-overlay #contacts-title .contacts-address,
#contact-overlay #contacts-title .contacts-email {
  transition: opacity 0.3s ease;
}
#contact-overlay #contacts-title .contacts-address,
#contact-overlay #contacts-title .contacts-email {
  cursor: pointer;
}

@media (min-width: 769px) {
  #contact-overlay #contacts-title:has(.contacts-email:hover) img,
  #contact-overlay #contacts-title:has(.contacts-email:hover) .contacts-name,
  #contact-overlay #contacts-title:has(.contacts-email:hover) .contacts-address {
    opacity: 0.3;
  }

  #contact-overlay #contacts-title:has(.contacts-address:hover) img,
  #contact-overlay #contacts-title:has(.contacts-address:hover) .contacts-name,
  #contact-overlay #contacts-title:has(.contacts-address:hover) .contacts-email {
    opacity: 0.3;
  }

  /* Careers: hover su uno dei link (testo "our LinkedIn" o arrow) →
     tutto il resto a 0.3. I .careers-link restano opachi (entrambi).
     `> img` targetta solo il back-btn (direct child), non l'arrow img
     che è dentro l'<a> del link. */
  #contact-overlay #contacts-title:has(.careers-link:hover) > img,
  #contact-overlay #contacts-title:has(.careers-link:hover) .careers-intro,
  #contact-overlay #contacts-title:has(.careers-link:hover) .careers-text {
    opacity: 0.3;
  }
}

/* Transition opacity per gli elementi della careers (back-btn img già
   coperto dalla regola Contact più sopra) */
#contact-overlay #contacts-title .careers-intro,
#contact-overlay #contacts-title .careers-text,
#contact-overlay #contacts-title .careers-link {
  transition: opacity 0.3s ease;
}

/* Arrow icon dentro careers-link-arrow: stesso stile della freccia in
   #fixed-overlay e dello slot-label, 25px height verticalmente
   centrata col testo. */
#contact-overlay #contacts-title .careers-link-arrow img {
  height: 25px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  padding-bottom: 5px;
}

/* Su mobile la frase "Open positions are on our LinkedIn page." è più
   larga dello spazio disponibile accanto al back-btn icon, quindi
   l'inline-block esce dal flusso e va a capo (sotto l'icona). Vincoliamo
   la max-width del wrapper così il testo wrappa DENTRO la colonna,
   tenendolo allineato col back-btn come in Contact. */
@media (max-width: 768px) {
  #contact-overlay #contacts-title .careers-content-wrapper {
    max-width: calc(100vw - 100px);
  }
}

#bio-block p {
  margin: 0 0 1em 0;
}

#bio-block h3 {
  font-family: "univers-next-pro", sans-serif;
  font-weight: 100;
  font-size: 18px;
  letter-spacing: 0.04em;
  /* word-spacing: -0.1em; */
  /* text-transform: uppercase; */
  margin: 2em 0 0 0;
  line-height: 1.4;
  font-style: initial;
}

#bio-block h3:first-child {
  margin-top: 0;
}

/* Liste dentro bio-block (es. servizi Good Studios): mantengono la
   stessa tipografia dei paragrafi, indent contenuto */
#bio-block ul {
  margin: 0 0 1em 0;
  padding-left: 1.2em;
  list-style-type: disc;
}

#bio-block li {
  margin: 0 0 0.2em 0;
  line-height: 1.4;
}

/* STUDIOS OVERLAY — scrollabile, testo bianco su sfondo nero.
   Snap-in totale: il titolo "STUDIOS" appare di colpo, no fade, no delay.
   Le parole del block fanno typing animation via JS dopo. */
#studios-overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0s;
}

#studios-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#studios-title {
  padding-top: calc(50svh - 21px);
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
}

#studios-block {
  position: relative;
  width: calc(100% - 120px);
  max-width: 1300px;
  color: white;
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 70px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  padding-top: 60px;
  padding-bottom: 80px;
}

#studios-block .word {
  opacity: 0;
  filter: blur(3px);
  transition: opacity 0.5s ease, filter 0.5s ease;
  display: inline;
}

#studios-block .word.visible {
  opacity: 1;
  filter: blur(0);
}

#studios-block .parabreak {
  display: block;
  height: 0.5em;
}

#studios-block p {
  margin: 0 0 1em 0;
}

/* FILM PLAY/PAUSE — stesso stile di #fixed-overlay */
#film-playpause {
  position: fixed;
  bottom: 33px;
  left: 100px;
  color: white;
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 350;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#film-playpause.visible {
  opacity: 1;
}

/* Guard: #film-playpause esiste e ha senso SOLO dentro la detail view
   del film Eve. Fuori (home, submenu, overlay non-film) non deve mai
   essere visibile né interattivo, anche se per qualche edge case la
   classe .visible è rimasta agganciata. */
body:not(.film-detail-view) #film-playpause {
  opacity: 0 !important;
  pointer-events: none !important;
}

#film-playpause img {
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

#film-exit-icon {
  margin-right: 15px;
  transform: rotate(180deg);
}

#film-progress {
  position: fixed;
  bottom: 35px;
  left: 200px;
  right: 200px;
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  z-index: 350;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

#film-progress.active {
  pointer-events: auto;
}

#film-progress.active.hovering,
#film-progress.active.dragging {
  opacity: 1;
}

#film-progress-fill {
  height: 100%;
  width: 0%;
  background: white;
  pointer-events: none;
}

/* BLUR quando menu è visibile */
body.menu-open .container {
  filter: blur(20px);
  transition: filter 0.4s ease;
}

/* TEST rimosso per Services, Vivake/Charles bio: ora si comportano come
   Studios — nav link sparisce snap, titolo overlay appare snap. */

/* Nasconde il #fixed-overlay (label del slot attivo) quando un overlay
   o il menu è aperto. !important per battere eventuali setting inline
   o di specificity più bassa. menu.visible ~ #fixed-overlay è un
   fallback sibling-selector che funziona indipendentemente da body
   classes (utile se il sync body↔menu state non avviene per un frame). */
body.menu-visible #fixed-overlay,
body.submenu-open #fixed-overlay,
body.film-detail-view #fixed-overlay,
body.detail-view #fixed-overlay,
menu.visible ~ #fixed-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease;
}

.container {
  transition: filter 0.4s ease, opacity 0.4s ease;
}

#fixed-overlay {
  transition: opacity 0.4s ease, clip-path 0s;
}

/* container generale */
.container {
  width: 80%;
  margin: 0 auto;
  padding: 165px 0;
  position: relative;
  z-index: 10;
}

/* Elemento di riferimento invisibile: serve al JS per leggere il valore
   svh esatto → identica unità usata da CSS e JS, no disallineamenti */
#vh-ref {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* SLOT: elemento fisso che fa snap. height in svh (small viewport
   height, stabile — non cambia quando la URL bar si muove) →
   nessun saltino quando URL bar animates */
.slot {
  position: relative;
  height: 45svh;
  margin: 400px 0;
  overflow: visible;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Slot cliccabili (escluso menu-slot che è solo uno snap anchor):
   cursor pointer di default; default quando un overlay è attivo
   perché in quei casi il click viene bloccato dal JS. */
.slot:not(.menu-slot) {
  cursor: pointer;
}

body.menu-open .slot,
body.submenu-open .slot,
body.detail-view .slot,
body.film-detail-view .slot,
body.contacts-view .slot,
body.studios-view .slot {
  cursor: default;
}


/* BOX: elemento che si espande */
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 6px;
  overflow: hidden;
  will-change: width, height, border-radius;
}

.box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  pointer-events: none;
}

/* INTRO OVERLAY */
#intro {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.8s ease;
}

#intro > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#welcome-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* padding bilanciato sui due lati per non spostare il content
     visivamente dal centro del viewport. */
  padding-left: 30px;
  padding-right: 30px;
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-24px);
  transition: opacity 0.4s ease 0.5s, filter 0.4s ease 0.5s, transform 0.5s ease 0.5s;
}

#welcome-text.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

#welcome-word {
  display: inline-block;
  /* center: la parola è centrata nel suo box width (maxW). Con flex
     justify-content: center sul parent, l'intero set [WORD + arrow]
     resta centrato visivamente nel viewport. */
  text-align: center;
  transition: opacity 0.5s ease;
}

#welcome-text img {
  height: 25px;
  vertical-align: middle;
  position: relative;
  top: 3px;
  padding-bottom: 5px;
  transition: opacity 0.5s ease;
}

#intro.hide {
  opacity: 0;
  pointer-events: none;
}

/* SUBMENU INLINE nel nav */
nav .sub-separator,
nav .sub-comma,
nav .sub-item {
  display: inline-block;
  color: white;
  font-family: "univers-next-pro-compressed", sans-serif;
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-12px);
  transition: opacity 0.35s ease, filter 0.4s ease, transform 0.4s ease, color 0.5s ease;
}

nav .sub-separator.show,
nav .sub-comma.show,
nav .sub-item.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/* in hover: gli altri vanno a 0.3, il selezionato resta 1 */
@media (min-width: 769px) {
  menu:not(.animating) nav:hover .sub-item.show {
    opacity: 0.3;
  }

  menu:not(.animating) nav:hover .sub-separator.show,
  menu:not(.animating) nav:hover .sub-comma.show {
    opacity: 0.3;
  }

  nav .sub-item.show:hover {
    opacity: 1 !important;
  }
}

/* DISCLAIMER link nell'angolo bottom-right: appare quando Charles Darby
   è lo slot centrato. Click → lightbox sotto. */
#charles-disclaimer {
  position: fixed;
  bottom: 40px;
  right: 65px;
  color: white;
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  /* clip-path mascherato al box di Charles via JS (stesso meccanismo del
     label #fixed-overlay). Inizialmente full-clip così non flash a load. */
  clip-path: inset(100% 0 0 0);
  transition: opacity 0.4s ease;
}

#charles-disclaimer.visible {
  opacity: 0.5;
  pointer-events: auto;
}

@media (min-width: 769px) {
  #charles-disclaimer.visible:hover {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  #charles-disclaimer {
    top: calc(100svh - 49px);
    bottom: auto;
    right: 25px;
  }
}

/* LIGHTBOX DISCLAIMER */
#disclaimer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

#disclaimer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Stesso stile dei #bio-block / #film-block: width 650px, font
   univers-next-pro 18px, line-height 1.4, left-aligned. */
#disclaimer-content {
  width: 650px;
  color: white;
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
}

#disclaimer-content p {
  margin: 0;
}

@media (max-width: 768px) {
  /* Su mobile: width auto e margin-right 25px; il margin-left viene
     comunque settato via JS al logoRect.left (che su mobile è ~25px
     coerente con padding del logo sticky) */
  #disclaimer-content {
    width: auto;
    max-width: 650px;
    margin-right: 25px;
  }
}

/* BACK BUTTON — appare a sinistra del logo nei submenu */
#back-btn {
  height: 25px;
  vertical-align: middle;
  position: relative;
  top: -2.5px;
  padding-bottom: 5px;
  margin-right: -2px;
  margin-left: 0;
  transform: rotate(180deg);
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.4s ease, filter 0.4s ease;
  cursor: pointer;
  pointer-events: none;
}

#back-btn.visible {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
}

/* OVERLAY FISSO — mascherato dal box via clip-path */
#fixed-overlay {
  overflow: visible;
  position: fixed;
  bottom: 35px;
  left: 100px;
  color: white;
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  word-spacing: -0.07em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  clip-path: inset(100% 0 0 0);
}

#fixed-overlay img {
  height: 25px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  padding-bottom: 5px;
}

/* =====================================================
   MOBILE — "MENU" trigger chiuso, logo+nav quando aperto
   - stato chiuso: solo "MENU" visibile
   - stato aperto: "MENU" sparisce, logo + nav appaiono
   - click su "MENU" → apre, click sul logo → chiude
   ===================================================== */

/* Nascosto di default su desktop */
#menu-toggle {
  display: none;
}

@media (max-width: 768px) {

  /* Menu = container orizzontale scrollabile (solo quando aperto).
     Niente padding-left sul menu: il padding viene incluso dentro il
     logo stesso così la sticky del logo si attacca a left: 0 del menu. */
  menu {
    align-items: center;
    pointer-events: auto;
    width: 100vw;
    max-width: 100vw;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  /* Quando aperto, il menu copre tutta la finestra (100svh) così lo
     swipe orizzontale è attivo ovunque. Il contenuto (logo + nav)
     resta centrato via flex align-items: center. */
  menu.visible {
    top: 0;
    height: 100svh;
    transform: none;
    overflow-x: auto;
  }

  menu::-webkit-scrollbar {
    display: none;
  }

  /* Hamburger mobile: 2 SVG (open + close) sovrapposti con crossfade */
  #menu-toggle {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 80px;
    height: 70px;
    cursor: pointer;
    z-index: 400;
    pointer-events: auto;
    background: transparent;
  }

  #menu-toggle img {
    position: absolute;
    inset: 0;
    padding: 25px 30px;
    width: 80px;
    height: 70px;
    object-fit: contain;
    transition: opacity 0.4s ease;
  }

  /* Stato chiuso: mostra hamburger-open (le 2 linee), nasconde hamburger-close */
  #menu-toggle .hamburger-open  { opacity: 1; }
  #menu-toggle .hamburger-close { opacity: 0; }

  /* Menu aperto: crossfade — mostra hamburger-close (la X), nasconde hamburger-open */
  menu.visible ~ #menu-toggle .hamburger-open  { opacity: 0; }
  menu.visible ~ #menu-toggle .hamburger-close { opacity: 1; }

  /* Hamburger fada in sync col logo quando si entra in una detail view
     (Studios/Services/Contact da menu o slot, sub-items di Team/Films)
     oppure quando si apre un submenu (Team/Films).
     Opacity 0 + pointer-events none → fade elegante che completa nello
     stesso momento del fade del logo (entrambi 0.4s) */
  /* L'hamburger sparisce solo nei detail-view / overlay full-page.
     Quando un submenu (Founders/Films) è aperto, l'X di chiusura resta
     visibile per permettere all'utente di chiudere il submenu da lì. */
  body.detail-view #menu-toggle,
  body.film-detail-view #menu-toggle,
  body.contacts-view #menu-toggle,
  body.studios-view #menu-toggle {
    opacity: 0;
    pointer-events: none;
  }

  /* transition default per lo stato "riappare" */
  #menu-toggle {
    transition: opacity 0.4s ease;
  }

  /* Logo su mobile:
     - position: sticky left:0 → resta fisso al bordo sinistro del menu
       mentre il nav scrolla orizzontalmente (niente background: quando
       si scrolla oltre 25px il logo svanisce in fade, gestito via JS)
     - padding-left: 25px per l'offset dal bordo viewport */
  menu logo {
    position: sticky;
    left: 0;
    z-index: 10;
    padding: 10px 30px 10px 25px;
    flex-shrink: 0;
    margin-bottom: -3px;
  }

  menu logo img {
    margin: 0;
  }

  /* Quando il menu è aperto e scrollato oltre 25px orizzontalmente,
     il logo sparisce in fade (transition ereditata dalla regola base
     "logo img { transition: opacity 0.4s ease }") e il click handler
     viene disattivato (pointer-events: none) così non reload accidentali
     toccando la zona invisibile dello sticky logo. */
  menu.visible.logo-hidden logo img {
    opacity: 0;
  }

  menu.visible.logo-hidden logo {
    pointer-events: none;
  }


  /* Nav: flex item normale (lo scroll è gestito dal menu container).
     padding-right 50vw = spazio vuoto dopo "Contact" */
  nav {
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 50vw 0 10px;
  }

  /* Link mobile: font, no-shrink.
     Transition su opacity/filter ripristinate → animazione di apertura
     (blur-in + fade-in a cascata) e chiusura uguali al desktop.
     transform: translateX(0) override del desktop che usa -12px →
     evita che il primo link entri nella fade zone durante la
     transizione di slide-in */
  nav a {
    font-size: 32px;
    flex-shrink: 0;
    transition: opacity 0.35s ease, filter 0.4s ease, transform 0.4s ease;
    transform: translateX(0);
  }

  /* Tutti gli altri elementi che sul desktop sono 35px → 32px su mobile */
  #film-title,
  #bio-title,
  #services-title,
  #contacts-title,
  #studios-title,
  #film-playpause,
  #welcome-text,
  #fixed-overlay,
  nav .sub-separator,
  nav .sub-comma,
  nav .sub-item {
    font-size: 32px;
  }

  /* Tutti i title e block allineati a 25px dai bordi su mobile.
     !important per sovrascrivere anche eventuali inline styles del JS
     (es. servicesTitle.style.marginLeft settato a 32px) */
  #film-title,
  #bio-title,
  #services-title,
  #contacts-title,
  #studios-title,
  #film-block,
  #bio-block,
  #studios-block {
    margin-left: 27px !important;
    margin-right: 25px !important;
  }

  /* Blocchi di contenuto che avevano width fisso (650px) su desktop */
  #bio-block,
  #film-block {
    width: auto;
    max-width: 650px;
  }

  /* Studios block: font più piccolo e width auto (il margin 25px gestisce i bordi) */
  #studios-block {
    font-size: 30px;
    width: auto;
  }

  /* Fixed overlay (label del film attivo): allineato al bordo sinistro su mobile */
  #fixed-overlay {
    left: 25px;
    top: calc(100svh - 55px);
    bottom: auto;
  }

  /* Controlli video su mobile:
     - #film-playpause resta sempre visibile (come da richiesta) —
       usa la logica standard del .visible class con opacity
     - #film-playpause-icon spostato al CENTRO del viewport. Al tap
       apre il video in fullscreen nativo.
     - #film-exit-icon (il back sull'immagine) nascosto + non cliccabile
     - #film-progress nascosto (i controlli sono nel player nativo) */
  #film-playpause {
    left: 25px;
  }

  /* Play icon al centro del video (75svh di altezza → centro a 37.5svh) */
  #film-playpause-icon {
    position: fixed;
    top: 37.5svh;
    left: 50vw;
    transform: translate(-50%, -50%);
    height: 80px !important;
    width: 80px;
    z-index: 360;
  }

  #film-progress {
    display: none;
  }

  /* Su mobile il back button (exit icon) non serve sull'immagine:
     l'utente può tornare indietro dal titolo film-snap-second sotto,
     dove c'è ancora il back button (filmBackBtn2) a sinistra del nome.
     visibility: hidden + pointer-events: none → invisibile e non
     cliccabile, ma lascia il #film-playpause container pienamente
     visibile come richiesto */
  #film-exit-icon {
    visibility: hidden;
    pointer-events: none;
  }

  /* Film snap-first e video-bg a 75svh su mobile — usiamo svh (stabile)
     invece di vh così l'altezza non cambia quando la URL bar di iOS
     si muove durante lo scroll */
  #film-snap-first {
    height: 75svh;
  }

  #film-video-bg {
    height: 75svh;
  }

  /* Su mobile il video mostra un frame a metà video con blur
     (niente poster). Il scale(1.05) compensa i bordi blurrati. */
  #film-video-bg video {
    filter: blur(20px);
    transform: scale(1.05);
  }

  /* Su mobile disabilitiamo lo scroll-snap del film-overlay: con
     snap-first a 75svh i soli due snap-point (0 e 75svh) rendono lo
     scroll "a scatti". Meglio scroll libero così l'utente vede
     gradualmente il contenuto sotto il video. */
  #film-overlay {
    scroll-snap-type: none;
  }

  /* Su mobile la .box resta sempre 100% del viewport (blocca l'animazione
     JS che altrimenti potrebbe farla debordare) */
  .box {
    width: 100vw !important;
  }

  /* Su mobile il video intro usa 100svh (area viewport stabile con
     URL bar visibile) */
  #intro > video {
    height: 100svh;
  }

  /* Menu-slot non si applica su mobile: l'hamburger gestisce il menu
     e non c'è bisogno di uno snap-point dedicato */
  .menu-slot {
    display: none;
  }

  /* Su mobile niente scroll.svg: l'intro porta direttamente a Eve
     centrato (niente menu-slot da cui scrollare giù), e nel film detail
     il preview è già a 75svh con il testo che spunta sotto — non serve
     guidare lo scroll. */
  #intro-scroll-hint,
  #film-scroll-hint {
    display: none !important;
  }
}