/* BzAxu homepage-inspired effects, intentionally amplified for the standalone gallery. */
:root {
  --gallery-glass-edge: rgba(225, 222, 255, .24);
  --gallery-glass-edge-hot: rgba(183, 167, 255, .62);
  --gallery-glow-violet: rgba(132, 105, 255, .28);
  --gallery-glow-blue: rgba(78, 166, 255, .22);
}

/* Richer ambient lighting than the personal homepage: this page is the destination,
   not a quiet backdrop. Keep it fixed so it does not interfere with gallery scrolling. */
body::before {
  background:
    radial-gradient(ellipse at 7% 4%, rgba(137, 103, 255, .32), transparent 31rem),
    radial-gradient(ellipse at 95% 16%, rgba(61, 158, 255, .26), transparent 29rem),
    radial-gradient(ellipse at 50% 94%, rgba(114, 79, 220, .22), transparent 35rem),
    linear-gradient(rgba(210, 220, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 220, 255, .045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 38px 38px, 38px 38px;
}
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 35%, rgba(132, 105, 255, .11), transparent 28%),
    radial-gradient(ellipse at 76% 58%, rgba(64, 158, 255, .10), transparent 30%);
  filter: blur(24px);
  animation: galleryAmbientDrift 18s ease-in-out infinite alternate;
}
.gallery-page, footer { position: relative; z-index: 1; }

@keyframes galleryAmbientDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.06); }
}

/* Liquid-glass panels: brighter top edge, layered reflections and a moving sheen. */
.gallery-hero,
.gallery-sidebar,
.gallery-settings-card,
.gallery-tag-card,
.gallery-lightbox-card {
  border-color: var(--gallery-glass-edge) !important;
  border-top-color: rgba(255, 255, 255, .38) !important;
  box-shadow:
    0 26px 75px rgba(0, 0, 0, .34),
    0 0 36px rgba(116, 103, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(155, 174, 255, .045);
}
.gallery-hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 92% 0%, rgba(174, 151, 255, .38), transparent 48%),
    radial-gradient(ellipse at 5% 100%, rgba(73, 160, 255, .20), transparent 48%),
    linear-gradient(135deg, rgba(45, 47, 78, .86), rgba(17, 21, 36, .78)) !important;
  backdrop-filter: blur(32px) saturate(185%);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
}
.gallery-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.09) 42%, transparent 62%);
  background-size: 220% 100%;
  animation: galleryGlassSweep 9s ease-in-out infinite;
}
@keyframes galleryGlassSweep {
  0%, 35% { background-position: 120% 0; opacity: .25; }
  65%, 100% { background-position: -120% 0; opacity: .8; }
}

/* Stronger glass on the sticky topbar and all primary controls. */
.gallery-topbar {
  border: 1px solid rgba(226, 222, 255, .2);
  border-top-color: rgba(255,255,255,.34);
  background: linear-gradient(135deg, rgba(42, 43, 69, .84), rgba(13, 17, 30, .78)) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
}
.button,
.gallery-menu-trigger,
.gallery-sidebar-action,
.gallery-tag-option,
.gallery-tag-selected-chip,
.gallery-source-select,
.gallery-custom-select-trigger,
.gallery-lightbox-close,
.gallery-settings-close,
.gallery-tag-close,
.gallery-sidebar-close {
  border-color: rgba(207, 195, 255, .32) !important;
  border-top-color: rgba(255,255,255,.4) !important;
  background: linear-gradient(135deg, rgba(173, 153, 255, .23), rgba(91, 133, 224, .09) 60%, rgba(255,255,255,.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}
.button:hover,
.gallery-menu-trigger:hover,
.gallery-sidebar-action:hover,
.gallery-tag-option:hover,
.gallery-lightbox-close:hover,
.gallery-settings-close:hover,
.gallery-tag-close:hover,
.gallery-sidebar-close:hover {
  transform: translateY(-2px);
  border-color: var(--gallery-glass-edge-hot) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 26px rgba(92, 81, 220, .22), 0 0 20px rgba(139, 118, 255, .13);
  filter: brightness(1.08);
}
.button:active,
.gallery-menu-trigger:active,
.gallery-sidebar-action:active,
.gallery-tag-option:active {
  transform: translateY(0) scale(.975);
}

/* The image cards get the largest share of the effect: luminous edge, deeper shadow,
   image saturation, and a restrained moving reflection that does not block clicks. */
.gallery-column > .gallery-item,
.gallery-item {
  isolation: isolate;
  border: 1px solid rgba(221, 218, 255, .2) !important;
  border-top-color: rgba(255,255,255,.32) !important;
  border-radius: 21px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.018) 42%, rgba(134,120,255,.055)) !important;
  box-shadow:
    0 15px 36px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform 340ms cubic-bezier(.2,.8,.2,1), border-color 280ms ease, box-shadow 340ms ease, filter 280ms ease !important;
}
.gallery-column > .gallery-item::after,
.gallery-item::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(118deg, transparent 22%, rgba(255,255,255,.16) 47%, transparent 66%);
  background-size: 230% 100%;
  background-position: 130% 0;
  transition: opacity 280ms ease;
}
.gallery-column > .gallery-item img,
.gallery-item img {
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 380ms ease !important;
}
.gallery-column > .gallery-item:hover,
.gallery-item:hover,
.gallery-column > .gallery-item:focus-visible,
.gallery-item:focus-visible {
  z-index: 3;
  transform: translateY(-7px) scale(1.012) !important;
  border-color: rgba(188, 171, 255, .76) !important;
  box-shadow:
    0 26px 55px rgba(0,0,0,.36),
    0 0 0 1px rgba(174,157,255,.12),
    0 0 32px rgba(124, 101, 255, .24),
    0 0 58px rgba(65, 151, 255, .10),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.gallery-column > .gallery-item:hover::after,
.gallery-item:hover::after {
  opacity: 1;
  animation: galleryCardReflection 1.15s ease both;
}
.gallery-column > .gallery-item:hover img,
.gallery-item:hover img {
  transform: scale(1.045) !important;
  filter: saturate(1.18) contrast(1.035) brightness(1.035);
}
@keyframes galleryCardReflection {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

/* Sidebar and dialogs feel like floating glass, not flat opaque boxes. */
.gallery-sidebar {
  background: linear-gradient(150deg, rgba(36, 38, 62, .94), rgba(12, 15, 27, .95)) !important;
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
}
.gallery-settings-card,
.gallery-tag-card,
.gallery-lightbox-card {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(148, 126, 255, .16), transparent 48%),
    linear-gradient(145deg, rgba(39, 42, 67, .96), rgba(13, 16, 29, .97)) !important;
  backdrop-filter: blur(34px) saturate(175%);
  -webkit-backdrop-filter: blur(34px) saturate(175%);
}
.gallery-lightbox-card img {
  box-shadow: 0 18px 55px rgba(0,0,0,.3), 0 0 26px rgba(132,105,255,.12);
}
.gallery-brand {
  text-shadow: 0 0 24px rgba(169,155,255,.22);
}

/* Respect accessibility and avoid heavy animation on reduced-motion devices. */
@media (prefers-reduced-motion: reduce) {
  body::after,
  .gallery-hero::after,
  .gallery-column > .gallery-item::after,
  .gallery-item::after {
    animation: none !important;
  }
  .gallery-column > .gallery-item,
  .gallery-item,
  .gallery-column > .gallery-item img,
  .gallery-item img {
    transition-duration: .01ms !important;
  }
}


/* Ambient starfield: a real animated canvas, layered above the background and below gallery UI. */
#galleryParticles {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  opacity: .96;
}
.gallery-page,
footer {
  position: relative;
  z-index: 2;
}
/* Explicit overlay order. The sidebar belongs to the gallery-page stacking context;
   modal dialogs are body-level siblings and must sit above the page. */
.gallery-sidebar-backdrop { z-index: 8; }
.gallery-sidebar { z-index: 9; }
.gallery-settings-dialog { z-index: 120; }
.gallery-tag-dialog { z-index: 130; }
.gallery-lightbox { z-index: 140; }

/* Select menus near the bottom of the settings sheet may open upward. */
.gallery-custom-select-menu {
  max-height: min(46vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.gallery-custom-select.opens-up .gallery-custom-select-menu {
  top: auto;
  bottom: calc(100% + 7px);
  transform-origin: bottom center;
}
@media (prefers-reduced-motion: reduce) {
  #galleryParticles { opacity: .7; }
}