/* SAHP home page gallery (images from the SAHP media Discord channel). */
.gallery-section{background:radial-gradient(1000px 520px at 85% 0%,rgba(29,59,122,.45),transparent 60%),radial-gradient(700px 420px at 0% 100%,rgba(217,164,65,.07),transparent 60%),var(--navy-950);color:var(--text);padding:96px 0 104px}
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:34px}
.gallery-head h2{margin:0}
.gallery-head .section-lead{max-width:420px;color:var(--muted)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.gal-stage{position:relative;aspect-ratio:16/9;max-height:72vh;width:100%;border-radius:var(--r-xl);overflow:hidden;background:var(--navy-900);border:1px solid var(--line-2);box-shadow:var(--shadow),0 0 0 1px rgba(0,0,0,.3) inset;outline-offset:4px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gal-slides{position:absolute;inset:0;cursor:zoom-in}
.gal-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s linear .7s}
.gal-slide.active{opacity:1;visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
/* Blurred copy fills the frame so portrait or odd-sized shots still look intentional. */
.gal-slide::before{content:"";position:absolute;inset:-40px;background:var(--bg) center/cover no-repeat;filter:blur(28px) saturate(1.15) brightness(.55);transform:scale(1.08)}
.gal-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,11,29,.45),transparent 22%,transparent 72%,rgba(4,11,29,.55));pointer-events:none}
.gal-slide img{position:relative;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s var(--ease)}
.gal-slide.loaded img{opacity:1}
.gal-slide.active.loaded img{animation:gal-drift 9s var(--ease) both}
@keyframes gal-drift{from{transform:scale(1.035)}to{transform:scale(1)}}

.gal-top{position:absolute;top:14px;left:16px;right:14px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}
.gal-count{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.14em;color:var(--steel-2);background:rgba(4,11,29,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 12px;border-radius:999px;border:1px solid var(--line)}
.gal-tools{display:flex;gap:8px;pointer-events:auto}
.gal-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line-2);background:rgba(4,11,29,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.gal-icon:hover{background:rgba(217,164,65,.18);border-color:rgba(217,164,65,.55);color:var(--gold-2)}
.gal-icon svg{width:18px;height:18px;fill:currentColor}
.gal-icon .gal-ico-play{display:none}
.gal-icon[aria-pressed="false"] .gal-ico-play{display:block}
.gal-icon[aria-pressed="false"] .gal-ico-pause{display:none}

.gal-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:999px;border:1px solid var(--line-2);background:rgba(4,11,29,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);cursor:pointer;opacity:0;transition:opacity .25s,background .2s,border-color .2s,color .2s,transform .25s var(--ease)}
.gal-arrow svg{width:22px;height:22px}
.gal-arrow.prev{left:16px}
.gal-arrow.next{right:16px}
.gal-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.gal-arrow.prev:hover{transform:translateX(-2px)}
.gal-arrow.next:hover{transform:translateX(2px)}
.gal-stage:hover .gal-arrow,.gal-stage:focus-within .gal-arrow,.gal-arrow:focus-visible{opacity:1}
@media (hover:none){.gal-arrow{opacity:1;width:44px;height:44px;margin-top:-22px}}
.gal-stage.single .gal-arrow,.gal-stage.single .gal-progress,.gal-stage.single #galPlay{display:none}

.gal-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(166,198,214,.12);z-index:2}
.gal-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-3),var(--gold-2));transform:scaleX(0);transform-origin:left;will-change:transform}
.gal-stage.paused .gal-progress span{opacity:.45}

.gal-hint{margin:12px 2px 0;font-size:.82rem;color:var(--faint)}
@media (hover:none){.gal-hint{display:none}}

.gal-thumbs{display:flex;gap:10px;margin-top:14px;padding:4px 2px 10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--navy-600) transparent;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);padding-inline:24px}
.gal-thumb{flex:none;width:132px;aspect-ratio:16/10;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--navy-800);scroll-snap-align:center;opacity:.55;outline:2px solid transparent;outline-offset:2px;transition:opacity .25s,outline-color .25s,transform .25s var(--ease)}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb:hover{opacity:.9;transform:translateY(-2px)}
.gal-thumb.active{opacity:1;outline-color:var(--gold)}
.gal-thumb:focus-visible{opacity:1;outline-color:var(--gold-2)}

/* Fullscreen viewer */
.gal-lock,.gal-lock body{overflow:hidden}
.gal-box{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#02060f;color:var(--text)}
.gal-box::backdrop{background:#02060f}
.gal-box[open]{display:grid;place-items:center;animation:gal-in .25s var(--ease)}
@keyframes gal-in{from{opacity:0}to{opacity:1}}
.gal-box-inner{position:absolute;inset:0;display:grid;place-items:center;padding:64px 84px}
.gal-box-inner img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);touch-action:pan-y}
.gal-box .gal-arrow{opacity:1}
.gal-box-close{position:absolute;top:16px;right:16px;z-index:3}
.gal-box-count{position:absolute;top:22px;left:22px;font-family:var(--display);font-weight:600;letter-spacing:.14em;color:var(--steel-2)}

@media (max-width:900px){.gallery-section{padding:76px 0 84px}.gal-stage{border-radius:var(--r-lg)}}
@media (max-width:640px){
  .gallery-head{margin-bottom:24px}
  .gal-stage{aspect-ratio:4/3;border-radius:var(--r)}
  .gal-arrow.prev{left:10px}.gal-arrow.next{right:10px}
  .gal-top{top:10px;left:10px;right:10px}
  .gal-thumb{width:96px}
  .gal-box-inner{padding:56px 12px 88px}
  .gal-box .gal-arrow{top:auto;bottom:20px;margin-top:0}
  .gal-box .gal-arrow.prev{left:calc(50% - 60px)}.gal-box .gal-arrow.next{right:calc(50% - 60px)}
}
@media (prefers-reduced-motion:reduce){
  .gal-slide,.gal-slide.active,.gal-slide img,.gal-thumb,.gal-arrow{transition:none}
  .gal-slide.active.loaded img,.gal-box[open]{animation:none}
}