/* =========================
   GALLERY — Scoped styles
   ========================= */

.page-gallery{
  --bg:#090112;
  --text:#fff;
  --purple:#d403e0;
  --blue:#6f2aff;
}

.page-gallery,
.page-gallery body{
  background:var(--bg);
  color:var(--text);
  font-family:'Glacial Indifference',sans-serif;
  overflow-x:hidden;
}

/* BACKGROUND */
.page-gallery .gal-bg{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(70% 60% at 20% 30%, rgba(212,3,224,.22) 0%, transparent 60%),
    radial-gradient(70% 60% at 80% 25%, rgba(0,132,255,.20) 0%, transparent 60%),
    linear-gradient(160deg, #090112 0%, #081022 100%);
  background-size:120% 120%;
  animation:galHueShift 40s ease-in-out infinite alternate;
}
@keyframes galHueShift{
  0%{filter:hue-rotate(0deg); background-position:0% 0%}
  50%{filter:hue-rotate(10deg); background-position:50% 50%}
  100%{filter:hue-rotate(-6deg); background-position:100% 100%}
}
.page-gallery .gal-vignette{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(130% 90% at 8% 8%, rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 52%),
    radial-gradient(130% 90% at 92% 12%, rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 62%);
}
.page-gallery .gal-stars{ position:fixed; inset:0; z-index:-1; pointer-events:none }
.page-gallery .gal-stars span{ position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; filter:blur(.2px) }

/* FLOATING ARROWS */
.page-gallery .float-arrow{
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px); cursor:pointer; z-index:1100;
  transition:transform .2s ease, box-shadow .25s ease, opacity .25s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.page-gallery .float-arrow.left{ left:18px }
.page-gallery .float-arrow.right{ right:18px }
.page-gallery .float-arrow svg{ width:24px; height:24px }
.page-gallery .float-arrow:hover{
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 0 24px rgba(212,3,224,.55), 0 10px 24px rgba(0,0,0,.35);
  border-color:rgba(212,3,224,.7);
}
.page-gallery .float-arrow.is-disabled{ opacity:.35; pointer-events:none }

/* LAYOUT */
.page-gallery .wrap{
  max-width:1400px;
  margin:0 auto;
  padding:56px 8vw 56px;     /* small clearance below sticky header */
  position:relative;
  z-index:0;
}

/* Header row */
.page-gallery .hero-head{
  display:flex; align-items:end; justify-content:space-between;
  gap:20px; margin:8px 0 14px;
}
.page-gallery .hero-head h1{
  margin:0;
  font-size:clamp(24px, 2.6vw, 36px);
  letter-spacing:.02em;
}
.page-gallery .filters{ display:flex; gap:8px; flex-wrap:wrap }
.page-gallery .pill{
  border:none; padding:6px 12px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff; font-weight:700; letter-spacing:.02em;
  font-size:.95rem;
}
.page-gallery .pill:hover{ background:rgba(255,255,255,.16) }
.page-gallery .pill.is-active{
  background:linear-gradient(90deg, var(--purple), var(--blue));
  box-shadow:0 8px 24px rgba(212,3,224,.25);
}

/* COVERFLOW */
.page-gallery .coverflow{ position:relative; margin-top:18px; display:flex; justify-content:center }
.page-gallery .stage{
  position:relative;
  height:min(52vh, 480px);
  margin:0 auto;
  perspective:1200px;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
  z-index:0;
}

.page-gallery .card{
  position:absolute; top:0; bottom:0; margin:auto 0;
  width:clamp(240px, 25vw, 340px);
  aspect-ratio: 4 / 5;
  height:auto;
  border-radius:26px;
  overflow:hidden;
  background:#0b0b12;
  cursor:pointer;
  box-shadow:0 18px 30px rgba(0,0,0,.4);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, filter .3s ease;
}
.page-gallery .card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.page-gallery .card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
}
.page-gallery .card .meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
}
.page-gallery .card .meta h3{ margin:0 0 6px 0; font-size:1.05rem }
.page-gallery .card .meta p{ margin:0; opacity:.9; font-size:.92rem }

.page-gallery .card.is-active{ box-shadow:0 22px 40px rgba(212,3,224,.50) }
.page-gallery .card:not(.is-active){ filter:saturate(.9) brightness(.96) }

/* FOOTER INFO */
.page-gallery .below{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:14px;
}
.page-gallery .info h2{ margin:0 0 4px 0; font-size:clamp(18px,2vw,26px) }
.page-gallery .info p{ margin:0; opacity:.9; font-size:.98rem }
.page-gallery .btn{
  display:inline-block; padding:10px 18px; border-radius:999px;
  background:linear-gradient(90deg, var(--purple), var(--blue));
  color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 12px 26px rgba(212,3,224,.25);
}
.page-gallery .btn:hover{ filter:brightness(1.05) }

/* RESPONSIVE */
@media (max-width: 980px){
  .page-gallery .stage{ height:54vh }
  .page-gallery .card{ width:clamp(220px, 32vw, 320px) }
}
@media (max-width: 640px){
  .page-gallery .wrap{ padding:96px 5vw 48px }
  .page-gallery .hero-head{ margin:4px 0 12px }
  .page-gallery .hero-head h1{ font-size:clamp(22px,6vw,30px) }
  .page-gallery .filters{ gap:6px }
  .page-gallery .pill{ padding:6px 10px; font-size:.9rem }
  .page-gallery .stage{ height:50vh }
  .page-gallery .card{ width:clamp(200px, 72vw, 300px) }
  .page-gallery .below{ flex-direction:column; align-items:flex-start }
}
.page-gallery .card { display:block; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.page-gallery .card > * { pointer-events:none; } /* make the anchor itself receive the click */
/* Desktop gap under the header on the Gallery page only */
@media (min-width: 821px){
  .page-gallery .wrap{
    /* tweak this number to taste */
    padding-top: calc(var(--nav-h) + 50px);
  }

  /* (optional) if your first block adds its own top margin, zero it */
  .page-gallery main > :first-child{
    margin-top: 0;
  }
}