/* ═══════════════════════════════════════════════════════
   INVENIO 2026 – Gallery Page Stylesheet
   Extends home.css tokens
   ═══════════════════════════════════════════════════════ */

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; }

/* ─── Page Hero ─── */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 4.5rem) 1.5rem 3rem;
  text-align: center;
  overflow: hidden;
}
.page-hero__glow {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(124,111,255,0.28) 0%, rgba(124,111,255,0) 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
  animation: pageGlowPulse 8s ease-in-out infinite;
}
@keyframes pageGlowPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.page-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
  margin-bottom: .75rem;
  opacity: 0;
  animation: heroFadeUp .8s var(--ease-smooth) forwards;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  letter-spacing: .01em;
  margin-bottom: .9rem;
  opacity: 0;
  animation: heroFadeUp .8s var(--ease-smooth) .1s forwards;
}
.page-hero__title span {
  background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-purple), var(--color-accent-pink));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
.page-hero__sub {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto;
  opacity: 0;
  animation: heroFadeUp .8s var(--ease-smooth) .2s forwards;
}

/* ─── Filters ─── */
.gallery-controls { padding-top: .5rem; padding-bottom: 1.5rem; }
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
.gfilter {
  padding: .55rem 1.3rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  transition: all var(--transition-fast);
}
.gfilter:hover { color: var(--color-text-primary); border-color: var(--color-accent-cyan); }
.gfilter.is-active {
  color: var(--color-bg-deep);
  background: linear-gradient(135deg, var(--color-accent-cyan), var(--color-accent-purple));
  border-color: transparent;
  box-shadow: var(--glow-cyan);
}

/* ─── Grid ─── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 1.1rem;
  padding-bottom: 1rem;
}
.gallery-item {
  position: relative;
  grid-column: span 1;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid var(--glass-border);
  background: var(--color-bg-mid);
  opacity: 0;
  transform: translateY(24px);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.gallery-item.revealed { animation: itemRise .6s var(--ease-smooth) forwards; }
@keyframes itemRise { to { opacity: 1; transform: translateY(0); } }
.gallery-item[style*="--span:2"] { grid-column: span 2; }
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-smooth), filter .4s ease;
}
.gallery-item:hover img { transform: scale(1.08); filter: saturate(1.2) brightness(1.05); }
.gallery-item:hover { box-shadow: var(--glow-cyan); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .9rem 1rem .8rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--color-text-primary);
  background: linear-gradient(0deg, rgba(7,6,15,0.88) 0%, rgba(7,6,15,0) 100%);
  transform: translateY(6px);
  opacity: 0;
  transition: all var(--transition-fast);
}
.gallery-item:hover figcaption { transform: translateY(0); opacity: 1; }
.gallery-item.filtered-out { display: none; }

.gallery-note {
  color: var(--color-text-muted);
  font-size: .82rem;
  text-align: center;
  padding: 1rem 0 2.5rem;
}
.gallery-note code {
  font-family: var(--font-mono);
  background: var(--glass-bg);
  padding: .1rem .4rem;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
}

@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
}
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: .7rem; }
  .gallery-item[style*="--span:2"] { grid-column: span 2; }
}
@media (max-width: 460px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
}

/* ─── Lightbox ─── */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-smooth), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 4, 12, 0.94);
  backdrop-filter: blur(6px);
}
.lightbox__stage {
  position: relative;
  width: min(88vw, 1100px);
  height: min(78vh, 780px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 1;
  cursor: grab;
  touch-action: none;
}
.lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), var(--glow-purple);
  transform-origin: center center;
  user-select: none;
  transition: transform .12s ease-out;
  opacity: 0;
  animation: lbFade .35s var(--ease-smooth) forwards;
}
@keyframes lbFade { from { opacity: 0; transform: scale(.94); } to { opacity: 1; } }

.lightbox__close {
  position: absolute; top: 1.4rem; right: 1.4rem; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-primary);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  transition: all var(--transition-fast);
}
.lightbox__close:hover { color: var(--color-bg-deep); background: var(--color-accent-cyan); transform: rotate(90deg); }

.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-primary);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  transition: all var(--transition-fast);
}
.lightbox__nav:hover { color: var(--color-bg-deep); background: var(--color-accent-cyan); }
.lightbox__nav--prev { left: 1.2rem; }
.lightbox__nav--next { right: 1.2rem; }

.lightbox__meta {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.4rem;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.lightbox__meta #lightboxCaption { color: var(--color-text-primary); font-weight: 600; letter-spacing: .02em; }
.lightbox__hint { opacity: .7; }

@media (max-width: 700px) {
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: .5rem; }
  .lightbox__nav--next { right: .5rem; }
  .lightbox__close { top: .8rem; right: .8rem; width: 40px; height: 40px; }
  .lightbox__meta { gap: .7rem; font-size: .72rem; padding: 0 1rem; }
  .lightbox__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__glow, .page-hero__title span { animation: none; }
}