/* ==========================================================================
   PADDIO BANGNA — cursor sunlight
   Loaded after shared/consumer.css. Pairs with shared/sunlight.js. On a page
   with no [data-sun-src] it does nothing at all.

   WHAT THE EFFECT IS. A soft circle of warm light follows the pointer across a
   gallery tile, and everything it is not on falls into shade — as though the
   sun were low and moving across the picture. The lit layer is a clone of the
   image already in the tile, warmed by --sun-warm; the shade is a gradient.
   Every part of the look is CSS, built on first hover rather than at load.
   ========================================================================== */

.gal-item {
  /* Pointer position, in px from the tile's top-left. Written by sunlight.js.
     Parked off-tile so a layer that somehow shows before the first move has
     its light outside the frame rather than stuck in the corner. */
  --sx: -999px;
  --sy: -999px;
  /* Sized against the tile, not by eye. At the 3-up desktop breakpoint a tile
     is about 400x267, so its half-diagonal is ~240px. The shade reaches full
     strength at 88% of 1.5x this radius — 198px — which lands inside that
     half-diagonal, so the falloff completes within the frame even when the
     pointer sits dead centre. Anything larger and a centred pointer lights the
     whole tile and the effect disappears exactly where people hover most. */
  --sun-r: 150px;
  /* The whole of the light. Since the lit layer is a clone of the image below
     it, this filter is the only thing that distinguishes them — warm and a
     little brighter, the way low sun falls rather than the way a lamp does.
     Tune it here and every tile follows. */
  --sun-warm: saturate(1.34) sepia(.26) brightness(1.1) contrast(1.05);
  --sun-shade: rgba(9, 24, 18, .52);
}

/* THE SHADE IS DOING MOST OF THE WORK, and it is worth saying why.

   Warming a circle on its own barely registers — a lit patch on an already
   bright picture has nothing to be bright against. What sells this is the
   inverse: darkening everything the pointer is NOT on. Contrast against the
   shade is what makes the lit circle read as light rather than as a slightly
   different crop, and it costs one gradient — no image, no mask, no request.

   The gradient is its own mask here: transparent through the middle, opaque
   at the rim, centred on the pointer. */
.sun-shade {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .38s var(--ease);
  background: radial-gradient(circle calc(var(--sun-r) * 1.5) at var(--sx) var(--sy),
                transparent 0%, transparent 42%, var(--sun-shade) 88%);
}
.gal-item.sun-on .sun-shade { opacity: 1; }

.sunlight {
  position: absolute; inset: 0;
  pointer-events: none;          /* the tile still opens the lightbox on click */
  opacity: 0;
  transition: opacity .38s var(--ease);
  filter: var(--sun-warm);

  /* The light itself. Fading the mask out to transparent rather than cutting
     at a hard edge is what stops this reading as a magnifying glass. */
  -webkit-mask-image: radial-gradient(circle var(--sun-r) at var(--sx) var(--sy),
                        #000 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.35) 62%, transparent 76%);
          mask-image: radial-gradient(circle var(--sun-r) at var(--sx) var(--sy),
                        #000 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.35) 62%, transparent 76%);
}
.gal-item.sun-on .sunlight { opacity: 1; }

.sunlight img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* style.css scales .gal-item img to 1.04 on hover. The two layers must move
     together or the light drifts off the geometry it is supposed to be
     falling on, so this mirrors that transform exactly. */
  transform: scale(1.04);
  transition: transform 1s var(--ease);
}
/* consumer.css puts the grid on a fixed 3:2 tile; match it so the overlay
   crops identically to the image underneath. */
.gal-grid .sunlight img { aspect-ratio: 3 / 2; }

/* If a version ever brings back the hover caption that style.css still styles,
   it is appended before these layers and would be painted over by them. This
   keeps it on top. No consumer version currently renders one — the captions
   live in data-caption and surface only in the lightbox — so today this rule
   matches nothing and costs nothing. */
.gal-item figcaption { z-index: 2; }

/* Never on touch, never against a stated preference for less movement. The
   guard is duplicated in JS — this half keeps the layer invisible even if the
   script ran, the JS half avoids building and decoding a second image at all. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .sunlight, .sun-shade { display: none; }
}