/* ===== Gallery (Premium Contrast + Exciting BG + Animated Gradient Borders) ===== */
:root{
  --oa-bg: #070b18;

  /* Stronger contrast */
  --oa-ink: rgba(255,255,255,.98);
  --oa-muted: rgba(255,255,255,.78);

  /* Surfaces */
  --oa-surface: rgba(255,255,255,.10);
  --oa-surface2: rgba(255,255,255,.16);
  --oa-stroke: rgba(255,255,255,.18);

  /* Glow system */
  --oa-glowA: rgba(86,150,255,.38);
  --oa-glowB: rgba(45,255,210,.22);
  --oa-glowC: rgba(255,70,180,.20);

  /* Accent gradient for borders */
  --oa-grad1: #6aa7ff;
  --oa-grad2: #2bf0d6;
  --oa-grad3: #b85cff;

  --oa-shadow: 0 22px 70px rgba(0,0,0,.55);
  --oa-shadow2: 0 18px 44px rgba(0,0,0,.42);
}

/* ---------- Container ---------- */
.oaGallery{
  padding: 18px 16px 14px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;

  /* More exciting background */
  background:
    radial-gradient(1100px 520px at 18% 6%, rgba(106,167,255,.30), transparent 60%),
    radial-gradient(900px 520px at 70% 10%, rgba(43,240,214,.18), transparent 62%),
    radial-gradient(900px 620px at 86% 56%, rgba(184,92,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    var(--oa-bg);

  box-shadow: var(--oa-shadow);
  border: 1px solid rgba(255,255,255,.14);
}

.oaGallery::before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.08), transparent 62%);
  mix-blend-mode: screen;
  opacity:.75;
}

.oaGallery::after{
  /* subtle grain to avoid flat look */
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity:.25;
}

/* ---------- Head ---------- */
.oaGallery__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.oaGallery__title{
  margin:0;
  font-size: 20px;
  font-weight: 980;
  letter-spacing: .2px;
  color: var(--oa-ink);
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
}

.oaGallery__sub{
  margin:6px 0 0;
  color: var(--oa-muted);
  font-size: 13px;
  text-shadow: 0 10px 22px rgba(0,0,0,.50);
}

/* ---------- Buttons ---------- */
.oaGallery__actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.oaBtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  color: var(--oa-ink);
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 950;
  font-size: 13px;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, filter .14s ease;
  user-select:none;
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
}

.oaBtn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  filter: brightness(1.08);
}
.oaBtn:active{ transform: translateY(0px); }
.oaBtn:disabled{ opacity:.65; cursor:not-allowed; transform:none; box-shadow:none; }

.oaBtn--ghost{ background: rgba(255,255,255,.06); }
.oaBtn--loadMore{
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
}

/* ---------- Grid / Collage ---------- */
.oaGallery__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  z-index: 1;
  grid-auto-flow: dense;
  grid-auto-rows: 120px;
}

@media (min-width: 720px){
  .oaGallery__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: 140px;
  }
}

@media (min-width: 980px){
  .oaGallery__grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: 130px;
  }
}

.oaTile--w2{ grid-column: span 2; }
.oaTile--h2{ grid-row: span 2; }
.oaTile--w2h2{ grid-column: span 2; grid-row: span 2; }

/* ---------- Tiles (animated gradient border) ---------- */
@keyframes oaBorderSpin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.oaTile{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transform: translateZ(0);
  background: rgba(255,255,255,.06);
  box-shadow: var(--oa-shadow2);
  transition: transform .18s ease, filter .18s ease;
}

/* gradient ring (always present, subtle) */
.oaTile::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    var(--oa-grad1),
    var(--oa-grad2),
    var(--oa-grad3),
    var(--oa-grad1)
  );
  opacity: .55;
  filter: blur(.0px);
  animation: oaBorderSpin 8s linear infinite;
}

/* inner mask (creates border thickness) */
.oaTile::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: calc(18px - 1px);
  background: rgba(8, 12, 22, .72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* keep content above masks */
.oaTile > *{ position: relative; z-index: 1; }

.oaTile:hover{
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.06);
}

.oaTile:hover::before{
  opacity:.90;
  filter: drop-shadow(0 0 18px rgba(106,167,255,.25));
  animation-duration: 5.5s;
}

/* media */
.oaTile__media{
  position:absolute; inset: 0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;

  transform: scale(1.03);
  transition: transform .26s ease, filter .26s ease;
  filter: saturate(1.10) contrast(1.10);
}

/* IMPORTANT: media must sit above inner mask */
.oaTile .oaTile__media{ z-index: 2; }
.oaTile__sheen{ z-index: 3; }

.oaTile:hover .oaTile__media{
  transform: scale(1.10);
  filter: saturate(1.18) contrast(1.14);
}

.oaTile__sheen{
  position:absolute; inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-35%) rotate(10deg);
  opacity:0;
  transition: opacity .18s ease, transform .44s ease;
  pointer-events:none;
}
.oaTile:hover .oaTile__sheen{
  opacity:1;
  transform: translateX(35%) rotate(10deg);
}

.oaEmpty{
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.24);
  border-radius: 16px;
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.22);
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}

/* ---------- Footer ---------- */
.oaGallery__footer{
  position: relative;
  z-index: 1;
  margin-top: 12px;
  display:grid;
  gap: 8px;
}

.oaGallery__hint{
  color: rgba(255,255,255,.86);
  font-size: 12.5px;
  text-align: center;
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}

/* ===== Lightbox (stronger contrast + cleaner stage) ===== */
.oaLightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.oaLightbox.is-open{ display:block; }

.oaLightbox__backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(106,167,255,.20), transparent 65%),
    radial-gradient(900px 520px at 76% 22%, rgba(43,240,214,.12), transparent 68%),
    rgba(0,0,0,.72);
  backdrop-filter: blur(14px);
}

.oaLightbox__stage{
  min-height: 0;
  position:absolute;
  inset: 5.2vh 5.2vw;
  border-radius: 22px;

  /* gradient border frame */
  background: conic-gradient(
    from 0deg,
    rgba(106,167,255,.95),
    rgba(43,240,214,.85),
    rgba(184,92,255,.82),
    rgba(106,167,255,.95)
  );
  padding: 2px;

  box-shadow: 0 40px 140px rgba(0,0,0,.70);
  display:grid;
}

.oaLightbox__stage::before{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 20px;
  background: rgba(12, 16, 28, .72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* inner layout wrapper */
.oaLightbox__stage > *{ position: relative; z-index: 1; }

.oaLightbox__stage{
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 720px){
  .oaLightbox__stage{
    inset: 10vh 4vw;
    grid-template-columns: 44px 1fr 44px;
    border-radius: 18px;
  }
  .oaLightbox__stage::before{ border-radius: 16px; }
}

.oaLightbox__close{
  position:absolute;
  right: 12px; top: 10px;
  width: 46px; height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.98);
  font-size: 26px;
  cursor:pointer;
  z-index: 2;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  text-shadow: 0 10px 22px rgba(0,0,0,.65);
}
.oaLightbox__close:hover{ background: rgba(255,255,255,.10); }

.oaLightbox__nav{
  height: 100%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.98);
  font-size: 46px;
  cursor: pointer;
  transition: background .12s ease, opacity .12s ease;
  text-shadow: 0 10px 22px rgba(0,0,0,.65);
  opacity:.92;
}
.oaLightbox__nav:hover{ background: rgba(255,255,255,.06); opacity:1; }

.oaLightbox__figure{
  min-height: 0;
  margin:0;
  height: 100%;
  display:grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.oaLightbox__media{
  min-height: 0;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.oaLightbox__media img,
.oaLightbox__media video{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.30);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.oaLightbox__cap{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:center;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.94);
  font-size: 13px;
  background: rgba(0,0,0,.28);
  text-shadow: 0 10px 22px rgba(0,0,0,.65);
}

.oaLightbox__counter{
  font-weight: 950;
  letter-spacing: .2px;
}

.oaLightbox__dl{
  color: rgba(255,255,255,.98);
  text-decoration:none;
  font-weight: 950;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.24);
  box-shadow: 0 16px 40px rgba(0,0,0,.40);
}
.oaLightbox__dl:hover{ background: rgba(255,255,255,.10); }