.elementor-widget-carousel_magic {
  overflow-x: clip;
  .carousel {
    position: relative;
    z-index: 1;
    height: 80vh;
    @media screen and (max-width:769px) {
        height: 360px;
    }
    
    pointer-events: none;
  }

  .carousel-item {
    --items: 3;
    
    /* === IMPOSTAZIONI FISSE === */
    --spacing-x: 350px;   /* distanza orizzontale costante */
    --spacing-y: 50px;    /* distanza verticale costante */
    --rotation: 10deg;    /* rotazione fissa */
    
    /* USA INDICE RELATIVO (var(--active)) PER POSIZIONAMENTO */
    --x: calc(var(--active) * var(--spacing-x));
    --y: calc(var(--active) * var(--spacing-y));
    --rot: calc(var(--active) * var(--rotation));

    --width: clamp(200px, 30vw, 300px);
    --height: clamp(300px, 40vw, 480px);
    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);

    overflow: hidden;
    position: absolute;
    z-index: var(--zIndex);
    width: var(--width);
    height: var(--height);
    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    user-select: none;
    transform-origin: 0% 100%;
    box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .5);
    background: black;
    pointer-events: none;
    user-select: none;
    /* IL TRASFORMO ORA È FISSO E CONTROLLO */
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    transition: transform .8s cubic-bezier(0, 0.02, 0, 1);

    .carousel-box {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
      opacity: var(--opacity);
      font-family: "field-gothic-wide", serif;
        pointer-events: all;
      &::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, .3),
          rgba(0, 0, 0, 0) 30%,
          rgba(0, 0, 0, 0) 50%,
          rgba(0, 0, 0, .5)
        );
      }
    }

    .title {
      position: absolute;
      z-index: 1;
      color: #fff;
      bottom: 20px;
      left: 20px;
      transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
      font-size: clamp(16px, 3vw, 24px);
      text-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    }

    .num {
      position: absolute;
      z-index: 1;
      color: #fff;
      top: 10px;
      left: 20px;
      transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
      font-size: clamp(20px, 10vw, 80px);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
  }

  .cursor {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    --size: 40px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
    transition: transform .85s cubic-bezier(0, 0.02, 0, 1);
    display: none;
    pointer-events: none;

    @media (pointer: fine) {
      display: block;
    }
  }

  .cursor2 {
    --size: 2px;
    transition-duration: .7s;
  }

  .carousel-wrapper{
    position:relative;
    }

    .carousel-arrow{
    position: absolute !important;;
    top: 50% !important;;
    transform:translateY(-50%);
    z-index:100;
    background:none;
    border:none;
    cursor:pointer;
    background:white;
    padding:10px!important;
    border-radius: 1000px !important;;
    }

    .carousel-arrow.prev{ left:20px; }
    .carousel-arrow.next{ right:20px; }

    .carousel-arrow svg{
    width:28px;
    height:28px;
    }
}