@font-face {
  font-family: 'NyghtSerif';
  src: url('NyghtSerif-Regular.woff2') format('woff2'),
       url('NyghtSerif-Regular.woff') format('woff'),
       url('NyghtSerif-Regular.ttf') format('truetype'),
       url('NyghtSerif-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NyghtSerif';
  src: url('NyghtSerif-RegularItalic.woff2') format('woff2'),
       url('NyghtSerif-RegularItalic.woff') format('woff'),
       url('NyghtSerif-RegularItalic.ttf') format('truetype'),
       url('NyghtSerif-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

img, video {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

html, body {
  width: 100%;
  background: #1C1B1F;
  cursor: none;
  overflow: hidden;
  overscroll-behavior: none;
}

* { cursor: none !important; }

/* Cookiebot: ripristina il cursore NATIVO sul banner consenso. Il cursore custom
   (#cursor) ha z-index 9999 ma l'overlay di Cookiebot usa uno z-index quasi massimo,
   quindi lo copre → sulla card non si vedrebbe alcun cursore. */
#CybotCookiebotDialog,
#CybotCookiebotDialog *,
#CybotCookiebotDialogBodyUnderlay,
#CookiebotWidget,
#CookiebotWidget * {
  cursor: auto !important;
}
#CybotCookiebotDialog a,
#CybotCookiebotDialog button,
#CybotCookiebotDialog input,
#CybotCookiebotDialog label,
#CybotCookiebotDialog [role="button"],
#CybotCookiebotDialog [tabindex],
#CookiebotWidget a,
#CookiebotWidget button,
#CookiebotWidget input,
#CookiebotWidget label,
#CookiebotWidget [role="button"],
#CookiebotWidget [tabindex] {
  cursor: pointer !important;
}

/* Riserva sempre lo spazio della scrollbar: evita che la comparsa della
   scrollbar (Chrome) stringa il viewport DOPO il calcolo di maxScroll,
   lasciando una striscia di bg sotto la prima scena. Firefox non lo mostrava
   per via delle scrollbar overlay. */
html { scrollbar-gutter: stable; }

#cursor {
  position: fixed;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #c49a3c;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .2s ease;
  left: -20px;
  top: -20px;
  display: none;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #0d0d11;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(28px, 4.5vw, 72px);
  gap: clamp(14px, 2vw, 26px);
}
#preloader-pct {
  font-family: 'NyghtSerif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(64px, 13vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: rgba(235,231,221,0.28);
}
#preloader-bar-wrap {
  width: 100%; height: 1px;
  background: rgba(255,255,255,.12);
  position: relative;
}
#preloader-bar {
  position: absolute;
  left: 0; top: 0;
  height: 100%; width: 0%;
  background: #c49a3c;
  transition: width .25s ease;
}

#scroll-track {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  pointer-events: none;
}

/* ─── Link "TORNA AL SITO" (fixed in alto a sinistra) ─── */
#back-to-site {
  position: fixed;
  top: 22px;
  left: 26px;
  z-index: 9000;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #EBE7DD;
  text-decoration: none;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.3s ease, color 0.3s ease;
}
/* Reveal iniziale: fade-in lento di 2s (l'hover resta a 0.3s) */
#back-to-site.is-revealing { transition: opacity 2s ease, color 0.3s ease; }
#back-to-site.is-visible { opacity: 0.85; }
#back-to-site:hover { opacity: 1; color: #EAB97E; }

/* ─── Indicatore "SCROLLA" (fixed in basso al centro) ─── */
#scroll-indicator {
  position: fixed;
  bottom: 26px;
  right: 18px;
  z-index: 90;
  display: flex;
  flex-direction: row;
  align-items: flex-end;   /* base allineata: la S coincide con l'inizio della barretta */
  gap: 6px;
  pointer-events: none;
  opacity: 0;
}
.scrolla__track {
  position: relative;
  width: 2px;
  height: 72px;          /* leggermente più lunga del testo (~61px) */
  border-radius: 2px;
  background: rgba(235, 231, 221, 0.18);
  overflow: hidden;
}
.scrolla__fill {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 2px;
  background: #EAB97E;
  animation: scrolla-fill 2.2s ease-in-out infinite;
}
/* Si riempie dall'alto (0→100%) poi si svuota verso il basso (il bordo alto scende) */
@keyframes scrolla-fill {
  0%, 100% { top: 0;    height: 0;    }
  45%      { top: 0;    height: 100%; }
  90%      { top: 100%; height: 0;    }
}
.scrolla__label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #EBE7DD;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#nastro {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
  visibility: hidden;
}

.scene {
  position: relative;
  width: 100%;
  line-height: 0;
}

#scene-4 { z-index: 1; }
#scene-3 { z-index: 3; }
#scene-2 { z-index: 2; }
#scene-1 { z-index: 4; }

/* Scena finale: alta come la viewport, sfondo in cover (si "blocca" in cima).
   z-index 6 > pioggia (5): lo sfondo finale copre la pioggia della scena sotto. */
#scene-final { z-index: 6; height: 100vh; overflow: hidden; }
#scene-final > img {
  width: 100% !important;
  height: 100% !important;
  margin-left: 0 !important;
  object-fit: cover;
  object-position: center;
}

/* Testo finale (destra) — reveal blur-in + rise automatico */
#final-text {
  position: fixed;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  z-index: 58;
  pointer-events: none;
  opacity: 0;
}
.final-text__group { display: block; }
.final-text__line {
  font-family: 'NyghtSerif', serif;
  font-weight: 400;
  line-height: 1.04;
  white-space: nowrap;
  opacity: 0;
}
.final-text__name {
  font-size: clamp(40px, 4.4vw, 100px);
  color: #EBE7DD;
}
.final-text__claim {
  font-style: italic;
  color: #EAB97E;
  font-size: clamp(40px, 4.4vw, 100px);
}
/* Mobile: in alto sopra il piatto, centrato, su due righe
   (Giuliano Tartufi / Assapora l'eccellenza) */
@media (max-width: 767px) {
  /* Mobile: nascondi l'indicatore "SCROLL" con la barretta in basso a destra */
  #scroll-indicator { display: none !important; }
  #final-text {
    right: auto;
    left: 50%;
    top: 12vh;
    bottom: auto;
    width: 90vw;
    transform: translateX(-50%);
    text-align: center;
  }
  .final-text__group {
    display: flex;
    justify-content: center;
    gap: 0.5em;
  }
  /* Dimensione che lascia aria ai lati: "Assapora l'eccellenza" sta su una
     riga senza che la A iniziale finisca tagliata fuori dal viewport. */
  .final-text__name,
  .final-text__claim { font-size: clamp(31px, 8.4vw, 66px); }
}

.scene > img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

#three-canvas {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 50;
  display: none;
  mix-blend-mode: lighten;
}

#tartufo-dom {
  position: fixed;
  pointer-events: none;
  z-index: 49;
  transform: translate(-50%, -50%);
  display: none;
}

#tartufo-text {
  white-space: nowrap;
}

.tartufo-text__label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #EBE7DD;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 13px;
}

.tartufo-text__title {
  font-family: 'NyghtSerif', serif;
  font-weight: 400;
  font-size: 48px;
  color: #EAB97E;
  line-height: 1;
}

/* Logo al posto del titolo "Giuliano Tartufi": stessa larghezza del testo
   (326px ≈ "Giuliano Tartufi" a 48px) e stesso scaling oltre i 1920px. */
.tartufo-text__logo {
  display: block;
  width: 326px;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 1921px) {
  .tartufo-text__label { font-size: 0.9375vw; }
  .tartufo-text__title { font-size: 2.5vw; }
  .tartufo-text__logo  { width: 16.97vw; }
}

/* Mobile: logo "Giuliano Tartufi" iniziale ridotto (il default 326px occupava
   quasi tutta la larghezza dello schermo). */
@media (max-width: 767px) {
  .tartufo-text__logo { width: 60vw; }
}

#scene2-text {
  position: fixed;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 49;
  opacity: 0;
}

.scene2-text__line {
  font-family: 'NyghtSerif', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(36px, 5.208vw, 120px);
  color: #EBE7DD;
  line-height: 1.2;
  display: block;
  white-space: nowrap;
  opacity: 0;
}

.scene2-text__line--italic {
  font-style: italic;
  color: #EAB97E;
}

.scene2-text__em {
  font-style: italic;
  color: #EAB97E;
}

#scene2-copy,
#scene3-copy {
  position: fixed;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 49;
  opacity: 0;
}

.rain-drop {
  position: absolute;
  pointer-events: none;
  width: 1px;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(200,220,255,0) 0%, rgba(200,220,255,0.55) 100%);
  transform-origin: top center;
}

.scene3-copy__logo {
  display: block;
  width: clamp(180px, 25vw, 380px);
  height: auto;
  margin: 0 auto 24px;
  pointer-events: none;
  opacity: 0;
}

.scene2-copy__line {
  font-family: 'NyghtSerif', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(36px, 5.208vw, 120px);
  color: #EBE7DD;
  line-height: 1.2;
  display: block;
  white-space: nowrap;
  opacity: 0;
}

@media (max-width: 767px) {
  /* I contenitori sono centrati (left:50% + translate -50%) ma senza larghezza
     esplicita: gli diamo 90vw così le righe hanno spazio per andare a capo
     restando centrate, invece di restringersi alla metà destra dello schermo. */
  #scene2-text,
  #scene2-copy,
  #scene3-copy {
    width: 90vw;
  }
  .scene2-text__line,
  .scene2-copy__line {
    /* Testo più grande su mobile: le righe lunghe vanno a capo
       invece di restare forzate su una sola riga (niente overflow). */
    font-size: clamp(34px, 9.5vw, 52px);
    white-space: normal;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .scene > img { width: 150%; margin-left: -25%; }
}

@media (max-width: 767px) {
  .scene > img { width: 210%; margin-left: -55%; }
  /* Scene pioggia: immagine meno allargata così mostra più della parte alta */
  #scene-4 > img { width: 160%; margin-left: -30%; }
}