/* gallery.css  -  Gallery page only. Columns stack photos of any height without gaps. */
.ny-masonry { -webkit-columns: 1; columns: 1; -webkit-column-gap: 1rem; column-gap: 1rem; }
@media (min-width: 576px)  { .ny-masonry { -webkit-columns: 2; columns: 2; } }
@media (min-width: 992px)  { .ny-masonry { -webkit-columns: 3; columns: 3; } }
@media (min-width: 1400px) { .ny-masonry { -webkit-columns: 4; columns: 4; } }
/* Main Gallery: fixed columns on tablets and up; on phones the columns dissolve and each tile's inline order sets the sequence. */
.ny-cols { display: flex; flex-direction: column; }
.ny-col { display: contents; }
@media (min-width: 768px) {
  .ny-cols { flex-direction: row; align-items: flex-start; gap: 1rem; }
  .ny-col { display: block; flex: 1 1 0; min-width: 0; }
}
.ny-tile {
  position: relative; display: block; margin: 0 0 1rem; overflow: hidden;
  -webkit-column-break-inside: avoid; break-inside: avoid;
  border: 1px solid var(--ny-line); border-radius: .85rem; background: #000;
}
.ny-tile img { display: block; width: 100%; height: auto; transition: transform .7s var(--ny-ease), opacity .3s; }
.ny-tile:hover img, .ny-tile:focus img { transform: scale(1.06); opacity: .8; }
.ny-tile-zoom {
  position: absolute; right: .75rem; bottom: .75rem; display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; color: #190812; background: var(--ny-pink); border-radius: 50%;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ny-ease);
}
.ny-tile:hover .ny-tile-zoom, .ny-tile:focus .ny-tile-zoom { opacity: 1; transform: none; }

/* ======================================================================
   Magic: glowing frames on every photo, shimmer lightbox
   ====================================================================== */

/* ---- every photo is framed in a soft glow taken from the photo itself ---- */
.ny-framed {
  border-color: color-mix(in srgb, var(--g, #d1a097) 55%, transparent);
  box-shadow: 0 0 1rem -.1rem color-mix(in srgb, var(--g, #d1a097) 45%, transparent), 0 0 3rem 0 color-mix(in srgb, var(--g, #d1a097) 16%, transparent);
  animation: gl-breathe 7s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -9);
  transition: box-shadow .5s, border-color .5s;
}
.ny-framed:hover, .ny-framed:focus {
  border-color: color-mix(in srgb, var(--g, #d1a097) 90%, #fff);
  box-shadow: 0 0 1.6rem .1rem color-mix(in srgb, var(--g, #d1a097) 70%, transparent), 0 0 4.5rem .5rem color-mix(in srgb, var(--g, #d1a097) 32%, transparent);
}
.ny-framed:hover img, .ny-framed:focus img { opacity: 1; }
/* a slow sweep of light across the photo on hover */
.ny-framed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform 1s var(--ny-ease);
}
.ny-framed:hover::after, .ny-framed:focus::after { transform: translateX(120%); }
@keyframes gl-breathe {
  0%, 100% { box-shadow: 0 0 .8rem -.1rem color-mix(in srgb, var(--g, #d1a097) 35%, transparent), 0 0 2.4rem 0 color-mix(in srgb, var(--g, #d1a097) 10%, transparent); }
  50%      { box-shadow: 0 0 1.4rem 0 color-mix(in srgb, var(--g, #d1a097) 55%, transparent), 0 0 3.6rem .2rem color-mix(in srgb, var(--g, #d1a097) 22%, transparent); }
}

/* ---- entrance: photos materialise out of a soft glow ---- */
.js .ny-framed.ny-reveal {
  filter: brightness(1.7) blur(9px) saturate(.5);
  transition: opacity 1s var(--ny-ease), transform 1s var(--ny-ease), filter 1.4s ease; transition-delay: var(--d, 0s);
}
.js .ny-framed.ny-reveal.is-in { filter: none; }
.js .ny-framed.ny-reveal.is-in { transition: box-shadow .5s, border-color .5s; transition-delay: 0s; }

/* ---- lightbox: the photo arrives out of the light and keeps a faint glow ---- */
.ny-lightbox img { box-shadow: 0 0 4rem rgba(247, 111, 142, .22), 0 0 1rem rgba(127, 224, 227, .18); }
.ny-lightbox.show .modal-body img { animation: gl-arrive 1.1s var(--ny-ease) both; }
@keyframes gl-arrive { 0% { opacity: 0; transform: scale(.92); filter: brightness(1.9) blur(12px); } 100% { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .ny-framed, .ny-lightbox.show .modal-body img { animation: none; }
  .js .ny-framed.ny-reveal { filter: none; }
}

/* Two photos kept together as one block (never split across columns) */
.ny-stack { -webkit-column-break-inside: avoid; break-inside: avoid; }