/*============================================
 ____   ____ ____ _____ 
|  _ \ / ___|  _ \_   _|
| |_) | |   | |_) || |  
|  __/| |___|  _ < | |  
|_|    \____|_| \_\|_|  
Protocolli Creativi 2025 

============================================*/


/* Overlay */
.overlay {
  display: none; /* shown by GSAP */
  position: fixed;
  inset: 0;
  z-index: 9999999;
}

.stairs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
}

.stair {
  height: 100%;
  width: 20%;
  background:red;
}


* {
	margin: 0;
	padding: 0
}

*,
*::after,
*::before {
	box-sizing: border-box
}


body.preloader-active {
  overflow: hidden;
  height: 100vh;
}

/*
body.preloader-active {background:#fc0000} */
/* Preloader */
 #preloader {position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
}



.counter {
    font-size: 40vw; /* Puoi regolare questo valore */
    font-weight: 600;
    position: fixed; /* Usa fixed invece di absolute per ancorarlo alla viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra perfettamente */
    z-index: 1000; /* Assicurati che sia visibile sopra altri elementi */
    opacity: 0.2;
    width: 100vw;
    text-align: center;
    pointer-events: none; /* Opzionale: evita interferenze con il mouse */
    white-space: nowrap; /* Evita che il testo vada a capo se troppo lungo */
}

.images-stack {
  position: absolute;
  top: 50%;
  left: 80%;
  width: 200px;
  height: 300px;
  overflow: visible; /* ← cambia da "hidden" a "visible" se vuoi vedere l'effetto di movimento fuori dal box */
  pointer-events: none;
  transform: translate(-50%, -50%); /* per centrare meglio */
}

.images-stack img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Opzionale: ombra per staccare le immagini */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

body.preloader-active canvas,
body.preloader-active .navbar,
body.preloader-active .nav-menu {opacity:0;}

/* FINE PRELOAD */

:root {
	--grid-gap: 12px;
	--clr-lime-green: hsl(163, 72%, 41%);
	--clr-Bright-red: hsl(356, 69%, 56%);
	--clr-switch-theme: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
	--clr-theme-bg: hsl(230, 17%, 14%);
	--clr-theme-pattern: hsl(232, 19%, 15%);
	--clr-theme-card-bg: hsl(228, 28%, 20%);
	--clr-theme-text: hsl(228, 34%, 66%);
	--clr-theme-text-secondary: hsl(0, 0%, 100%);
	--gradient: conic-gradient(from 180deg at 50% 70%, hsla(0, 0%, 98%, 1) 0deg, #eec32d 72deg, #ec4b4b 144deg, #709ab9 216deg, #4dffbf 288deg, hsla(0, 0%, 98%, 1) 1turn);
}


html {
	font-size: calc(100vw / 1920 * 10);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	user-select: none;
	width: 100%;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

body {
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-size: 15px;
	font-style: normal;
	margin: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	overscroll-behavior-y: none;
	background: #000;
	color: #fff; letter-spacing: 1.1px;
}

body::before {
	--size: 100px;
	--line: color-mix(in hsl, canvasText, transparent 80%);
	content: '';
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, #3433338f 1px var(--size)) calc(var(--size) * 0.36) 50% / var(--size) var(--size),
		linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0% calc(var(--size) * 0.32) / var(--size) var(--size);
	-webkit-mask: linear-gradient(-20deg, transparent 50%, white);
	mask: linear-gradient(-20deg, transparent 50%, white);
	top: 0;
	transform-style: flat;
	pointer-events: none;
	z-index: -1;
}

body.body_theme_light::before {--size: 1px;}
body.body_theme_light {
	background: #fff;color: 
	#000;--clr-switch-theme: hsl(230, 22%, 74%);
	--clr-theme-bg: hsl(0, 0%, 100%);
	--clr-theme-pattern: hsl(225, 100%, 98%);
	--clr-theme-card-bg: hsl(227, 47%, 96%);
	--clr-theme-text: hsl(228, 12%, 44%);
	--clr-theme-text-secondary: hsl(230, 17%, 14%);
}
body.body_theme_light .footer_section { background-color: #ececec;}
body.body_theme_light .color-0 {color:#77a297}
body.body_theme_light .work-text-subtitle {color:#000;}
body.body_theme_light .logo-ruggeri {fill:#000;}
body.body_theme_light .logo-ruggeri-interno {fill:#000;}
body.body_theme_light .navbar, body.body_theme_light .navbar-sinistra,body.body_theme_light .navbar-destra {background: rgb(26 26 26 / 90%);}
body.body_theme_light .color-1 {color:#674624}


.logo-ruggeri {height: auto;display: block;fill: #fff;width: 39vw;}
.loaded body:after {opacity: 0.06}
.logo-ruggeri-interno {
    height: auto;
    display: block;
    fill: #fff;
    width: 160px;
    margin: 20px;
}



   /* Contenitore centrale */
    .container {
      max-width: 1100px;
      margin: 32px auto;
      padding: 16px;
    }

    /* Grid: 2 colonne equal-width, gap gestito con 'gap' */
    .two-col {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      align-items: start;
    }

    /* Card semplice per mostrare il contenuto */
    .card {
      border-radius: 12px;
      padding: 18px;
    }

  .card h2 {
    margin: 0 0 8px 0;
    font-size: 25px;
    font-weight: 600;
}
    .card p { margin: 0; line-height: 1.5; color: #fff; }

    /* Breakpoint mobile: sotto 720px passa a 1 colonna */
    @media (max-width: 720px) {
      .two-col {
        grid-template-columns: 1fr;
      }

      .container {
        margin: 16px;
        padding: 12px;
      }
    }

    /* Ulteriore adattamento per schermi molto piccoli */
    @media (max-width: 420px) {
      .card { padding: 14px; border-radius: 10px; }
      .card h2 { font-size: 1rem; }
    }




.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 2px solid red;
  transition: transform 0.3s ease;
  transform-origin: center center;
  pointer-events: none;
  z-index:9999999;
}

.grow, .grow-small{
  transform: scale(3);
  background:red;
  mix-blend-mode: difference; 
  border: none;
}


.grow-realizzazioni {
  transform: scale(4);
  border:red solid 1px;background:red;
}
.grow-realizzazioni::after {
  content: "CONTATTI";
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centra il testo */
  font-size: 5px; /* ingrandisci a piacere */
  font-weight:400;
  color:#fff; /* o bianco se lo sfondo è scuro */
  pointer-events: none; /* evita che blocchi il mouse */
}

.grow-apri {
  transform: scale(3);
  border:red solid 1px;background:red;
}
.grow-apri::after {
  content: "SCOPRI";
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centra il testo */
  font-size: 5px; /* ingrandisci a piacere */
  font-weight:400;
  color:#fff; /* o bianco se lo sfondo è scuro */
  pointer-events: none; /* evita che blocchi il mouse */
}



.grow-small{
  transform: scale(2);
}


.grow-punto {
  transform: scale(2);
   border:red solid 1px;background:transparent;
}

.grow-movimento {
  transform: scale(3);
   border:red solid 1px;background:transparent;
}



.scritta-scale {
 display: none; position: relative; width:100%; height: 100%;
}

.cursor-circle-text {
  transform-origin: 50% 50%;
  animation: rotateText 6s linear infinite;
  position: absolute;  top:-8px; left:-8px; text-transform:uppercase;} 


@keyframes rotateText {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}






/* FINE CURSORE */


.titolo-pagina {
    font-size: 3vw;
    font-weight: 500;
    font-family: "neue-haas-grotesk-display", sans-serif;
}


.crea {transition:color 0.1s ease;}



.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  transform-origin: center; position: relative;
    top:6px;

}

.hidden {
  display: none;
}

  /* Floating Navbar */
        .navbar {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(26, 26, 26, 0.6);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            padding: 15px 15px 15px 30px;
            border: 1px solid #333;
            z-index: 1000;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            z-index:99999; bottom: 100px;
        }


 .navbar-sinistra, .navbar-destra {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: #ff000024;
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 15px 15px 15px 30px;
    border: 1px solid #ff0000;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    bottom: 100px;
}



.navbar-sinistra {left:10%;padding: 18px 28px 23px 28px;}
.navbar-destra  {right:4%; left: auto;padding: 18px 28px 23px 28px;;}





.categoira-pro {position:absolute;}
.pro {color:red;margin:0px 10px 0px 10px;}





        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap:80px;
        }

        .nav-center {
            display: flex;
            align-items: center;
            gap: 40px;
        }


        .nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .nav-links a {
            color: #e0e0e0;
            text-decoration: none;
            font-weight: 400;
            font-size:17px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: #ffffff;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: #ffffff;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%;
        }

        /* Auth buttons */
        .auth-buttons {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .auth-btn {
            padding: 8px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 400;
            font-size:17px;
            transition: all 0.3s ease;
        }
        
        .login-btn {
            color: #e0e0e0;
            border: 1px solid #333;
        }

        .login-btn:hover {
            color: #ffffff;
            border-color: #555;
        }

        .signup-btn {
            background: #ffffff;
            color: #000000;
            white-space: nowrap;
        }

        .signup-btn:hover {
            background: #f0f0f0;
            transform: translateY(-1px);
        }



img {
	display: block
}

canvas {
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	/*transition: opacity 1s ease;*/
	width: 100%
}

/*
.loaded canvas {
	opacity: 1
}
*/
a {
	color: #fff;
	outline: none;
	text-decoration: none
}

a:hover,
a:focus {
	outline: none
}

.logo a:after, .logo a:before {display:none}



header {display:block; position:fixed; z-index:11; width:100%; padding:20px; height:auto;}

.logo {float:left; position:relative;}
.logo a img {width:170px}
.nav-menu {grid-area: links;padding: 0;margin: 0;justify-self: end;white-space: nowrap}
.nav-menu ul {list-style:none; float: right;}
.nav-menu ul li {display:inline-block; margin:0px 20px 0px 20px;}
.nav-menu ul li a {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    position: relative;
    text-transform: uppercase;
}



.nav-menu ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: #ffffff;
            transition: all 0.3s ease;
            transform: translateX(-50%);}

.nav-menu ul li a:hover::after
       {
            width: 100%;
        }

.sotto-menu {display:block; position:fixed; z-index:11; width:100%; padding:20px; height:auto; bottom:40px; left: 0px;}
.sotto-menu .nav-menu {float:left;} 


body.body_theme_light .nav-menu ul li a {color:#000;}
body.body_theme_light .nav-menu ul li a::after {background: #000;}



@keyframes grain {
	0% {
		transform: translate(20%, -15%)
	}

	10% {
		transform: translate(-20%, -15%)
	}

	20% {
		transform: translate(20%, -5%)
	}

	30% {
		transform: translate(-20%, -5%)
	}

	40% {
		transform: translate(20%, 5%)
	}

	50% {
		transform: translate(-20%, 5%)
	}

	60% {
		transform: translate(20%, 15%)
	}

	70% {
		transform: translate(-20%, 15%)
	}

	80% {
		transform: translate(20%, 5%)
	}

	90% {
		transform: translate(-20%, 5%)
	}

	100% {
		transform: translate(20%, -5%)
	}
}




a {
	display: inline-block
}

.contenuto-home {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1
}

.home-header {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2
}

.page-header {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	left: 0;
	position:relative;
	top: 0;
	width: 100%;
	z-index: 2
}


.loaded .home-header  {opacity: 1;transition: opacity 0.4s ease}



.home.titolo-pagina {font-size:9vw; font-weight:500; font-family: "neue-haas-grotesk-display", sans-serif; position:relative; text-transform:uppercase;}
.scritte-footer span.c {position:relative;}
.titolo-pagina span {
	font-family: "ivypresto-display", serif;
	font-weight:100;
}

.titolo-pagina span.red {
	font-family: "neue-haas-grotesk-display", sans-serif; color:#ff0000; font-weight:800;
}

.page-header .titolo-pagina {
	font-size: 7vw;
	font-weight: 800;
	line-height: 6vw;
	padding: 0 50px;
}



.ruggeri__description {
	font-size: 2rem;
	margin-top: -1rem;
	opacity: 0.75
}

.ruggeri__gallery {
	height: 295rem;
	position: relative;
	visibility: hidden
}

@media (max-width: 1200px) {
	.ruggeri__gallery {
		height: 650rem
	}
}




.ruggeri__gallery__figure {
	position: absolute
}




.ruggeri__gallery__figure:nth-child(1) {
	height: 30rem;
	width: 60rem
}

.ruggeri__gallery__figure:nth-child(2) {
	height: 50rem;
	left: 85rem;
	top: 30rem;
	width: 40rem
}

.ruggeri__gallery__figure:nth-child(3) {
	height: 40rem;
	left: 15rem;
	top: 60rem;
	width: 50rem
}

.ruggeri__gallery__figure:nth-child(4) {
	height: 30rem;
	right: 0;
	top: 10rem;
	width: 50rem
}

.ruggeri__gallery__figure:nth-child(5) {
	height: 60rem;
	right: 15rem;
	top: 55rem;
	width: 40rem
}

.ruggeri__gallery__figure:nth-child(6) {
	height: 65rem;
	left: 5rem;
	top: 120rem;
	width: 47.5rem
}

.ruggeri__gallery__figure:nth-child(7) {
	height: 60rem;
	right: 0;
	top: 130rem;
	width: 40rem
}

.ruggeri__gallery__figure:nth-child(8) {
	height: 40rem;
	left: 85rem;
	top: 95rem;
	width: 30rem
}

.ruggeri__gallery__figure:nth-child(9) {
	height: 55rem;
	left: 75rem;
	top: 155rem;
	width: 40rem
}

.ruggeri__gallery__figure:nth-child(10) {
	height: 33rem;
	right: 0;
	top: 215rem;
	width: 20rem
}

.ruggeri__gallery__figure:nth-child(11) {
	height: 40rem;
	left: 70rem;
	top: 235rem;
	width: 70rem
}

.ruggeri__gallery__figure:nth-child(12) {
	left: 0;
	top: 210rem;
	height: 60rem;
	width: 40rem
} 






@media (max-width: 1200px) {
	.ruggeri__gallery__figure:nth-child(1) {
		height: 60rem;
		width: 100rem
	}

	.ruggeri__gallery__figure:nth-child(2) {
		height: 110rem;
		left: auto;
		right: 0;
		top: 25rem;
		width: 70rem
	}

	.ruggeri__gallery__figure:nth-child(3) {
		height: 80rem;
		left: 12rem;
		top: 80rem;
		width: 89rem
	}

	.ruggeri__gallery__figure:nth-child(4) {
		height: 60rem;
		right: 0;
		top: 153rem;
		width: 60rem
	}

	.ruggeri__gallery__figure:nth-child(5) {
		height: 110rem;
		left: 0;
		right: auto;
		top: 180rem;
		width: 70rem
	}

	.ruggeri__gallery__figure:nth-child(6) {
		height: 135rem;
		left: 95rem;
		top: 230rem;
		width: 87.5rem
	}

	.ruggeri__gallery__figure:nth-child(7) {
		height: 110rem;
		left: 0;
		right: auto;
		top: 310rem;
		width: 80rem
	}

	.ruggeri__gallery__figure:nth-child(8) {
		height: 50rem;
		left: auto;
		right: 0;
		top: 385rem;
		width: 80rem
	}

	.ruggeri__gallery__figure:nth-child(9) {
		height: 100rem;
		left: 110rem;
		top: 450rem;
		width: 70rem
	}

	.ruggeri__gallery__figure:nth-child(10) {
		height: 50rem;
		left: 20rem;
		right: auto;
		top: 440rem;
		width: 55rem
	}

	.ruggeri__gallery__figure:nth-child(11) {
		height: 70rem;
		left: auto;
		right: 0;
		top: 570rem;
		width: 70rem
	}

	.ruggeri__gallery__figure:nth-child(12) {
		left: 0;
		top: 515rem;
		height: 100rem;
		width: 90rem
	}
}

.ruggeri__gallery__image {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%
}




/* Dashboard Cards */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1.5rem 2rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 40em) { /* 640px */
  .dash-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) { /* 1024pxpx */
  .dash-cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}


canvas {z-index:10;}
section {width:100%; padding-left:20px; padding-right:20px; clear:both;  position:relative}
section.none {padding-left:00px; padding-right:0px;}

/* DEFINIZIONE Effetti */

p {
    font-size:20px;
    font-weight: normal;
}

.step-preforma {width:700px; height:auto; margin-left:60%; border:red solid 1px; margin-top:10%; margin-bottom:4%}
.titolo-pagina {margin-top:25%; margin-bottom:10%}
.home-header .titolo-pagina {margin-top:8%;}
/*
.scritta {opacity: 0;filter: blur(10px);}
*/
.linea {
	position:relative;
	width: 100%; height: 0;
	border-top: 1px solid #434343;
	margin:30px 0px 0px 0px; clear: both;

}

.container {
      display: flex;                 /* centrare con flexbox */
      justify-content: center;       /* centro orizzontale */
      align-items: center;           /* centro verticale */
      height: 100vh;                 /* tutta l’altezza viewport */
      position: relative;
      overflow: hidden;
    }


.testa-immagine {
	opacity: 0;
  height: 80vh;
  width: 60%;
  margin: auto;
  background-position: center center;
  background-size: cover;
  background-reapeat: no-repeat;
}


.padding-100 {
    padding-top:200px;
}




.grid {
	grid-area: main;
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: repeat(8,1fr);
	grid-template-rows: 1fr 1fr 1fr;
}

.grid--spaced {
	gap: var(--grid-gap);
}

.grid--zoomed {
	gap: 2rem;
	grid-template-columns: repeat(3, 70%);
	grid-template-rows: repeat(3, 60%);
	justify-content: center;
	align-content: center;
	aspect-ratio: 2 / 1;
}

.grid--zoomed .grid__img {
	width: 100%;
	height: 100%;
}

.grid--columns {
  grid-template-columns: repeat(5,1fr);
	grid-template-rows: repeat(2,min-content);
  align-content: center;
}

.grid--single {
  height: auto;
  justify-self: center;
}

.grid--column {
	grid-template-columns: repeat(15, calc((100% - 14 * 10px) / 15));
  gap: 10px;
	grid-template-rows: auto;
}

.grid__img:has(.grid__img-inner) {
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	max-height: 100%;
	min-width: 100%;
}

.grid__img .grid__img-inner {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	will-change: transform;
}

.ar-wide {
	aspect-ratio: 4/3;
}

.ar-narrow {
	aspect-ratio: 2/3;
}

.ar-rect {
	aspect-ratio: 1;
}

.span-2 {
	grid-column: auto / span 2;
}

.span-3 {
	grid-column: auto / span 3;
}

.grid--small {
	grid-template-columns: repeat(9,1fr);
	grid-auto-rows: 1fr;
}

.grid--tiny {
	height: 60vh;
	grid-template-columns: repeat(14,1fr);
	grid-auto-rows: auto;
}

.grid--wide {
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(3,1fr);
}

.pos-1 { grid-area: 1 / 1; }
.pos-2 { grid-area: 1 / 3; }
.pos-3 { grid-area: 1 / 4; }
.pos-4 { grid-area: 1 / 5; }
.pos-5 { grid-area: 1 / 7; }
.pos-6 { grid-area: 2 / 1; }
.pos-7 { grid-area: 2 / 3; }
.pos-8 { grid-area: 2 / 4; }
.pos-9 { grid-area: 2 / 6; }
.pos-10 { grid-area: 2 / 7; }
.pos-11 { grid-area: 2 / 8; }
.pos-12 { grid-area: 3 / 1; }
.pos-13 { grid-area: 3 / 2; }
.pos-14 { grid-area: 3 / 4; }
.pos-15 { grid-area: 3 / 5; }
.pos-16 { grid-area: 3 / 7; }
.pos-17 { grid-area: 3 / 8; }
.pos-18 { grid-area: 2 / 5; }

.grid__img {
	background-size: cover;
	background-position: 50% 50%;
	pointer-events: none;
	will-change: transform;
	transform: translateZ(0.1px);
}

.grid--columns .grid__img {
	height: min-content;
	aspect-ratio: 2 / 3;
}



.prefazione {
    width: 650px;
    position: absolute;
    right:20%;
    top: 30%;
    font-size:25px;
    font-weight:200; letter-spacing:1px;
}
.prefazione .line {margin-top:10px;}


.content__text {
    font-size:30px;
    max-width: 625px;
    line-height: 1.4;
    margin: 0.5rem 0;
    font-weight: 400; margin-left: 30%; margin-bottom: -1000px;
}


.plus-spazio{
   
    position: absolute;
    bottom: 68px;
    margin-left: 10px; 
    font-size:24px;
    max-width: 625px;
    line-height: 1.4;margin-left:40%; color:#c0bcb9;
}



.content {
    position: relative;
    min-height:60dvh;
    align-content: center;
}


.scritte-generiche {
  opacity: 0;
  filter: blur(10px);
  transition: none;
}



.header{
    position:relative;
    height:100vh;         /* area che verrà pinnata */
    overflow:hidden;
     padding: 0px 20px 100px;
  }

  /* contenitore dell'immagine (orizzontale) */
  .header-reveal {
    position:absolute;
    top:50%;
    left:50%;
    /* dimensione "base" dell'immagine (finale): 1400x600 idealmente
       ma con max-width per essere responsive */
    width:1400px;
    height:700px;
    max-width:90vw;
    max-height:65vh;
    background-size:cover;
    background-position:center;
    transform: translate(-50%,-50%) scale(0.4); /* parte piccola e centrata */
    transform-origin:center center;
    will-change: transform;
  }



/* Styling for the images used in the trail */
.image-item {
  width: 200px;         /* image width */
  height: 300px;        /* image height */
  object-fit: cover;    /* ensures the image fills the box without distortion */
  position: absolute;   /* lets us place them at mouse position */
  opacity: 0;           /* start invisible until animated in */
  pointer-events: none; /* makes sure these images don't block interaction */
  border-radius: 3px;   /* slightly rounded corners */
  transform-origin: center; /* scaling/rotations will happen from the center */
}

/* The original gallery is hidden from view,
   but we still keep the images in the DOM to clone them */
.image-gallery {
  display: none;
}


.side-scroll {
  position: relative;
  width: 100%;
  overflow: hidden; height:1000px;
}

.side-scroll-list-wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.side-scroll-list {
  display: flex;
  white-space: nowrap;
  /* Assicurati che non vada a capo */
}


.alto-inverso {margin-top:14%; margin-bottom: -600px;}
.side-scroll-list > div {margin:20px;}
.side-scroll-list > div:first-child{margin-left:10%;}
.side-scroll {position: relative;overflow: hidden;}
.side-scroll-fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  opacity: 0;
  backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 10;
}


.reverse-text {
    white-space: nowrap;
    left: -100%;
    transform: translateY(-50%);
    font-size:80px; opacity:0.8;
}


.colore-red {color:#ff0000}
.type-tiny {
    margin-top: 30px;
    font-size: 32px;
    font-weight: 300;
}




/* Sezione Footer */

.button_reference.fix-bottom-left {
  position: fixed;
  bottom: .5rem;
  left: .5rem;
}

.code_js, .code_css {
  display: none;
}

.hero_container {
  justify-content: space-between;
  align-items: flex-end;
  height: 100vh;
  display: flex;
  position: relative;
}

.color-0 {
  color: #cde5df;
}

.work_item {
  background-color: #000;
  align-items: stretch;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.work_video-wrapper {
  z-index: 1;
  grid-column-gap: 2.5vw;
  grid-row-gap: 2.5vw;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.work-text-subtitle {
  grid-column-gap: .5vw;
  grid-row-gap: .5vw;
  color: #fff;
  text-transform: uppercase;
  flex-flow: column;
  padding-bottom: .5vw;
  padding-right: 1vw;
 font-family: "neue-haas-grotesk-display", sans-serif;
  display: flex;
}

.work_video {
  object-fit: cover;
  width: 100%;
  height: 400px;
  display: block;
  position: relative;
  overflow: hidden;  background-size:cover; background-position: center;
}
.work_video > video {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  right: -100%;
  bottom: -100%;
  top: -100%;
  left: -100%;
  object-fit: cover;
  z-index: -100;
}

.work_video-container {
  aspect-ratio: 16 / 9;
  flex: 1 0 auto;
}

.work_item-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-around;
  align-items: stretch;
  width: 100%;
  padding: 2vw 4vw;
  display: flex;
  position: relative;
}

.work_text {
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding-top: 0vw;
    display: flex;
    position: relative;
    margin-bottom: 3vw;
}

.footer_image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.hero_image {
  opacity: .6;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero_text {
    color: #fff;
    text-transform:none;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    padding-bottom:12vw;
    padding-left: 4vw;
    padding-right: 4vw;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 10vw;
    font-weight: 800;
    line-height: .9;
    display: flex;
    position: relative;
}

.work_image {
  opacity: .75;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.color-3 {
  color: #e2ffe2;
}

.work_image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}




.work_text-title {
    color: #fff;
    text-transform: none;
    flex-flow: column;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 2vw;
    font-weight: 500;
    line-height: 1;
    display: flex;
    position: relative;
}







.sticky {
  position: sticky;
}



.nav_link {
  color: #fff;
  font-size: 1.25rem;
  text-decoration: none;
  overflow: hidden;
}

.nav_top {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.nav_top-line {
  width: calc(100% - 2rem);
  height: 1px;
  position: absolute;
  inset: auto 0% 0% 50%;
  transform: translate(-50%);
}

.line {
    will-change: transform;
    line-height: 1.2;
}

.line-wrapper {
  overflow: hidden;
}

.work_item-overlay {
  z-index: 2;
  pointer-events: none;
  background-color: #000;
  display: none;
  position: absolute;
  inset: 0%;
}

.footer_section {
  z-index: 1;
  background-color: #000;
  position: relative;
}

.footer_image {
  opacity: .6;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.color-2 {
  color: #bdd9ff;
}

.color-1 {
  color: #ffd9b3;
}

.footer_container {
  justify-content: space-between;
  align-items: flex-end;
  height: 100vh;
  display: flex;
  position: relative;
}

.footer_text {
  color: #fff;
  text-transform: uppercase;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 8vw;
  padding-left: 4vw;
  padding-right: 4vw;
  font-size: 12.5vw;
  font-weight: 500;
  line-height: .9;
  display: flex;
  position: relative;
}

@media screen and (max-width: 479px) {
  .work_text {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

.work_text-title {font-size: 12.5vw;}}
.footer-secondo {margin-bottom:9vw}
.section-bg-video {
    width: 311px;
    opacity: 0.2;
    margin-right: 33px;
}
.get-in {
    font-size: 10vw;
    font-weight:800;
    text-transform: none;
}


.logo-ruggeri.grande {width:68.7vw;}


main {overflow-x:hidden;}


/* --- ICONS --- */
.toggle-switch {
  position: relative;
  width: 50px;
  height: 27px;
  border-radius: 3.125rem;
  background-color: hsl(230, 22%, 74%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  transition: background-color 250ms ease-in-out;
}

.toggle-switch__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #888;
  transition: opacity 200ms ease-in-out;
  z-index: 1;
}

.toggle-switch__icon--sun {
  opacity: 0;
}

/* Checkbox invisibile ma cliccabile */
.toggle-switch__check {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 3;
  cursor: pointer;
}

/* Cerchietto */
.toggle-switch__circle {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  background-color: var(--clr-theme-pattern, #fff);
  transition: left 200ms ease-in-out;
  z-index: 2;
}

/* Stato attivo */
.toggle-switch__check:checked ~ .toggle-switch__circle {
  left: 74%;
}

/* Cambia icone */
.toggle-switch__check:checked ~ .toggle-switch__icon--moon {
  opacity: 0;
}

.toggle-switch__check:checked ~ .toggle-switch__icon--sun {
  opacity: 1;
  color: #facc15;
}



.hero_text span.red {
    color: #ff0000;
    font-weight: 800;
} 

.hero_text span.corsivo {
    font-family: "ivypresto-display", serif;
    font-weight: 100;
}
.corsivo {
    font-family: "ivypresto-display", serif;
    font-weight: 100;
}


.work_text-title.posizione-bassa {width: 100%;max-width: 1000px;margin: 0 auto;position: relative;
    top: -260px;
}

.work_text-title.posizione-bassa .line.piccolo {line-height: 24px!important;}
.descrizione {
    font-size: 22px !important;
}


/* =====================
   Stile base Mega Menu
   ===================== */




.menu-trigger {
    position: absolute;
    top: 9px;
    right: -130px;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/* Overlay scuro dietro */
.overlay-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  display: none;
  z-index: 999;
}

/* Mega menu principale */
.mega-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  padding: 2rem;
  opacity: 1;
}

/* Header */
.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.menu-header h2 {
  font-size:24px;
  margin: 0; color:red;
}
.menu-header p {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
}

.menu-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.menu-categories button {
    background: #f3f3f3;
    border: none;
    border-radius: 20px;
    padding: 12px 27px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
}
.menu-categories button.active {
  background: #000;
  color: #fff;
}
.close-btn {
  background: white;
  border: 1px solid #ddd;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}


/* Grid responsive 
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/*


@media (max-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }
}
*/

/*

.menu-item {
  background: white;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.menu-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 0.75rem;
}
*/

.menu-item h3 {
    font-size: 16px;
    margin: 20px;
    color: #fff;
    font-weight: 500;
}
.menu-item p {
  font-size: 0.85rem;
  color: #fff;
  flex-grow: 1;
}
.menu-item a {
  font-size:16px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  margin-top: 0.8rem;
  align-self: flex-end;
}


.menu-ruggeri {width:40px; height:40px; display: inline-block;}

main.menu-grid{
    overflow-x: auto;
}



#megaMenu {
  display: none;
  flex-direction: row;
  overflow-x: auto;            /* scroll orizzontale */
  overflow-y: hidden;          /* nasconde lo scroll verticale */
  white-space: nowrap;         /* evita che le card vadano a capo */
  gap: 1rem;
  padding: 2rem;
  background: #111;
  scroll-snap-type: x mandatory; /* scroll più fluido */
                 /* distanza fra le immagini */
  justify-content: flex-start;
  padding-top:10vw;
  padding-bottom:10vw;
 
}

#megaMenu::-webkit-scrollbar {
  height: 8px;
}

#megaMenu::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}
/* nasconde la scrollbar (opzionale) */
#megaMenu::-webkit-scrollbar {
  display: none;
}

.menu-item {
  display: inline-block;
  flex: 0 0 calc(33.333% - 1rem); /* mostra 3 elementi visibili */
  width: calc(33.333% - 1rem);
  height: 360px;                  /* regola altezza come preferisci */
  background: #222;
  scroll-snap-align: start;
  opacity: 0;                     /* inizialmente invisibile (GSAP) */
  transform: translateX(-40px);   /* posizione iniziale per animazione */
  margin: 0px 20px 0px 20px;

  





}

.menu-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.menu-categories button

 {
    background: #f3f3f3;
    border: none;
    border-radius: 20px;
    padding: 12px 27px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    position: absolute;
    right: 20px;
    top: 79px;
}


.menu-header h2 {
    font-size: 55px;
    margin: 0;
    color: #ffd9b3;
    font-weight: 500;
}