:root {
  --first-color: #1e90ff;
  --second-color: #ffffff;
  --first-color-light: #f2f2f2;
  --color-zero: #c0b1c4;
  --color-one: #f3a48e;
  --color-two: #f7b67d;
  --color-three: #ffe5a0;
  --color-four: #91c7ba;
  --color-five: #a0d9f7;

  /* Font & Typography */
  --body-font: sans-serif;
  --normal-font-size: 1rem;
  --smaller-font-size: .750rem;

  /* Backdrop Filter */
  --tw-backdrop-blur: blur(64px);
  --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;

}


*{
	margin: 0;
    padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
}

body{
	font-family: "Helvetica Neue", "Sans", "arial", "verdana";
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
	min-height: 100vh;
	--fonts__family--title-fallback: Helvetica, sans-serif;
    --fonts__family--text-fallback: Helvetica, sans-serif;
}

b, strong{
	font-weight: bold;
}

div{
	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	--text-opacity: 1;
}


#container{
	height: 100vh;
	background: linear-gradient(100deg, rgb(250,254,255) 10%, rgb(250,251,255) 25%, rgb(250,245,255) 38%, rgb(254,246,246) 68%, rgb(255,253,231) 90%);
}


.backdrop-blur-3xl{
	backdrop-filter: 
	var(--tw-backdrop-blur) 
	var(--tw-backdrop-brightness) 
	var(--tw-backdrop-contrast) 
	var(--tw-backdrop-grayscale) 
	var(--tw-backdrop-hue-rotate) 
	var(--tw-backdrop-invert) 
	var(--tw-backdrop-opacity) 
	var(--tw-backdrop-saturate) 
	var(--tw-backdrop-sepia);
}

.centering{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 100%;
}

.zero { background-color: var( --color-zero);}
.one  { background-color: var(--color-one);  }
.two  { background-color: var(--color-two);  }
.three{ background-color: var(--color-three);}
.four { background-color: var(--color-four); }
.five { background-color: var(--color-five); }

:root {
            /* Colori dal video */
            --primary-color: #007bff; /* Blu acceso */
            --accent-color: #00ffc8; /* Ciano/Verde */
            --bg-color: #000000;
        }

        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* --------------------------------- */
        /* PARTE 1: SCENA E ROTAZIONE 3D (CUBO) */
        /* --------------------------------- */
        
        /* Contenitore Scena (Stabilisce la Prospettiva) */
        .scene {
            width: 300px;
            height: 300px;
            perspective: 800px; /* Profondità della scena */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1; /* Sotto l'immagine mascherata */
        }

        /* Contenitore Cubo (Abilita il 3D per i figli) */
        .cube-container {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            
            /* Animazione Rotazione */
            animation: rotateCube 30s infinite linear;
        }

        @keyframes rotateCube {
            0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
            100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
        }

        /* Faccia del Cubo (Pannelli) */
        .face {
            position: absolute;
            width: 300px;
            height: 300px;
            border: 2px solid var(--accent-color);
            background: rgba(0, 123, 255, 0.1); /* Colore semi-trasparente */
            box-shadow: 0 0 20px rgba(0, 255, 200, 0.4);
            backface-visibility: hidden; 
        }

        /* Posizionamento 3D delle Facce */
        .face-front  { transform: rotateY(0deg) translateZ(150px); }
        .face-back   { transform: rotateY(180deg) translateZ(150px); }
        .face-right  { transform: rotateY(90deg) translateZ(150px); }
        .face-left   { transform: rotateY(-90deg) translateZ(150px); }
        .face-top    { transform: rotateX(90deg) translateZ(150px); }
        .face-bottom { transform: rotateX(-90deg) translateZ(150px); }

        /* --------------------------------- */
        /* PARTE 2: EFFETTO PARTICELLE */
        /* --------------------------------- */

        #particles-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none; 
            perspective: 1000px;
            z-index: 0; /* Sotto tutto */
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--accent-color);
            opacity: 0; 
            box-shadow: 0 0 5px var(--accent-color);
        }

        /* --------------------------------- */
        /* PARTE 3: LOGO CON MASCHERA / RITAGLIO */
        /* --------------------------------- */
        
        #logo-overlay {
            position: absolute;
            width: 500px; /* Dimensione del contenitore del logo */
            height: 500px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10; /* Z-index maggiore per essere davanti a tutto */
        }

        #logo-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            /* Applica il ritaglio circolare: tutto ciò che è al di fuori del cerchio scompare */
            clip-path: circle(35% at 50% 50%); /* Il 35% è il raggio del ritaglio */
            
            /* Il logo ha uno sfondo trasparente, ma questa maschera ne "taglia" solo l'area visibile */
            /* Per avere il logo VISTO attraverso il ritaglio, dobbiamo invertire il concetto. */
            
            /* --- Soluzione Alternativa per "Vedere Attraverso" --- */
            /* Se il tuo obiettivo è che l'immagine (che è il logo) sia ritagliata */
            /* e si veda il fondo attraverso le sue aree trasparenti (che dovrebbe già essere così con un PNG), */
            /* questa è la via più semplice, ma la clip-path ritaglia il *logo*. */
            
            /* Se l'obiettivo è avere un'immagine A PIENO SCHERMO con un BUCO circolare... */
            /* Questa tecnica è più complessa e richiede una div fittizia o un SVG. */
            
            /* Manteniamo la soluzione semplice: il logo è davanti, ritagliato. */
            /* Data la natura dell'immagine (testo scuro su trasparente), il ritaglio è sul logo stesso. */
        }

        /* Creiamo un finto schermo nero per simulare la maschera se l'immagine fosse solo per ritagliare */
        .mask-container {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        .mask-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color); /* Sfondo nero */
            
            /* Rimuove l'area circolare dal background, rivelando ciò che c'è sotto (il cubo) */
            mask: radial-gradient(circle 120px at 50% 50%, transparent 99%, black 100%);
            -webkit-mask: radial-gradient(circle 120px at 50% 50%, transparent 99%, black 100%);
            
            z-index: 10;
            pointer-events: none; /* Lascia passare gli eventi del mouse (non necessario qui) */
        }

        /* Logo al centro del buco */
        #logo-centered {
            width: 250px; /* Dimensione effettiva del logo */
            height: auto;
            object-fit: contain;
            z-index: 11; /* Sempre sopra la maschera */
        }