/* === ULISSE SVG DECK – DARK GRID === */
:root{
--neon-blue: #5fd7ff;
}

.ulisse-deck{
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    #000;
  background-size:80px 80px;
  overflow:hidden;
  z-index:9999;
  font-family:system-ui, sans-serif;
}

#particles-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.ulisse-deck > *{
  position:relative;
  z-index:1;
}

.wrap{min-height:100%;display:flex;align-items:center;justify-content:center}
.shell{width:min(1040px,94vw)}
.frame{
  border-radius:26px;
  border:2px solid rgba(44,255,155,.85);
  background:rgba(0,0,0,.55);
  box-shadow:0 0 40px rgba(44,255,155,.45),0 0 90px rgba(44,255,155,.25);
}
.stage{aspect-ratio:16/10;padding:12px}
.stage-inner{position:relative;border-radius:18px;overflow:hidden}

.slide{
  position:absolute;
  inset:0;
  padding:22px;

  opacity:0;
  pointer-events:none;
  transform: scale(1.02);

  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1),
    transform 1.6s cubic-bezier(.22,.61,.36,1);
}

.slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform: scale(1);
}

/* === SLIDE SURFACE (MANCAVA) === */
.slide-surface{
  position: relative;
  width: 100%;
  height: 100%;               /* 🔥 QUESTO È IL PUNTO CHIAVE */
  border-radius: 18px;
  overflow: hidden;
}

/* === HEIGHT FIX (CRITICAL) === */
.stage-inner{
  height: 100%;
}

.slide{
  height: 100%;
}

.slide-surface{
  height: 100%;
}

.slide-media{display:flex;align-items:center;justify-content:center;height:100%}
.slide-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
  filter:brightness(.9) contrast(1.05);
}

.nav{position:absolute;inset:0;pointer-events:none}
.arrow{
  border: 1px solid color-mix(in srgb, var(--neon-blue) 65%, transparent);
  background: color-mix(in srgb, var(--neon-blue) 12%, rgba(0,0,0,.55));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--neon-blue) 45%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--neon-blue) 18%, transparent);
  pointer-events:auto;
  position:absolute;
  top:50%;
}

/* icona freccia */
.arrow svg path,
.arrow{
  color: var(--neon-blue);
}

/* hover più “neon” */
/* ===== NEON STATE – DESKTOP & MOBILE SAFE ===== */
.arrow:hover,
.arrow:active,
.arrow:focus-visible,
.arrow:focus:not(:focus-visible){
  border-color: var(--neon-blue);
  background: rgba(0,0,0,.65);

  box-shadow:
    0 0 14px var(--neon-blue),
    0 0 32px rgba(95,215,255,.85),
    0 0 60px rgba(95,215,255,.55),
    inset 0 0 18px rgba(95,215,255,.45);
}

/* icona sempre neon quando attiva */
.arrow:hover svg path,
.arrow:active svg path,
.arrow:focus-visible svg path,
.arrow:focus:not(:focus-visible) svg path{
  stroke: var(--neon-blue);
  filter:
    drop-shadow(0 0 6px var(--neon-blue))
    drop-shadow(0 0 12px rgba(95,215,255,.85));
}

/* rimuove outline nativo (sostituito dal glow) */
.arrow:focus{
  outline: none;
}


.arrow.left{left:12px}
.arrow.right{right:12px}
/* ===== NEON PROGRESS INDICATOR ===== */

.dots{
  position:absolute;
  left:50%;
  bottom: 4px;              /* 👈 più vicino al bordo */
  transform: translateX(-50%) translateY(100%);
  display:flex;
  gap:8px;
  padding:8px 10px;
}


/* segmento base */
.dot{
  width:26px;
  height:6px;
  border-radius:2px;

  background: transparent;
  border: 1px solid rgba(95,215,255,.35);

  box-shadow:
    inset 0 0 0 1px rgba(95,215,255,.15);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}


/* hover (desktop) */
.dot:hover{
  background: rgba(95,215,255,.45);
  box-shadow: 0 0 10px rgba(95,215,255,.6);
  transform: scaleY(1.2);
}

/* slide attiva */
.dot.is-active{
  background: transparent;

  border-color: var(--neon-blue);

  box-shadow:
    0 0 6px var(--neon-blue),
    0 0 14px rgba(95,215,255,.9),
    inset 0 0 6px rgba(95,215,255,.6);

  transform: scaleY(1.35);
}

/* ===== MOBILE: FRAME VERTICALE ===== */
@media (max-width: 700px) {

  /* contenitore esterno più stretto */
  .shell{
    width: min(420px, 94vw);
  }

  /* frame mantiene il glow ma segue il verticale */
  .frame{
    border-radius: 24px;
  }

  /* stage verticale */
  .stage{
    aspect-ratio: 9 / 16;
    padding: 10px;
  }

  .stage-inner{
    inset: 10px;
    border-radius: 20px;
  }

  /* SVG mobile: niente taglio */
  .slide-media img{
    object-fit: contain;
  }
}