/* PROJECTS V17 — simple, robust flashlight: clear photo + visible 80% black overlay + radial hole */
.projects-v10 .projects-intro {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-size: 520px;
  position: relative;
}

/* The real photograph stays clear and completely still underneath. */
.projects-v10 .projects-ghost-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
  overflow: hidden;
}

.projects-v10 .projects-ghost-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 64% 50%;
  filter: grayscale(1) brightness(1) contrast(1.02) !important;
}

.projects-v10 .projects-ghost-photo::after {
  content: none !important;
}

/*
  THIS is the flashlight mask.
  It is a real, visible black 80% layer covering the whole photograph.
  The transparent centre is the hole made by the pointer.
*/
.projects-v10 .projects-light-spot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(
      circle var(--spot-size) at var(--spot-x) var(--spot-y),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,.10) 36%,
      rgba(0,0,0,.28) 50%,
      rgba(0,0,0,.52) 67%,
      rgba(0,0,0,.68) 82%,
      rgba(0,0,0,.80) 100%
    ) !important;
  transition: opacity .16s ease;
}

.projects-v10 .projects-light-spot.is-active {
  opacity: 1 !important;
}

/* Restore the original positions: 01 / 03 top-right, Scorri bottom-right. */
.projects-v10 .projects-intro-kicker {
  position: absolute !important;
  top: 132px !important;
  right: 7vw !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 3 !important;
}

.projects-v10 .projects-scroll {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 7vw !important;
  bottom: 52px !important;
  transform: none !important;
  z-index: 3 !important;
}

.projects-v10 .projects-intro > *:not(.projects-ghost-photo):not(.projects-light-spot) {
  position: relative;
  z-index: 2;
}

.projects-v10 .projects-intro::before,
.projects-v10 .projects-intro::after {
  pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {
  .projects-v10 .projects-light-spot { opacity: 1 !important; }
}

@media (hover:none), (pointer:coarse) {
  .projects-v10 .projects-light-spot { opacity: 0 !important; }
}

@media (max-width:900px) {
  .projects-v10 .projects-intro-kicker {
    top: 120px !important;
    right: 24px !important;
  }
  .projects-v10 .projects-scroll {
    right: 24px !important;
    bottom: 32px !important;
  }
  .projects-v10 .projects-intro { --spot-size: 460px; }
}

@media (max-width:560px) {
  .projects-v10 .projects-intro-kicker { top: 112px !important; }
  .projects-v10 .projects-intro { --spot-size: 380px; }
}

/* V18 TORCIA — correzione finale: una sola maschera nera uniforme + foro morbido.
   Disattiva i vecchi effetti ereditati e il ring del cursore, che appariva come una ciambella. */
.projects-v10 .projects-intro::before,
.projects-v10 .projects-intro::after {
  content:none !important;
  display:none !important;
}

/* La fotografia sotto deve essere realmente chiara e immobile. */
.projects-v10 .projects-ghost-photo {
  opacity:1 !important;
  filter:none !important;
  -webkit-mask:none !important;
  mask:none !important;
}
.projects-v10 .projects-ghost-photo img {
  filter:grayscale(1) brightness(1) contrast(1.02) !important;
}
.projects-v10 .projects-ghost-photo::after {
  content:none !important;
  display:none !important;
}

/* La maschera copre OGNI punto della fotografia all'80%.
   Il solo elemento chiaro è il foro centrale, con una transizione lunga e morbida. */
.projects-v10 .projects-light-spot {
  opacity:1 !important;
  background:
    radial-gradient(
      circle at var(--spot-x) var(--spot-y),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,.08) 42%,
      rgba(0,0,0,.32) 56%,
      rgba(0,0,0,.60) 72%,
      rgba(0,0,0,.80) 88%,
      rgba(0,0,0,.80) 100%
    ) !important;
  filter:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  transition:none !important;
}
.projects-v10 .projects-light-spot::after {
  content:none !important;
  display:none !important;
}

/* Niente anello del cursore sopra la torcia: la torcia è l'unico indicatore. */
.projects-v10 .cursor,
.projects-v10 .cursor-ring {
  display:none !important;
}