@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Inter:400,500|EB+Garamond:400,italic|Bona+Nova:400,italic");

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
html, body { scroll-behavior: smooth; }

html, body {
  margin: 0;
  height: 100%;
}

a { text-decoration: none; }

button:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}


body{
  opacity: 1;
  transition: opacity 300ms ease-out;
}

body.fade-out{
  opacity: 0;
}


/* =========================
   REVEAL ON SCROLL (GLOBAL)
   ========================= */

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.reveal-img{
  opacity: 0;
  transform: translateY(14px) scale(0.995);
  transition: opacity 750ms ease, transform 750ms ease;
  will-change: opacity, transform;
}

.reveal-img.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-img{
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.fade-out { opacity: 0; transition: opacity 300ms ease-out; }
.clicked { color: #4a67e2 !important; transition: color 0.2s ease-in-out; }

/* =========================
   Custom cursor: dot + glow
   ========================= */

/* Nascondi cursore di sistema (solo per mouse) */
@media (pointer: fine){
  body{
    cursor: none;
  }
  a, button, [role="button"], input, textarea, select, label{
    cursor: none;
  }
}

/* Glow (piccolo + inversione automatica) */
.cursor-glow{
  position: fixed;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;

  background: radial-gradient(circle,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0.45) 40%,
    rgba(255,255,255,0.15) 65%,
    rgba(255,255,255,0.0) 75%
  );
  filter: blur(6px);
  mix-blend-mode: difference;
  opacity: 0.85;
}

/* Dot (pallino pieno) */
.cursor-dot{
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;             /* dimensione pallino */
  height: 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;

  border-radius: 999px;

  /* 🔑 si inverte automaticamente (nero su chiaro, bianco su scuro) */
  background: #fff;
  mix-blend-mode: difference;

  opacity: 0.95;
  transition: width .12s ease, height .12s ease, background-color .12s ease, border .12s ease;
}

/* Hover su elementi cliccabili → cerchio solo stroke */
body.is-pointer .cursor-dot{
  width: 18px;
  height: 18px;
  background: transparent;
  border: 1.5px solid #fff;       /* con blend-mode diventa auto invertito */
  mix-blend-mode: difference;
  opacity: 1;
}

/* Opzionale: rendilo un filo più “snappy” */
body.is-pointer .cursor-glow{
  opacity: 1;
}

/* Touch device: disabilita */
@media (pointer: coarse){
  .cursor-glow,
  .cursor-dot{
    display: none;
  }
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce){
  .cursor-glow,
  .cursor-dot{
    display: none;
  }
}