/* DanceKut Gallery — look «Club» (config.look = 'club' · ?look=club), 2026-09-30.
   Built around what a night actually delivers: nine photos in ten are VERTICAL.
     · a RAIL on the left (desktop): the brand, the event, the index of nights, the buttons;
       on a phone the rail is the top of the page and the index a sticky strip;
     · the hero is a MARQUEE: two rows of the night's own photos drifting in opposite
       directions — tall photos at their true shape, never a vertical stretched across a
       desktop;
     · the wall is ONE grid of uniform tall tiles (a landscape takes two columns), dealt in
       like cards, leaning toward the pointer;
     · the viewer is STORIES: the photo over its own blurred glow (a vertical photo on a wide
       screen is no longer flanked by black), segments on top, a slideshow.
   Scoped by PART: bar-rail · hl-rail · wall-tiles · rv-deal · hv-lean · vw-stories («Club» is the
   preset of all of them; the marquee is also the `hero: marquee` recap of any centred page). */

body.bar-rail { --rail: 340px; --barh: 58px; }
body.hl-rail .gal-header { padding: 0; text-align: left; }
body.no-status .gal-status { display: none; }
/* the Stage lockup in the rail and the bar */
body.bar-rail .gal-brand-word { font-size: 22px; gap: .25em; letter-spacing: -0.0625em; }
body.bar-rail .gal-brand-word .gname { font-weight: 800; color: var(--tx); letter-spacing: -0.0625em; text-transform: none; font-size: inherit; }
body.bar-rail .gal-brand-word .gname sup { font-size: 10px; letter-spacing: 0; margin-left: 2px; vertical-align: top; position: relative; top: -3px; font-weight: 700; }
body.bar-rail .gal-bar-ident { display: none; }
body.bar-rail .gal-brand-k { width: 30px; height: 30px; }

/* ── the rail ── */
.cl-rail { display: flex; flex-direction: column; gap: 18px; }
.cl-rail-brand { display: inline-flex; align-items: center; }
.cl-ident { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cl-logo img { max-height: 110px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 14px 40px rgba(168,85,247,.3)); }
.cl-name { font-weight: 900; font-size: clamp(34px, 3.4vw, 50px); letter-spacing: -0.045em; line-height: .95; overflow-wrap: anywhere; width: 100%; }
.cl-sub.po-sub { font-size: 11.5px; letter-spacing: .18em; gap: 6px 10px; text-shadow: none; opacity: .85; }
.cl-ctas { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.cl-ctas .gal-link-btn, .cl-ctas .gal-contact-btn { min-height: 40px; font-size: 13px; padding: 6px 16px; }
.cl-ident .gal-socials-row { justify-content: flex-start; }
.cl-rail .el, .cl-hero .el { opacity: 0; }
body.gal-in .cl-rail .el, body.gal-in .cl-hero .el { animation: elIn .8s var(--ease) both; animation-delay: var(--d, 0s); }
body.gal-in .cl-hero .el.pop { animation-name: popIn; animation-duration: .6s; }
.cl-rail-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--gline); }
.cl-get { flex: 1; font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); padding: 8px 12px; border-radius: 999px; text-align: center; border: 1px solid rgba(var(--acc-w), .5); background: linear-gradient(135deg, rgba(var(--acc-w), .16), rgba(var(--acc2-w), .10)); }
.cl-get:hover { border-color: var(--acc); }
/* the index of nights */
.cl-navbox { display: flex; flex-direction: column; gap: 10px; }
body.hl-rail .gal-nav { max-width: none; margin: 0; padding: 0; gap: 0; }

@media (min-width: 1024px) {
  body.bar-rail .gal-bar { display: none; }
  body.bar-rail.has-bar { padding-top: 0; }
  .cl-rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 550; padding: 24px 22px 16px;
    background: var(--glass); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-right: 1px solid var(--gline); overflow-y: auto; scrollbar-width: thin;
  }
  .cl-main { margin-left: var(--rail); min-height: 100vh; }
  /* the nights, one under another, with a thread down the left */
  .cl-navbox .po-chap-row { flex-direction: column; overflow: visible; padding: 0 0 0 14px; gap: 6px; position: relative; scroll-snap-type: none; }
  .cl-navbox .po-chap-row::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--pur), var(--or)); opacity: .45; }
  .cl-navbox .po-chap { min-width: 0; width: 100%; position: relative; }
  .cl-navbox .po-chap::before { content: ''; position: absolute; left: -15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line2); transition: border-color .2s, background .2s, box-shadow .2s; }
  .cl-navbox .po-chap.on::before { background: linear-gradient(135deg, var(--pur), var(--or)); border-color: transparent; box-shadow: 0 0 12px rgba(var(--acc-w), .7); }
  .cl-navbox .po-filters { flex-direction: row; }
  .cl-navbox .po-filters .spacer { display: none; }
}
@media (max-width: 1023px) {
  .cl-rail { padding: 14px 16px 12px; }
  .cl-rail-brand, .cl-rail-foot { display: none; }        /* the bar carries them on a phone */
  .cl-name { font-size: clamp(36px, 11vw, 64px); }
  body.hl-rail .gal-nav { position: sticky; top: var(--barh); z-index: 500; padding: 8px 12px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--gline); }
  .cl-navbox { gap: 6px; }
}

/* ── the hero: a marquee of the night ── */
.cl-hero { position: relative; height: clamp(300px, 56vh, 620px); overflow: hidden; background: #07070c; }
.cl-hero.empty { height: 0; }
.cl-rows { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.cl-row { flex: 1; min-height: 0; overflow: hidden; }
.cl-track { display: flex; height: 100%; width: max-content; animation: clMarq 60s linear infinite; will-change: transform; }
.cl-row.rev .cl-track { animation-direction: reverse; }
.cl-hero:hover .cl-track { animation-play-state: paused; }
.cl-track img { height: 100%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 10px; margin-right: 8px; cursor: pointer; transition: filter .2s, transform .25s var(--ease); background: var(--imgbg); }
.cl-track img:hover { filter: brightness(1.15); transform: scale(1.02); }
@keyframes clMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cl-hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,15,.25) 0%, rgba(10,10,15,0) 35%, rgba(10,10,15,.0) 60%, var(--bg) 100%); }
.cl-hero-in { position: absolute; left: clamp(14px, 3vw, 32px); bottom: 22px; z-index: 2; }
.cl-play { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px 0 18px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc2)); box-shadow: 0 14px 40px rgba(var(--acc-w), .4); transition: transform .18s var(--ease), filter .18s; }
.cl-play:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cl-play svg { width: 16px; height: 16px; fill: #fff; }

/* ── the wall: uniform tall tiles ── */
body.wall-tiles .gal-grid-wrap { max-width: none; margin: 0; padding: 12px clamp(10px, 2vw, 28px) 60px; }
body.wall-tiles .gal-grid.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; grid-auto-flow: dense; align-items: stretch; }
.cl-card { aspect-ratio: 2 / 3; }
.cl-card.wide { grid-column: span 2; aspect-ratio: 4 / 3; }
body.wall-tiles .gal-card { border-radius: 14px; border: 1px solid var(--gline); background: var(--imgbg); transform-style: preserve-3d; }
body.wall-tiles .gal-card img.th { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 30%; }
/* dealt in like cards */
body.rv-deal .gal-card.rv { opacity: 0; filter: none; transform: translateY(44px) rotate(var(--rz, 0deg)) scale(.9); }
body.rv-deal .gal-card.rv.in { opacity: 1; transform: none; filter: none; transition: transform .75s var(--spring), opacity .45s ease, box-shadow .2s, border-color .2s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
/* leaning toward the pointer (rebuildGridClub writes --tx / --ty), in the house yellow */
body.hv-lean .gal-card:hover, body.hv-lean .gal-card.rv.in:hover {
  transform: perspective(700px) rotateY(calc(var(--tx, 0) * 12deg)) rotateX(calc(var(--ty, 0) * -12deg)) scale(1.035);
  transition: transform .12s ease-out, box-shadow .2s, border-color .2s; transition-delay: 0s; z-index: 3;
  border-color: var(--hov-yellow); box-shadow: 0 0 0 2px var(--hov-yellow), 0 26px 54px rgba(0,0,0,.55);
}
body.hv-lean .gal-card:hover img.th { transform: none; }
body.hv-lean .gal-card::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(60% 50% at calc(50% + var(--tx, 0) * 100%) calc(50% + var(--ty, 0) * 100%), rgba(255,255,255,.22), transparent 70%); }
body.hv-lean .gal-card:hover::before { opacity: 1; }
body.hv-lean .gal-card .nm { display: none; }
.po-head.cl-head { grid-column: 1 / -1; padding-top: 22px; }
body.wall-tiles .gal-ad { aspect-ratio: 2 / 3; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; }
body.wall-tiles .gal-foot { max-width: none; }
@media (max-width: 640px) {
  body.wall-tiles .gal-grid.cl-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  body.wall-tiles .gal-card { border-radius: 10px; }
}
@media (min-width: 641px) and (max-width: 1023px) { body.wall-tiles .gal-grid.cl-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }

/* ── the viewer: stories ── */
body.vw-stories .gal-viewer { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
.cl-vbg { position: absolute; inset: -8%; z-index: 0; background-size: cover; background-position: center; filter: blur(46px) brightness(.4) saturate(1.25); transition: background-image .45s ease; }
body.vw-stories .gal-viewer > *:not(.cl-vbg) { position: relative; z-index: 1; }
.cl-segs { display: flex; gap: 4px; padding: 10px 14px 0; }
.cl-segs i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.26); position: relative; overflow: hidden; }
.cl-segs i.done { background: rgba(255,255,255,.95); }
.cl-segs i.on::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left center; }
.gal-viewer.sliding .cl-segs i.on::after { animation: clSeg var(--slide, 3.8s) linear both; }
@keyframes clSeg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cl-slide svg { fill: currentColor; stroke: currentColor; }
.cl-slide.on { background: linear-gradient(135deg, var(--acc), var(--acc2)); border-color: transparent; }
body.vw-stories .gal-viewer-wrap img.media { border-radius: 16px; box-shadow: 0 40px 110px rgba(0,0,0,.7); }
body.vw-stories .gal-viewer-stage { padding: 6px 64px 0; }
@media (max-width: 640px) { body.vw-stories .gal-viewer-stage { padding: 6px 6px 0; } body.vw-stories .gal-viewer-wrap img.media { border-radius: 10px; } }

/* ── the opening, «club» variant: the marquee arrives ── */
.gi-strips { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.2vh; pointer-events: none; }
.gi-strips::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(7,7,12,.55), rgba(7,7,12,.82)); }
.gi-strip { height: 36vh; overflow: hidden; opacity: 0; transform: translateX(-60%); transition: transform 1.3s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.gi-strip.rev { transform: translateX(60%); }
.gi.s-strips .gi-strip { opacity: 1; transform: none; }
.gi-strip-track { display: flex; height: 100%; width: max-content; animation: clMarq 70s linear infinite; }
.gi-strip.rev .gi-strip-track { animation-direction: reverse; margin-left: -40vw; }
.gi-strip-track img { height: 100%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 10px; margin-right: 1.2vh; }
.gi.gi-club .gi-ev, .gi.gi-club .gi-tag, .gi.gi-club .gi-news { z-index: 5; }