/* =====================================================================
   SENSE — gallery page (gallery.html)
   1. Hero: real photos riding a moving sound wave
   2. Category filters (pills with counts; equaliser on the active one)
   3. Mosaic grid (tiles placed by sense-gallery.js)
   4. Lightbox
   Tokens and shared components live in sense.css; nothing here is used
   by other pages.
   ===================================================================== */

/* =====================================================================
   1. HERO
   ===================================================================== */
.gx-hero{--strip-h:clamp(262px,calc(18vw + 82px),344px);padding-top:calc(var(--hdr-h) + clamp(30px,4.2vw,68px));padding-bottom:var(--strip-h)}
/* darken only the top-left corner, where the text sits; the photo wave stays bright */
.gx-hero::after{background:radial-gradient(85% 80% at 0% 0%,rgba(11,12,18,.9) 0%,rgba(11,12,18,.6) 42%,rgba(11,12,18,0) 74%)}
.gx-hero .phero-in{z-index:2;pointer-events:none}
.gx-hero .phero-in > *{pointer-events:auto}
.gx-hero .phero-t{max-width:none;font-size:clamp(2.9rem,6.2vw,5.9rem)}
html.lang-bn .gx-hero .phero-t{font-size:clamp(2.6rem,5.7vw,5.3rem);line-height:1.18}
.gx-hero .phero-sub{max-width:33em}
.gx-hero .phero-cta .btn-2l small:empty{display:none}

/* the photos (drawn and moved by sense-gallery.js) */
.gx-strip{position:absolute;inset:0;z-index:1;pointer-events:none}
.gx-st{position:absolute;left:0;top:0;border-radius:14px;overflow:hidden;overflow:clip;pointer-events:auto;cursor:zoom-in;
  background:var(--ink3) var(--ph,none) center/cover no-repeat;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 26px 48px -20px rgba(0,0,0,.85),0 0 0 1px rgba(243,239,230,.12);opacity:0;will-change:transform,opacity;transition:box-shadow .3s}
.gx-st img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.gx-st.is-loaded img{opacity:1}
.gx-st::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--c,var(--nose));opacity:0;transition:opacity .3s}
@media (hover:hover) and (pointer:fine){
  .gx-st:hover{box-shadow:0 30px 60px -18px color-mix(in srgb,var(--c,var(--nose)) 55%,transparent),0 0 0 1px rgba(243,239,230,.2)}
  .gx-st:hover::after{opacity:1}
}
.gx-st.is-origin{visibility:hidden}
.gx-strip.is-grabbing .gx-st{cursor:grabbing}

/* phones: smaller strip area */
@media (max-width:720px){
  .gx-hero{--strip-h:262px;padding-top:calc(var(--hdr-h) + 30px)}
  .gx-hero::after{background:linear-gradient(180deg,rgba(11,12,18,.88) 0%,rgba(11,12,18,.55) 52%,rgba(11,12,18,0) 76%)}
  .gx-hero .phero-in{gap:14px}
  .gx-st{border-radius:12px}
}

/* paper rises into the ink with a soft wave (mirrors the final band's top edge) */
.gx{padding-top:clamp(34px,4.4vw,72px);padding-bottom:clamp(72px,8vw,128px)}
.gx::before{content:"";position:absolute;left:0;right:0;top:-43px;height:44px;background:var(--paper);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22C150 46 300 46 450 22S750 -2 900 22S1050 46 1200 22V44H0Z'/%3E%3C/svg%3E") 0 0/1200px 44px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22C150 46 300 46 450 22S750 -2 900 22S1050 46 1200 22V44H0Z'/%3E%3C/svg%3E") 0 0/1200px 44px repeat-x}

/* =====================================================================
   2. FILTERS
   ===================================================================== */
.gx-bar{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  padding:12px 0;margin-bottom:clamp(14px,2vw,26px)}
.gx-bar[hidden]{display:none}
.gx-filters{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.gx-pill{--c:var(--thyroid);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 10px 0 16px;border-radius:999px;
  font-weight:650;font-size:15.5px;line-height:1.2;color:var(--t1);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-l);
  transition:background-color .3s,color .3s,box-shadow .3s,transform .35s var(--ease)}
html.lang-bn .gx-pill{font-size:16.5px;font-weight:600}
.gx-pill:hover{box-shadow:inset 0 0 0 1.5px var(--t1)}
.gx-pill:active{transform:scale(.97)}
.gx-pill[hidden]{display:none}
.gx-dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.gx-n{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 9px;border-radius:999px;background:var(--paper2);
  font-size:13.5px;font-weight:650;font-feature-settings:"tnum";color:var(--t2);transition:background-color .3s,color .3s}
html.lang-bn .gx-n{font-size:14.5px}
.gx-n:empty{display:none}
/* the active pill: ink, with a small equaliser in the category colour */
.gx-pill[aria-pressed="true"]{background:var(--ink);color:var(--d1);box-shadow:none}
.gx-pill[aria-pressed="true"] .gx-n{background:var(--c);color:var(--ink)}
.gx-pill[aria-pressed="true"] .gx-dot{display:none}
.gx-eq{display:none;align-items:flex-end;gap:2px;height:14px;flex:none}
.gx-pill[aria-pressed="true"] .gx-eq{display:inline-flex}
.gx-eq i{width:3px;height:14px;border-radius:2px;background:var(--c);transform-origin:50% 100%;transform:scaleY(.55)}
.gx-pill[data-filter="all"] .gx-eq i:nth-child(1){background:var(--ear)}
.gx-pill[data-filter="all"] .gx-eq i:nth-child(2){background:var(--nose)}
.gx-pill[data-filter="all"] .gx-eq i:nth-child(3){background:var(--thyroid)}
.gx-pill[data-filter="all"] .gx-eq i:nth-child(4){background:var(--throat)}
.gx-pill[data-filter="all"] .gx-dot{background:conic-gradient(var(--ear),var(--neck),var(--nose),var(--thyroid),var(--throat),var(--ear));box-shadow:none}
.gx-pill[data-filter="all"]{--c:var(--thyroid)}
@media (prefers-reduced-motion:no-preference){
  .gx-pill[aria-pressed="true"] .gx-eq i{animation:gxEq .9s var(--ease-io) infinite alternate}
  .gx-eq i:nth-child(2){animation-delay:-.35s!important;animation-duration:.7s!important}
  .gx-eq i:nth-child(3){animation-delay:-.6s!important;animation-duration:1.05s!important}
  .gx-eq i:nth-child(4){animation-delay:-.15s!important;animation-duration:.8s!important}
  .gx-bar.is-off .gx-eq i{animation-play-state:paused}
}
@keyframes gxEq{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
/* touch screens: a short dance when a filter is chosen, then the bars rest */
@media (hover:none),(pointer:coarse){ .gx-pill[aria-pressed="true"] .gx-eq i{animation-iteration-count:6} }


/* sticky filter bar on larger screens (phones keep it in the flow: less chrome on a small screen) */
@media (min-width:900px){
  .gx-bar{position:sticky;top:var(--hdr-h);background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
  .gx-bar::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:1px;background:var(--line-l);opacity:0;transition:opacity .3s}
  .gx-bar.is-stuck::after{opacity:1}
}
/* phones: one row that scrolls sideways (new categories never push the photos down) */
@media (max-width:640px){
  .gx-bar{padding:4px 0;margin:0 calc(-1 * var(--gut)) 12px}
  .gx-filters{gap:6px;width:100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px var(--gut) 8px;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .gx-filters::-webkit-scrollbar{display:none}
  .gx-filters.is-end{-webkit-mask:none;mask:none}
  .gx-pill{flex:none}
  .gx-pill{min-height:44px;padding:0 5px 0 11px;gap:6px;font-size:14.5px}
  html.lang-bn .gx-pill{font-size:15.5px}
  .gx-dot{width:8px;height:8px;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent)}
  .gx-n{min-width:24px;height:26px;padding:0 6px;font-size:12.5px}
  html.lang-bn .gx-n{font-size:13.5px}
  .gx-eq{gap:1.5px;height:12px}
  .gx-eq i{width:2.5px;height:12px}
}

/* =====================================================================
   3. MOSAIC GRID — cells are 3:4; JS places photos as 1×1, 2×2 or 2×1
   ===================================================================== */
.gx-shell{position:relative;container-type:inline-size}
.gx-grid{--cols:2;--gap:10px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:232px;
  grid-auto-rows:calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) * 4 / 3);grid-auto-flow:row dense;gap:var(--gap)}
@media (min-width:700px){ .gx-grid{--cols:3;--gap:14px} }
@media (min-width:1100px){ .gx-grid{--cols:4;--gap:18px} }

.g-tile{--c:var(--nose);--r:20px;position:relative;display:block;width:100%;height:100%;padding:0;border-radius:var(--r);text-align:left;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent}
.g-tile:focus-visible{outline:3px solid var(--thyroid);outline-offset:4px;border-radius:var(--r)}
/* no transform at rest: a 3D transform would give every tile its own compositor layer (heavy on phones) */
.g-card{position:absolute;inset:0;border-radius:inherit;transition:transform .6s var(--ease)}
.g-glow{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .35s;
  box-shadow:0 0 0 2.5px var(--c),0 26px 54px -16px color-mix(in srgb,var(--c) 70%,transparent)}
.g-media{position:absolute;inset:0;border-radius:inherit;overflow:hidden;overflow:clip;isolation:isolate;background:var(--paper3)}
/* blurred preview until the photo arrives (clip, not hidden: a hidden box would become a scroll container) */
.g-media::before{content:"";position:absolute;inset:-18px;z-index:-1;background:var(--ph,none) center/cover no-repeat;filter:blur(14px);transform:scale(1.06)}
.g-tile.is-loaded .g-media::before{visibility:hidden;transition:visibility 0s .7s}
.g-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;
  transition:opacity .7s var(--ease),transform .9s var(--ease)}
.g-tile.is-loaded .g-media img{opacity:1}
.g-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(60% 55% at var(--mx,50%) var(--my,30%),rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.g-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:46px 16px 15px;border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(0deg,rgba(11,12,18,.88) 0%,rgba(11,12,18,.55) 55%,rgba(11,12,18,0) 100%);color:var(--d1);
  opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.g-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-m);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--d1);line-height:1.3}
html.lang-bn .g-chip{font-family:var(--f-b);font-size:13.5px;letter-spacing:0;font-weight:550}
.g-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.g-txt{font-family:var(--f-d);font-weight:650;font-size:15.5px;line-height:1.3;letter-spacing:-.005em;text-wrap:balance}
html.lang-bn .g-txt{font-size:16px;font-weight:600;line-height:1.45;letter-spacing:0}
.g-tile[data-size="large"] .g-txt{font-size:19px}
html.lang-bn .g-tile[data-size="large"] .g-txt{font-size:19.5px}
.g-tile.is-origin .g-card{visibility:hidden}

@media (hover:hover) and (pointer:fine){
  .g-tile:hover .g-card{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .g-tile:hover .g-glow,.g-tile:focus-visible .g-glow{opacity:1}
  .g-tile:hover .g-sheen{opacity:1}
  .g-tile:hover .g-media img{transform:scale(1.045)}
  .g-tile:hover .g-cap,.g-tile:focus-visible .g-cap{opacity:1;transform:none}
}
/* touch screens have no hover: keep captions on the big tiles */
@media (hover:none),(pointer:coarse){
  .g-tile[data-size="large"] .g-cap,.g-tile[data-size="wide"] .g-cap{opacity:1;transform:none}
}
@media (max-width:640px){
  .g-tile{--r:14px}
  .g-cap{padding:38px 12px 11px;gap:5px}
  .g-tile[data-size="large"] .g-txt{font-size:17px}
  html.lang-bn .g-tile[data-size="large"] .g-txt{font-size:17.5px}
}

/* reveal as tiles scroll in (JS adds .is-anim to the grid only when motion is allowed) */
.gx-grid.is-anim .g-tile{transition:opacity .75s var(--ease),transform .9s var(--ease)}
.gx-grid.is-anim .g-tile:not(.is-in){opacity:0;transform:translateY(28px)}

/* the closing tile that fills a leftover gap in the last rows */
.g-fill{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;padding:clamp(16px,2vw,26px);
  border-radius:20px;background:var(--ink);color:var(--d1);overflow:hidden;overflow:clip;isolation:isolate;transition:transform .45s var(--ease)}
.g-fill:hover{transform:translateY(-3px)}
.g-fill::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:70%;z-index:-1;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 13px,rgba(143,116,255,.28) 13px 14px);
  -webkit-mask:radial-gradient(70% 70% at 50% 100%,#000,transparent);mask:radial-gradient(70% 70% at 50% 100%,#000,transparent)}
.g-fill svg.brand-mark{width:40px;height:40px;margin-bottom:auto}
.g-fill-k{font-family:var(--f-m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--d2)}
html.lang-bn .g-fill-k{font-family:var(--f-b);font-size:14.5px;letter-spacing:0}
.g-fill-t{font-family:var(--f-d);font-weight:740;font-stretch:88%;font-size:clamp(20px,2vw,28px);line-height:1.15;letter-spacing:-.01em}
html.lang-bn .g-fill-t{letter-spacing:0;line-height:1.35;font-weight:660}
.g-fill-go{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:15px;border-bottom:2px solid var(--nose);padding-bottom:2px;min-height:32px}
html.lang-bn .g-fill-go{font-size:15.5px}
.g-fill-go .ic{width:18px;height:18px;transition:transform .35s var(--ease)}
.g-fill:hover .g-fill-go .ic{transform:translateX(4px)}
@media (max-width:640px){ .g-fill{border-radius:14px} }

/* loading placeholders */
.g-skel{border-radius:20px;background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line-l)}
.g-skel[data-size="large"]{grid-column:span 2;grid-row:span 2}
@media (prefers-reduced-motion:no-preference){ .g-skel{animation:gxPulse 1.4s var(--ease-io) 4 alternate} }
@keyframes gxPulse{to{background:var(--paper3)}}
@media (max-width:640px){ .g-skel{border-radius:14px} }

/* fading copies of photos that leave the grid when a filter changes */
.g-ghost{position:absolute;margin:0;pointer-events:none;z-index:1}

/* error / empty state */
.gx-msg{display:grid;justify-items:start;gap:16px;padding:clamp(28px,4vw,48px);border-radius:26px;background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line-l)}
.gx-msg[hidden]{display:none}
.gx-msg-t{font-family:var(--f-d);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.3}
html.lang-bn .gx-msg-t{font-weight:640;line-height:1.5}
.gx-msg-t[data-kind]{display:none}
.gx-msg[data-kind="error"] .gx-msg-t[data-kind="error"],.gx-msg[data-kind="empty"] .gx-msg-t[data-kind="empty"]{display:block}
.gx-msg[data-kind="empty"] .btn{display:none}

/* =====================================================================
   4. LIGHTBOX
   ===================================================================== */
.lb{--c:var(--nose);position:fixed;inset:0;z-index:95;color:var(--d1);touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.lb[hidden]{display:none}
.lb-bg{position:absolute;inset:0;background:var(--ink)}
/* faint stave lines behind the photo */
.lb-bg::after{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(243,239,230,.035) 31px 32px);
  -webkit-mask:radial-gradient(80% 70% at 50% 50%,#000 20%,transparent 80%);mask:radial-gradient(80% 70% at 50% 50%,#000 20%,transparent 80%)}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;overflow:clip;cursor:default}
.lb-slide{position:relative;flex:none;transform-origin:0 0;will-change:transform}
.lb-glow{position:absolute;inset:4%;z-index:-1;border-radius:24px;background:var(--ph,none) center/cover no-repeat;filter:blur(48px) saturate(1.3);opacity:.5;
  transform:scale(1.08);transition:opacity .6s}
.lb.is-moving .lb-glow{opacity:0;transition:none}
.lb-img{display:block;width:100%;height:100%;border-radius:10px;background:var(--ink3) var(--ph,none) center/cover no-repeat;cursor:zoom-in;-webkit-user-drag:none;
  transform-origin:50% 50%;transition:transform .38s var(--ease),border-radius .3s}
.lb.is-zoomed .lb-img{cursor:grab;border-radius:0}
.lb.is-dragging .lb-img,.lb.is-wheeling .lb-img{transition:none}
.lb.is-zoomed.is-dragging .lb-img{cursor:grabbing}

/* top bar: counter, category, zoom, close */
.lb-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:max(12px,env(safe-area-inset-top)) var(--gut) 12px;
  background:linear-gradient(180deg,rgba(11,12,18,.86) 0%,rgba(11,12,18,.5) 60%,rgba(11,12,18,0) 100%);pointer-events:none}
.lb-top > *{pointer-events:auto}
.lb-count{display:flex;align-items:baseline;gap:6px;font-family:var(--f-d);font-weight:700;font-size:20px;letter-spacing:.01em;font-feature-settings:"tnum";color:var(--d1);min-width:4.6em}
.lb-count i{font-style:normal;color:var(--d3);font-weight:500}
.lb-count span + i + span{color:var(--d2);font-weight:550}
.lb-cat{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px 0 11px;border-radius:999px;background:rgba(243,239,230,.08);
  box-shadow:inset 0 0 0 1px rgba(243,239,230,.14);font-family:var(--f-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--d1)}
html.lang-bn .lb-cat{font-family:var(--f-b);font-size:14.5px;letter-spacing:0;font-weight:550}
.lb-cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.lb-cat:empty{display:none}
.lb-tools{margin-left:auto;display:flex;gap:10px}
.lb-btn{width:50px;height:50px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--d1);
  background:rgba(19,20,30,.72);box-shadow:inset 0 0 0 1.5px rgba(243,239,230,.2);transition:background-color .25s,box-shadow .25s,transform .35s var(--ease)}
.lb-btn:hover{background:rgba(42,44,61,.9);box-shadow:inset 0 0 0 1.5px var(--c)}
.lb-btn:active{transform:scale(.94)}
.lb-btn[hidden]{display:none}
.lb-btn svg{width:22px;height:22px}
.lb-btn path,.lb-btn circle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lb-zoom .zm-v{transition:opacity .2s}
.lb-zoom[aria-pressed="true"] .zm-v{opacity:0}
.lb-x{background:var(--d1);color:var(--ink);box-shadow:none}
.lb-x:hover{background:#fff;box-shadow:0 0 0 3px var(--c)}
.lb-btn:focus-visible{outline:3px solid var(--thyroid);outline-offset:3px}

/* prev / next */
.lb-nav{position:absolute;top:50%;margin-top:-30px;width:60px;height:60px}
.lb-nav .ic{width:24px;height:24px}
.lb-prev{left:max(var(--gut),env(safe-area-inset-left))}
.lb-prev .ic{transform:scaleX(-1)}
.lb-next{right:max(var(--gut),env(safe-area-inset-right))}
@media (hover:hover) and (pointer:fine){
  .lb-prev:hover .ic{animation:gxNudgeL .5s var(--ease)}
  .lb-next:hover .ic{animation:gxNudgeR .5s var(--ease)}
}
@keyframes gxNudgeR{40%{transform:translateX(4px)}}
@keyframes gxNudgeL{40%{transform:scaleX(-1) translateX(4px)}}

/* caption + waveform of the photos in this set */
.lb-foot{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:12px;min-height:118px;
  padding:34px var(--gut) max(16px,env(safe-area-inset-bottom));text-align:center;
  background:linear-gradient(0deg,rgba(11,12,18,.9) 0%,rgba(11,12,18,.6) 55%,rgba(11,12,18,0) 100%);pointer-events:none}
.lb-cap{max-width:44em;font-family:var(--f-d);font-weight:600;font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--d1);text-wrap:balance;min-height:1.4em}
html.lang-bn .lb-cap{font-weight:560;line-height:1.55;font-size:clamp(17.5px,1.45vw,20.5px)}
.lb-wave{display:flex;align-items:center;justify-content:center;gap:0;height:28px;width:min(100%,520px);pointer-events:auto;cursor:pointer}
.lb-wave i{position:relative;flex:1 1 0;max-width:8px;min-width:2px;height:100%}
.lb-wave i::before{content:"";position:absolute;left:25%;right:25%;top:0;bottom:0;border-radius:3px;background:rgba(243,239,230,.28);transform:scaleY(var(--h,.18));
  transition:transform .55s var(--ease),background-color .3s}
.lb-wave i.on::before{background:var(--c)}
.lb-wave i:hover::before{background:rgba(243,239,230,.6)}
.lb-wave i.on:hover::before{background:var(--c)}

/* loading: a small equaliser while the full-size photo arrives */
.lb-load{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:4px;height:26px;margin:-13px 0 0 -17px;opacity:0;transition:opacity .25s;pointer-events:none}
.lb-load i{width:4px;height:26px;border-radius:2px;background:var(--c);transform:scaleY(.3)}
.lb.is-loading .lb-load{opacity:1}
.lb.is-loading .lb-load i{animation:gxEq .7s var(--ease-io) infinite alternate}
.lb-load i:nth-child(2){animation-delay:-.25s!important}.lb-load i:nth-child(3){animation-delay:-.5s!important}.lb-load i:nth-child(4){animation-delay:-.1s!important}

/* while zoomed: the caption steps aside */
.lb.is-zoomed .lb-foot,.lb.is-zoomed .lb-nav{opacity:0;pointer-events:none}
.lb-foot,.lb-nav{transition:opacity .3s}
.lb.is-dragging .lb-top,.lb.is-dragging .lb-foot,.lb.is-dragging .lb-nav{transition:none}
.lb.is-zoomed .lb-wave{pointer-events:none}

@media (max-width:899px){
  .lb-top{gap:10px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .lb-count{font-size:18px;min-width:0}
  .lb-btn{width:48px;height:48px}
  .lb-foot{padding:30px 70px max(14px,env(safe-area-inset-bottom));min-height:132px}
  .lb-nav{top:auto;bottom:max(16px,env(safe-area-inset-bottom));margin-top:0;width:50px;height:50px}
  .lb-prev{left:max(10px,env(safe-area-inset-left))}
  .lb-next{right:max(10px,env(safe-area-inset-right))}
  .lb-cap{font-size:16.5px}
  html.lang-bn .lb-cap{font-size:17px}
  .lb-wave{height:24px}
}
@media (max-width:420px){ .lb-cat{max-width:42vw;overflow:hidden;white-space:nowrap} }

/* =====================================================================
   REDUCED MOTION — everything above still works, just without movement
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .gx-st{opacity:1}
  .g-card{transition:none}
  .gx-grid.is-anim .g-tile:not(.is-in){opacity:1;transform:none}
  .g-tile:hover .g-media img{transform:none}
}