/* EDITORIAL PROJECTS V16 — broad, soft flashlight / single-image reveal */
.projects-v10 .projects-intro {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-size: 520px;
}

/* Dark base: the original exhibition photograph, always visible. */
.projects-v10 .projects-ghost-photo {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  opacity:1 !important;
  pointer-events:none;
}

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

.projects-v10 .projects-ghost-photo::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.22);
  pointer-events:none;
}

/*
   Bright copy of the EXACT same photograph.
   The mask uses WHITE/transparent stops and explicit alpha mode so Chrome
   reveals this layer as a soft pool instead of creating a second offset image.
*/
.projects-v10 .projects-light-spot {
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background-image:url('../images/street/PYOGYANG-mostra.jpg');
  background-size:cover;
  background-position:64% 50%;
  background-repeat:no-repeat;
  opacity:0;
  filter:grayscale(1) brightness(1.20) contrast(1.0);
  -webkit-mask-image:radial-gradient(
    circle var(--spot-size) at var(--spot-x) var(--spot-y),
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.98) 22%,
    rgba(255,255,255,.72) 42%,
    rgba(255,255,255,.34) 66%,
    rgba(255,255,255,0) 100%
  );
  mask-image:radial-gradient(
    circle var(--spot-size) at var(--spot-x) var(--spot-y),
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.98) 22%,
    rgba(255,255,255,.72) 42%,
    rgba(255,255,255,.34) 66%,
    rgba(255,255,255,0) 100%
  );
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
  will-change:mask-image, -webkit-mask-image, opacity;
}

/* Wide, low-level spill light: it catches the wall around the pictures too. */
.projects-v10 .projects-light-spot::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle calc(var(--spot-size) * 1.10) at var(--spot-x) var(--spot-y),
    rgba(255,255,255,.055) 0%,
    rgba(255,255,255,.035) 38%,
    rgba(255,255,255,.015) 62%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
}

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

.projects-v10 .projects-intro::before { content:none; }
.projects-v10 .projects-intro::after { z-index:0; pointer-events:none; }

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

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

@media (max-width:900px) {
  .projects-v10 .projects-intro { --spot-size:460px; }
}

@media (max-width:560px) {
  .projects-v10 .projects-intro { --spot-size:360px; }
}