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

:root {
	font-size: 16px;
	--page-padding: 1.5rem;
	
	--petal: #fcf8f5;
	--blush: #cfa899;
	--terracotta: #a75a4a;
	--clay: #8b372d;
	--rust: #5d241d;
	--onyx: #330601;


	/* --color-text: #fff; */
	--color-text: #000;
	--color-bg: var(--terracotta);
	--color-link: rgba(255,255,255,0.6);
	--color-link-hover: #fff;
	--color-bg-1: var(--rust);
	--color-bg-2: var(--blush);
	--color-bg-3: var(--clay);
	--color-bg-4: var(--rust);
	--color-bg-5: var(--onyx);
	--color-bg-6: var(--petal);


	
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg); 
	/* font-family: "area-variable", sans-serif;
	font-variation-settings: "slnt" 0, "wdth" 150, "wght" 500, "INKT" 0; */

	font-family: "Roboto Slab", serif;
  	font-optical-sizing: auto;
	font-variation-settings: "wght" 400;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	overflow-x: hidden;
}

/* .demo-2, 
.demo-4,
.demo-6,
.demo-8,
.demo-10,
.demo-12,
.demo-14 {
	--color-text: #000;
	--color-bg: #e1e1e1;
	--color-link: rgba(0,0,0,0.6);
	--color-link-hover: #000;
	--color-bg-1: #9d9d9d;
	--color-bg-2: #c7c7c7;
	--color-bg-3: var(--color-bg-1);
	--color-bg-4: var(--color-bg-2);
	--color-bg-5: var(--color-bg-1);
	--color-bg-6: var(--color-bg-2);
}

.demo-9 {
	--color-bg-1: #2f251e;
	--color-bg-2: #43392f;
	--color-bg-3: #18130e;
	--color-bg-4: var(--color-bg-1);
	--color-bg-5: var(--color-bg-2);
	--color-bg-6: var(--color-bg-3);
}

.demo-10 {
	--color-bg-1: #9d9d9d;
	--color-bg-2: #c7c7c7;
	--color-bg-3: #7c7c7c;
	--color-bg-4: var(--color-bg-1);
	--color-bg-5: var(--color-bg-2);
	--color-bg-6: var(--color-bg-3);
} */

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 5000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

/* .unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
} */

.frame {
	padding: var(--page-padding);
	position: relative;
	display: grid;
	z-index: 1000;
	width: 100%;
	grid-row-gap: 1rem;
	grid-column-gap: 2rem;
	justify-items: start;
	text-transform: uppercase;
	font-size: 12px;
}

.frame--header {
	height: 100%;
	z-index: 1;
	/* background-size: auto 80%;
	background-position: 120% 50%;
	background-repeat: no-repeat;
	grid-template-areas: 'title' 'prev' 'back' 'sub' 'sponsor' 'demos' 'heading'; */
}

.frame--footer {
	grid-template-areas: 'credits' 'author';
	align-content: end;
}

/* .frame #cdawrap {
  justify-self: start;
} */

.frame a {
  pointer-events: auto;
}

/* .frame__title {
  grid-area: title;
  font-size: inherit;
  margin: 0;
} */
/* 
.frame__back {
  grid-area: back;
  justify-self: start;
}

.frame__prev {
  grid-area: prev;
  justify-self: start;
}

.frame__sub {
  grid-area: sub;
}

.frame__demos {
	grid-area: demos;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	align-self: start;
	flex-wrap: wrap;
	background: var(--color-bg);
	border: 1px solid;
	padding: 1rem;
	border-radius: 10px;
}

.frame__demos > * {
	width: 2rem;
	display: block;
	flex: none;
	text-decoration: none;
	border-radius: 50%;
	aspect-ratio: 1;
	border: 1px solid var(--color-link-hover);
	display: grid;
	place-items: center;
	padding-top: 0.2em;
	background: var(--color-bg);
}

.frame__demos > span {
	filter: invert(100%);
}

.frame__demos::before {
	content: "Variations:";
} */

.frame__heading {
	align-self: center;
	justify-self: start;
	width: min-content;
	display: flex;
	flex-direction: column;
	margin: 10vh auto 0 auto;
}
@media (min-width: 992px) {
	.frame__heading {
		grid-area: heading;
		margin-top: 10vh;
		margin-left: 0;
	}
}

.frame__heading h2 {
	margin: 0;
	line-height: 0.9;
	text-transform: uppercase;
	margin-left: -0.065em;
	font-size: clamp(2.5rem,12vw,7rem);
	letter-spacing: -0.105em;
	font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400;
}

i {
	font-style: normal;
	font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400, "INKT" 400;
}

.frame__heading p {
		margin: 0;
}

/* .frame__credits {
	grid-area: credits;
} */

/* .frame__author {
	display: flex;
	gap: 1.5rem;
	grid-area: author;
} */

.content {
	padding: var(--page-padding);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@media (min-width: 1600px) {
	.content {
		padding: var(--page-padding);
	}
}

.content--perspective {
	perspective-origin: 50% 0%;
	perspective: 1000px;
}

.text-large {
	font-size: clamp(1.5rem,5vw,2.55rem);
	max-width: 900px;
	margin: 0 0 0.85em 0;
	line-height: 1.2;
	/*font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500, "INKT" 100;*/
	font-variation-settings: "wght" 300;
}
.text-large strong{
	font-variation-settings: "wght" 500;
}

.content--sticky {
	width: 100vw;
	position: sticky;
	top: 0;
	--offset: 0px;
	top: var(--offset);
	height: calc(100vh - var(--offset));
}

.content--grid,
.content--grid .content__inner {
	display: grid;
	overflow: hidden;
	grid-column-gap: 5vw;
	grid-row-gap: 2vh;
	align-content: center;
	grid-template-areas: 'content-img' 'content-title' 'content-text';
	justify-items: center;
}

.content--grid:has(.content__inner) {
	display: block;
	padding: 0;
}

.content__inner {
	width: 100%;
	height: 100%;
	border-radius: 0 0 2rem 2rem;
}

.content--card {
	display: flex;
	flex-direction: column;
	height: 80vh;
	width: 95vw;
	max-width: 500px;
	aspect-ratio: 0.8;
	top: 10vh;
	margin: auto;
	border-radius: 14px;
	gap: 3vh;
	text-align: center;
	margin-bottom: 5vh;
}

.content--card .content__title {
	font-size: clamp(1.5rem,4vw,3.5rem);
}

.content--card .content__title i {
	display: block;
}

.content--half {
	display: flex;
	flex-direction: column;
	gap: 3vh;
	/* text-align: center; */
}

.content--half:nth-child(odd) {
	margin-left: auto;
}

.content__img {
	grid-area: content-img;
	width: 50%;
	max-width: 300px;
	height: auto;
}

.content__img--large {
	width: 60%;
	height: auto;
}

.content__img--small {
	height: 35%;
	width: auto;
}

.spacer {
	margin-top: 10vh;
	margin-bottom: 10vh;
}

.content__title {
	grid-area: content-title;
	letter-spacing: -0.095em;
	text-transform: uppercase;
	line-height: 1;
	font-weight: normal;
	font-size: clamp(2rem,6vw,5rem);
	margin: 0;
	font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400;
}

.content__text {
	margin: 0;
	max-width: 500px;
	grid-area: content-text;
	text-align: left;
	line-height: 1.5;
	padding: 0 1rem;
	backface-visibility: hidden;
	font-size: clamp(1rem,2vw,1.5rem);
}
.content__text strong {
	font-variation-settings: "wght" 600;
}

.content__text--narrow {
	max-width: 500px;
}

.content--intro {
	padding-top: 25vh;
	padding-bottom: 25vh;
}

.content--outro {
	padding-top: 50vh;
	padding-bottom: 30vh;
}

.bg-0 { background: var(--terracotta); }
.bg-1 { background: var(--color-bg-1); }
.bg-2 { background: var(--color-bg-2); }
.bg-3 { background: var(--color-bg-3); }
.bg-4 { background: var(--color-bg-4); }
.bg-5 { background: var(--color-bg-5); }
.bg-6 { background: var(--color-bg-6); }

@media screen and (min-width: 992px) {
	body {
		--page-padding: 2rem 3rem;
	}
	.frame--header {
		height: 100vh;
		grid-template-columns: auto auto auto 1fr 1fr;
		grid-template-rows: auto 1fr auto;
		align-content: space-between;
		grid-template-areas: 'title back prev sub sponsor' 'heading heading heading heading heading' 'demos demos demos demos demos';
	}
	.frame__heading {
		margin-top: 0;
	}
	.frame__heading h2 {
		white-space: nowrap;
	}
	.frame__heading p {
		margin: 0 0 0 auto;
	}
	.content--grid .content__title {
		align-self: end;
	}
	.frame__demos {
		position: fixed;
		bottom: 2rem;
	}
	.frame--footer {
		padding-bottom: 0;
		grid-template-areas: 'credits ...' '... author';
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 6rem;
	}
	/* .frame__author {
		align-self: center;
	} */
	/* .frame #cdawrap {
		max-width: 300px;
		text-align: right;
	} */
	/* .frame #cdawrap, 
	.frame__author,
	.frame__sub {
		justify-self: end;
	} */
	.content--grid,
	.content--grid .content__inner {
		grid-template-areas: 'content-img content-title' 'content-img content-text';
		grid-template-columns: 30% 1fr;
		justify-items: start;
	}
	.content__img--large {
		width: 160%;
	}
	.content__img--left {
		justify-self: end;
	}
	.content__text--left {
		text-align: left;
		align-self: start;
	}
	.content--card {
		width: 50vw;
	}
	.content--half {
		width: 50%;
	}
}








/* Aggiunte doppiozero */

.logo {
	width: 70vw;
	height: auto;
	margin-bottom: 1rem;
}
@media (min-width: 576px) {
	.logo {
		width: 40vw;
  	}
}
img{
	display: block;
}
.form-check-input:checked{
	background-color: var(--rust);
	border-color: var(--rust);
}
.logo-sm{
	width: 70vw;
	height: auto;
	margin: 4rem auto 3rem;
	display: block;
}
@media (min-width: 576px) {
	.logo-sm {
		width: 300px;
  	}
}



.header__ruote{
	position: absolute; 
	right: -50%; 
	top: 5%;
	z-index: -1;
	width: 200%;
}
.footer__ruote{
	position: absolute; 
	left: -50%; 
	top: -30%;
	z-index: -1;
	width: 200%;
}
@media (min-width: 576px) {
	.header__ruote{
		right: -20%; 
		top: -15%;
		width: 70%;
	}
	.footer__ruote{
		right: -20%; 
		top: -15%;
		z-index: -1;
		width: 70%;
	}
}
@media (min-width: 992px) {
	.header__ruote{
		right: -20%; 
		top: 8%;
		width: 800px;
	}
	.footer__ruote{
		left: -20%; 
		top: -20%;
		width: 800px;
	}
}
@media (min-width: 1600px) {
	.header__ruote{
		right: -12%; 
		top: 8%;
	}
	.footer__ruote{
		left: -20%; 
		top: -60%;
	}
}

#ruotaPiccola, #ruotaPiccola2{
	width: 300px;
	height: auto;
	position: absolute; 
	left: -10%; 
	top: 70%;
	opacity: .16;
}
#ruotaGrande, #ruotaGrande2{
	width: 600px;
	height: auto;
	position: absolute; 
	right: -20%; 
	top: 20%;
	opacity: .40;
}

/* 🔧 Animazioni di rotazione per le ruote */
@keyframes spin-clockwise {
  to { transform: rotate(360deg); }
}
@keyframes spin-counter {
  to { transform: rotate(-360deg); }
}

/* Applicazione delle animazioni: diverso tempo per velocità differenti */
#ruotaPiccola, #ruotaPiccola2{
  /* Per elementi SVG: usa il box di riempimento e centra l'origine della trasformazione */
  transform-box: fill-box;
  transform-origin: center;
  animation: spin-counter 40s linear infinite;
  will-change: transform;
}
#ruotaGrande, #ruotaGrande2{
  transform-box: fill-box;
  transform-origin: center;
  animation: spin-clockwise 60s linear infinite;
  will-change: transform;
}



.form-wrap h2 {
	font-size: clamp(1.5rem,5vw,2rem);
	text-align: center;
	margin: 0 auto 1rem auto;
	font-variation-settings: "wght" 500;
	max-width: 540px;
}
.form {
	display: flex;
	flex-direction: column;
	gap: 1rem; 
	max-width: 400px;
}
.form-control{
	padding: .75rem 1rem;
}
.form-control:focus {
    border-color: var(--rust);
    box-shadow: 0 0 0 .25rem rgba(93, 36, 29, .5);
}


.btn-primary{
	background-color: var(--rust);
	border-color: var(--rust);
	color: var(--petal);
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: 0.75rem 1.5rem;
	text-transform: uppercase;
	font-variation-settings: "wght" 500;
	letter-spacing: 1px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:focus-visible, :not(.btn-check) + .btn:active, .btn.active{
	background-color: var(--clay);
	border-color: var(--clay);
	color: var(--petal);
}


.btn-primary2{
	background-color: var(--blush);
	border-color: var(--blush);
	color: var(--onyx);
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: 0.75rem 1.5rem;
	text-transform: uppercase;
	font-variation-settings: "wght" 600;
	letter-spacing: 1px;
}
.btn-primary2:hover, .btn-primary2:focus, .btn-primary2:focus-visible{
	background-color: var(--clay);
	border-color: var(--clay);
	color: var(--petal);
}



.content-molassi{
	background-image: url('../img/Molassi_di_Porta_Palazzo_1911.webp'); 
	background-position: center right; 
	background-size: cover; 
	background-repeat: no-repeat;
}
@media (min-width: 992px) {
	.content-molassi{
		background-size: 200% auto; 
	}
}
.content-mappa, .content-mappa2, .content-facciata, .content-arcate{
	background-image: url('../img/mappa.webp'); 
	background-position: center center; 
	background-size: cover; 
	background-repeat: no-repeat;
}
.content-mappa2{
	background-image: url('../img/mappa2.webp'); 
}.content-facciata{
	background-image: url('../img/facciata.webp'); 
}
.content-arcate{
	background-image: url('../img/arcate.webp'); 
}
@media (min-width: 1200px) {
	.content-mappa, .content-mappa2,.content-facciata, .content-arcate{
		background-image: none; 
	}
}
.content-render{
	background-image: url('../img/corte-molassi-finale-2.webp'); 
	padding:0;
	background-repeat: no-repeat;
	background-position: center center; background-size: cover; 
}
@media (min-width: 992px) {
	.content-render{
		background-position: left center; background-size: 200% auto; 
	}
}




.textual-section h2, .textual-section h3, .textual-section h4, .textual-section h5, .textual-section h6{
	font-variation-settings: "wght" 600;
}
.textual-section h2, .textual-section h3{
	margin-top: 2rem;
}
.textual-section p, .textual-section ul{
	font-variation-settings: "wght" 350;
	line-height: 1.6;
}




footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 5rem;
	position: relative;
	overflow: hidden;
}
.footer__logo {
	margin: 0 auto 1rem;
}
.footer__content {
	padding: 1rem 3rem;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	font-size: .9rem;
	text-align: center;
	margin-bottom: 70px;
	width: 100%;
}
.footer__content a + a{
	margin-left: 1.5rem;
}
@media (min-width: 576px) {
	.footer__content {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 0;
	}
}



.modal-content{
	border-radius: 6px 30px 6px 30px;
	background-color: #F5CEBF;
}
.modal-content h3{
	font-variation-settings: "wght" 500;
}
.modal-content strong{
	font-variation-settings: "wght" 600;
}
.text-danger{
	color: darkred !important
}


html{
	/* Override smooth scroll perché se no si blocca su Chrome con bootstrap */
	scroll-behavior: auto !important;
}