/* ═══════════════════════════════════════════════════════════
   ProSlider — Layout & Animations
   ═══════════════════════════════════════════════════════════ */

/* --- Container ------------------------------------------------ */
.olo-proslider {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000;
}

/* Full-bleed: break out of uk-container to fill the viewport */
.olo-tile-fullwidth > .olo-proslider {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
/* --- Global background ----------------------------------------- */
.olo-proslider-global-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.olo-proslider-global-bg img,
.olo-proslider-global-bg video,
.olo-proslider-global-bg iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.olo-proslider-track {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* --- Slide ---------------------------------------------------- */
.olo-proslider-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}
.olo-proslider-slide.mps-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
/* Persistent slide: stays visible underneath the active slide */
.olo-proslider-slide.mps-persistent-visible {
  opacity: 1;
  visibility: visible;
  z-index: 0;
}

/* Transition: fade */
.olo-proslider[data-transition="fade"] .olo-proslider-slide {
  transition: opacity var(--mps-trans-dur, 800ms) ease;
}

/* Transition: slide */
.olo-proslider[data-transition="slide"] .olo-proslider-slide {
  transform: translateX(100%);
  opacity: 1;
  visibility: visible;
  transition: transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="slide"] .olo-proslider-slide.mps-active {
  transform: translateX(0);
}
.olo-proslider[data-transition="slide"] .olo-proslider-slide.mps-exit-left {
  transform: translateX(-100%);
}

/* Transition: zoom */
.olo-proslider[data-transition="zoom"] .olo-proslider-slide {
  transform: scale(0.85);
  transition: opacity var(--mps-trans-dur, 800ms) ease,
              transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="zoom"] .olo-proslider-slide.mps-active {
  transform: scale(1);
}

/* Transition: crossFade */
.olo-proslider[data-transition="crossFade"] .olo-proslider-slide {
  transition: opacity var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="crossFade"] .olo-proslider-slide.mps-active ~ .mps-crossfade-old {
  opacity: 1; visibility: visible; z-index: 0;
}

/* Transition: slideOver */
.olo-proslider[data-transition="slideOver"] .olo-proslider-slide {
  transform: translateX(100%);
  opacity: 1; visibility: visible;
  transition: transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="slideOver"] .olo-proslider-slide.mps-active {
  transform: translateX(0); z-index: 2;
}

/* Transition: fadeThroughDark */
.olo-proslider[data-transition="fadeThroughDark"] .olo-proslider-slide {
  transition: opacity calc(var(--mps-trans-dur, 800ms) / 2) ease;
}

/* Transition: blur */
.olo-proslider[data-transition="blur"] .olo-proslider-slide {
  transition: opacity var(--mps-trans-dur, 800ms) ease,
              filter var(--mps-trans-dur, 800ms) ease;
  filter: blur(20px);
}
.olo-proslider[data-transition="blur"] .olo-proslider-slide.mps-active {
  filter: blur(0);
}

/* Transition: flipH */
.olo-proslider[data-transition="flipH"] .olo-proslider-track {
  perspective: 1200px;
}
.olo-proslider[data-transition="flipH"] .olo-proslider-slide {
  transform: rotateY(-90deg);
  opacity: 1; visibility: visible;
  backface-visibility: hidden;
  transition: transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="flipH"] .olo-proslider-slide.mps-active {
  transform: rotateY(0);
}
.olo-proslider[data-transition="flipH"] .olo-proslider-slide.mps-exit-left {
  transform: rotateY(90deg);
}

/* Transition: flipV */
.olo-proslider[data-transition="flipV"] .olo-proslider-track {
  perspective: 1200px;
}
.olo-proslider[data-transition="flipV"] .olo-proslider-slide {
  transform: rotateX(90deg);
  opacity: 1; visibility: visible;
  backface-visibility: hidden;
  transition: transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="flipV"] .olo-proslider-slide.mps-active {
  transform: rotateX(0);
}
.olo-proslider[data-transition="flipV"] .olo-proslider-slide.mps-exit-left {
  transform: rotateX(-90deg);
}

/* Transition: cubeH / cubeV — un cubo vero (30 ott 2026). Le facce girano attorno all'asse del cubo, a metà della
   sua profondità (--mps-cube-d = metà larghezza, o metà altezza per il verticale, scritto dal JS), così l'uscente
   va sul fianco mentre l'entrante arriva dal fianco opposto, unite per lo spigolo. Avanti: la nuova arriva da destra
   (dal basso); indietro: da sinistra (dall'alto) — mps-from-prev / mps-exit-right. Le facce che non girano restano
   nascoste: prima stavano tutte visibili, ruotate di 90° sul bordo, e con la prospettiva diventavano una parete a
   sinistra che si vedeva (l'ultima diapositiva) ogni volta che quella attiva girava. */
.olo-proslider[data-transition="cubeH"] .olo-proslider-track,
.olo-proslider[data-transition="cubeV"] .olo-proslider-track {
  perspective: calc(var(--mps-cube-d, 720px) * 4);
}
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide,
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide {
  opacity: 1;
  backface-visibility: hidden;
  transform-origin: 50% 50% calc(var(--mps-cube-d, 720px) * -1);
  transition: transform var(--mps-trans-dur, 800ms) cubic-bezier(.45,.05,.25,1);
}
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide { transform: rotateY(90deg); }
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide { transform: rotateX(-90deg); }
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide.mps-from-prev,
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide.mps-exit-left { transform: rotateY(-90deg); }
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide.mps-exit-right { transform: rotateY(90deg); }
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide.mps-from-prev,
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide.mps-exit-left { transform: rotateX(90deg); }
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide.mps-exit-right { transform: rotateX(-90deg); }
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide.mps-active,
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide.mps-active { transform: none; }
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide:is(.mps-from-prev, .mps-from-next, .mps-exit-left, .mps-exit-right),
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide:is(.mps-from-prev, .mps-from-next, .mps-exit-left, .mps-exit-right) {
  visibility: visible;
}
/* La faccia che gira di lato si scurisce, come una scatola vera alla luce */
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide::after,
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide::after {
  content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: #000; opacity: .55;
  transition: opacity var(--mps-trans-dur, 800ms) cubic-bezier(.45,.05,.25,1);
}
.olo-proslider[data-transition="cubeH"] .olo-proslider-slide.mps-active::after,
.olo-proslider[data-transition="cubeV"] .olo-proslider-slide.mps-active::after { opacity: 0; }
/* Il cubo che segue lo scorrimento: le due facce in giro sono visibili, l'angolo e l'ombra li scrive il JS. */
.olo-proslider.mps-cubo-scorre .olo-proslider-slide { transition: none; }
.olo-proslider.mps-cubo-scorre .olo-proslider-slide.mps-faccia { visibility: visible; }
.olo-proslider.mps-cubo-scorre .olo-proslider-slide::after { opacity: var(--mps-faccia-ombra, .55); transition: none; }
.olo-proslider.mps-cubo-scorre .olo-proslider-slide.mps-active::after { opacity: var(--mps-faccia-ombra, 0); }
.olo-proslider .olo-proslider-slide.mps-no-trans,
.olo-proslider .olo-proslider-slide.mps-no-trans::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .olo-proslider[data-transition="cubeH"] .olo-proslider-slide,
  .olo-proslider[data-transition="cubeV"] .olo-proslider-slide,
  .olo-proslider[data-transition="cubeH"] .olo-proslider-slide::after,
  .olo-proslider[data-transition="cubeV"] .olo-proslider-slide::after { transition-duration: 1ms; }
}

/* --- Background ----------------------------------------------- */
.olo-proslider-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.olo-proslider-bg img,
.olo-proslider-bg video,
.olo-proslider-bg iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.olo-proslider-bg iframe {
  pointer-events: none;
  border: 0;
  /* YouTube 16:9 overflow trick */
  width: 120%;
  height: 120%;
  margin-left: -10%;
  margin-top: -10%;
}
.olo-proslider-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Layers Wrapper (proportional responsive scaling) ---------- */
.mps-layers-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform-origin: top left;
  pointer-events: none;
  will-change: transform;
  /* dentro la tela scalata le misure restano quelle di progetto; fuori (livelli con fusione)
     --mps-k è la scala dello slider, scritta dal JS sul contenitore */
  --mps-k: 1;
}
.mps-layers-wrap .olo-proslider-layer {
  pointer-events: auto;
}

/* --- Layer ---------------------------------------------------- */
.olo-proslider-layer {
  position: absolute;
  z-index: 2;
  opacity: 0;
  box-sizing: border-box;
}
/* Blend-mode layers: fuori dal wrapper scalato per preservare mix-blend-mode */
.mps-blend-layer {
  z-index: 3;
  pointer-events: auto;
}
.olo-proslider-layer.mps-anim-visible {
  opacity: 1;
}
/* Icon SVG custom properties */
.mps-icon-wrap svg path,
.mps-icon-wrap svg polygon,
.mps-icon-wrap svg circle,
.mps-icon-wrap svg rect,
.mps-icon-wrap svg line,
.mps-icon-wrap svg polyline,
.mps-icon-wrap svg ellipse {
  fill: var(--icon-fill, currentColor);
  stroke: var(--icon-stroke, currentColor);
  stroke-width: var(--icon-stroke-width, inherit);
  stroke-dasharray: var(--icon-stroke-dash, none);
}
/* Character animation units */
.mps-char {
  display: inline-block;
  opacity: 0;
}
/* Maschera d'ingresso del livello (data-mask): dal riquadro impostato (--mps-m) a tutto il livello,
   insieme all'ingresso (il JS la aggiunge alla stessa animation) */
@keyframes mpsMaskReveal {
  from { clip-path: var(--mps-m, inset(0 0 0 0)); }
  to   { clip-path: inset(-25%); }   /* alla fine non ritaglia le code delle lettere (vedi le Mask qui sotto) */
}
/* Lettere con partenza personalizzata (data-char-custom): spostamento, rotazione, scala, opacità e
   sfocatura scritti dal PHP sul livello */
@keyframes mpsCharCustom {
  from {
    opacity: var(--mps-ca-o, 0);
    transform: translate(var(--mps-ca-x, 0px), var(--mps-ca-y, 0px)) rotate(var(--mps-ca-r, 0deg)) scale(var(--mps-ca-s, 1));
    filter: blur(var(--mps-ca-b, 0px));
  }
  to { opacity: 1; transform: none; filter: none; }
}
/* Ken Burns del livello immagine: l'immagine si muove dentro la cornice del livello (overflow
   nascosto dal PHP), avanti e indietro senza fine; --mps-lkb-i = intensità (0,05-0,5) */
.mps-lkb {
  animation-duration: var(--mps-lkb-d, 5000ms);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  will-change: transform;
}
.mps-lkb-zoomIn   { animation-name: mpsLkbZoomIn; }
.mps-lkb-zoomOut  { animation-name: mpsLkbZoomOut; }
.mps-lkb-panLeft  { animation-name: mpsLkbPanLeft; }
.mps-lkb-panRight { animation-name: mpsLkbPanRight; }
.mps-lkb-panUp    { animation-name: mpsLkbPanUp; }
.mps-lkb-panDown  { animation-name: mpsLkbPanDown; }
@keyframes mpsLkbZoomIn  { from { transform: scale(1); } to { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))); } }
@keyframes mpsLkbZoomOut { from { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))); } to { transform: scale(1); } }
/* pan: l'immagine ingrandita di (1 + i) scorre di ±0,3·i, dentro il margine che l'ingrandimento lascia */
@keyframes mpsLkbPanLeft  { from { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateX(calc(var(--mps-lkb-i, 0.2) * 30%)); } to { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateX(calc(var(--mps-lkb-i, 0.2) * -30%)); } }
@keyframes mpsLkbPanRight { from { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateX(calc(var(--mps-lkb-i, 0.2) * -30%)); } to { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateX(calc(var(--mps-lkb-i, 0.2) * 30%)); } }
@keyframes mpsLkbPanUp    { from { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateY(calc(var(--mps-lkb-i, 0.2) * 30%)); } to { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateY(calc(var(--mps-lkb-i, 0.2) * -30%)); } }
@keyframes mpsLkbPanDown  { from { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateY(calc(var(--mps-lkb-i, 0.2) * -30%)); } to { transform: scale(calc(1 + var(--mps-lkb-i, 0.2))) translateY(calc(var(--mps-lkb-i, 0.2) * 30%)); } }
/* Percorso di movimento: il contenitore interno corre lungo il tracciato (Web Animations, dal JS) */
.mps-mp { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .mps-lkb { animation: none; }
}

/* Timeline keyframe layers: position managed by left/top in @keyframes */
.olo-proslider-layer[data-timeline-name] {
  transform-origin: center center;
}
/* Timeline layers: char spans must be visible (timeline manages the whole layer) */
.olo-proslider-layer[data-timeline-name] .mps-char {
  opacity: 1;
}

/* --- Navigation: Arrows --------------------------------------- */
.olo-proslider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, opacity 0.25s ease;
  opacity: 0.7;
}
.olo-proslider-arrow:hover {
  background: rgba(0,0,0,0.7);
  opacity: 1;
}
.olo-proslider-prev { left: 16px; }
.olo-proslider-next { right: 16px; }

/* --- Navigation: Dots ----------------------------------------- */
.olo-proslider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.olo-proslider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.olo-proslider-dot:hover {
  border-color: #fff;
}
.olo-proslider-dot.mps-dot-active {
  background: #fff;
  border-color: #fff;
}

/* --- Arrow Styles ----------------------------------------- */
/* minimal = default (circle, semi-transparent) */
.mps-arrow-rounded { border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); }
.mps-arrow-rounded:hover { background: rgba(255,255,255,0.35); }
.mps-arrow-boxed { border-radius: 4px; background: rgba(0,0,0,0.6); }
.mps-arrow-boxed:hover { background: rgba(0,0,0,0.85); }
.mps-arrow-outline { border-radius: 50%; background: transparent; border: 2px solid rgba(255,255,255,0.7); }
.mps-arrow-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* --- Dot Styles ------------------------------------------- */
/* circles = default */
.mps-dots-bars .olo-proslider-dot { width: 24px; height: 4px; border-radius: 2px; border: none; background: rgba(255,255,255,0.4); }
.mps-dots-bars .olo-proslider-dot:hover { background: rgba(255,255,255,0.7); }
.mps-dots-bars .olo-proslider-dot.mps-dot-active { background: #fff; }

.mps-dots-numbers .olo-proslider-dot { width: auto; height: auto; border-radius: 0; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 600; padding: 2px 6px; }
.mps-dots-numbers .olo-proslider-dot:hover { color: rgba(255,255,255,0.8); }
.mps-dots-numbers .olo-proslider-dot.mps-dot-active { color: #fff; border-bottom: 2px solid #fff; }

.mps-dots-dash .olo-proslider-dot { width: 32px; height: 3px; border-radius: 0; border: none; background: rgba(255,255,255,0.3); }
.mps-dots-dash .olo-proslider-dot:hover { background: rgba(255,255,255,0.6); }
.mps-dots-dash .olo-proslider-dot.mps-dot-active { background: #fff; }

/* --- Colore frecce e punti (navColor → --mps-nav, classe mps-nav-colore) ---------------
   Il bianco di frecce e punti sparisce sulle slide chiare. Col colore scelto glifo, contorni e punti lo prendono
   (con le trasparenze di sempre) e il fondo pieno delle frecce Minimal e Box diventa bianco o nero, quello che
   stacca dal colore (luminosità oklch del colore relativo; i browser che non lo conoscono tengono il fondo scuro).
   Senza colore scelto nessuna di queste regole entra. */
.mps-nav-colore > .olo-proslider-arrow { color: var(--mps-nav, #fff); }
.mps-nav-colore > .mps-arrow-rounded { background: color-mix(in srgb, var(--mps-nav, #fff) 20%, transparent); }
.mps-nav-colore > .mps-arrow-rounded:hover { background: color-mix(in srgb, var(--mps-nav, #fff) 35%, transparent); }
.mps-nav-colore > .mps-arrow-outline { border-color: color-mix(in srgb, var(--mps-nav, #fff) 70%, transparent); }
.mps-nav-colore > .mps-arrow-outline:hover { border-color: var(--mps-nav, #fff); background: color-mix(in srgb, var(--mps-nav, #fff) 10%, transparent); }
@supports (color: oklch(from red clamp(0, (0.62 - l) * 1000, 1) 0 0 / 0.5)) {
  .mps-nav-colore > .mps-arrow-minimal { background: oklch(from var(--mps-nav, #fff) clamp(0, (0.62 - l) * 1000, 1) 0 0 / 0.45); }
  .mps-nav-colore > .mps-arrow-minimal:hover { background: oklch(from var(--mps-nav, #fff) clamp(0, (0.62 - l) * 1000, 1) 0 0 / 0.7); }
  .mps-nav-colore > .mps-arrow-boxed { background: oklch(from var(--mps-nav, #fff) clamp(0, (0.62 - l) * 1000, 1) 0 0 / 0.6); }
  .mps-nav-colore > .mps-arrow-boxed:hover { background: oklch(from var(--mps-nav, #fff) clamp(0, (0.62 - l) * 1000, 1) 0 0 / 0.85); }
}
.mps-nav-colore .mps-dots-circles .olo-proslider-dot { border-color: color-mix(in srgb, var(--mps-nav, #fff) 70%, transparent); }
.mps-nav-colore .mps-dots-circles .olo-proslider-dot:hover { border-color: var(--mps-nav, #fff); }
.mps-nav-colore .mps-dots-circles .olo-proslider-dot.mps-dot-active { background: var(--mps-nav, #fff); border-color: var(--mps-nav, #fff); }
.mps-nav-colore .mps-dots-bars .olo-proslider-dot { background: color-mix(in srgb, var(--mps-nav, #fff) 40%, transparent); }
.mps-nav-colore .mps-dots-bars .olo-proslider-dot:hover { background: color-mix(in srgb, var(--mps-nav, #fff) 70%, transparent); }
.mps-nav-colore .mps-dots-bars .olo-proslider-dot.mps-dot-active { background: var(--mps-nav, #fff); }
.mps-nav-colore .mps-dots-numbers .olo-proslider-dot { color: color-mix(in srgb, var(--mps-nav, #fff) 50%, transparent); }
.mps-nav-colore .mps-dots-numbers .olo-proslider-dot:hover { color: color-mix(in srgb, var(--mps-nav, #fff) 80%, transparent); }
.mps-nav-colore .mps-dots-numbers .olo-proslider-dot.mps-dot-active { color: var(--mps-nav, #fff); border-bottom-color: var(--mps-nav, #fff); }
.mps-nav-colore .mps-dots-dash .olo-proslider-dot { background: color-mix(in srgb, var(--mps-nav, #fff) 30%, transparent); }
.mps-nav-colore .mps-dots-dash .olo-proslider-dot:hover { background: color-mix(in srgb, var(--mps-nav, #fff) 60%, transparent); }
.mps-nav-colore .mps-dots-dash .olo-proslider-dot.mps-dot-active { background: var(--mps-nav, #fff); }
/* Anche le linguette prendono il colore scelto: il testo nel colore e la barra bianca o nera, quella che stacca, come
   il fondo delle frecce. La barra sta fuori dal contenitore dello slider: il PHP le dà la classe mps-tabs-colore e la
   variabile. Prima restava nera anche sulle slide chiare (temi chiari con le linguette, 31 ott 2026). */
.mps-tabs-colore .olo-proslider-tab { color: color-mix(in srgb, var(--mps-nav, #fff) 74%, transparent); }
.mps-tabs-colore .olo-proslider-tab:hover { color: var(--mps-nav, #fff); background: color-mix(in srgb, var(--mps-nav, #fff) 6%, transparent); }
.mps-tabs-colore .olo-proslider-tab.mps-tab-active { color: var(--mps-nav, #fff); }
.olo-proslider-tabs.mps-tabs-colore.mps-tabs-top { border-bottom-color: color-mix(in srgb, var(--mps-nav, #fff) 15%, transparent); }
@supports (color: oklch(from red clamp(0, (0.62 - l) * 1000, 1) 0 0 / 0.5)) {
  .olo-proslider-tabs.mps-tabs-colore { background: oklch(from var(--mps-nav, #fff) clamp(0, (0.62 - l) * 1000, 1) 0 0 / 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}


/* Focus da tastiera su frecce, punti, miniature e schede: anello nel colore della navigazione */
.olo-proslider-arrow:focus-visible,
.olo-proslider-dot:focus-visible,
.olo-proslider-thumb:focus-visible {
  outline: 2px solid var(--mps-nav, #fff);
  outline-offset: 3px;
  opacity: 1;
}
.olo-proslider-tab:focus-visible { outline: 2px solid var(--mps-nav, #fff); outline-offset: -4px; }

/* --- Progress Bar ----------------------------------------- */
.olo-proslider-progressbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 11;
  background: rgba(255,255,255,0.15);
}
.olo-proslider-progressbar-fill {
  width: 0%;
  height: 100%;
  border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════
   Ken Burns
   ═══════════════════════════════════════════════════════════ */
.olo-proslider-kenburns {
  animation: mpsKenBurnsZoomIn var(--mps-kb-dur, 8000ms) ease forwards;
}
.olo-proslider-kenburns-out {
  animation: mpsKenBurnsZoomOut var(--mps-kb-dur, 8000ms) ease forwards;
}

@keyframes mpsKenBurnsZoomIn {
  from { transform: scale(1); }
  to   { transform: scale(var(--mps-kb-scale, 1.2)); }
}
@keyframes mpsKenBurnsZoomOut {
  from { transform: scale(var(--mps-kb-scale, 1.2)); }
  to   { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Entrances (12)
   ═══════════════════════════════════════════════════════════ */

/* fadeIn */
@keyframes mpsFadeIn { from { opacity:0 } to { opacity:1 } }
/* fadeInUp */
@keyframes mpsFadeInUp { from { opacity:0; transform:translateY(40px) } to { opacity:1; transform:translateY(0) } }
/* fadeInDown */
@keyframes mpsFadeInDown { from { opacity:0; transform:translateY(-40px) } to { opacity:1; transform:translateY(0) } }
/* fadeInLeft */
@keyframes mpsFadeInLeft { from { opacity:0; transform:translateX(-60px) } to { opacity:1; transform:translateX(0) } }
/* fadeInRight */
@keyframes mpsFadeInRight { from { opacity:0; transform:translateX(60px) } to { opacity:1; transform:translateX(0) } }
/* slideInLeft */
@keyframes mpsSlideInLeft { from { transform:translateX(-100%) } to { transform:translateX(0) } }
/* slideInRight */
@keyframes mpsSlideInRight { from { transform:translateX(100%) } to { transform:translateX(0) } }
/* slideInUp */
@keyframes mpsSlideInUp { from { transform:translateY(100%) } to { transform:translateY(0) } }
/* slideInDown */
@keyframes mpsSlideInDown { from { transform:translateY(-100%) } to { transform:translateY(0) } }
/* zoomIn */
@keyframes mpsZoomIn { from { opacity:0; transform:scale(0.4) } to { opacity:1; transform:scale(1) } }
/* bounceIn */
@keyframes mpsBounceIn {
  0%   { opacity:0; transform:scale(0.3) }
  50%  { opacity:1; transform:scale(1.08) }
  70%  { transform:scale(0.95) }
  100% { transform:scale(1) }
}
/* rotateIn */
@keyframes mpsRotateIn { from { opacity:0; transform:rotate(-200deg) } to { opacity:1; transform:rotate(0) } }

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Exits (12)
   ═══════════════════════════════════════════════════════════ */

/* fadeOut */
@keyframes mpsFadeOut { from { opacity:1 } to { opacity:0 } }
/* fadeOutUp */
@keyframes mpsFadeOutUp { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-40px) } }
/* fadeOutDown */
@keyframes mpsFadeOutDown { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(40px) } }
/* fadeOutLeft */
@keyframes mpsFadeOutLeft { from { opacity:1; transform:translateX(0) } to { opacity:0; transform:translateX(-60px) } }
/* fadeOutRight */
@keyframes mpsFadeOutRight { from { opacity:1; transform:translateX(0) } to { opacity:0; transform:translateX(60px) } }
/* slideOutLeft */
@keyframes mpsSlideOutLeft { from { transform:translateX(0) } to { transform:translateX(-100%) } }
/* slideOutRight */
@keyframes mpsSlideOutRight { from { transform:translateX(0) } to { transform:translateX(100%) } }
/* slideOutUp */
@keyframes mpsSlideOutUp { from { transform:translateY(0) } to { transform:translateY(-100%) } }
/* slideOutDown */
@keyframes mpsSlideOutDown { from { transform:translateY(0) } to { transform:translateY(100%) } }
/* zoomOut */
@keyframes mpsZoomOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(0.4) } }
/* bounceOut */
@keyframes mpsBounceOut {
  0%   { transform:scale(1) }
  25%  { transform:scale(1.08) }
  100% { opacity:0; transform:scale(0.3) }
}
/* rotateOut */
@keyframes mpsRotateOut { from { opacity:1; transform:rotate(0) } to { opacity:0; transform:rotate(200deg) } }

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Slide Short (8)
   ═══════════════════════════════════════════════════════════ */
@keyframes mpsSlideShortFromTop { from { opacity:0; transform:translateY(-50px) } to { opacity:1; transform:translateY(0) } }
@keyframes mpsSlideShortFromBottom { from { opacity:0; transform:translateY(50px) } to { opacity:1; transform:translateY(0) } }
@keyframes mpsSlideShortFromLeft { from { opacity:0; transform:translateX(-50px) } to { opacity:1; transform:translateX(0) } }
@keyframes mpsSlideShortFromRight { from { opacity:0; transform:translateX(50px) } to { opacity:1; transform:translateX(0) } }
@keyframes mpsSmoothSlideFromBottom { from { opacity:0; transform:translateY(100%) } to { opacity:1; transform:translateY(0) } }
@keyframes mpsSmoothSlideFromTop { from { opacity:0; transform:translateY(-100%) } to { opacity:1; transform:translateY(0) } }
@keyframes mpsSmoothSlideFromLeft { from { opacity:0; transform:translateX(-100%) } to { opacity:1; transform:translateX(0) } }
@keyframes mpsSmoothSlideFromRight { from { opacity:0; transform:translateX(100%) } to { opacity:1; transform:translateX(0) } }
/* exits */
@keyframes mpsSlideShortOutTop { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-50px) } }
@keyframes mpsSlideShortOutBottom { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(50px) } }
@keyframes mpsSlideShortOutLeft { from { opacity:1; transform:translateX(0) } to { opacity:0; transform:translateX(-50px) } }
@keyframes mpsSlideShortOutRight { from { opacity:1; transform:translateX(0) } to { opacity:0; transform:translateX(50px) } }
@keyframes mpsSmoothSlideOutBottom { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(100%) } }
@keyframes mpsSmoothSlideOutTop { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-100%) } }
@keyframes mpsSmoothSlideOutLeft { from { opacity:1; transform:translateX(0) } to { opacity:0; transform:translateX(-100%) } }
@keyframes mpsSmoothSlideOutRight { from { opacity:1; transform:translateX(0) } to { opacity:0; transform:translateX(100%) } }

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Skew (4+4)
   ═══════════════════════════════════════════════════════════ */
@keyframes mpsSkewFromLeft { from { opacity:0; transform:skewX(45deg) translateX(-100%) } to { opacity:1; transform:skewX(0) translateX(0) } }
@keyframes mpsSkewFromRight { from { opacity:0; transform:skewX(-45deg) translateX(100%) } to { opacity:1; transform:skewX(0) translateX(0) } }
@keyframes mpsSkewShortFromLeft { from { opacity:0; transform:skewX(25deg) translateX(-60px) } to { opacity:1; transform:skewX(0) translateX(0) } }
@keyframes mpsSkewShortFromRight { from { opacity:0; transform:skewX(-25deg) translateX(60px) } to { opacity:1; transform:skewX(0) translateX(0) } }
@keyframes mpsSkewOutLeft { from { opacity:1; transform:skewX(0) translateX(0) } to { opacity:0; transform:skewX(45deg) translateX(-100%) } }
@keyframes mpsSkewOutRight { from { opacity:1; transform:skewX(0) translateX(0) } to { opacity:0; transform:skewX(-45deg) translateX(100%) } }
@keyframes mpsSkewShortOutLeft { from { opacity:1; transform:skewX(0) translateX(0) } to { opacity:0; transform:skewX(25deg) translateX(-60px) } }
@keyframes mpsSkewShortOutRight { from { opacity:1; transform:skewX(0) translateX(0) } to { opacity:0; transform:skewX(-25deg) translateX(60px) } }

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Flip 3D (4+4)
   ═══════════════════════════════════════════════════════════ */
@keyframes mpsFlipFromTop { from { opacity:0; transform:perspective(800px) rotateX(70deg) } to { opacity:1; transform:perspective(800px) rotateX(0) } }
@keyframes mpsFlipFromBottom { from { opacity:0; transform:perspective(800px) rotateX(-70deg) } to { opacity:1; transform:perspective(800px) rotateX(0) } }
@keyframes mpsFlipFromLeft { from { opacity:0; transform:perspective(800px) rotateY(-70deg) } to { opacity:1; transform:perspective(800px) rotateY(0) } }
@keyframes mpsFlipFromRight { from { opacity:0; transform:perspective(800px) rotateY(70deg) } to { opacity:1; transform:perspective(800px) rotateY(0) } }
@keyframes mpsFlipOutTop { from { opacity:1; transform:perspective(800px) rotateX(0) } to { opacity:0; transform:perspective(800px) rotateX(70deg) } }
@keyframes mpsFlipOutBottom { from { opacity:1; transform:perspective(800px) rotateX(0) } to { opacity:0; transform:perspective(800px) rotateX(-70deg) } }
@keyframes mpsFlipOutLeft { from { opacity:1; transform:perspective(800px) rotateY(0) } to { opacity:0; transform:perspective(800px) rotateY(-70deg) } }
@keyframes mpsFlipOutRight { from { opacity:1; transform:perspective(800px) rotateY(0) } to { opacity:0; transform:perspective(800px) rotateY(70deg) } }

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Rotate 3D (4+4)
   ═══════════════════════════════════════════════════════════ */
@keyframes mpsRotateInFromBottom { from { opacity:0; transform:rotate(70deg) scale(2) translateY(100%) } to { opacity:1; transform:rotate(0) scale(1) translateY(0) } }
@keyframes mpsRotate3D { from { opacity:0; transform:perspective(800px) rotateX(-20deg) rotateY(-20deg) scale(0.8) } to { opacity:1; transform:perspective(800px) rotateX(0) rotateY(0) scale(1) } }
@keyframes mpsRotateInFromLeft { from { opacity:0; transform:rotate(-90deg) translateX(-100%) } to { opacity:1; transform:rotate(0) translateX(0) } }
@keyframes mpsRotateInFromRight { from { opacity:0; transform:rotate(90deg) translateX(100%) } to { opacity:1; transform:rotate(0) translateX(0) } }
@keyframes mpsRotateOutToBottom { from { opacity:1; transform:rotate(0) scale(1) translateY(0) } to { opacity:0; transform:rotate(70deg) scale(2) translateY(100%) } }
@keyframes mpsRotateOut3D { from { opacity:1; transform:perspective(800px) rotateX(0) rotateY(0) scale(1) } to { opacity:0; transform:perspective(800px) rotateX(20deg) rotateY(20deg) scale(0.8) } }
@keyframes mpsRotateOutToLeft { from { opacity:1; transform:rotate(0) translateX(0) } to { opacity:0; transform:rotate(-90deg) translateX(-100%) } }
@keyframes mpsRotateOutToRight { from { opacity:1; transform:rotate(0) translateX(0) } to { opacity:0; transform:rotate(90deg) translateX(100%) } }

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Pop/Bounce (4+4)
   ═══════════════════════════════════════════════════════════ */
@keyframes mpsPopUpSmooth {
  0%   { opacity:0; transform:scale(0.9) }
  100% { opacity:1; transform:scale(1) }
}
@keyframes mpsPopUpBack {
  0%   { opacity:0; transform:scale(0) }
  70%  { opacity:1; transform:scale(1.1) }
  100% { transform:scale(1) }
}
@keyframes mpsBounceInUp {
  0%   { opacity:0; transform:translateY(80px) }
  60%  { opacity:1; transform:translateY(-15px) }
  80%  { transform:translateY(8px) }
  100% { transform:translateY(0) }
}
@keyframes mpsBounceInDown {
  0%   { opacity:0; transform:translateY(-80px) }
  60%  { opacity:1; transform:translateY(15px) }
  80%  { transform:translateY(-8px) }
  100% { transform:translateY(0) }
}
@keyframes mpsPopOutSmooth {
  0%   { opacity:1; transform:scale(1) }
  100% { opacity:0; transform:scale(0.9) }
}
@keyframes mpsPopOutBack {
  0%   { transform:scale(1) }
  30%  { opacity:1; transform:scale(1.1) }
  100% { opacity:0; transform:scale(0) }
}
@keyframes mpsBounceOutUp {
  0%   { transform:translateY(0) }
  20%  { transform:translateY(8px) }
  40%  { opacity:1; transform:translateY(-15px) }
  100% { opacity:0; transform:translateY(-80px) }
}
@keyframes mpsBounceOutDown {
  0%   { transform:translateY(0) }
  20%  { transform:translateY(-8px) }
  40%  { opacity:1; transform:translateY(15px) }
  100% { opacity:0; transform:translateY(80px) }
}

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Mask/Reveal (6+6) — clip-path
   ═══════════════════════════════════════════════════════════ */
/* La maschera scopre il livello e poi NON lo ritaglia: alla fine il riquadro è largo un quarto in più per lato
   (8 nov 2026: con interlinea 1.0 la coda della «g» di «giorno» restava tagliata da inset(0) per sempre). Anche il
   punto di partenza sta oltre il bordo, così il fronte della maschera attraversa pure code e sporgenze delle lettere. */
@keyframes mpsMaskFromLeft { from { clip-path:inset(-25% 125% -25% -25%); opacity:1 } to { clip-path:inset(-25%); opacity:1 } }
@keyframes mpsMaskFromRight { from { clip-path:inset(-25% -25% -25% 125%); opacity:1 } to { clip-path:inset(-25%); opacity:1 } }
@keyframes mpsMaskFromTop { from { clip-path:inset(-25% -25% 125% -25%); opacity:1 } to { clip-path:inset(-25%); opacity:1 } }
@keyframes mpsMaskFromBottom { from { clip-path:inset(125% -25% -25% -25%); opacity:1 } to { clip-path:inset(-25%); opacity:1 } }
@keyframes mpsMaskZoomOut { from { clip-path:inset(30% 30% 30% 30%); opacity:0; transform:scale(2) } to { clip-path:inset(-25%); opacity:1; transform:scale(1) } }
@keyframes mpsMaskCenter { from { clip-path:inset(50% 50% 50% 50%); opacity:1 } to { clip-path:inset(-25%); opacity:1 } }
@keyframes mpsMaskOutLeft { from { clip-path:inset(-25%); opacity:1 } to { clip-path:inset(-25% 125% -25% -25%); opacity:1 } }
@keyframes mpsMaskOutRight { from { clip-path:inset(-25%); opacity:1 } to { clip-path:inset(-25% -25% -25% 125%); opacity:1 } }
@keyframes mpsMaskOutTop { from { clip-path:inset(-25%); opacity:1 } to { clip-path:inset(-25% -25% 125% -25%); opacity:1 } }
@keyframes mpsMaskOutBottom { from { clip-path:inset(-25%); opacity:1 } to { clip-path:inset(125% -25% -25% -25%); opacity:1 } }
@keyframes mpsMaskZoomIn { from { clip-path:inset(-25%); opacity:1; transform:scale(1) } to { clip-path:inset(30% 30% 30% 30%); opacity:0; transform:scale(2) } }
@keyframes mpsMaskOutCenter { from { clip-path:inset(-25%); opacity:1 } to { clip-path:inset(50% 50% 50% 50%); opacity:1 } }

/* ═══════════════════════════════════════════════════════════
   Layer Animation Library — Loop Animations (21)
   ═══════════════════════════════════════════════════════════ */
@keyframes mpsPendulum { 0%,100% { transform:rotate(-20deg) } 50% { transform:rotate(20deg) } }
@keyframes mpsPendulumBelow { 0%,100% { transform:rotate(-20deg); transform-origin:center -200% } 50% { transform:rotate(20deg); transform-origin:center -200% } }
@keyframes mpsPendulumAbove { 0%,100% { transform:rotate(-20deg); transform-origin:center 200% } 50% { transform:rotate(20deg); transform-origin:center 200% } }
@keyframes mpsPendulumLeft { 0%,100% { transform:rotate(-20deg); transform-origin:150% center } 50% { transform:rotate(20deg); transform-origin:150% center } }
@keyframes mpsPendulumRight { 0%,100% { transform:rotate(-20deg); transform-origin:-50% center } 50% { transform:rotate(20deg); transform-origin:-50% center } }
@keyframes mpsWaveSmallLeft { 0% { transform:translate(0,0) } 25% { transform:translate(-30px,-30px) } 50% { transform:translate(0,-60px) } 75% { transform:translate(30px,-30px) } 100% { transform:translate(0,0) } }
@keyframes mpsWaveSmallRight { 0% { transform:translate(0,0) } 25% { transform:translate(30px,-30px) } 50% { transform:translate(0,-60px) } 75% { transform:translate(-30px,-30px) } 100% { transform:translate(0,0) } }
@keyframes mpsWaveBigLeft { 0% { transform:translate(0,0) } 25% { transform:translate(-70px,-70px) } 50% { transform:translate(0,-140px) } 75% { transform:translate(70px,-70px) } 100% { transform:translate(0,0) } }
@keyframes mpsWaveBigRight { 0% { transform:translate(0,0) } 25% { transform:translate(70px,-70px) } 50% { transform:translate(0,-140px) } 75% { transform:translate(-70px,-70px) } 100% { transform:translate(0,0) } }
@keyframes mpsWiggleY { 0%,100% { transform:perspective(800px) rotateY(-20deg) } 50% { transform:perspective(800px) rotateY(20deg) } }
@keyframes mpsWiggleX { 0%,100% { transform:perspective(800px) rotateX(-20deg) } 50% { transform:perspective(800px) rotateX(20deg) } }
@keyframes mpsWiggle3D { 0%,100% { transform:perspective(800px) rotateX(-15deg) rotateY(-15deg) } 50% { transform:perspective(800px) rotateX(15deg) rotateY(15deg) } }
@keyframes mpsCrazyWiggle { 0% { transform:rotate(0) scale(1) } 25% { transform:rotate(5deg) scale(1.05) } 50% { transform:rotate(-5deg) scale(0.95) } 75% { transform:rotate(3deg) scale(1.02) } 100% { transform:rotate(0) scale(1) } }
@keyframes mpsSpinCW { from { transform:rotate(0) } to { transform:rotate(360deg) } }
@keyframes mpsSpinCCW { from { transform:rotate(0) } to { transform:rotate(-360deg) } }
@keyframes mpsBlinkLoop { 0%,100% { opacity:1 } 50% { opacity:0 } }
@keyframes mpsFloatLoop { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-15px) } }
@keyframes mpsPulseLoop { 0%,100% { transform:scale(1) } 50% { transform:scale(1.08) } }
@keyframes mpsBreathLoop { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:0.7; transform:scale(0.97) } }
@keyframes mpsSlideHLoop { 0%,100% { transform:translateX(0) } 50% { transform:translateX(50px) } }
@keyframes mpsHoverLoop { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-10px) } }

/* ═══════════════════════════════════════════════════════════
   Sizing Modes
   ═══════════════════════════════════════════════════════════ */
.mps-fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.mps-fullscreen {
  width: 100vw;
  height: 100vh !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════════════════
   Global Layers
   ═══════════════════════════════════════════════════════════ */
.olo-proslider-global-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.olo-proslider-global-layers .olo-proslider-layer {
  pointer-events: auto;
}
.olo-proslider-global-back { z-index: 0; }
.olo-proslider-global-front { z-index: 5; }

/* ═══════════════════════════════════════════════════════════
   Scroll Effects
   ═══════════════════════════════════════════════════════════ */
.olo-proslider.mps-scroll-fade { transition: opacity 0.3s ease; }
.olo-proslider.mps-scroll-blur { transition: filter 0.3s ease; }
.olo-proslider.mps-scroll-fadeBlur { transition: opacity 0.3s ease, filter 0.3s ease; }

/* ═══════════════════════════════════════════════════════════
   Slide Transitions — Extended
   ═══════════════════════════════════════════════════════════ */
/* push: new slide pushes old out */
.olo-proslider[data-transition="push"] .olo-proslider-slide {
  transform: translateX(100%); opacity:1; visibility:visible;
  transition: transform var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
.olo-proslider[data-transition="push"] .olo-proslider-slide.mps-active { transform: translateX(0); }
.olo-proslider[data-transition="push"] .olo-proslider-slide.mps-exit-left { transform: translateX(-100%); }

/* pushRight: la nuova arriva da sinistra e spinge la vecchia verso destra (lo script dà i versi, 31 ott 2026) */
.olo-proslider[data-transition="pushRight"] .olo-proslider-slide {
  transform: translateX(-100%); opacity:1; visibility:visible;
  transition: transform var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
.olo-proslider[data-transition="pushRight"] .olo-proslider-slide.mps-active { transform: translateX(0); }

/* pushDown */
.olo-proslider[data-transition="pushDown"] .olo-proslider-slide {
  transform: translateY(-100%); opacity:1; visibility:visible;
  transition: transform var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
.olo-proslider[data-transition="pushDown"] .olo-proslider-slide.mps-active { transform: translateY(0); }
.olo-proslider[data-transition="pushDown"] .olo-proslider-slide.mps-exit-left { transform: translateY(100%); }

/* stack: new zooms in over old */
.olo-proslider[data-transition="stack"] .olo-proslider-slide {
  transform: scale(0.8); opacity:0;
  transition: opacity var(--mps-trans-dur, 800ms) ease, transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="stack"] .olo-proslider-slide.mps-active {
  transform: scale(1); opacity:1; z-index:2;
}

/* paperCut: diagonal clip */
.olo-proslider[data-transition="paperCut"] .olo-proslider-slide {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); opacity:1; visibility:visible;
  transition: clip-path var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
.olo-proslider[data-transition="paperCut"] .olo-proslider-slide.mps-active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* zoomFade: zoom + fade combo */
.olo-proslider[data-transition="zoomFade"] .olo-proslider-slide {
  transform: scale(1.15); opacity:0;
  transition: opacity var(--mps-trans-dur, 800ms) ease, transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="zoomFade"] .olo-proslider-slide.mps-active {
  transform: scale(1); opacity:1;
}

/* rotateSlide: rotate around center */
.olo-proslider[data-transition="rotateSlide"] .olo-proslider-track { perspective: 1500px; }
.olo-proslider[data-transition="rotateSlide"] .olo-proslider-slide {
  transform: rotateY(-45deg) scale(0.8); opacity:0;
  transition: all var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
.olo-proslider[data-transition="rotateSlide"] .olo-proslider-slide.mps-active {
  transform: rotateY(0) scale(1); opacity:1;
}

/* curtain3D: 3D curtain fold */
.olo-proslider[data-transition="curtain3D"] .olo-proslider-track { perspective: 1000px; }
.olo-proslider[data-transition="curtain3D"] .olo-proslider-slide {
  transform: rotateY(90deg); transform-origin: center center;
  opacity:1; visibility:visible;
  transition: transform var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
.olo-proslider[data-transition="curtain3D"] .olo-proslider-slide.mps-active { transform: rotateY(0); }
.olo-proslider[data-transition="curtain3D"] .olo-proslider-slide.mps-exit-left { transform: rotateY(-90deg); }

/* slideUp */
.olo-proslider[data-transition="slideUp"] .olo-proslider-slide {
  transform: translateY(100%); opacity:1; visibility:visible;
  transition: transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="slideUp"] .olo-proslider-slide.mps-active { transform: translateY(0); }
.olo-proslider[data-transition="slideUp"] .olo-proslider-slide.mps-exit-left { transform: translateY(-100%); }

/* slideDown */
.olo-proslider[data-transition="slideDown"] .olo-proslider-slide {
  transform: translateY(-100%); opacity:1; visibility:visible;
  transition: transform var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider[data-transition="slideDown"] .olo-proslider-slide.mps-active { transform: translateY(0); }
.olo-proslider[data-transition="slideDown"] .olo-proslider-slide.mps-exit-left { transform: translateY(100%); }

/* ═══════════════════════════════════════════════════════════
   SFX Block Reveal (8 animations)
   ═══════════════════════════════════════════════════════════ */
@keyframes mpsBlockFromLeft { 0% { clip-path:inset(0 100% 0 0) } 49.9% { clip-path:inset(0 0 0 0) } 50% { clip-path:inset(0 0 0 0) } 100% { clip-path:inset(0 0 0 0) } }
@keyframes mpsBlockFromRight { 0% { clip-path:inset(0 0 0 100%) } 50% { clip-path:inset(0 0 0 0) } 100% { clip-path:inset(0 0 0 0) } }
@keyframes mpsBlockFromTop { 0% { clip-path:inset(0 0 100% 0) } 50% { clip-path:inset(0 0 0 0) } 100% { clip-path:inset(0 0 0 0) } }
@keyframes mpsBlockFromBottom { 0% { clip-path:inset(100% 0 0 0) } 50% { clip-path:inset(0 0 0 0) } 100% { clip-path:inset(0 0 0 0) } }
/* SFX with colored block overlay — uses pseudo-element in PHP */
.mps-sfx-block { position:relative; overflow:hidden; }
.mps-sfx-block::after {
  content:''; position:absolute; inset:0; z-index:10;
  background: var(--mps-sfx-color, #fff);
  transform: translateX(-101%);
  animation: var(--mps-sfx-anim, mpsSfxBlockRight) var(--mps-sfx-dur, 800ms) var(--mps-sfx-easing, cubic-bezier(.4,0,.2,1)) var(--mps-sfx-delay, 0ms) both;
}
@keyframes mpsSfxBlockRight { 0% { transform:translateX(-101%) } 50% { transform:translateX(0) } 100% { transform:translateX(101%) } }
@keyframes mpsSfxBlockLeft { 0% { transform:translateX(101%) } 50% { transform:translateX(0) } 100% { transform:translateX(-101%) } }
@keyframes mpsSfxBlockDown { 0% { transform:translateY(-101%) } 50% { transform:translateY(0) } 100% { transform:translateY(101%) } }
@keyframes mpsSfxBlockUp { 0% { transform:translateY(101%) } 50% { transform:translateY(0) } 100% { transform:translateY(-101%) } }

/* ═══════════════════════════════════════════════════════════
   Ken Burns Advanced (blur + pan)
   ═══════════════════════════════════════════════════════════ */
.olo-proslider-kenburns-adv {
  animation: mpsKenBurnsAdv var(--mps-kb-dur, 8000ms) ease forwards;
}
@keyframes mpsKenBurnsAdv {
  from {
    transform: scale(var(--mps-kb-start-scale, 1)) translate(var(--mps-kb-start-x, 0px), var(--mps-kb-start-y, 0px));
    filter: blur(var(--mps-kb-start-blur, 0px));
  }
  to {
    transform: scale(var(--mps-kb-end-scale, 1.2)) translate(var(--mps-kb-end-x, 0px), var(--mps-kb-end-y, 0px));
    filter: blur(var(--mps-kb-end-blur, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════
   Carousel Mode
   ═══════════════════════════════════════════════════════════
   Le card stanno in fila sul binario e il JS lo fa scorrere per centrare quella scelta
   (mps-carousel-active, decisa alla PARTENZA del cambio, insieme allo scorrimento: con
   mps-active la card cresceva solo a fine uscita dei livelli). Il cambio È lo scorrimento:
   la transizione del pannello non agisce (data-transition="carousel"). Le card di lato si
   tagliano al bordo dello slider: con overflow visibile uscivano nella pagina e la facevano
   scorrere di lato. Sul telefono la card è larga almeno l'80%: al 55% restava una striscia
   di 200 px. */
.olo-proslider.mps-carousel {
  --mps-carousel-w: var(--mps-carousel-width, 80%);
}
@media (max-width: 640px) {
  .olo-proslider.mps-carousel { --mps-carousel-w: max(var(--mps-carousel-width, 80%), 80%); }
}
.olo-proslider.mps-carousel .olo-proslider-track {
  display: flex;
  align-items: stretch;
  /* partenza: prima card al centro anche prima che il JS misuri */
  transform: translateX(calc((100% - var(--mps-carousel-w)) / 2 - var(--mps-carousel-gap, 10px)));
  transition: transform var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
/* Una card di lato si stringe (scala, nel 3D anche la rotazione) attorno al suo centro: senza
   correzione fra lei e la card al centro restava un vuoto di 100 px e più invece del Gap. Ogni card
   si sposta verso il centro di quanto si sono stretti il suo lato interno (--mps-a, in frazioni
   della card) e le card in mezzo (--mps-b ciascuna): d = distanza dalla card al centro (--mps-d,
   dal JS), verso da --mps-dir. */
.olo-proslider.mps-carousel .olo-proslider-slide {
  --mps-dir: -1;
  --mps-a: calc((1 - var(--mps-carousel-side-scale, 0.85)) / 2);
  --mps-b: calc(1 - var(--mps-carousel-side-scale, 0.85));
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  flex: 0 0 var(--mps-carousel-w);
  margin: 0 var(--mps-carousel-gap, 10px);
  transform: translateX(calc(var(--mps-dir) * (var(--mps-a) + (var(--mps-d, 1) - 1) * var(--mps-b)) * 100%)) scale(var(--mps-carousel-side-scale, 0.85));
  cursor: pointer;
  transition: transform var(--mps-trans-dur, 800ms) cubic-bezier(.4,0,.2,1);
}
.olo-proslider.mps-carousel .olo-proslider-slide.mps-carousel-prima { --mps-dir: 1; }
.olo-proslider.mps-carousel .olo-proslider-slide.mps-carousel-active {
  transform: translateX(0) scale(1);
  z-index: 2;
  cursor: auto;
}
/* Velo delle card di lato. Non filter: brightness(), e senza z-index né opacity: in Chrome un
   figlio composito (filtro, opacità animata, livello sopra la tela dei livelli) di una card con
   perspective() si dipinge più stretto della geometria della card, e restava una striscia chiara
   sul lato interno (col filtro sulla card, fra le card il doppio del Gap). Così sta sopra la
   foto e sotto velatura e livelli, che sulle card di lato sono spenti. */
.olo-proslider.mps-carousel .olo-proslider-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / var(--mps-velo, 0.3));
  pointer-events: none;
  transition: background-color var(--mps-trans-dur, 800ms) ease;
}
.olo-proslider.mps-carousel .olo-proslider-slide.mps-carousel-active::after { background-color: rgb(0 0 0 / 0); }
/* livelli delle card di lato: spenti e non cliccabili, il clic sceglie la card */
.olo-proslider.mps-carousel .olo-proslider-slide:not(.mps-carousel-active) .olo-proslider-layer { pointer-events: none; }
/* Carousel 3D: ogni card ha la sua prospettiva e guarda il centro, quelle prima da sinistra e
   quelle dopo da destra. Prima la prospettiva stava sul binario, che scorre: la rotazione
   cambiava a seconda della card al centro, e tutte giravano dallo stesso lato. */
.olo-proslider.mps-carousel-3d .olo-proslider-slide {
  /* La rotazione stringe ancora, e la prospettiva più il lato interno (che si allontana) di quello
     esterno. La prospettiva è 1,6 volte la card (--mps-prosp, dal JS): lo stesso scorcio su ogni
     schermo, e le frazioni qui sotto (calcolate a 25°) valgono per ogni misura. Lo spostamento sta
     FUORI dalla prospettiva, se no veniva proiettato anche lui. */
  --mps-a: calc((1 - 0.825 * var(--mps-carousel-side-scale, 0.85)) / 2);
  --mps-b: calc(1 - 0.917 * var(--mps-carousel-side-scale, 0.85));
  transform: translateX(calc(var(--mps-dir) * (var(--mps-a) + (var(--mps-d, 1) - 1) * var(--mps-b)) * 100%)) perspective(var(--mps-prosp, 1200px)) rotateY(calc(var(--mps-dir) * var(--mps-carousel-rotate, 25deg))) scale(var(--mps-carousel-side-scale, 0.85));
  --mps-velo: 0.4;
}
.olo-proslider.mps-carousel-3d .olo-proslider-slide.mps-carousel-active {
  transform: translateX(0) perspective(var(--mps-prosp, 1200px)) rotateY(0deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .olo-proslider.mps-carousel .olo-proslider-track,
  .olo-proslider.mps-carousel .olo-proslider-slide,
  .olo-proslider.mps-carousel .olo-proslider-slide::after { transition-duration: 1ms; }
}

/* ═══════════════════════════════════════════════════════════
   Thumbnail Navigation
   ═══════════════════════════════════════════════════════════ */
.olo-proslider-thumbs {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 12;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.olo-proslider-thumb {
  width: 80px; height: 50px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.25s, border-color 0.25s, transform 0.25s;
  flex-shrink: 0;
}
.olo-proslider-thumb:hover { opacity: 0.9; transform: scale(1.05); }
.olo-proslider-thumb.mps-thumb-active { opacity: 1; border-color: #fff; }
.olo-proslider-thumb img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
/* Thumbs position variants */
.mps-thumbs-top { top:0; bottom:auto; background: linear-gradient(rgba(0,0,0,0.6), transparent); }
.mps-thumbs-left, .mps-thumbs-right {
  top:0; bottom:0; left:auto; right:auto;
  flex-direction: column;
  width: auto;
  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
  justify-content: flex-start;
  overflow-y: auto;
}
.mps-thumbs-right { right:0; left:auto; background: linear-gradient(to left, rgba(0,0,0,0.6), transparent); }
.mps-thumbs-left { left:0; }

/* ═══════════════════════════════════════════════════════════
   Tab Navigation
   ═══════════════════════════════════════════════════════════ */
.olo-proslider-tabs {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 12;
  display: flex;
  justify-content: center;
  gap: 0;
  background: rgba(0,0,0,0.7);
}
.olo-proslider-tab {
  /* Sono <button>: senza questo azzeramento resta il fondo di sistema (ButtonFace, grigio chiaro) e il
     testo chiaro delle schede non si legge, dove il tema non ripulisce i pulsanti (catalogo, 6 ott 2026). */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  font-family: inherit;
  line-height: 1.3;
  padding: 12px 20px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  white-space: nowrap;
}
.olo-proslider-tab:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); }
.olo-proslider-tab.mps-tab-active {
  color: #fff;
  border-bottom-color: var(--olo-color-primary, #e1474f);
}
/* Tabs position: top */
.mps-tabs-top { top:0; bottom:auto; border-bottom: 1px solid rgba(255,255,255,0.15); }
.mps-tabs-top .olo-proslider-tab { border-bottom:none; border-top: 3px solid transparent; }
.mps-tabs-top .olo-proslider-tab.mps-tab-active { border-top-color: var(--olo-color-primary, #e1474f); }

/* ═══════════════════════════════════════════════════════════
   Scroll-Fixed Timeline (pin slider during scroll)
   ═══════════════════════════════════════════════════════════ */
.mps-scroll-fixed-wrapper {
  position: relative;
}
.mps-scroll-fixed-wrapper .olo-proslider {
  position: sticky;
  top: 0;
}
/* A tutta larghezza con la timeline a scorrimento: lo slider è sticky, quindi left: 50% non lo sposta più e la sola
   traslazione lo mandava mezzo fuori a sinistra (31 ott 2026). La larghezza piena la prende il contenitore che scorre. */
.mps-scroll-fixed-wrapper:has(> .olo-proslider.mps-fullwidth) { width: 100vw; margin-left: calc(50% - 50vw); }
.mps-scroll-fixed-wrapper > .olo-proslider.mps-fullwidth { width: 100%; left: auto; transform: none; }

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  /* Su tablet e telefono le frecce scendono negli angoli in basso, all'altezza dei punti: a metà altezza
     coprivano l'inizio dei testi, che stanno a sinistra proprio dove sta la freccia. La freccia ha misura
     fissa e la tela si stringe: un testo al 6% della tela del tablet (1024) a 880 px parte a 53 px, sotto
     la freccia (da 16 a 64). Prima valeva solo sotto i 640. 1200 è la soglia del tablet orizzontale del
     contratto dei breakpoint (la tela del tablet parte da 1024, che nel contratto non c'è). Con le
     miniature sotto (che occupano il fondo) restano a metà. */
  .olo-proslider:not(:has(+ .olo-proslider-thumbs)) > .olo-proslider-arrow { top: auto; bottom: 6px; transform: none; }
}
@media (max-width: 640px) {
  .olo-proslider-arrow { width: 36px; height: 36px; font-size: 18px; }
  .olo-proslider-prev { left: 8px; }
  .olo-proslider-next { right: 8px; }
  .olo-proslider-dots { bottom: 10px; gap: 6px; }
  .olo-proslider-dot { width: 10px; height: 10px; }
  .olo-proslider-layer { font-size: 0.6em !important; }
}

/* ═══════════════════════════════════════════════════════════
   Preset stilistici (menu «Stile» del tab Stile)
   ═══════════════════════════════════════════════════════════
   La classe olo-ps-preset-<nome> usciva nel markup ma nessuna regola la leggeva:
   i 12 preset cambiavano solo riproduzione e transizione, e a vederli erano tutti
   uguali. Ora ognuno è una FINITURA del riquadro sopra le diapositive dell'utente:
   - velo, luce, tinta → ::after di .olo-proslider-bg, SOTTO i livelli (i testi non
     si scuriscono);
   - cornice, trama → ::after della radice (z 4), sopra i livelli e sotto frecce e
     punti (z 10).
   Livelli e colori salvati non si toccano: ombra, maiuscolo e spaziatura scritti sul
   livello sono inline e vincono; il Bordo della tile (regola su #id) vince sulla
   cornice. Colori solo dai token della palette. */
.olo-ps-preset-cinema-hero::after,
.olo-ps-preset-magazine-cover::after,
.olo-ps-preset-glass-overlay::after,
.olo-ps-preset-brutalist-mega::after,
.olo-ps-preset-sticker-fun::after,
.olo-ps-preset-retro-vhs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
}
.olo-ps-preset-cinema-hero .olo-proslider-bg::after,
.olo-ps-preset-magazine-cover .olo-proslider-bg::after,
.olo-ps-preset-editorial-split .olo-proslider-bg::after,
.olo-ps-preset-product-showcase .olo-proslider-bg::after,
.olo-ps-preset-glass-overlay .olo-proslider-bg::after,
.olo-ps-preset-neon-tron .olo-proslider-bg::after,
.olo-ps-preset-gradient-aurora .olo-proslider-bg::after,
.olo-ps-preset-retro-vhs .olo-proslider-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Cinema Hero — bande del formato cinema e vignettatura */
.olo-ps-preset-cinema-hero::after {
  background: linear-gradient(to bottom, var(--olo-color-dark, #0b0d12) 0 5%, transparent 5% 95%, var(--olo-color-dark, #0b0d12) 95%);
}
.olo-ps-preset-cinema-hero .olo-proslider-bg::after {
  background: radial-gradient(ellipse at center, transparent 48%, color-mix(in srgb, var(--olo-color-dark, #0b0d12) 62%, transparent) 100%);
}

/* Magazine Cover — filetto interno da copertina, luce in testata e al piede */
.olo-ps-preset-magazine-cover::after {
  inset: clamp(10px, 2.2%, 22px);
  border: 1px solid color-mix(in srgb, var(--olo-color-light, #ffffff) 72%, transparent);
}
.olo-ps-preset-magazine-cover .olo-proslider-bg::after {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--olo-color-dark, #0b0d12) 45%, transparent) 0%, transparent 28%, transparent 62%, color-mix(in srgb, var(--olo-color-dark, #0b0d12) 55%, transparent) 100%);
}

/* Editorial Split — metà del testo in ombra, la foto libera a destra */
.olo-ps-preset-editorial-split .olo-proslider-bg::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--olo-color-dark, #0b0d12) 82%, transparent) 0%, color-mix(in srgb, var(--olo-color-dark, #0b0d12) 55%, transparent) 42%, transparent 68%);
}

/* Minimal Clean — angoli morbidi e un'ombra appena accennata */
.olo-proslider.olo-ps-preset-minimal-clean {
  border-radius: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--olo-color-dark, #0b0d12) 8%, transparent), 0 14px 32px -20px color-mix(in srgb, var(--olo-color-dark, #0b0d12) 35%, transparent);
}

/* Product Showcase — palco con la luce al centro */
.olo-proslider.olo-ps-preset-product-showcase {
  border-radius: 24px;
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--olo-color-dark, #0b0d12) 60%, transparent);
}
.olo-ps-preset-product-showcase .olo-proslider-bg::after {
  background: radial-gradient(ellipse 60% 55% at 50% 58%, color-mix(in srgb, var(--olo-color-light, #ffffff) 24%, transparent), transparent 72%);
}

/* Glass Overlay — riflesso di vetro in diagonale e bordo di luce */
.olo-proslider.olo-ps-preset-glass-overlay {
  border-radius: 20px;
}
.olo-ps-preset-glass-overlay::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--olo-color-light, #ffffff) 38%, transparent);
}
.olo-ps-preset-glass-overlay .olo-proslider-bg::after {
  background: linear-gradient(125deg, color-mix(in srgb, var(--olo-color-light, #ffffff) 28%, transparent) 0%, color-mix(in srgb, var(--olo-color-light, #ffffff) 6%, transparent) 38%, transparent 56%);
}

/* Neon Tron — alone al neon, griglia luminosa e testi che brillano */
.olo-proslider.olo-ps-preset-neon-tron {
  box-shadow: 0 0 0 1px var(--olo-color-accent, #22d3ee), 0 0 18px color-mix(in srgb, var(--olo-color-accent, #22d3ee) 55%, transparent), 0 0 48px color-mix(in srgb, var(--olo-color-accent, #22d3ee) 28%, transparent);
}
.olo-ps-preset-neon-tron .olo-proslider-bg::after {
  background:
    linear-gradient(to top, color-mix(in srgb, var(--olo-color-accent, #22d3ee) 30%, transparent), transparent 38%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--olo-color-accent, #22d3ee) 16%, transparent) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--olo-color-accent, #22d3ee) 16%, transparent) 0 1px, transparent 1px 48px);
}
.olo-ps-preset-neon-tron .olo-proslider-layer {
  text-shadow: 0 0 6px color-mix(in srgb, var(--olo-color-accent, #22d3ee) 85%, transparent), 0 0 20px color-mix(in srgb, var(--olo-color-accent, #22d3ee) 50%, transparent);
}

/* Brutalist Mega — cornice spessa, ombra piena sfalsata, testi in maiuscolo */
.olo-proslider.olo-ps-preset-brutalist-mega {
  box-shadow: 12px 12px 0 0 var(--olo-color-primary, #e1474f);
}
.olo-ps-preset-brutalist-mega::after {
  border: 4px solid var(--olo-color-dark, #0b0d12);
}
/* Anche sul figlio diretto: i titoli (h1-h6) ricevono text-transform e letter-spacing
   dal sistema stile (.olo-template h2) e non li ereditano dal livello. Maiuscolo e
   spaziatura scelti sul livello stanno inline sul figlio e vincono comunque. */
.olo-ps-preset-brutalist-mega .olo-proslider-layer,
.olo-ps-preset-brutalist-mega .olo-proslider-layer > * {
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Gradient Aurora — veli di colore della palette che scorrono piano */
.olo-ps-preset-gradient-aurora .olo-proslider-bg::after {
  background:
    radial-gradient(60% 80% at 15% 20%, color-mix(in srgb, var(--olo-color-primary, #e1474f) 60%, transparent), transparent 70%),
    radial-gradient(55% 75% at 85% 30%, color-mix(in srgb, var(--olo-color-accent, #f4a23b) 55%, transparent), transparent 70%),
    radial-gradient(70% 70% at 50% 100%, color-mix(in srgb, var(--olo-color-secondary, #64748b) 55%, transparent), transparent 70%);
  background-size: 160% 160%;
  opacity: .6;
  animation: mpsPresetAurora 16s ease-in-out infinite alternate;
}
@keyframes mpsPresetAurora { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Sticker Fun — bordo bianco da adesivo e ombra piena colorata */
.olo-proslider.olo-ps-preset-sticker-fun {
  border-radius: 28px;
  box-shadow: 8px 10px 0 0 var(--olo-color-accent, #f4a23b);
}
.olo-ps-preset-sticker-fun::after {
  border: 6px solid var(--olo-color-light, #ffffff);
}

/* Retro VHS — righe del nastro, colori spinti, testo sdoppiato in due colori */
.olo-ps-preset-retro-vhs::after {
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--olo-color-dark, #0b0d12) 24%, transparent) 0 1px, transparent 1px 3px);
}
.olo-ps-preset-retro-vhs .olo-proslider-bg::after {
  background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--olo-color-dark, #0b0d12) 50%, transparent) 100%);
}
.olo-ps-preset-retro-vhs .olo-proslider-bg img,
.olo-ps-preset-retro-vhs .olo-proslider-bg video {
  filter: saturate(1.3) contrast(1.08);
}
.olo-ps-preset-retro-vhs .olo-proslider-layer {
  text-shadow: 2px 0 color-mix(in srgb, var(--olo-color-primary, #e1474f) 75%, transparent), -2px 0 color-mix(in srgb, var(--olo-color-accent, #22d3ee) 75%, transparent);
}

/* Tilt Parallax — il riquadro inclinato in prospettiva si raddrizza al passaggio.
   Non in larghezza piena né a schermo intero: lì il transform serve già a
   centrare (translateX(-50%)) e la regola lo cancellerebbe. */
.olo-proslider.olo-ps-preset-tilt-parallax:not(.mps-fullwidth):not(.mps-fullscreen) {
  border-radius: 14px;
  transform: perspective(1200px) rotateX(2deg);
  transform-origin: 50% 100%;
  box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--olo-color-dark, #0b0d12) 60%, transparent);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease;
}
.olo-proslider.olo-ps-preset-tilt-parallax:not(.mps-fullwidth):not(.mps-fullscreen):hover {
  transform: perspective(1200px) rotateX(0deg) translateY(-4px);
  box-shadow: 0 40px 70px -34px color-mix(in srgb, var(--olo-color-dark, #0b0d12) 66%, transparent);
}
.olo-tile-fullwidth > .olo-proslider.olo-ps-preset-tilt-parallax:not(.mps-fullwidth):not(.mps-fullscreen),
.olo-tile-fullwidth > .olo-proslider.olo-ps-preset-tilt-parallax:not(.mps-fullwidth):not(.mps-fullscreen):hover {
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .olo-ps-preset-gradient-aurora .olo-proslider-bg::after { animation: none; }
  .olo-proslider.olo-ps-preset-tilt-parallax:not(.mps-fullwidth):not(.mps-fullscreen) { transition: none; }
}