/* ==========================================================================
   MEDILIFE - EFFETTI: slide, scorrimenti, finestre
   Caricato dopo sito.css. Regole di questo file:
   - tutto cio' che nasconde o sposta un contenuto sta dietro la classe `js`
     (messa dallo script in testata) e dietro `prefers-reduced-motion: no-preference`:
     senza JavaScript, o con "riduci animazioni", il sito e' completo e fermo;
   - si animano solo transform e opacity;
   - le finestre sono <dialog> nativi: tastiera, Esc, sfondo inerte e ritorno del
     focus li gestisce il browser.
   Per toglierlo: via i due link in base.html (effetti.css e effetti.js).
   ========================================================================== */

:root { --uscita: cubic-bezier(.2, .8, .2, 1); }

/* Un blocco che entra da lato non deve mai allargare la pagina, nemmeno per un istante:
   sui telefoni un attimo di troppo basta a far "zoomare indietro" il browser. */
main { overflow-x: clip; }
@media (max-width: 900px) {
  .apertura .tavola { animation-name: entra; }
  html.js .rivela--da-sinistra, html.js .rivela--da-destra { transform: translate3d(0, 30px, 0); }
}

/* ---------- Ingresso dell'apertura (home) ---------- */

@keyframes entra { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes entra-da-destra { from { opacity: 0; transform: translate3d(44px, 0, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .apertura__griglia > div > * { animation: entra 700ms var(--uscita) both; }
  .apertura__griglia > div > :nth-child(2) { animation-delay: 90ms; }
  .apertura__griglia > div > :nth-child(3) { animation-delay: 180ms; }
  .apertura__griglia > div > :nth-child(4) { animation-delay: 270ms; }
  .apertura .tavola { animation: entra-da-destra 850ms var(--uscita) 160ms both; }
  .apertura .fatti > div { animation: entra 600ms var(--uscita) both; }
  .apertura .fatti > div:nth-child(1) { animation-delay: 420ms; }
  .apertura .fatti > div:nth-child(2) { animation-delay: 500ms; }
  .apertura .fatti > div:nth-child(3) { animation-delay: 580ms; }
  .apertura .fatti > div:nth-child(4) { animation-delay: 660ms; }
}

/* ---------- Blocchi che scivolano al passaggio ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .rivela { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 600ms ease-out, transform 760ms var(--uscita); transition-delay: var(--ritardo, 0ms); }
  html.js .rivela--da-sinistra { transform: translate3d(-40px, 0, 0); }
  html.js .rivela--da-destra { transform: translate3d(40px, 0, 0); }
  html.js .rivela.rivelato { opacity: 1; transform: none; }
}
@media print { .rivela { opacity: 1 !important; transform: none !important; } }

/* ---------- Testata che si nasconde scendendo, barra di avanzamento ---------- */

.testata-sito { transition: transform 300ms var(--uscita); }
.testata-sito.testata--nascosta { transform: translate3d(0, -100%, 0); }
.testata-sito:focus-within { transform: none; }

.avanzamento { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: var(--rosso); transform-origin: 0 50%; transform: scaleX(var(--avanzamento, 0)); pointer-events: none; }
@media print { .avanzamento { display: none; } }

/* le colonne della pagina non si allargano mai per colpa di loghi o caroselli che scorrono */
.sezione__griglia > * { min-width: 0; }

/* ---------- Programmi: carosello a scatti ---------- */

html.js .schede--slider { display: flex; gap: 22px; padding: 28px 2px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; }
html.js .schede--slider::-webkit-scrollbar { display: none; }
html.js .schede--slider > li { flex: 0 0 min(330px, 80%); scroll-snap-align: start; }
html.js .schede--slider:focus-visible { outline-offset: 4px; }

.slider__barra { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.slider__pista { position: relative; flex: 1; height: 2px; background: var(--filetto); overflow: hidden; }
.slider__pista i { position: absolute; inset: 0; background: var(--inchiostro); transform-origin: 0 50%; transform: translate3d(var(--sx, 0%), 0, 0) scaleX(var(--sw, 1)); }
.slider__bottoni { display: flex; gap: 8px; }
.slider__bottoni button { display: grid; place-items: center; width: 48px; height: 48px; font-size: 1.15rem; color: var(--inchiostro); background: var(--foglio); border: 1.5px solid var(--inchiostro); border-radius: 0; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
.slider__bottoni button:hover:not(:disabled) { background: var(--inchiostro); color: var(--foglio); }
.slider__bottoni button:disabled { color: var(--grigio); border-color: var(--filetto); cursor: default; }

/* ---------- Loghi che scorrono ---------- */

.marquee { overflow: hidden; background: var(--foglio); border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); }
.marquee + .marquee { border-top: 0; }
.marquee__riga { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.marquee__riga li { flex: none; display: grid; place-items: center; width: 168px; height: 104px; padding: 16px 22px; }
.marquee__riga img { max-width: 100%; max-height: 70px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.88; transition: filter 200ms ease-out, opacity 200ms ease-out; }
.marquee__riga li:hover img { filter: none; opacity: 1; }

@keyframes scorri { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  html.js .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  html.js .marquee__riga { flex-wrap: nowrap; width: max-content; animation: scorri var(--durata, 70s) linear infinite; }
  html.js .marquee--inverso .marquee__riga { animation-direction: reverse; }
  html.js .marquee:hover .marquee__riga,
  html.js .marquee:focus-within .marquee__riga,
  html.js .marquee-gruppo.fermo .marquee__riga { animation-play-state: paused; }
}
.marquee__pausa { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; font: 500 0.78rem/1.2 var(--f-dati); letter-spacing: 0.07em; text-transform: uppercase; color: var(--inchiostro); background: transparent; border: 1px solid var(--filetto); border-radius: 0; cursor: pointer; transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.marquee__pausa:hover { border-color: var(--inchiostro); background: var(--foglio); }
.marquee__pausa[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .marquee__riga li[aria-hidden="true"], .marquee__pausa { display: none; } }

/* ---------- Finestre (dialog) ---------- */

.finestra { padding: 0; border: 0; background: transparent; color: var(--inchiostro); max-width: none; max-height: none; overflow: visible; }
.finestra::backdrop { background: rgba(22, 25, 28, 0.68); }
body.finestra-aperta { overflow: hidden; }

.finestra .segni { --s: rgba(255, 255, 255, 0.85); }
.finestra__pannello { position: relative; display: flex; flex-direction: column; background: var(--foglio); border: 1px solid var(--inchiostro); }
.finestra__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 0 18px; border-bottom: 1px solid var(--inchiostro); }
.finestra__titolo { margin: 0; font: 500 0.78rem/1.3 var(--f-dati); letter-spacing: 0.07em; text-transform: uppercase; color: var(--grafite); }
.finestra__chiudi { display: grid; place-items: center; flex: none; width: 52px; height: 52px; font-size: 1.25rem; color: var(--inchiostro); background: transparent; border: 0; border-left: 1px solid var(--inchiostro); border-radius: 0; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
.finestra__chiudi:hover { background: var(--inchiostro); color: var(--foglio); }

@media (prefers-reduced-motion: no-preference) {
  .finestra::backdrop { opacity: 0; transition: opacity 260ms ease-out; }
  .finestra[data-stato="aperto"]::backdrop { opacity: 1; }
  .finestra .finestra__pannello { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); transition: opacity 240ms ease-out, transform 340ms var(--uscita); }
  .finestra[data-stato="aperto"] .finestra__pannello { opacity: 1; transform: none; }
  .finestra--cassetto .finestra__pannello { opacity: 1; transform: translate3d(100%, 0, 0); transition: transform 380ms var(--uscita); }
  .finestra--cassetto[data-stato="aperto"] .finestra__pannello { transform: none; }
}

/* galleria */

.finestra--galleria { width: min(1120px, 100% - 2 * var(--margine)); margin: auto; }
.galleria__scena { position: relative; display: grid; place-items: center; min-height: min(64vh, 640px); background: var(--inchiostro); overflow: hidden; }
.galleria__scena img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; }
.galleria__nav { position: absolute; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; font-size: 1.3rem; color: var(--inchiostro); background: var(--foglio); border: 1px solid var(--inchiostro); border-radius: 0; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
.galleria__nav:hover { background: var(--rosso-testo); border-color: var(--rosso-testo); color: var(--foglio); }
.galleria__nav--indietro { left: 14px; }
.galleria__nav--avanti { right: 14px; }
.galleria__piede { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--inchiostro); font-size: 0.98rem; }
.galleria__piede span { font: 500 0.78rem/1.4 var(--f-dati); letter-spacing: 0.07em; color: var(--grafite); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .galleria__scena img { transition: transform 280ms var(--uscita), opacity 200ms ease-out; }
  .galleria__scena img.esce-a-sinistra { transform: translate3d(-56px, 0, 0); opacity: 0; }
  .galleria__scena img.esce-a-destra { transform: translate3d(56px, 0, 0); opacity: 0; }
}
.fotografie a[data-galleria] { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.fotografie a[data-galleria] i { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; font-size: 1.1rem; color: var(--inchiostro); background: var(--foglio); border: 1px solid var(--inchiostro); transition: background-color 160ms ease-out, color 160ms ease-out; }
.fotografie a[data-galleria]:hover i { background: var(--inchiostro); color: var(--foglio); }
.fotografie figcaption { z-index: 1; pointer-events: none; }

/* video */

.finestra--video { width: min(1080px, 100% - 2 * var(--margine)); margin: auto; }
.video__quadro { background: #000; }
.video__quadro video { display: block; width: 100%; max-height: 78vh; background: #000; }

.schermo__quadro { position: relative; }
.schermo__riproduci { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; }
.schermo__riproduci span { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; font: 600 1rem/1.2 var(--f-testo); color: var(--foglio); background: var(--inchiostro); border: 1.5px solid var(--inchiostro); transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 220ms var(--uscita); }
.schermo__riproduci span i { font-size: 1.3rem; }
.schermo__riproduci:hover span { background: var(--rosso-testo); border-color: var(--rosso-testo); transform: scale(1.04); }

/* cassetto della candidatura */

.finestra--cassetto { position: fixed; inset: 0 0 0 auto; width: min(660px, 100%); height: 100dvh; margin: 0; }
.finestra--cassetto .finestra__pannello { height: 100%; border-width: 0 0 0 1px; }
.cassetto__corpo { flex: 1; overflow-y: auto; padding: 26px clamp(18px, 3vw, 38px) 40px; overscroll-behavior: contain; }
.cassetto__corpo .candidatura { max-width: none; padding: 0; border: 0; background: transparent; }
.cassetto__corpo .candidatura.segni::after { display: none; }
.cassetto__corpo .esito { max-width: none; }
.candidatura-richiamo[hidden] { display: none; }
.candidatura-richiamo { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 26px clamp(20px, 3vw, 34px); max-width: 860px; background: var(--foglio); border: 1px solid var(--inchiostro); }
.candidatura-richiamo p { flex: 1 1 280px; margin: 0; color: var(--grafite); }
@media print { .finestra { display: none !important; } }

/* ---------- Passaggio da una pagina all'altra ----------
   Lo fa il nastro rosso ondulato (nastro.js, stili in sito.css): niente piu' dissolvenza del browser. */