*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #0b0d12;
  color: #fff;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Pagine a tutto schermo ---------- */
.page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;            /* se il testo è più lungo dello schermo (telefono) */
  overscroll-behavior: contain;
  scrollbar-width: none;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.page::-webkit-scrollbar { display: none; }
.page.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 1.1s ease, visibility 0s;
}
.page > .bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page::after {               /* sfumatura in basso per leggere il testo */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.8) 100%);
}

/* ---------- Pagina 1 ---------- */
#home > .bg { object-position: 72% 50%; }
#home::after {
  background:
    linear-gradient(to bottom, rgba(220,230,245,.35) 0%, rgba(220,230,245,0) 22%),
    linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
}
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.4rem, 2vw, 1.4rem);
  padding: clamp(1.5rem, 4vh, 3rem) 16px 0;
  font-family: "Uncial Antiqua", serif;
  font-size: clamp(1.35rem, 4.6vw, 3.4rem);
  color: #12141a;
  letter-spacing: .02em;
  text-transform: lowercase;
}
.brand h1 { font: inherit; display: contents; }
.brand img {
  width: clamp(78px, 15vw, 190px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.home-bottom {
  margin-top: auto;
  text-align: center;
  padding: 0 16px calc(clamp(2rem, 6vh, 4rem) + 44px);
}
.tagline {
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  margin-bottom: 1.4rem;
}
.social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 1.8rem);
}
.social a {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform .25s, background .25s, border-color .25s;
}
.social svg { width: 24px; height: 24px; fill: #fff; }
.social a:hover, .social a:focus-visible {
  transform: translateY(-3px);
  background: #1f5fd1;
  border-color: #1f5fd1;
  outline: none;
}

/* ---------- Pagine 2 e 3: testo ---------- */
#about > .bg { object-position: 40% 40%; }
#bio > .bg   { object-position: 35% 30%; }
.text {
  margin-top: auto;
  max-width: 60rem;
  align-self: center;
  text-align: center;
  padding: 40vh 16px calc(clamp(2rem, 6vh, 4rem) + 44px);
  font-size: clamp(1.02rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.text p + p { margin-top: .35em; }

/* comparsa morbida del testo */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s ease .45s, transform 1s ease .45s; }
.active .reveal { opacity: 1; transform: none; }

/* ---------- Freccia e puntini di navigazione ---------- */
.next {
  position: fixed;
  left: 50%;
  bottom: clamp(.8rem, 2.5vh, 1.6rem);
  z-index: 10;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.8));
  animation: bob 2.2s ease-in-out infinite;
}
.next svg { width: 30px; height: 30px; transition: transform .5s ease; }
.next.up svg { transform: rotate(180deg); }
.next:focus-visible { outline: 1px solid rgba(255,255,255,.7); }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 6px; } }

.dots {
  position: fixed;
  right: clamp(10px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,.6);
  transition: background .4s, transform .4s;
}
.dots button[aria-current="true"] { background: #fff; transform: scale(1.2); }

@media (prefers-reduced-motion: reduce) {
  .page, .page.active, .reveal { transition: none; }
  .next { animation: none; }
}

@media (min-width: 900px) and (orientation: landscape) {
  #home > .bg { object-position: 60% 22%; }
  #bio > .bg {                 /* sposta il viso a sinistra, il testo va sul mare */
    width: 118%;
    left: -18%;
    object-position: 50% 32%;
  }
  #bio .text {
    align-self: flex-end;
    margin: auto 4vw auto 0;
    max-width: 31rem;
    padding: 4rem 0;
  }
  #bio::after {
    background: linear-gradient(to right, rgba(0,0,0,0) 40%, rgba(10,20,40,.5) 58%, rgba(10,20,40,.72) 100%);
  }
}
@media (max-width: 600px) {
  #bio::after { background: linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.85) 100%); }
  .social a { width: 48px; height: 48px; }
  .social svg { width: 21px; height: 21px; }
  .text { padding-top: 45vh; padding-inline: 30px; }
}