/* =========================================================
   simple-slider — CSS
   Stage fisso 1040×450, scalato via transform: scale()
   ========================================================= */

/* --- Wrapper esterno --- */
.simple-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  line-height: 1.2;
}

/* --- Stage a risoluzione fissa --- */
.simple-slider-stage {
  position: relative;
  width: 1040px;
  height: 450px;
  overflow: hidden;
  transform-origin: top left;
}

/* --- Singola slide --- */
.simple-slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}

.simple-slider-slide.ss-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* --- Transizione "Slide To Left" --- */
.simple-slider-slide.ss-leaving {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  animation: ss-slide-out-left var(--ss-transition-duration, 300ms) ease both;
}

.simple-slider-slide.ss-entering {
  opacity: 1;
  visibility: visible;
  z-index: 3;
  animation: ss-slide-in-left var(--ss-transition-duration, 300ms) ease both;
}

@keyframes ss-slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes ss-slide-in-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* --- Testi sopra le slide --- */
.simple-slider-text {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* Animazioni testo IN */
.ss-anim-in-fade {
  animation: ss-fade-in var(--ss-anim-duration, 600ms) ease var(--ss-anim-delay, 0ms) both;
}
.ss-anim-in-slideUp {
  animation: ss-slideUp-in var(--ss-anim-duration, 600ms) ease var(--ss-anim-delay, 0ms) both;
}
.ss-anim-in-slideLeft {
  animation: ss-slideLeft-in var(--ss-anim-duration, 600ms) ease var(--ss-anim-delay, 0ms) both;
}
.ss-anim-in-longFromBottom {
  animation: ss-longFromBottom-in var(--ss-anim-duration, 1300ms) cubic-bezier(0.65, 0, 0.35, 1) var(--ss-anim-delay, 0ms) both;
}
.ss-anim-in-longFromTop {
  animation: ss-longFromTop-in var(--ss-anim-duration, 900ms) cubic-bezier(0.65, 0, 0.35, 1) var(--ss-anim-delay, 0ms) both;
}
.ss-anim-in-longFromRight {
  animation: ss-longFromRight-in var(--ss-anim-duration, 900ms) cubic-bezier(0.65, 0, 0.35, 1) var(--ss-anim-delay, 0ms) both;
}
.ss-anim-in-longFromLeft {
  animation: ss-longFromLeft-in var(--ss-anim-duration, 900ms) cubic-bezier(0.65, 0, 0.35, 1) var(--ss-anim-delay, 0ms) both;
}

/* Animazioni testo OUT */
.ss-anim-out-fade {
  animation: ss-fade-out var(--ss-anim-duration, 400ms) ease var(--ss-anim-delay, 0ms) both;
}
.ss-anim-out-slideUp {
  animation: ss-slideUp-out var(--ss-anim-duration, 400ms) ease var(--ss-anim-delay, 0ms) both;
}
.ss-anim-out-slideLeft {
  animation: ss-slideLeft-out var(--ss-anim-duration, 400ms) ease var(--ss-anim-delay, 0ms) both;
}
.ss-anim-out-longToRight {
  animation: ss-longToRight-out var(--ss-anim-duration, 300ms) cubic-bezier(0.65, 0, 0.35, 1) var(--ss-anim-delay, 0ms) both;
}

@keyframes ss-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ss-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ss-slideUp-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ss-slideUp-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-40px); }
}

@keyframes ss-slideLeft-in {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ss-slideLeft-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-60px); }
}

/* "Long from Bottom/Top" — entra dal basso o dall'alto con grande escursione (RevSlider) */
@keyframes ss-longFromBottom-in {
  from { opacity: 0; transform: translateY(200px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ss-longFromTop-in {
  from { opacity: 0; transform: translateY(-200px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ss-longFromRight-in {
  from { opacity: 0; transform: translateX(200px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ss-longFromLeft-in {
  from { opacity: 0; transform: translateX(-200px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* "Long to Right" — esce verso destra con grande escursione (RevSlider) */
@keyframes ss-longToRight-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(200px); }
}

/* --- Frecce navigazione (stile RevSlider) --- */
.ss-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 53px;
  height: 53px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease;
  padding: 0;
}

.ss-arrow:hover {
  background: rgba(0, 0, 0, 0.55);
}

.ss-arrow-left {
  left: 10px;
}

.ss-arrow-right {
  right: 10px;
}

.simple-slider-wrapper:hover .ss-arrow {
  opacity: 1;
}

/* --- Pallini (dots) --- */
.ss-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.simple-slider-wrapper:hover .ss-dots {
  opacity: 1;
}

.ss-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.ss-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.ss-dot.ss-dot-active {
  background: #fff;
}

/* --- Nasconde i pallini su mobile --- */
@media (max-width: 768px) {
  .ss-dots {
    display: none;
  }
}

/* --- Riduzione movimento --- */
@media (prefers-reduced-motion: reduce) {
  .simple-slider-slide.ss-leaving,
  .simple-slider-slide.ss-entering {
    animation-duration: 0ms;
  }

  .simple-slider-text,
  [class*="ss-anim-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}