/* =========================================================
   LUCENTI — esperienza cinematografica
   Header adattivo e menu, hero, finale sul dente 3D, controllo audio,
   sezione chiara "Studio", cursore personalizzato.
   ========================================================= */

/* ---------- Header: bianco sul video, scuro sulle sezioni chiare ---------- */

.topbar {
  --hdr-rgb: var(--text-rgb);
  color: rgb(var(--hdr-rgb));
  transition: color .5s var(--ease);
}
.topbar.is-light { --hdr-rgb: var(--bg-rgb); }
.topbar .brand,
.topbar .brand__mark { color: inherit; }
.topbar.is-light .brand__sub { color: var(--warm-neutral); }

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.4rem);
}
.topnav a {
  position: relative;
  padding: .6rem 0;
  font: 500 .625rem/1 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: .88;
  transition: opacity .3s var(--ease);
}
.topnav a:hover { opacity: 1; }
.topnav a:not(.topbar__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.topnav a:not(.topbar__cta):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.topnav .topbar__cta {
  padding: 0 1.15rem;
  color: inherit;
  border-color: rgba(var(--hdr-rgb), .35);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topnav .topbar__cta:hover { border-color: rgba(var(--hdr-rgb), .9); background: transparent; }

.topbar__menu {
  display: none;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(var(--hdr-rgb), .35);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 500 .625rem/1 var(--font);
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Menu a tutto schermo (mobile) */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--safe-t) + 5rem) var(--pad-x) calc(var(--safe-b) + 2.5rem);
  background:
    radial-gradient(60% 40% at 50% 100%, rgba(var(--bronze-rgb), .12), rgba(var(--bronze-rgb), 0) 70%),
    var(--bg-primary);
  color: var(--text-primary);
}
.site-menu[hidden] { display: none; }
.site-menu__close {
  position: absolute;
  top: calc(var(--safe-t) + .9rem);
  right: var(--pad-x);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(var(--text-rgb), .25);
  border-radius: 50%;
  background: none;
  color: inherit;
}
.site-menu__close svg { width: 1.1rem; height: 1.1rem; }
.site-menu__nav { display: flex; flex-direction: column; gap: .35rem; }
.site-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .35rem 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: inherit;
  text-decoration: none;
}
.site-menu__nav small {
  font: 500 .625rem/1 var(--font);
  letter-spacing: .2em;
  color: var(--sand);
}
.site-menu__cta { align-self: flex-start; margin-top: 2.5rem; }

/* ---------- Tour: il video resta com'è, il velo compare solo sotto i testi ---------- */

.tour__video,
.tour__poster { transform-origin: 50% 45%; }

.tour__shade {
  --shade: 1;
  opacity: var(--shade);
  background:
    linear-gradient(0deg, rgba(var(--bg-rgb), .62) 0%, rgba(var(--bg-rgb), .26) 32%, rgba(var(--bg-rgb), 0) 60%),
    linear-gradient(90deg, rgba(var(--bg-rgb), .34) 0%, rgba(var(--bg-rgb), 0) 55%),
    rgba(var(--bg-rgb), .14);
  transition: opacity .2s linear;
}
/* velo leggerissimo in alto, sempre presente: tiene leggibile l'header bianco */
.tour__frame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 18%;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), .38), rgba(var(--bg-rgb), 0));
  opacity: calc(1 - var(--light, 0));
  pointer-events: none;
}

/* Finale: la scena si schiarisce fino al colore della sezione "Studio" */
.tour__shade-end {
  background: var(--text-primary);
  opacity: var(--end, 0);
}

.tour__scenes { --sc-bottom: calc(var(--safe-b) + clamp(6rem, 15svh, 10rem)); bottom: var(--sc-bottom); }

/* Hero centrata, con molto spazio intorno */
.scene--hero {
  left: calc(-1 * var(--pad-x));
  right: auto;
  bottom: calc(50svh - var(--sc-bottom));
  width: 100vw;
  padding: 0 var(--pad-x);
  text-align: center;
  transform: translateY(50%);
}
.scene--hero .scene__eyebrow {
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-size: clamp(.95rem, .8rem + .4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .42em;
  margin-right: -.42em;
  color: var(--text-primary);
}
.scene--hero .scene__title { font-size: clamp(3.2rem, 1.4rem + 6vw, 8.2rem); line-height: .9; }
.scene--hero .scene__text {
  max-width: none;
  margin: 2rem auto 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Finale sul dente: il testo passa da chiaro a scuro mentre la scena si schiarisce */
.scene--final .scene__title,
.scene--final .btn--ghost {
  color: rgb(calc(243 - 235 * var(--light, 0)), calc(242 - 237 * var(--light, 0)), calc(242 - 236 * var(--light, 0)));
  text-shadow: 0 1px 28px rgba(var(--bg-rgb), calc(.32 * (1 - var(--light, 0))));
}
.scene--final .scene__title em { color: var(--bronze); }
.scene--final .scene__eyebrow { text-shadow: none; }
.scene--final .scene__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.scene--final .btn--ghost {
  border-color: rgba(calc(243 - 235 * var(--light, 0)), calc(242 - 237 * var(--light, 0)), calc(242 - 236 * var(--light, 0)), .4);
}

.tour__hint { bottom: calc(var(--safe-b) + 1.5rem); }

/* ---------- Controllo audio ---------- */

.tour__sound {
  position: absolute;
  left: var(--pad-x);
  bottom: calc(var(--safe-b) + 1.35rem);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.5rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: rgb(calc(243 - 235 * var(--light, 0)), calc(242 - 237 * var(--light, 0)), calc(242 - 236 * var(--light, 0)));
  font: 500 .625rem/1 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  opacity: .8;
  transition: opacity .3s var(--ease);
}
.tour__sound:hover { opacity: 1; }
.tour__sound[hidden] { display: none; }
.tour__sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.tour__sound-bars i {
  display: block;
  width: 2px;
  height: 3px;
  background: currentColor;
  transition: height .3s var(--ease);
}
.tour__sound.is-on .tour__sound-bars i { animation: sound-bar 1.1s ease-in-out infinite; background: var(--accent); }
.tour__sound.is-on .tour__sound-bars i:nth-child(2) { animation-delay: .2s; }
.tour__sound.is-on .tour__sound-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes sound-bar { 0%, 100% { height: 3px; } 50% { height: 10px; } }

/* ---------- Sezione chiara "Studio" ---------- */

.studio {
  position: relative;
  padding: clamp(6rem, 14vh, 10rem) var(--pad-x) calc(clamp(6rem, 14vh, 10rem) + 32vh);
  background: var(--text-primary);
  color: var(--bg-primary);
  outline: none;
}
/* passaggio morbido verso il team scuro: chiaro → sabbia → caldo neutro → nero */
.studio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 32vh;
  background: linear-gradient(180deg, var(--text-primary) 0%, #D9D1C7 28%, var(--warm-neutral) 68%, var(--bg-primary) 100%);
  pointer-events: none;
}
.studio__inner { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; }
.studio__kicker {
  margin: 0 0 1.75rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm-neutral);
}
.studio__title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.3rem + 5.6vw, 7.8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.028em;
  color: var(--bg-primary);
}
.studio__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  margin: clamp(4rem, 9vh, 6.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.studio__pillars li { padding-top: 1.5rem; border-top: 1px solid rgba(var(--bg-rgb), .14); }
.studio__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--bronze);
}
.studio__pillars h3 {
  margin: 1.4rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -.015em;
}
.studio__pillars p {
  max-width: 24rem;
  margin: .9rem 0 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--warm-neutral);
}
.studio__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(var(--bg-rgb), .35);
  color: var(--bg-primary);
  font: 500 .6875rem/1 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .3s var(--ease);
}
.studio__link span { transition: transform .35s var(--ease); }
.studio__link:hover { border-color: var(--bg-primary); }
.studio__link:hover span { transform: translateX(4px); }

/* ---------- Cursore personalizzato (solo desktop con mouse) ---------- */

.cursor { display: none; }
.has-cursor .cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: block;
  pointer-events: none;
  mix-blend-mode: difference;   /* resta visibile sia sul video sia sulle sezioni chiare */
}
.has-cursor,
.has-cursor * { cursor: none !important; } /* il cursore personalizzato sostituisce quello di sistema */
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, .7);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s var(--ease), opacity .3s;
}
.cursor.is-hover .cursor__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.cursor.is-label .cursor__ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(255, 255, 255, .95); }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-down .cursor__ring { transform: scale(.9); }
.cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  font: 600 .5625rem/1 var(--font);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .25s var(--ease);
}
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-hidden { opacity: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .topnav a:not(.topbar__cta) { display: none; }
}

@media (max-width: 760px) {
  .topnav { display: none; }
  .topbar__menu { display: inline-flex; align-items: center; }
  .tour__scenes { --sc-bottom: calc(var(--safe-b) + clamp(6.5rem, 14svh, 7.75rem)); }
  .scene--hero .scene__eyebrow { margin-bottom: 1.4rem; font-size: .9rem; letter-spacing: .36em; margin-right: -.36em; }
  .scene--hero .scene__title { font-size: clamp(2.9rem, 13vw, 3.9rem); }
  .scene--hero .scene__text { margin-top: 1.4rem; font-size: .625rem; }
  .scene--final .btn { min-height: 3.1rem; padding: 0 1.4rem; }
  .scene--final .scene__cta .btn { width: auto; }
  .studio__pillars { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .tour__sound { bottom: calc(var(--safe-b) + 1.2rem); }
  .tour__hint { left: auto; right: var(--pad-x); transform: none; align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .tour__sound.is-on .tour__sound-bars i { animation: none; height: 8px; }
}

/* Titoli delle scene del tour: frasi più lunghe, composte su 2–3 righe senza invadere il video */
.tour__scenes { width: min(62rem, calc(100% - var(--pad-x) * 2 - 2.5rem)); }
.scene:not(.scene--hero) .scene__title { font-size: clamp(2.8rem, 1.3rem + 4.2vw, 6.2rem); line-height: .92; }
@media (max-width: 760px) {
  .scene:not(.scene--hero) .scene__title { font-size: clamp(2.3rem, 10vw, 3rem); line-height: .95; }
}