/* ============================================================
   Mavi — stili condivisi da tutte le pagine del sito
   ============================================================
   Qui vive tutto ciò che è identico (o quasi) su ogni pagina:
   reset di base, componenti UI ricorrenti (link, bottoni, cursore
   personalizzato, badge "Get in touch"), utility e la media query
   di reduced-motion.

   Cosa NON sta qui, e resta invece nel piccolo <style> di ogni
   pagina:
   - le variabili colore `:root` — ogni pagina ha la sua palette
     (chiara, o "a negativo" per contatti.html/progetto.html/
     progetto-foto.html), quindi non può esistere un unico :root
     valido per tutte;
   - le rare varianti di componente che cambiano da pagina a
     pagina (es. `.view-resume-btn` su chi-sono.html usa l'accento
     lavanda invece del verde fisso; `.get-in-touch:hover` su
     progetto.html/progetto-foto.html forza un testo quasi nero
     invece che il colore di sfondo) — quella pagina sovrascrive
     solo la proprietà che le serve, dopo aver caricato questo
     file;
   - il CSS specifico di una sola pagina (tile decorative, gallerie
     dei case study, sidebar, slider lavori, pannello admin...).
   ============================================================ */

/* ---------- Reset di base ---------- */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background-color: rgb(var(--color-bg-rgb)); color: rgb(var(--color-ink-rgb)); }
::selection { background: var(--color-accent); color: var(--color-paper); }

/* Testo tutto maiuscolo: non scriverlo mai a mano nell'HTML — scrivi il
   testo normale e aggiungi la utility "uppercase" di Tailwind (es.
   class="uppercase"). Questa regola aggiunge sempre un po' di kerning
   quando la usi, altrimenti il testo maiuscolo risulta troppo compresso. */
.uppercase { letter-spacing: .03em; }

/* Voci di menu: sottolineatura che cresce da sinistra all'hover.
   Il colore segue currentColor, quindi combacia da solo con
   hover:text-accent (o con l'accento fisso della voce attiva). */
.nav-link, .link-hover { position: relative; transition: transform .3s ease; }
.nav-link::after, .link-hover::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after, .link-hover:hover::after { transform: scaleX(1); }
.nav-link:hover, .link-hover:hover { transform: scale(1.06); }

/* Link con freccia in stile "pulsante" (Read more, View all works):
   viola (accento del sito), sottolineatura animata + verde al passaggio
   del mouse — stesso verde riservato altrove al "negativo" del footer,
   qui usato di proposito come colore di hover per questi link, su
   indicazione della sitografia di riferimento (sakshisuthar.framer.website).
   La freccia scivola a destra di qualche pixel in hover, e tutto il link
   si ingrandisce leggermente (stessa scala 1.06 di .nav-link/.link-hover). */
.read-more-link {
  position: relative;
  color: rgb(var(--color-accent-rgb));
  font-weight: 600;
  text-decoration: none;
  transition: color .25s ease, transform .3s ease;
}
.read-more-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.read-more-link:hover { color: #A9E79C; transform: scale(1.06); }
.read-more-link:hover::after { transform: scaleX(1); }
.read-more-link svg { transition: transform .25s ease; }
.read-more-link:hover svg { transform: translateX(4px); }

/* Pulsante "View resume": fondo verde fisso, testo scuro fisso, si
   ingrandisce in hover (scala 1.06) senza cambio di colore. Variante di
   default (usata dalla maggior parte delle pagine); chi-sono.html
   sovrascrive background/color con l'accento lavanda della sua palette
   chiara nel proprio <style>. */
.view-resume-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1.5rem; border-radius: 9999px;
  background: #A9E79C; border: 1px solid #A9E79C;
  color: #16150F;
  font-weight: 600; text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, transform .3s ease;
}
.view-resume-btn:hover { transform: scale(1.06); }

/* Grana, riferimento diretto alla texture delle immagini moodboard */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Cursore personalizzato (puntino + anello che inverte i colori) ----------
   Ispirato a rheahinger.com. Il cerchio non ha un colore scelto a mano:
   è bianco pieno con mix-blend-mode:difference, quindi mostra sempre il
   "negativo" di qualunque sfondo stia coprendo mentre si sposta. Il
   puntino segue il mouse esatto, il cerchio insegue con un piccolo
   ritardo (vedi assets/js/main.js). Attivo solo su desktop con mouse
   reale e se le animazioni non sono ridotte: sugli altri resta il
   cursore di sistema. */
body.custom-cursor, body.custom-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 70;
  border-radius: 9999px;
}
.cursor-dot { width: 8px; height: 8px; background: rgb(var(--color-ink-rgb)); }
.cursor-ring { width: 36px; height: 36px; background: #fff; mix-blend-mode: difference; }
.cursor-ring.is-hidden { opacity: 0 !important; }

/* ---------- Get in touch: badge circolare fisso verso i contatti ----------
   Forma, posizione e animazione ispirate a shuka.design; colori e font
   restano quelli del sito (variabili :root), così il badge segue anche
   l'inversione "a negativo" della sezione contatti. Ferma a riposo; ruota
   in avanti mentre ci passi sopra il mouse (gestito via GSAP, vedi
   assets/js/main.js). Quando esci, torna indietro ruotando davvero in
   senso contrario fino all'ultimo giro completo, in modo rapido ma
   visibile — non uno scatto istantaneo. */
.get-in-touch {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
  width: 108px; height: 108px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--color-bg-rgb));
  border: 1px solid rgb(var(--color-line-rgb));
  color: rgb(var(--color-ink-rgb));
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.get-in-touch:hover {
  background: rgb(var(--color-accent-rgb));
  border-color: rgb(var(--color-accent-rgb));
  color: rgb(var(--color-bg-rgb));
  transform: scale(1.06);
}
.git-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.git-ring text {
  font-family: var(--font-mono); font-size: 24px; letter-spacing: .04em;
  text-transform: uppercase; fill: currentColor;
}
.git-dot { position: relative; font-family: var(--font-mono); font-size: 22px; line-height: 1; pointer-events: none; }
@media (max-width: 640px) {
  .get-in-touch { width: 76px; height: 76px; right: 1rem; bottom: 1rem; }
  .git-dot { font-size: 17px; }
}

/* ---------- Reveal on scroll: fade-in delle sezioni quando entrano nel viewport ----------
   Applicata via JS (assets/js/main.js) a ogni <section> di contenuto,
   escluse quelle già coperte da un'animazione GSAP dedicata (hero/testata
   di pagina, e la sezione #contatti con lo scrub colore "a negativo").
   Stato iniziale nascosto/spostato in basso, poi la classe .is-visible
   (aggiunta da un IntersectionObserver) porta a opacità piena e posizione
   naturale. */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}