: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%);
        }

        /* 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; /* Nasconde il retro della faccia */
        }

        /* 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; /* Ignora gli eventi del mouse */
            perspective: 1000px;
        }

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