/* =====================================================================
   Gallery — showcase page
   ===================================================================== */
.gallery-page { overflow-x: clip; }
.gico { width: 18px; height: 18px; flex: none; }
html.glb-open { overflow: hidden; }

/* ---------- hero with drifting photo wall ---------- */
.gh { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(560px, 82vh, 780px); padding-block: clamp(5rem, 10vw, 7rem) clamp(3rem, 6vw, 4.5rem); background: var(--bg); }
.gh__wall { position: absolute; z-index: -3; top: -30%; bottom: -30%; right: -4%; width: min(64vw, 1000px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; transform: rotate(-10deg); }
.gh__col { min-width: 0; }
.gh__track { display: flex; flex-direction: column; gap: 16px; animation: ghUp 80s linear infinite; will-change: transform; }
.gh__col:nth-child(even) .gh__track { animation-name: ghDown; animation-duration: 95s; }
.gh__tile { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 18px; background: #0a1522 var(--img) center / cover no-repeat; box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); }
.gh__col:nth-child(odd) .gh__tile:nth-child(3n) { aspect-ratio: 1 / 1; }
.gh__col:nth-child(even) .gh__tile:nth-child(4n) { aspect-ratio: 4 / 5; }
@keyframes ghUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ghDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.gh__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--bg) 0%, rgba(8,19,32,.97) 30%, rgba(8,19,32,.62) 58%, rgba(8,19,32,.3) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 28%), linear-gradient(180deg, rgba(8,19,32,.7) 0%, transparent 22%); }
.gh__inner { width: 100%; }
.gh__copy { max-width: 620px; }
.gh h1 { margin: .7rem 0 1rem; font-size: clamp(2.7rem, 6.4vw, 5rem); line-height: .98; letter-spacing: -.035em; }
.gh p { max-width: 520px; font-size: 1.15rem; color: #b8c4d4; }
.gh__stats { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.9rem 0 0; }
.gh__stat { display: flex; flex-direction: column-reverse; min-width: 118px; padding: .85rem 1.1rem; border: 1px solid rgba(91,174,238,.24); border-radius: 16px; background: linear-gradient(160deg, rgba(31,118,189,.2), rgba(8,19,32,.65)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gh__stat dt { margin-top: .35rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #9fb2c7; }
.gh__stat dd { margin: 0; font-family: var(--font-head); font-size: 2.1rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.gh__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.gh__cta .gico { width: 16px; height: 16px; }
.gh .breadcrumb { margin-top: 1.6rem; }

/* ---------- albums ---------- */
.galbums { padding-bottom: 1.5rem; }
.galbums__head { margin-bottom: .6rem; }
.galbums__head h2 { margin: .5rem 0 0; }
.galbums__head p { margin: .4rem 0 0; color: var(--muted); }
.galbums__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 1.6rem; overflow-x: auto; margin: 0 -.5rem; padding: 2rem .5rem 1.6rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(91,174,238,.35) transparent; }
.galbum { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.galbum__stack { position: relative; display: block; margin-bottom: 1rem; aspect-ratio: 4 / 3; }
.galbum__ph { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: #0a1522 var(--img) center / cover no-repeat; box-shadow: 0 18px 38px -22px rgba(0,0,0,.95); transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .35s, box-shadow .35s; }
.galbum__ph--3 { transform: rotate(-7deg) translate(-5%, 3%) scale(.9); filter: brightness(.55); }
.galbum__ph--2 { transform: rotate(5deg) translate(5%, 2%) scale(.94); filter: brightness(.72); }
.galbum__ph--1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,19,32,.6)); }
.galbum__ph--video { display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--accent), var(--accent-2)); }
.galbum__ph--video .gico { width: 40px; height: 40px; }
.galbum:hover .galbum__ph--3, .galbum:focus-visible .galbum__ph--3 { transform: rotate(-14deg) translate(-17%, 1%) scale(.9); filter: brightness(.85); }
.galbum:hover .galbum__ph--2, .galbum:focus-visible .galbum__ph--2 { transform: rotate(11deg) translate(17%, -3%) scale(.94); filter: brightness(.92); }
.galbum:hover .galbum__ph--1, .galbum:focus-visible .galbum__ph--1 { transform: translateY(-8px); box-shadow: 0 30px 50px -24px rgba(0,0,0,.95); }
.galbum__badge { position: absolute; z-index: 2; right: 10px; bottom: 10px; min-width: 30px; padding: .2rem .55rem; border-radius: 999px; background: rgba(8,19,32,.75); color: #fff; font: 600 .75rem var(--font-head); text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.galbum:hover .galbum__badge { transform: translateY(-8px); }
.galbum__name { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: #fff; transition: color .2s; }
.galbum__count { font-size: .82rem; color: var(--muted); }
.galbum.is-active .galbum__ph--1 { box-shadow: 0 0 0 3px var(--accent-bright), 0 22px 44px -22px rgba(31,118,189,.8); }
.galbum.is-active .galbum__name { color: var(--accent-bright); }
.galbum:focus-visible { outline: none; }
.galbum:focus-visible .galbum__ph--1 { box-shadow: 0 0 0 3px var(--accent-bright); }

/* ---------- toolbar ---------- */
.gexplore { padding-top: 1.5rem; }
.gtools { position: sticky; top: calc(var(--header-h) + 8px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; margin-bottom: 1.5rem; padding: .7rem; border: 1px solid var(--border); border-radius: 20px; background: rgba(11,26,44,.85); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 18px 40px -24px rgba(0,0,0,.8); }
.gchips { display: flex; flex: 1 1 520px; gap: .4rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gchips::-webkit-scrollbar { display: none; }
.gchip { display: inline-flex; flex: none; align-items: center; gap: .4rem; height: 38px; padding: 0 .9rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.03); color: #c4d2e3; font: 500 .86rem var(--font-body); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.gchip .gico { width: 15px; height: 15px; }
.gchip:hover { border-color: rgba(91,174,238,.45); color: #fff; }
.gchip.is-on { border-color: transparent; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 22px -10px rgba(31,118,189,.9); }
.gchip__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .72rem; font-weight: 600; }
.gchip.is-on .gchip__n { background: rgba(255,255,255,.22); }
.gtools__right { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.gtools__count { margin: 0; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.gshuffle { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 1rem; border: 1px solid rgba(91,174,238,.35); border-radius: 999px; background: rgba(31,118,189,.12); color: #d6e8f8; font: 600 .86rem var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.gshuffle:hover { background: rgba(31,118,189,.28); color: #fff; }
.gshuffle.is-spun .gico { animation: gspin .5s cubic-bezier(.2,.8,.2,1); }
@keyframes gspin { from { transform: rotate(-180deg) scale(.6); } to { transform: none; } }
.gchip:focus-visible, .gshuffle:focus-visible, .gtile__btn:focus-visible, .glb__btn:focus-visible, .glb__thumb:focus-visible, .glb__svc:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91,174,238,.55); }

/* ---------- masonry wall ---------- */
.gwall { columns: 4 250px; column-gap: 1rem; transition: opacity .22s ease; }
.gwall.is-shuffling { opacity: 0; }
.gtile { margin: 0 0 1rem; break-inside: avoid; transition: opacity .3s ease, transform .3s ease; }
.gtile[hidden] { display: none; }
.gtile.is-out { opacity: 0; transform: scale(.94) translateY(10px); }
.gtile__btn { position: relative; display: block; overflow: hidden; border: 1px solid rgba(91,174,238,.12); border-radius: 18px; background: linear-gradient(135deg, #0c1a2a, #0a1522); color: inherit; cursor: zoom-in; transform: translateZ(0); transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.gtile__btn:hover { border-color: rgba(91,174,238,.5); box-shadow: 0 28px 50px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(91,174,238,.2); transform: translateY(-4px); }
.gtile img, .gtile video { display: block; width: 100%; height: auto; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s ease, filter .6s ease; }
.gtile video { aspect-ratio: 16 / 9; object-fit: cover; background: #05080d; }
.gjs .gtile img { opacity: 0; filter: blur(8px); }
.gjs .gtile.is-loaded img { opacity: 1; filter: none; }
.gtile__btn:hover img, .gtile__btn:hover video { transform: scale(1.08); }
.gtile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,19,32,.9)); opacity: 0; transition: opacity .35s; pointer-events: none; }
.gtile__label { position: absolute; left: .9rem; right: 3.4rem; bottom: .8rem; font-family: var(--font-head); font-size: .88rem; font-weight: 600; color: #fff; text-align: left; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; pointer-events: none; }
.gtile__zoom { position: absolute; right: .75rem; bottom: .7rem; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; opacity: 0; transform: scale(.6) rotate(-45deg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.gtile__zoom .gico { width: 16px; height: 16px; }
.gtile__btn:hover .gtile__shade, .gtile__btn:focus-visible .gtile__shade, .gtile__btn:hover .gtile__label, .gtile__btn:focus-visible .gtile__label { opacity: 1; transform: none; }
.gtile__btn:hover .gtile__zoom, .gtile__btn:focus-visible .gtile__zoom { opacity: 1; transform: none; }
.gtile__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(31,118,189,.92); color: #fff; box-shadow: 0 0 0 10px rgba(31,118,189,.22); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; pointer-events: none; }
.gtile__play .gico { width: 24px; height: 24px; margin-left: 3px; }
.gtile__btn:hover .gtile__play { transform: scale(1.12); box-shadow: 0 0 0 16px rgba(31,118,189,.18); }
@media (hover: none) {
  .gtile__shade { opacity: .75; }
  .gtile__label { opacity: 1; transform: none; font-size: .78rem; }
}
.gempty { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; border: 1px dashed var(--border); border-radius: 22px; text-align: center; color: var(--muted); }
.gempty .gico { width: 40px; height: 40px; color: var(--accent-bright); }
.gempty h2 { margin: .3rem 0 0; color: #fff; }

/* ---------- viewer ---------- */
.glb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; isolation: isolate; background: rgba(3,8,14,.92); animation: glbIn .25s ease; }
.glb[hidden] { display: none; }
@keyframes glbIn { from { opacity: 0; } to { opacity: 1; } }
.glb__bg { position: absolute; inset: -60px; z-index: -1; background: center / cover no-repeat; filter: blur(46px) saturate(1.3) brightness(.32); transition: background-image .4s; }
.glb__top { display: flex; align-items: center; gap: .8rem; padding: .9rem clamp(.8rem, 3vw, 1.6rem); }
.glb__info { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; min-width: 0; }
.glb__album { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; color: #fff; }
.glb__count { font-size: .85rem; color: #9fb2c7; font-variant-numeric: tabular-nums; }
.glb__svc { display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 1rem; border-radius: 999px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #fff; font: 600 .85rem var(--font-body); text-decoration: none; white-space: nowrap; }
.glb__svc[hidden] { display: none; }
.glb__svc .gico { width: 16px; height: 16px; transition: transform .2s; }
.glb__svc:hover { color: #fff; } .glb__svc:hover .gico { transform: translateX(3px); }
.glb__btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; transition: background .2s, transform .2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.glb__btn:hover { background: rgba(255,255,255,.18); }
.glb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(3.8rem, 8vw, 6.5rem); touch-action: pan-y; }
.glb__media { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
.glb__media img, .glb__media video { display: block; max-width: 100%; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); border-radius: 14px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.95); object-fit: contain; user-select: none; -webkit-user-drag: none; }
.glb__media img.is-placeholder { filter: blur(6px); }
.glb__media.from-right > * { animation: glbRight .4s cubic-bezier(.2,.8,.2,1); }
.glb__media.from-left > * { animation: glbLeft .4s cubic-bezier(.2,.8,.2,1); }
@keyframes glbRight { from { opacity: 0; transform: translateX(46px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes glbLeft { from { opacity: 0; transform: translateX(-46px) scale(.98); } to { opacity: 1; transform: none; } }
.glb__nav { position: absolute; top: 50%; width: 54px; height: 54px; transform: translateY(-50%); }
.glb__nav:hover { transform: translateY(-50%) scale(1.06); }
.glb__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.glb__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
.glb__spin { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: gspinLoop .8s linear infinite; transition: opacity .2s; pointer-events: none; }
.glb.is-loading .glb__spin { opacity: 1; }
@keyframes gspinLoop { to { transform: rotate(360deg); } }
.glb__strip { display: flex; gap: .5rem; overflow-x: auto; padding: .8rem clamp(.8rem, 3vw, 1.6rem) 1.1rem; scrollbar-width: none; justify-content: safe center; }
.glb__strip::-webkit-scrollbar { display: none; }
.glb__thumb { display: grid; flex: none; place-items: center; width: 76px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #0a1522 center / cover no-repeat; color: #fff; opacity: .45; cursor: pointer; transition: opacity .2s, border-color .2s, transform .2s; }
.glb__thumb--vid { background: linear-gradient(160deg, var(--accent), var(--accent-2)); }
.glb__thumb:hover { opacity: .85; }
.glb__thumb.is-active { border-color: var(--accent-bright); opacity: 1; transform: translateY(-3px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .gh { min-height: auto; }
  .gh__wall { right: -30%; width: 120vw; opacity: .5; }
  .gh__shade { background: linear-gradient(180deg, rgba(8,19,32,.55) 0%, rgba(8,19,32,.9) 55%, var(--bg) 100%); }
  .gtools { position: static; }
  .gtools__right { width: 100%; justify-content: space-between; margin-left: 0; }
}
@media (max-width: 700px) {
  .galbums__row { grid-auto-columns: 72%; gap: 1.2rem; }
  .gwall { columns: 2; column-gap: .6rem; }
  .gtile { margin-bottom: .6rem; }
  .gtile__btn { border-radius: 14px; }
  .gtile__play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .glb__stage { padding: 0 .6rem; }
  .glb__nav { top: auto; bottom: .4rem; width: 46px; height: 46px; transform: none; }
  .glb__nav:hover { transform: none; }
  .glb__media img, .glb__media video { max-height: calc(100dvh - 250px); }
  .glb__media { padding-bottom: 3.4rem; }
  .glb__svc span { display: none; }
  .glb__svc { width: 40px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gh__track { animation: none !important; }
  .gtile, .gtile img, .gtile__btn, .galbum__ph, .gwall { transition: none !important; }
  .glb, .glb__media > * { animation: none !important; }
  .gjs .gtile img { filter: none; }
}