/* Christmas In Action — site customisations layered on top of the Duda export.
 *
 * Loaded after Style/{device}.css and the recovered Style/widgets/*.css, so
 * anything here wins without needing !important on every line. Keep additions
 * scoped and commented; this file is the one place to look for behaviour that
 * did NOT come from Duda.
 */

/* ── Past Projects gallery: hover preview ──────────────────────────────────
 * Scaling the tile in place was the wrong mechanism. Measured on the built
 * page: a tile is 298x224 CSS px painting a 640x480 background, so doubling it
 * upscaled ~1.9x and went soft; the enlarged tile swallowed its neighbours,
 * which made sweeping across the grid snap and flicker; and because the tile is
 * a 4:3 crop, magnifying it showed the same crop bigger rather than more photo.
 *
 * Instead the grid never moves. Hovering fades the full, uncropped image into a
 * fixed pane at 1920w — the sharp copy Duda shipped but never loaded, because
 * the <img> holding it has no src and its lazy-loader isn't in the export.
 *
 * pointer-events:none on the pane is what removes the mouse-trap entirely: the
 * cursor still addresses the tile underneath, so there is nothing to flicker.
 */
#cia-gallery-preview {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  pointer-events: none;      /* the whole point — never steals the hover */
  opacity: 0;
  transition: opacity 0.22s ease;
  background: rgba(12, 12, 14, 0.34);
}

#cia-gallery-preview.is-visible {
  opacity: 1;
}

#cia-gallery-preview img {
  max-width: min(78vw, 1000px);
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border: 5px solid #fff;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.97);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#cia-gallery-preview.is-visible img {
  transform: scale(1);
}

/* Cue that the thumbnail is interactive, without moving the grid. */
#dm .dmPhotoGallery.newPhotoGallery .layout-container .photoGalleryThumbs {
  transition: filter 0.25s ease, box-shadow 0.25s ease;
  cursor: zoom-in;
}

#dm .dmPhotoGallery.newPhotoGallery .layout-container .photoGalleryThumbs:hover,
#dm .dmPhotoGallery.newPhotoGallery .layout-container .photoGalleryThumbs:focus-within {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px rgba(194, 0, 45, 0.85);
}

/* No hover on touch: there is nothing to preview from, and a sticky :hover
   after a tap reads as a bug. JS also skips binding there. */
@media (hover: none) {
  #cia-gallery-preview { display: none; }
  #dm .dmPhotoGallery.newPhotoGallery .layout-container .photoGalleryThumbs { cursor: default; }
  #dm .dmPhotoGallery.newPhotoGallery .layout-container .photoGalleryThumbs:hover {
    filter: none;
    box-shadow: none;
  }
}

/* ── Footer design credit: shimmer sweep + underline draw ──────────────────
 * White on the red footer, so a light sweep across the letters actually reads.
 */
.vgm-credit {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* The underline draws out from the centre. Kept separate from the shimmer so
   it still works if background-clip:text isn't supported. */
.vgm-credit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vgm-credit:hover::after,
.vgm-credit:focus-visible::after {
  transform: scaleX(1);
}

/* Guarded: without background-clip:text, -webkit-text-fill-color:transparent
   would render the name invisible rather than merely unshimmered. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .vgm-credit {
    /* The text is already pure white, so a sweep can only read by dipping to a
       tint. A near-white pink was invisible; this band is tight and saturated
       enough to register as a glint travelling across the letters. */
    background-image: linear-gradient(
      100deg,
      #ffffff 0%, #ffffff 38%,
      #ffb0c4 46%,
      #ff7f9c 50%,
      #ffb0c4 54%,
      #ffffff 62%, #ffffff 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.75s ease;
  }

  .vgm-credit:hover,
  .vgm-credit:focus-visible {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vgm-credit,
  .vgm-credit::after,
  #cia-gallery-preview,
  #cia-gallery-preview img {
    transition: none;
  }
}