@charset "UTF-8";
/* CSS Document */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

body, html {
  	font-family: "EB Garamond", serif;
  	margin: 0;
  	padding: 0;
  	height: 700vh;
  	background-color: black;
  	font-weight: 300;
  	overflow: none;
	color: rgb(240, 240, 240);
}

header {
    position: fixed;
    background-color: black;
    z-index: 10000;
    width: 100vw;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
}

header li, h1 {
    margin: 0.5rem 8px 0.5rem 0;
    height: 30px;
    padding: 0;
}

header menu h1,
header menu li {
    display: inline-block;
    margin-right: 0.75rem;
	scroll-snap-align: start;
}

header menu li a,
header menu h1 a {
	min-width: 71px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

header menu {
    transform: none !important;
    margin: 0;
    left: 0;
    padding: 0 calc(100vw - 96px) 0 calc(50vw + 20px);
    display: flex;
    gap: 0.75rem;
    width: -webkit-max-content;
}

header a.active,
header a.preview {
	opacity: 1 !important;
}

header.is-touching menu li a,
header.is-touching menu h1 a {
opacity: 1 !important;
}

p {
	margin: 0 0 1.2em 0;
}

header {
	scrollbar-width: none;   /* Firefox */
    scroll-padding-left: calc(20px + 50vw);
}

header::-webkit-scrollbar {
    display: none;           /* Chrome / Safari */
}

a {
	color: inherit;
	text-decoration: none;
}

h2 {
	font-height: inherit;
	font-style: italic;
	font-weight: 400;
}

h1, h2, p, li {
  	font-weight: 400;
  	font-size: 1.2rem;	
  	letter-spacing: 0.02em;
}

.image-triangle {
  	overflow: hidden;
}

.triangle-image {
  	position: fixed;
  	inset: 0;
  	width: 100%;
  	object-fit: cover;
  	height: 100%;
  	object-position: center;
  	transform: translateY(-25%);
  	clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

.text {
  	position: fixed;
  	inset: 0;
  	width: 100%;
  	object-fit: cover;
  	height: 100%;
  	object-position: center;
  	transform: translateY(-25%);
  	clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
  	background-color: rgba(0, 0, 0, 0.9);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.text.active {
	opacity: 1;
	pointer-events: auto;
}

.text div {
	position: fixed;
	inset: 0;
	left: 50%;
	top: 50%;
	object-fit: cover;
	height: 100%;
	object-position: center;
	width: 500px;
	padding: 0 20px;
	letter-spacing: 0.01em;
	font-weight: 350;
	line-height: 1.2;
	transform: translateY(calc(-50vh + 17px + 3rem));
}

.triangle-container {
  	position: fixed;
  	top: 50vh;
  	left: 50%;
  	transform: translate(-50%, -25%);
  	transition: filter 0.5s ease-out;
  	overflow: hidden;
  	clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

.triangle svg {
 	width: 100%;
  	height: 100%;
}

.bg {
    opcity: 0;
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 50vh;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.underline {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;

}

@media (min-width: 800px) {
	header:hover menu li a, header:hover menu h1 a {
		opacity: 1;
	}

	a:hover {
		opacity: 1 !important;
	}
}

@media (max-width: 800px) {
	
	header {
		scroll-padding-left: 20px;
	}
	
	header menu {
		padding: 0 calc(100vw - 96px) 0 20px;
	}

	header:hover menu li a, header:hover menu h1 a {
		opacity: none;
	}

    /* il testo già lo stai riducendo, lo lascio com’è o lo puoi unire qui */
    .text div {
        transform: translateY(calc(-50vh + 17px + 3rem)) translateX(-50vw);
        width: 90vw;
    }

    h1, h2, p, li {
        font-size: 1.1rem;
    }

}