@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlayfairDisplay-Bold';
    src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {max-width: 100%;overflow-x: clip;}
@supports not (overflow: clip) {
	html, body { overflow-x: hidden; }
}
html{
	margin:0px;
	padding:0px;
}
body{
	margin:0px;
	padding:0px;
	background-color: #151515;
	color:#FFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
}
.logoDesktop{max-width: 300px;}
.header-desktop{
	min-height: 510px;
	width: 100%;
	background-image: url('../images/header-bisco-500.webp');
	background-repeat: no-repeat;
	background-size: cover;
}
.titolo-header{font-family: 'PlayfairDisplay-Bold', sans-serif; font-size: 50px; color:#bc9b3f;}


a.class-menu{color:#FFF; font-family: 'PlayfairDisplay-Bold', sans-serif; font-size: 22px; padding-right: 20px; text-decoration: none;}
a.class-menu:hover{color:#bc9b3f;}

.riga{line-height: 20px; margin-top:20px;}
.titolo-menu{background-color: #bc9b3f;}
span.menu{color: #FFF; font-size:40px; line-height: 55px; font-family: 'PlayfairDisplay-Bold', sans-serif;}
.intro-menu{font-size: 25px; font-family: 'PlayfairDisplay-Bold', sans-serif;}
h3{font-size: 35px; font-family: 'PlayfairDisplay-Bold', sans-serif;}

.riga-extra{line-height: 50px;}
.riga-extra .titolo{font-size: 30px;}
.riga-extra .prezzo{font-size:  20px;}

.border-bottom-dotted {
	border-bottom: 2px dotted #ccc;
	height: 12px; /* Allinea i puntini al centro del testo */
}
.menu-item {
	display: flex;
	align-items: flex-end;
}

.menu-item .piatto {
	max-width: 80%;
}

.menu-item .dots {
	border-bottom: 2px dotted #999;
	margin-bottom: 0.3em;
}

.menu-item .prezzo {
	white-space: nowrap;
}



/* Base */
.fx{
	opacity: 0;
	transform: translate3d(0,0,0);
	filter: blur(7px); /* NEW: rende l’ingresso più evidente */
	transition:
		opacity var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms),
		transform var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms),
		filter var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms);
	will-change: opacity, transform, filter;
}

.fx.is-inview{
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* Fade + slide up (più “strong”) */
.fx-fade-up{
	transform: translate3d(0, 60px, 0) scale(.985); /* prima era troppo poco */
}
.fx-fade-down{
	transform: translate3d(0, -60px, 0) scale(.985);
}
/* UP + drift laterale */
.fx-fade-up-drift-left{
	transform: translate3d(-18px, 70px, 0) scale(.985) rotate(-0.8deg);
}
.fx-fade-up-drift-right{
	transform: translate3d( 18px, 70px, 0) scale(.985) rotate( 0.8deg);
}

/* DOWN + drift laterale */
.fx-fade-down-drift-left{
	transform: translate3d(-18px, -70px, 0) scale(.985) rotate(-0.8deg);
}
.fx-fade-down-drift-right{
	transform: translate3d( 18px, -70px, 0) scale(.985) rotate( 0.8deg);
}
/* Effetto 2: slide left/right */
.fx-slide-left{
	transform: translateX(-42px);
}
.fx-slide-right{
	transform: translateX( 42px);
}

/* Bounce UP: più evidente e “premium” */
.fx-bounce-up{
	transform: translate3d(0, 70px, 0) scale(.985);
}

.fx-bounce-up.is-inview{
	transition: opacity var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms),
		filter  var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms);
	animation: fxBounceUp var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms) both;
}

@keyframes fxBounceUp{
	0%   {
		transform: translate3d(0, 70px, 0) scale(.985);
	}
	70%  {
		transform: translate3d(0, -10px, 0) scale(1);
	}  /* overshoot */
	85%  {
		transform: translate3d(0,  4px, 0);
	}            /* rimbalzo */
	100% {
		transform: translate3d(0,  0px, 0);
	}
}

.fx-bounce-down{
	transform: translate3d(0, -70px, 0) scale(.985);
}

.fx-bounce-down.is-inview{
	transition: opacity var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms),
		filter  var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms);
	animation: fxBounceDown var(--fx-dur, 900ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms) both;
}

@keyframes fxBounceDown{
	0%   {
		transform: translate3d(0, -70px, 0) scale(.985);
	}
	70%  {
		transform: translate3d(0,  10px, 0) scale(1);
	}
	85%  {
		transform: translate3d(0,  -4px, 0);
	}
	100% {
		transform: translate3d(0,   0px, 0);
	}
}

.fx-bounce-up-drift-left{  transform: translate3d(-18px, 70px, 0) scale(.985); }
.fx-bounce-up-drift-right{ transform: translate3d( 18px, 70px, 0) scale(.985); } 

.fx-bounce-up-drift-left.is-inview,
.fx-bounce-up-drift-right.is-inview{
  animation: fxBounceUpDrift var(--fx-dur, 950ms) cubic-bezier(.2,.85,.2,1) var(--fx-delay, 0ms) both;
}

@keyframes fxBounceUpDrift{
  0%   { transform: translate3d(var(--fromX, 0px), 70px, 0) scale(.985); }
  70%  { transform: translate3d(0, -10px, 0) scale(1); }
  85%  { transform: translate3d(0,   4px, 0); }
  100% { transform: translate3d(0,   0px, 0); }
}

/* Effetto 3: cascade text (parte “sparso” e si compone) */
.fx-cascade-lines .fx-line{
	display:block;       /* righe */
	white-space: pre;
}

.fx-cascade-lines .fx-ch{
	display:inline-block;
	opacity:0;
	transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
	filter: blur(2px);
	will-change: transform, opacity, filter;
	animation: none; /* parte spento, si accende quando entra in viewport */
}

.fx-cascade-lines.is-inview .fx-ch{
	animation-name: fxAssemble;
	animation-duration: var(--dur, 850ms);
	animation-timing-function: cubic-bezier(.2,.85,.2,1);
	animation-fill-mode: forwards;
	animation-delay: calc(var(--k) * 35ms);
}

@keyframes fxAssemble{
	0%   {
		opacity:0;
		transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
		filter: blur(2px);
	}
	60%  {
		opacity:1;
		filter: blur(0px);
	}
	85%  {
		transform: translate(0, 0.08em) rotate(0deg);
	}
	100% {
		opacity:1;
		transform: translate(0, 0) rotate(0deg);
		filter: blur(0px);
	}
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce){
	.fx, .fx-cascade-lines .fx-ch{
		transition:none !important;
		animation:none !important;
		opacity:1 !important;
		transform:none !important;
		filter:none !important;
	}
}

.fs-lg-20{font-size: 20px;}
.fs-lg-25{font-size: 25px;}
.fs-lg-30{font-size: 30px;}
.fs-lg-35{font-size: 35px;}
.fs-lg-40{font-size: 40px;}
.fs-lg-46{font-size: 46px;}
.fs-lg-50{font-size: 50px;}
.fs-lg-55{font-size: 55px;}
.fs-lg-60{font-size: 60px;}

@media (max-width: 991px) {
	.logo{
		max-width: 230px;
	}
	.fs-20{font-size: 20px;}
	.fs-25{font-size: 25px;}
	.fs-30{font-size: 30px;}
	.fs-35{font-size: 35px;}
	.fs-40{font-size: 40px;}
	.fs-46{font-size: 46px;}
	.pl-1{padding-left: 5px;}
	.pl-2{padding-left: 10px;}
	.pl-3{padding-left: 15px;}

	body{font-size: 16px;}
	.titolo-header{font-size: 35px; margin-top:-5px !important;}
	.navbar-toggler-icon{
		margin-top:42px;
	}
	.navbar-toggler{
	width: 100%;
	border: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}


.mobile-menu-toggle {
        justify-content: flex-start;
        min-height: 70px;
        position: relative;
        width: 100%;
    }

    .mobile-menu-toggle .navbar-toggler-icon {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }

    .mobile-menu-toggle .logo {
        position: absolute;
        left: 50%;
        top: 45px;
        transform: translate(-50%, -50%);
        width: 180px;
        max-width: none;
    }

.titolo-header{
	font-size: 35px;
	margin-top: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	pointer-events: none;
}

	.titolo{letter-spacing: 1px;}
	a.class-menu{font-size: 18px; padding-right: 16px;}
	.riga{line-height: 20px; margin-top:20px;}
	span.menu{font-size:25px; line-height: 40px;}
	.intro-menu{font-size: 20px;}
	h3{font-size: 30px;}
	.riga-extra{line-height: 30px; margin-top:20px;}
	.riga-extra .titolo{font-size: 20px;}
	.riga-extra .prezzo{font-size: unset;}
}