/* =========================================================
   PORTFOLIO 2 — videobydan / Danilo Ceruso
   base.css — colori, carattere, reset, navigation, entrate.
   QUI IN CIMA C'È TUTTO QUELLO CHE SI CAMBIA SPESSO.
   ========================================================= */

/* ---------- il carattere (dentro il progetto, licenza OFL 1.1) ----------
   Un solo file variabile: contiene tutti i pesi da 100 a 900.
   NOTA: i caratteri self-hosted funzionano quando il sito è servito
   via http (vedi README, "come aprire il sito"). Aprendo il file con
   doppio click Chrome li blocca e vedrai Arial: non è un errore del sito. */

@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/InterTight-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- i valori del progetto ---------- */

:root {
  /* colori */
  --bg:           #080808;
  --bg-secondary: #101010;
  --text:         #F2F1EC;
  --muted:        #8D8D87;
  --dim:          #6E6E68;   /* solo per il footer */
  --yellow:       #FFD600;
  --orange:       #FF6A00;   /* micro-accent, usato con parsimonia */

  /* un solo carattere per tutto il sito */
  --font: "Inter Tight", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* margine laterale di tutto il sito */
  --pad: clamp(20px, 2.2vw, 42px);

  /* aria fra le sezioni */
  --section-space: clamp(96px, 13vh, 200px);

  /* tempi */
  --t-fast: .22s;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* simile a expo.out */
}

/* ---------- reset minimo ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;      /* scroll nativo del browser, nessuna libreria */
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; max-width: 100%; }

::selection { background: var(--yellow); color: var(--bg); }

/* ---------- accessibilità ---------- */

.skip {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
}

.skip:focus {
  width: auto; height: auto;
  clip-path: none;
  left: var(--pad);
  top: var(--pad);
  padding: 10px 14px;
  background: var(--yellow);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
}

:focus-visible { outline: 1px solid var(--yellow); outline-offset: 6px; }

/* =========================================================
   CONTAINER UNICO
   Tutto quello che viene dopo la Hero vive dentro questa
   larghezza: Selected Work, About, Contact, footer.
   Un solo bordo sinistro e un solo bordo destro per tutta
   la pagina = le linee di allineamento invisibili.

   width: min(100% - 2*margine, 1240px) e margin auto.
   Niente 100vw (che ignora la barra di scorrimento e crea
   overflow), niente padding sommato alla larghezza.
   ========================================================= */

.section {
  width: min(100% - 2 * var(--pad), 1240px);
  margin-inline: auto;
  padding-block: var(--section-space);
}

/* =========================================================
   ORDINE DEI LIVELLI (z-index) — vale dentro .stage
     0  fondo della Hero
     1  contenuto della Hero (videobydan, nome, tagline)
     2  navigation
     3  cursore liquido: livello che inverte
     4  cursore liquido: livello che tinge di giallo
     5  emoji (sopra il liquido, così non si invertono)
   ========================================================= */

/* =========================================================
   STAGE — contiene nav, hero, emoji e i canvas del cursore
   ========================================================= */

.stage {
  position: relative;
  isolation: isolate;           /* la fusione dei colori resta qui dentro */
  background: var(--bg);
}

/* ---------- navigation ---------- */
/* absolute e non fixed: sopra i video non serve, e non ruba spazio */

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: var(--pad);
  padding-left:  max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  font-size: clamp(13px, 0.95vw, 14px);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
}

.nav__id { color: var(--text); }

.nav__links { display: flex; gap: clamp(18px, 2vw, 34px); }

.nav__links a {
  color: var(--muted);
  transition: color var(--t-fast) ease;
}

.nav__links a:hover,
.nav__links a:focus-visible { color: var(--yellow); }

/* =========================================================
   ENTRATE
   Gli elementi partono nascosti SOLO se il JavaScript funziona
   (classe .js). Senza JS il sito si vede tutto subito.
   ========================================================= */

.js [data-enter] {
  opacity: 0;
  transform: translateY(14px);
}

.js [data-enter] {
  transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1s var(--ease);
}

.is-ready [data-enter] { opacity: 1; transform: none; }

.is-ready [data-enter="1"] { transition-delay: .05s; }
.is-ready [data-enter="2"] { transition-delay: .18s; }
.is-ready [data-enter="3"] { transition-delay: .52s; }
.is-ready [data-enter="4"] { transition-delay: .64s; }
.is-ready [data-enter="5"] { transition-delay: .82s; }
.is-ready [data-enter="6"] { transition-delay: 1.0s; }

/* il marchio entra da sotto una linea invisibile, senza lettera per lettera */
/* le lettere salgono da sotto una linea invisibile: la maschera si apre
   dal basso verso l'alto mentre il testo sale di poco. Nessun effetto
   lettera per lettera, nessun glitch. */
.js .brand .rev {
  clip-path: inset(110% -10% -25% -10%);
  transform: translateY(.14em);
  transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: .18s;
}
.is-ready .brand .rev { clip-path: inset(-25% -10% -25% -10%); transform: none; }

/* rivelazioni allo scroll: brevi, quasi impercettibili */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-in,
.show-all [data-reveal],
.show-all [data-enter] { opacity: 1; transform: none; }
.show-all .brand .rev { clip-path: none; }

/* ---------- se il sistema chiede meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001s !important;
    transition-delay: 0s !important;
  }
  .js [data-enter],
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .brand .rev { clip-path: none; transform: none; }
}