:root{
      /* tempi & easing */
      --transition-ms: 1600ms; /* zoom+blur: verrà aggiornato per coprire il loading */
      --easing: cubic-bezier(.22,.55,.15,1);

      /* dots */
      --dot-size: 12px; --dot-gap: 10px; --dot-border: 2px;

      /* floating 3D base */
      --float-duration: 18s;  /* loop morbido */
      --float-scale: 1.20;    /* zoom per evitare bordi con pan */

      /* layering effetti */
      --dust-z: 4;   /* pulviscolo: sopra i video, sotto fumo/testi */
      --smoke-z: 5;  /* fumo: sopra i video, sotto i testi */

      /* pulviscolo tuning (i tuoi valori) */
      --dust-opacity: 1;
      --dust-density: 400;
      --dust-speed: 0.9;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; overflow: hidden; color: #fff; background: #000; }
	 
	h1 {
	font-size: 40px!important;
	line-height: 45px!important;
     } 

    .slider { position: relative; width: 100vw; height: 100vh; isolation: isolate; touch-action: none; 
	background: url("link/bg-sito.jpg"); 
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	perspective: 1200px; overflow: hidden; }

    .slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1); filter: blur(0px); transition: opacity var(--transition-ms) var(--easing), transform var(--transition-ms) var(--easing), filter var(--transition-ms) var(--easing); will-change: opacity, transform, filter; }
    .slide.active { opacity: 1; }

    .slide.loading { animation: loadingZoomBlur 900ms var(--easing) infinite alternate; }
    @keyframes loadingZoomBlur { from { transform: scale(1.02); filter: blur(6px); } to { transform: scale(1.12); filter: blur(9px); } }
    .slide.entering { opacity: 0; transform: scale(1.06); filter: blur(10px); }
    .slide.exiting  { opacity: 0; transform: scale(2.8);  filter: blur(32px); }

    /* video layer */
    .video-wrap{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
    .video-parallax{ position:absolute; inset:0; will-change: transform; transition: transform 120ms ease-out; }

    .slide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition: opacity .8s ease; transform-origin:center; backface-visibility:hidden; will-change:opacity,transform; animation: float3d var(--float-duration) ease-in-out infinite; animation-play-state: paused; }
    .slide video.video-visible{ opacity:1; animation-play-state: running; }

    @keyframes float3d {
      0%{   transform: translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(var(--float-scale)); }
      33%{  transform: translate3d(1.6%, -1.1%, 0) rotateX(.7deg) rotateY(-.9deg) rotateZ(-.25deg) scale(var(--float-scale)); }
      66%{  transform: translate3d(-1.2%, 1.3%, 0) rotateX(-.7deg) rotateY(.9deg) rotateZ(.25deg) scale(var(--float-scale)); }
      100%{ transform: translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)  scale(var(--float-scale)); }
    }

    /* poster di fallback (nessun fondino testi) */
    .fallback{ position:absolute; inset:0; z-index:-1; background-position:center; background-size:cover; background-repeat:no-repeat; filter: blur(2px) saturate(105%) brightness(0.95); transform: scale(var(--float-scale)); opacity:1; transition: opacity .4s ease; }

    /* CANVAS: Pulviscolo (uno per slide) e Fumo */
    .dust-layer{ position:absolute; inset:0; z-index:var(--dust-z); pointer-events:none; mix-blend-mode: plus-lighter; opacity: var(--dust-opacity); }
    #smoke{ position:absolute; inset:0; z-index:var(--smoke-z); pointer-events:none; }

    /* overlay SEMPRE sopra (nessun background) */
    .overlay, .dots{ position: relative; z-index: 10; }
    .overlay{ max-width:min(90vw,1300px); padding:24px 28px; text-align:center; }
    .overlay h2{ font-size:clamp(28px,4vw,56px); margin:0 0 8px; }
    .overlay p{ font-size:clamp(16px,2.1vw,20px); margin:0; opacity:.9; }


.overlay {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.overlay a, .overlay button {
  pointer-events: auto !important;
  position: relative;
  z-index: 20;
}


 .dots{ display: none!important;}

    .dots{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; gap:var(--dot-gap); pointer-events:auto;  }
    .dot{ width:var(--dot-size); height:var(--dot-size); border-radius:50%; border:var(--dot-border) solid rgba(255,255,255,.95); background:transparent; cursor:pointer; padding:0; outline:none; display:inline-block; opacity:.9; }
    .dot[aria-current="true"]{ background:#fff; }

    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    @media (prefers-reduced-motion: reduce){ :root{ --transition-ms:0ms; } .slide.loading{ animation:none; } .slide video{ animation:none !important; } }

	
	/* tutte le slide NON devono prendere eventi */
.slide{
  pointer-events: none;
  z-index: 0;
}

/* solo la slide attiva prende click */
.slide.active{
  pointer-events: auto;
  z-index: 1;
}

/* durante la transizione, anche entering/exiting devono poter ricevere eventi se serve */
.slide.entering,
.slide.exiting{
  pointer-events: auto;
  z-index: 2;
}

.video-mobile{
  display: none;
}

@media (max-width: 768px){
  .video-desktop{
    display: none;
  }
  .video-mobile{
    display: block!important;
  }
  .slide .video-mobile{
    opacity: 1 !important;
  }	
	
}







/* Scroll cue */
.scroll-cue{
  --cue-line-h: 120px;
  --cue-dot: #FAC775;

  position: absolute;
  right: clamp(16px, 4vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 11;
  pointer-events: none;
}

.scroll-cue-line{
  position: relative;
  width: 1px;
  height: var(--cue-line-h);
  background: rgba(255,255,255,.35);
  flex-shrink: 0;
}

.scroll-cue-dot{
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--cue-dot);
  box-shadow: 0 0 8px rgba(250,199,117,.7);
  animation: scrollCueFall 2.2s ease-in-out infinite;
}

.scroll-cue-label{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "ApfelGrotezk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 1;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  margin: 0;
}

/* desktop: il pallino scende */
@keyframes scrollCueFall{
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(calc(var(--cue-line-h) - 2px)); opacity: 0; }
}

/* mobile: il pallino sale (rispecchia il dito che scorre verso l'alto) */
@keyframes scrollCueRise{
  0%   { transform: translateY(calc(var(--cue-line-h) - 2px)); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

/* responsive: più grande su mobile, niente testo, direzione invertita */
@media (max-width: 768px){
  .scroll-cue{
    --cue-line-h: 150px;
    right: clamp(14px, 5vw, 28px);
  }
  .scroll-cue-dot{
    width: 12px;
    height: 12px;
    margin-left: -6px;
    animation-name: scrollCueRise;
  }
  .scroll-cue-label{
    display: none;
  }
}

/* schermi molto piccoli o landscape basso */
@media (max-width: 380px), (max-height: 480px){
  .scroll-cue{
    --cue-line-h: 100px;
    right: 12px;
  }
  .scroll-cue-dot{
    width: 10px;
    height: 10px;
    margin-left: -5px;
  }
}

/* safe-area per iPhone con notch in landscape */
@supports (right: env(safe-area-inset-right)){
  .scroll-cue{
    right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue-dot{
    animation: none;
    opacity: .8;
  }
}