/* bulb-lights.css
   Aggiornato per header: rimuove ombre/angoli, gestisce dimensioni via variabile --scene-height,
   fornisce immagine 'bright' mascherata localmente e stili per orb + trail dots.
*/
/* ===== RESET E BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;   /* solo blocco orizzontale */
    overflow-y: auto;     /* consenti scroll verticale */
    position: relative;   /* niente fixed */
}


/* Assicura che il container principale non causi overflow */
.scroll-snap-container {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    position: relative;
}

.scroll-snap-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
/* ===== SEZIONI SNAP ===== */
.snap-section {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

.bulb-scene{
  position:relative;
  width:100%;
  height: var(--scene-height, auto); /* es. --scene-height: 60vh; */
  aspect-ratio: var(--scene-aspect, 16/9);
  overflow:hidden;
  background:#000;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* base e bright image (stessa src) */
.scene-media,
.scene-media--base,
.scene-media--bright {
  position:absolute;
  left:0; top:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
  -webkit-user-drag: none;
  user-select:none;
  z-index:0;
}

/* base: immagine sotto (quella da rivelare nelle zone illuminate) */
.scene-media--base{
  z-index:0;
  filter: brightness(1.0) saturate(1.0) contrast(1.0); /* Immagine normale */
}

.scene-media,
.scene-media--bright {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* bright: immagine sopra che copre tutto tranne le zone illuminate */
.scene-media--bright {
    z-index: 1;
    filter: brightness(1.2) saturate(1.1) contrast(1.05);
    opacity: 0;          /* Inizia invisibile */
    transition: opacity 0.3s ease, mask-image 0.3s ease;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
/* Trigger area DEBUG (disattiva dopo test) */
.trigger-visual {
  border: 1px solid white !important;   /* <-- DEBUG: bordo bianco */
  z-index: 5000;
  pointer-events: none;      /* non blocca orb né click */
  background-color: rgba(255, 0, 0, 0.1);
  position: auto;
}

/* overlay luci */
.lights-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* glow statico/pulsante (solo visivo; la vera 'illuminazione' è la bright image mascherata) */
.bulb-glow {
  position: absolute;
  left: var(--bulb-x, 72%);
  top: var(--bulb-y, 20%);
  transform: translate(-50%, -50%);
  width: 720px; 
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, 
    rgba(255, 255, 240, 0.7) 0%, 
    rgba(255, 240, 200, 0.4) 30%, 
    rgba(255, 220, 160, 0.2) 50%, 
    transparent 80%);
  filter: blur(20px) saturate(1.3);
  opacity: 0.6;
  animation: bulbPulse 4s ease-in 1 forwards; /* una volta e resta acceso */
  z-index: 3;
  mix-blend-mode: screen;
}

/* orb container (posizionato via JS) */
/* Orb base */
.orb {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity, background;
}

/* Orb0: lampadina fissa */
.orb0 {
box-shadow:
    0 0 calc(var(--bulb-size) * 0.8) rgba(255, 255, 220, calc(var(--bulb-intensity) * 0.8)),
    0 0 calc(var(--bulb-size) * 2) rgba(255, 240, 180, calc(var(--bulb-intensity) * 0.6)),
    0 0 calc(var(--bulb-size) * 4) rgba(255, 200, 120, calc(var(--bulb-intensity) * 0.3));
}


/* Orb2: mobile con scia */
.orb2 {
  box-shadow:
    0 0 calc(var(--orb2-size) * 0.8) rgba(255, 220, 150, calc(var(--orb2-intensity) * 0.9)),
    0 0 calc(var(--orb2-size) * 2.5) rgba(255, 180, 80, calc(var(--orb2-intensity) * 0.7)),
    0 0 calc(var(--orb2-size) * 5) rgba(255, 120, 30, calc(var(--orb2-intensity) * 0.4));
}

/* Opzionale: effetto vignettatura globale */
.bulb-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--bulb-x) var(--bulb-y), rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

.orb-core {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 230, 0.95) 20%, 
    rgba(255, 240, 180, 0.8) 50%, 
    rgba(255, 200, 100, 0.5) 80%, 
    transparent 100%);
  filter: blur(6px) saturate(1.8);
  box-shadow: 
    0 0 15px rgba(255, 255, 240, 0.9),
    0 0 30px rgba(255, 220, 150, 0.7);
  mix-blend-mode: overlay;
  animation: corePulse 3s infinite ease-in-out;
}

.trail-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: plus-lighter;
}

/* Nuovo stile per le scie a cometa */
.trail-dot {
  position: absolute;
  width: 24px; 
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 255, 240, 0.8) 30%, 
    rgba(255, 240, 200, 0.5) 60%, 
    transparent 90%);
  filter: blur(8px) saturate(1.2);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 3;
  mix-blend-mode: soft-light;
}

/* Aggiungi questo per un effetto di alone più marcato */
.trail-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: hard-light;
}
/* vignette per contrasto */
.vignette{
  position:absolute;
  inset:0;
  z-index:5;
  mix-blend-mode:multiply;
  background: radial-gradient(1200px 600px at 40% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 40%, rgba(0,0,0,0.5) 100%);
  pointer-events:none;
}

/* pulse keyframes */
@keyframes bulbPulse {
  0%   { opacity: 0.14; transform: translate(-50%, -50%) scale(0.94); }
  30%  { opacity: 0.6;  transform: translate(-50%, -50%) scale(1.06); }
  60%  { opacity: 0.8;  transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0.8;  transform: translate(-50%, -50%) scale(1.02); } /* rimane acceso */
}

@keyframes trailFade {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes corePulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.9; 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 1; 
  }
}

/* specifiche per header full height */
.bulb-scene.header-full { height: var(--scene-height, 100vh); aspect-ratio: 3/2 !important; }
.bulb-scene {
    /* Valori trigger di default - verranno sovrascritti dalle media queries */
    --trigger-x: var(--trigger-x-desktop, 21);
    --trigger-y: var(--trigger-y-desktop, 50);
    --trigger-radius: var(--trigger-radius-desktop, 15);
}

/* Mobile Landscape */
@media (max-width: 767px) and (orientation: landscape) {
    .bulb-scene {
        --bulb-x: 25% !important;
        --bulb-y: 15% !important;
        --bulb-size: 80px;
        --bulb-intensity: 0.7;
        --trigger-x: 30 !important;
        --trigger-y: 50 !important;
        --trigger-radius: 30 !important;
    }
    
    .bulb-scene,
    .bulb-scene .scene-media,
    .bulb-scene .scene-media--base,
    .bulb-scene .scene-media--bright {
        height: 100vh !important;
        width: 100vw !important;
        aspect-ratio: unset !important;
    }
}

/* Correzione per dispositivi molto piccoli */
@media (max-width: 320px) {
    .bulb-scene {
        --bulb-x: 25% !important;
        --bulb-y: 10% !important;
        --bulb-size: 80px;
        --bulb-intensity: 0.7;
        --trigger-x: 30 !important;
        --trigger-y: 50 !important;
        --trigger-radius: 35 !important;
    }
}

/* Mobile Portrait */
@media (max-width: 767px) and (orientation: portrait) {
    .bulb-scene {
        --bulb-x: 52% !important;
        --bulb-y: 22.5% !important;
        --bulb-size: 100px;
        --bulb-intensity: 0.8;
        --trigger-x: 50 !important;
        --trigger-y: 45 !important;  /* Più centrato invece di 70 */
        --trigger-radius: 30 !important;  /* Raggio più grande */
    }
    
    /* Gestione immagini responsive per mobile portrait */
    .scene-media--desktop {
        display: none !important;
    }
    
    .scene-media--mobile-portrait {
        display: block !important;
    }
    
    .bulb-scene,
    .bulb-scene .scene-media,
    .bulb-scene .scene-media--base,
    .bulb-scene .scene-media--bright {
        height: 100vh !important;
        width: 100vw !important;
        aspect-ratio: unset !important;
    }
    
    /* Assicura che le immagini coprano tutto lo spazio */
    .scene-media,
    .scene-media--base,
    .scene-media--bright {
        object-fit: cover !important;
        object-position: center center;
    }
}

/* Default (fuori da portrait): desktop visibile, mobile nascosta */
.scene-media--desktop { display: block; }
.scene-media--mobile-portrait { display: none; }
@media (max-width: 767px) and (orientation: portrait) {
  .bulb-scene[data-has-mobile] .scene-media--desktop { display: none !important; }
  .bulb-scene[data-has-mobile] .scene-media--mobile-portrait { display: block !important; }
    
}


/* responsive: riduci gli effetti su schermi piccoli - SOLO per landscape o desktop piccoli */
@media (max-width: 520px) and (orientation: landscape) {
  .bulb-scene img,
  .bulb-scene .scene-media,
  .bulb-scene .scene-media--base,
  .bulb-scene .scene-media--bright {
      width: 100vw;
      height: 750px;
      aspect-ratio: 3/2 auto;
      object-fit: cover;
      object-position: -165px 150px;
  }
  
  .bulb-scene,
  .bulb-scene .scene-media,
  .bulb-scene .scene-media--base,
  .bulb-scene .scene-media--bright {
        height: 750px !important;
        width: 100vw !important;
        aspect-ratio: unset !important;
    }
  
    .bulb-scene {
        --trigger-x: 25 !important;
        --trigger-y: 50 !important; 
        --trigger-radius: 35 !important;
        --bulb-x: 52% !important;
        --bulb-y: 22.5% !important;
        --bulb-size: 100px;
        --bulb-intensity: 0.8;
    }

    /* Stili per elementi più piccoli su landscape piccoli */
    .orb-core {
        width: 20px;
        height: 20px;
        filter: blur(3px) saturate(1.2);
    }
    
    .trail-dot {
        width: 16px;
        height: 16px;
        filter: blur(6px);
    }
    
    .bulb-glow {
        width: 380px;
        height: 60px;
        filter: blur(12px);
    }
}

/* Portrait piccoli - priorità massima */
@media (max-width: 520px) and (orientation: portrait) {
    .bulb-scene {
        --trigger-x: 18 !important;
        --trigger-y: 55 !important;  /* Centrato verticalmente */
        --trigger-radius: 15 !important;  /* Raggio ancora più grande */
        --bulb-x: 52% !important;
        --bulb-y: 15.5% !important;
         --bulb-size: 30px !important;
         --bulb-intensity: 0.3 !important;
    }
    
    .bulb-scene,
    .bulb-scene .scene-media,
    .bulb-scene .scene-media--base,
    .bulb-scene .scene-media--bright {
        height: 100vh !important;
        width: 100vw !important;
        aspect-ratio: unset !important;
    }
    
      .bulb-scene img,
  .bulb-scene .scene-media,
  .bulb-scene .scene-media--base,
  .bulb-scene .scene-media--bright {
        height: 110%;
        object-fit: cover;
        object-position: 30% 25%;
        /*margin: auto;*/
        margin-top: 125px;
        min-width: 100%;
        vertical-align: middle;
      
    /* width: 75%; 
    height: 750px;
    aspect-ratio: 1;
    object-fit: fill !important;
    object-position: -15px 50px;*/
}
}

/* Gestione immagini responsive - regole di default */
.scene-media--desktop {
    display: block;
}

.scene-media--mobile-portrait {
    display: none;
}