/*
 * TMB Missioni dinamiche by Michele Miniera: carosello delle missioni.
 * Autore: Michele Miniera (https://www.linkedin.com/in/micheleminiera/)
 * Uso: [tmb_missioni sezione="in_corso" layout="carosello"]
 */
.tmbmd-c {
    --tmbmd-accent: var(--ast-global-color-1, #f0506e);
    --tmbmd-accent-2: #ff8a5c;
    --tmbmd-gold: var(--ast-global-color-7, #ecba82);
    --tmbmd-blue: var(--ast-global-color-0, #0274c5);
    --tmbmd-ink: #14202a;
    --tmbmd-radius: 28px;
    --tmbmd-slide-w: min(1000px, 74vw);
    --tmbmd-gap: clamp(14px, 2vw, 28px);
    --tmbmd-depth: .1;
    --tmbmd-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    isolation: isolate;
    /* A tutta larghezza; --tmbmd-sbw (impostata dallo script) esclude la barra di scorrimento di Windows. */
    width: calc(100vw - var(--tmbmd-sbw, 0px));
    max-width: none;
    margin: 0 calc(50% - 50vw + var(--tmbmd-sbw, 0px) / 2);
    padding: 0 0 8px;
    color: var(--tmbmd-ink);
    font-family: inherit;
}

/* Alone colorato che riprende la foto della missione attiva */
.tmbmd-c-ambient { position: absolute; top: 6%; left: 50%; z-index: -1; width: min(1100px, 88vw); height: 78%; transform: translateX(-50%); pointer-events: none; }
.tmbmd-c-ambient span { position: absolute; inset: 0; border-radius: 50%; background-position: center; background-size: cover; filter: blur(70px) saturate(1.6); opacity: 0; transition: opacity 1.4s ease; }
.tmbmd-c-ambient span.is-on { opacity: .5; }

/* Lo scorrimento orizzontale taglia ciò che esce dal binario: il margine inferiore ampio lascia sfumare del tutto
   l'ombra delle schede, e il margine negativo riporta i controlli alla giusta distanza. */
.tmbmd-c-track { position: relative; display: flex; gap: var(--tmbmd-gap); margin: 0 0 -76px; padding: 36px calc((100% - var(--tmbmd-slide-w)) / 2) 116px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.tmbmd-c-track::-webkit-scrollbar { display: none; }
.tmbmd-c.is-free .tmbmd-c-track { scroll-snap-type: none; }
.tmbmd-c.is-dragging .tmbmd-c-track { cursor: grabbing; user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) {
    .tmbmd-c.is-ready .tmbmd-c-track { cursor: grab; }
}

/* Profondità: le slide laterali si rimpiccioliscono e sbiadiscono mentre scorrono */
.tmbmd-c-slide { --d: 0; --ad: 0; position: relative; flex: 0 0 var(--tmbmd-slide-w); scroll-snap-align: center; scroll-snap-stop: always; opacity: calc(1 - var(--ad) * .5); transform: scale(calc(1 - var(--ad) * var(--tmbmd-depth))); will-change: transform, opacity; }
/* L'ombra compare quando la scheda ha finito di aprirsi, così durante l'ingresso non si vede una sagoma vuota. */
.tmbmd-c-slide::before { content: ""; position: absolute; inset: 8% 5% 0; border-radius: var(--tmbmd-radius); box-shadow: 0 40px 80px -30px rgba(8, 24, 38, .6); transition: opacity .9s ease; transition-delay: calc(1.1s + var(--i, 0) * 120ms); }

.tmbmd-c-card { position: relative; isolation: isolate; aspect-ratio: 16 / 9; min-height: 440px; overflow: hidden; border-radius: var(--tmbmd-radius); background: linear-gradient(135deg, var(--tmbmd-blue), var(--tmbmd-ink)); color: #fff; transform: translateZ(0); transition: clip-path 1.3s var(--tmbmd-ease), opacity .9s ease, translate 1.3s var(--tmbmd-ease); transition-delay: calc(var(--i, 0) * 120ms); }

/* Ingresso: le schede si aprono a sipario quando la sezione entra nello schermo.
   Il ritaglio serve solo durante l'ingresso; poi (is-entered) lo sostituiscono bordi arrotondati e overflow, più stabili sui telefoni. */
.tmbmd-c.is-ready:not(.is-entered) .tmbmd-c-card { clip-path: inset(0 round var(--tmbmd-radius)); }
.tmbmd-c.is-ready:not(.is-inview) .tmbmd-c-card { clip-path: inset(14% 8% 14% 8% round var(--tmbmd-radius)); opacity: 0; translate: 120px 0; }
.tmbmd-c.is-ready:not(.is-inview) .tmbmd-c-slide::before { opacity: 0; }

.tmbmd-c-media { position: absolute; inset: 0 -7%; z-index: -2; transform: translate3d(calc(var(--d) * -5%), 0, 0); }
.tmbmd-c .tmbmd-c-media img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; object-fit: cover; transform: scale(1.04); transition: transform 9s cubic-bezier(.2, .6, .3, 1); }
.tmbmd-c .tmbmd-c-slide.is-active .tmbmd-c-media img { transform: scale(1.15); }

/* Profondità e parallasse. Tre modalità scelte dallo script:
   - is-scrollfx: seguono lo scorrimento direttamente nella scheda grafica (nessun ritardo rispetto al dito);
   - is-stepfx: telefoni senza quel supporto, transizione morbida quando cambia la slide centrale;
   - altrimenti (desktop): calcolate a ogni fotogramma dallo script tramite --d e --ad. */
.tmbmd-c.is-stepfx .tmbmd-c-slide { opacity: .5; transform: scale(calc(1 - var(--tmbmd-depth))); transition: transform .6s var(--tmbmd-ease), opacity .6s ease; }
.tmbmd-c.is-stepfx .tmbmd-c-slide.is-current { opacity: 1; transform: none; }
.tmbmd-c.is-stepfx .tmbmd-c-media { transform: none; }
@supports (animation-timeline: view()) {
    .tmbmd-c.is-scrollfx .tmbmd-c-slide { view-timeline: --tmbmd-slide inline; animation-name: tmbmd-c-depth; }
    .tmbmd-c.is-scrollfx .tmbmd-c-media { animation-name: tmbmd-c-parallax; }
    .tmbmd-c.is-scrollfx .tmbmd-c-slide, .tmbmd-c.is-scrollfx .tmbmd-c-media { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --tmbmd-slide; animation-range: cover 0% cover 100%; animation-range: cover calc(50% - var(--tmbmd-slide-w) - var(--tmbmd-gap)) cover calc(50% + var(--tmbmd-slide-w) + var(--tmbmd-gap)); }
}
@keyframes tmbmd-c-depth { 0%, 100% { opacity: .5; transform: scale(calc(1 - var(--tmbmd-depth))); } 50% { opacity: 1; transform: none; } }
@keyframes tmbmd-c-parallax { from { transform: translate3d(-5%, 0, 0); } to { transform: translate3d(5%, 0, 0); } }

.tmbmd-c-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(7, 17, 26, .94) 0%, rgba(7, 17, 26, .62) 36%, rgba(7, 17, 26, .08) 70%, rgba(7, 17, 26, 0) 100%), linear-gradient(90deg, rgba(7, 17, 26, .55) 0%, rgba(7, 17, 26, 0) 60%); }
/* Riflesso di luce che segue il mouse */
.tmbmd-c-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%); opacity: 0; transition: opacity .5s ease; }
.tmbmd-c-slide.is-current .tmbmd-c-card:hover::after { opacity: 1; }

.tmbmd-c .tmbmd-c-cover { position: absolute; inset: 0; z-index: 1; }

.tmbmd-c-content { position: absolute; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; box-sizing: border-box; width: 100%; max-width: 660px; padding: clamp(22px, 4vw, 52px); pointer-events: none; transition: opacity .35s ease; }
.tmbmd-c-content a { pointer-events: auto; }

/* Rivelazione del contenuto della slide attiva */
.tmbmd-c.is-ready .tmbmd-c-slide:not(.is-active) .tmbmd-c-content { opacity: 0; }
.tmbmd-c.is-ready .tmbmd-c-slide.is-active .tmbmd-c-content > * { animation: tmbmd-c-rise .9s var(--tmbmd-ease) both; }
.tmbmd-c.is-ready .tmbmd-c-slide.is-active .tmbmd-c-content > .tmbmd-c-title { animation: none; }
.tmbmd-c .tmbmd-c-slide.is-active .tmbmd-c-content > :nth-child(3) { animation-delay: .3s; }
.tmbmd-c .tmbmd-c-slide.is-active .tmbmd-c-content > :nth-child(4) { animation-delay: .42s; }
.tmbmd-c .tmbmd-c-slide.is-active .tmbmd-c-content > :nth-child(5) { animation-delay: .54s; }
@keyframes tmbmd-c-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

.tmbmd-c .tmbmd-c-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2em .55em; margin: 0; padding: .45em .95em; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(8, 18, 28, .42); color: #fff; font-size: .76rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.tmbmd-c-live { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tmbmd-accent); }
.tmbmd-c-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: tmbmd-c-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes tmbmd-c-ping { 75%, 100% { opacity: 0; transform: scale(2.8); } }
.tmbmd-c-sep { opacity: .6; }

.tmbmd-c .tmbmd-c-title { margin: 0; padding: 0; color: #fff; font-family: inherit; font-size: clamp(1.55rem, 1rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); text-wrap: balance; }
.tmbmd-c .tmbmd-c-title a, .tmbmd-c .tmbmd-c-title a:hover, .tmbmd-c .tmbmd-c-title a:focus { color: #fff; text-decoration: none; }
/* Il titolo sale parola per parola da dietro una maschera */
.tmbmd-c-w { display: inline-block; overflow: hidden; margin-bottom: -.1em; padding-bottom: .1em; vertical-align: top; }
.tmbmd-c-w > span { display: inline-block; }
.tmbmd-c.is-ready .tmbmd-c-slide.is-active .tmbmd-c-w > span { animation: tmbmd-c-word 1s var(--tmbmd-ease) both; animation-delay: calc(.1s + var(--w, 0) * 60ms); }
@keyframes tmbmd-c-word { from { translate: 0 110%; } to { translate: 0 0; } }

.tmbmd-c .tmbmd-c-summary { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, .86); font-size: 1rem; line-height: 1.5; }

.tmbmd-c-progress { width: min(100%, 460px); margin-top: 4px; }
.tmbmd-c .tmbmd-c-figures { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .55rem; color: rgba(255, 255, 255, .8); font-size: .95rem; line-height: 1.2; }
.tmbmd-c-figures strong { margin-right: .2em; color: #fff; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.tmbmd-c-pct { color: #fff; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tmbmd-c-bar { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.tmbmd-c-bar > span { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p); overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, var(--tmbmd-accent), var(--tmbmd-accent-2)); box-shadow: 0 0 16px rgba(240, 80, 110, .75); }
.tmbmd-c-bar > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 80%); translate: -100% 0; animation: tmbmd-c-shine 2.8s ease-in-out 2.4s infinite; }
.tmbmd-c.is-ready .tmbmd-c-slide.is-active .tmbmd-c-bar > span { animation: tmbmd-c-grow 1.8s var(--tmbmd-ease) .45s both; }
@keyframes tmbmd-c-grow { from { width: 0; } }
@keyframes tmbmd-c-shine { 0% { translate: -100% 0; } 60%, 100% { translate: 100% 0; } }
.tmbmd-c-progress.is-complete .tmbmd-c-bar > span { background: linear-gradient(90deg, var(--tmbmd-accent), var(--tmbmd-gold)); box-shadow: 0 0 18px rgba(236, 186, 130, .85); }
.tmbmd-c .tmbmd-c-goal { margin: .5rem 0 0; color: rgba(255, 255, 255, .74); font-size: .85rem; line-height: 1.3; }

.tmbmd-c a.tmbmd-c-button { position: relative; display: inline-flex; align-items: center; gap: .6em; margin-top: 6px; padding: .9em 1.55em; overflow: hidden; border-radius: 999px; background: var(--tmbmd-accent); box-shadow: 0 14px 30px -12px rgba(240, 80, 110, .9); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; transition: transform .3s var(--tmbmd-ease), box-shadow .3s ease; }
.tmbmd-c a.tmbmd-c-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 70%); translate: -120% 0; transition: translate .7s ease; }
.tmbmd-c a.tmbmd-c-button:hover, .tmbmd-c a.tmbmd-c-button:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(240, 80, 110, 1); color: #fff; }
.tmbmd-c a.tmbmd-c-button:hover::before { translate: 120% 0; }
.tmbmd-c-icon { flex: none; width: 20px; height: 20px; }
.tmbmd-c-button .tmbmd-c-icon { width: 1.15em; height: 1.15em; transition: transform .3s var(--tmbmd-ease); }
.tmbmd-c a.tmbmd-c-button:hover .tmbmd-c-icon { transform: translateX(4px); }

/* Sotto la foto: barra di avanzamento centrata, poi contatore e pulsanti centrati sotto di essa.
   Sta sopra il margine inferiore del binario, così resta cliccabile. */
.tmbmd-c-controls { position: relative; z-index: 3; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 14px 18px; width: calc(100% - 32px); margin: 0 auto; }
.tmbmd-c-dots { display: flex; flex-wrap: wrap; grid-column: 1 / -1; align-items: center; justify-content: center; justify-self: center; gap: 8px; }
.tmbmd-c .tmbmd-c-dot { display: flex; align-items: center; margin: 0; padding: 10px 3px; border: 0; border-radius: 4px; background: none; box-shadow: none; color: inherit; line-height: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tmbmd-c .tmbmd-c-dot:hover, .tmbmd-c .tmbmd-c-dot:focus { background: none; }
.tmbmd-c-dot-bar { position: relative; display: block; width: 36px; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(20, 32, 42, .14); transition: width .6s var(--tmbmd-ease), background-color .3s ease; }
.tmbmd-c-dot:hover .tmbmd-c-dot-bar { background: rgba(20, 32, 42, .28); }
.tmbmd-c-dot[aria-current="true"] .tmbmd-c-dot-bar { width: 96px; }
.tmbmd-c-dot-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--tmbmd-accent), var(--tmbmd-accent-2)); transform: scaleX(0); transform-origin: left; }
.tmbmd-c-dot[aria-current="true"] .tmbmd-c-dot-fill { transform: scaleX(1); }
/* Il riempimento della barretta attiva scandisce lo scorrimento automatico */
.tmbmd-c.is-autoplay .tmbmd-c-dot[aria-current="true"] .tmbmd-c-dot-fill { animation: tmbmd-c-timer var(--tmbmd-autoplay, 7s) linear both; }
.tmbmd-c.is-autoplay.is-paused .tmbmd-c-dot[aria-current="true"] .tmbmd-c-dot-fill { animation-play-state: paused; }
@keyframes tmbmd-c-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tmbmd-c .tmbmd-c-count { margin: 0; color: var(--tmbmd-ink); font-size: .95rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tmbmd-c-current { display: inline-block; }
.tmbmd-c-total { color: rgba(20, 32, 42, .4); }

.tmbmd-c-nav { display: flex; gap: 10px; }
.tmbmd-c .tmbmd-c-btn { display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 1.5px solid rgba(20, 32, 42, .16); border-radius: 50%; background: #fff; box-shadow: 0 6px 18px -10px rgba(20, 32, 42, .35); color: var(--tmbmd-ink); line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--tmbmd-ease); }
.tmbmd-c .tmbmd-c-btn:focus { background: #fff; color: var(--tmbmd-ink); }
.tmbmd-c .tmbmd-c-btn:hover { transform: translateY(-2px); border-color: var(--tmbmd-ink); background: var(--tmbmd-ink); color: #fff; }
.tmbmd-c .tmbmd-c-btn:active { transform: scale(.94); }
.tmbmd-c .tmbmd-c-btn[hidden] { display: none; }
.tmbmd-c-btn .tmbmd-c-icon { transition: transform .25s var(--tmbmd-ease); }
.tmbmd-c-prev:hover .tmbmd-c-icon { transform: translateX(-3px); }
.tmbmd-c-next:hover .tmbmd-c-icon { transform: translateX(3px); }
.tmbmd-c-toggle .tmbmd-c-icon-play, .tmbmd-c.is-user-paused .tmbmd-c-toggle .tmbmd-c-icon-pause { display: none; }
.tmbmd-c.is-user-paused .tmbmd-c-toggle .tmbmd-c-icon-play { display: block; }

.tmbmd-c a:focus-visible, .tmbmd-c button:focus-visible { outline: 3px solid var(--tmbmd-blue); outline-offset: 3px; }
.tmbmd-c-card a:focus-visible { outline-color: #fff; }
.tmbmd-c-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

@media (max-width: 1024px) {
    .tmbmd-c { --tmbmd-slide-w: 82vw; }
    .tmbmd-c-card { aspect-ratio: 16 / 11; min-height: 420px; }
}
@media (max-width: 767px) {
    .tmbmd-c { --tmbmd-slide-w: 82vw; --tmbmd-radius: 22px; --tmbmd-gap: 12px; --tmbmd-depth: .06; }
    .tmbmd-c-track { margin-bottom: -74px; padding-top: 20px; padding-bottom: 104px; }
    .tmbmd-c-card { aspect-ratio: auto; height: clamp(410px, 124vw, 600px); min-height: 0; }
    .tmbmd-c-content { gap: 11px; padding: 20px; }
    .tmbmd-c .tmbmd-c-eyebrow { font-size: .66rem; letter-spacing: .06em; }
    .tmbmd-c .tmbmd-c-title { font-size: clamp(1.35rem, 1rem + 2.4vw, 1.9rem); }
    .tmbmd-c-ambient span { filter: blur(44px) saturate(1.5); }
    .tmbmd-c-controls { gap: 10px 12px; }
    .tmbmd-c .tmbmd-c-btn { width: 44px; height: 44px; }
    .tmbmd-c-dot-bar { width: 22px; height: 7px; }
    .tmbmd-c-dot[aria-current="true"] .tmbmd-c-dot-bar { width: 56px; }
}

/* Telefoni stretti: l'etichetta resta su una riga e i controlli non vanno a capo. */
@media (max-width: 400px) {
    .tmbmd-c-eyebrow .tmbmd-c-sep, .tmbmd-c-eyebrow .tmbmd-c-date { display: none; }
}
@media (max-width: 360px) {
    .tmbmd-c-controls { gap: 8px 10px; }
    .tmbmd-c-nav { gap: 6px; }
    .tmbmd-c .tmbmd-c-btn { width: 40px; height: 40px; }
    .tmbmd-c-dot-bar { width: 16px; }
    .tmbmd-c-dot[aria-current="true"] .tmbmd-c-dot-bar { width: 42px; }
}

/* Telefoni in orizzontale e schermi bassi: la scheda non supera l'altezza dello schermo. */
@media (orientation: landscape) and (max-height: 540px) {
    .tmbmd-c { --tmbmd-slide-w: min(720px, 76vw); }
    .tmbmd-c-track { margin-bottom: -80px; padding-top: 14px; padding-bottom: 106px; }
    .tmbmd-c-card { aspect-ratio: auto; height: max(290px, calc(100vh - 70px)); height: max(290px, calc(100svh - 70px)); min-height: 0; }
    .tmbmd-c-content { gap: 8px; max-width: 540px; padding: 18px 22px; }
    .tmbmd-c .tmbmd-c-title { font-size: clamp(1.2rem, .8rem + 1.6vw, 1.7rem); }
    .tmbmd-c .tmbmd-c-goal { display: none; }
    .tmbmd-c a.tmbmd-c-button { margin-top: 2px; padding: .75em 1.3em; }
    .tmbmd-c-controls { row-gap: 6px; }
}

/* Con le animazioni di sistema disattivate il carosello resta animato:
   si tolgono solo la parallasse e lo zoom ampio, i movimenti che più spesso danno fastidio. */
@media (prefers-reduced-motion: reduce) {
    .tmbmd-c .tmbmd-c-media, .tmbmd-c.is-scrollfx .tmbmd-c-media { transform: none; animation: none; }
    .tmbmd-c .tmbmd-c-slide.is-active .tmbmd-c-media img { transform: scale(1.08); }
}