/* ============================================================================
   MPQ Cineservice — stili di supporto al livello "fluidità" (fluid.js).
   File separato apposta: style.css non si tocca, quindi niente può rompersi.
   ============================================================================ */

/* ── Scroll con inerzia ───────────────────────────────────────────────────
   style.css imposta scroll-behavior:smooth sull'html: convive male sia con
   Lenis sia con gli scrub di ScrollTrigger (due motori sullo stesso scroll).
   Qui viene spento SOLO quando Lenis è davvero attivo. */
html.has-lenis { scroll-behavior: auto !important; }
/* la barra di scorrimento non compare/sparisce aprendo la scheda film:
   senza questo la pagina salta di lato di 15px */
html { scrollbar-gutter: stable; }

html.has-lenis,
html.has-lenis body { height: auto; }
html.lenis-stopped { overflow: hidden; }
/* la galleria orizzontale resta gestita dal browser */
.gallery-wrap { overscroll-behavior-x: contain; }

/* ── Titoli che si compongono a parole ──────────────────────────────────── */
.sec-title .fw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .06em;   /* le lettere con la coda (g, p) non vengono tagliate */
}
.sec-title .fw > i {
  display: inline-block;
  font-style: inherit;
  will-change: transform;
}

/* ── Barra di avanzamento della lettura ─────────────────────────────────── */
.read-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  background: rgba(255, 255, 255, .05);
}
.read-bar > i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #E7343F, #ff8a92);
  box-shadow: 0 0 12px rgba(231, 52, 63, .55);
}

/* ── Topbar che si toglie di mezzo scendendo ────────────────────────────── */
#topbar {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              background .35s ease,
              padding .35s ease,
              border-color .35s ease;
  will-change: transform;
}
#topbar.tb-hidden { transform: translateY(-104%); }

/* ── Card inclinabili: serve un contesto 3D per non avere scatti ────────── */
.feat, .sala-card, .gallery .card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Micro-rifiniture sui movimenti già esistenti ───────────────────────── */
/* i bottoni sono spostati da GSAP: la transizione CSS sulla trasformazione
   darebbe due animazioni in conflitto, quindi resta solo sul colore */
.btn, .btn-portal, .tk-btn { will-change: transform; }

/* la scia del cursore sulla galleria fa capire che si può trascinare */
.gallery-wrap { cursor: grab; }
.gallery-wrap:active { cursor: grabbing; }

/* ── Sottolineatura animata nel menu ─────────────────────────────────────
   La linea entra da sinistra ed esce da destra: costo zero, si riconosce subito. */
#topbar nav a:not(.btn-portal) { position: relative; }
#topbar nav a:not(.btn-portal)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: #E7343F;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
#topbar nav a:not(.btn-portal):hover::after { transform: scaleX(1); transform-origin: left; }

/* ── I tre atti: il testo esce come entra ────────────────────────────────
   La transizione stava solo sullo stato acceso, quindi l'uscita era secca. */
#come .atto-body {
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* ── Rete di sicurezza ───────────────────────────────────────────────────
   index.html accende .force-show dopo 6 secondi: da quel momento NIENTE
   può restare invisibile, comprese le animazioni aggiunte qui. */
html.force-show .sec-title .fw > i,
html.force-show .sec-sub,
html.force-show #numeri .num {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Chi preferisce meno movimento non riceve nulla di tutto questo ─────── */
@media (prefers-reduced-motion: reduce) {
  .read-bar { display: none; }
  #topbar.tb-hidden { transform: none; }
  .sec-title .fw > i { transform: none !important; opacity: 1 !important; }
}