/* DanceKut Gallery — look «Prisma» (config.look = 'prism' · ?look=prism), 2026-09-30.
   Depth and light. The brand's two hues are treated as light that SPLITS: a purple edge on
   one side of things and an orange one on the other, the way a prism opens white.
     · the hero is the event's mark on the left and a RING of the night's photos on the right:
       it turns by itself, a drag spins it and it keeps the push;
     · the days are big numerals with a line of the three hues that slides to the chosen one;
     · the wall is a MOSAIC (verticals one column by two half-rows, landscapes two by two,
       every ninth vertical a feature four times the size); a tile lands tipping forward with
       a band of light crossing it, and under the pointer it TILTS, a glare follows the hand,
       a foil of the brand hues lights up and its shadow splits in two colours;
     · the viewer is a COVERFLOW: the neighbours wait at the sides in perspective, the photo
       stands on a floor that reflects it, a big numeral counts.
   The ambient is the 'beams' drawing of galfx.js (spotlights sweeping from above).
   Scoped by PART: bar-line · hl-split · days-numerals · wall-mosaic · rv-tip · hv-holo · vw-coverflow
   («Prism» is the preset). The carousel base rules live in gallery-flow.css. */

body.bar-line { --barh: 62px; }
body.wall-mosaic { --pr-r: 16px; }
body.bar-line.has-bar { padding-top: 0; }
body.hl-split .gal-header { padding: 0; text-align: left; }
body.no-status .gal-status { display: none; }

/* ── the bar: clear over the hero, glass once scrolled, with a travelling hairline ── */
body.bar-line .gal-bar { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.bar-line.po-scrolled .gal-bar { background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
body.bar-line .gal-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; opacity: 0; transition: opacity .4s; background: linear-gradient(90deg, transparent, var(--pur), var(--pink), var(--or), transparent); background-size: 200% 100%; animation: prLine 7s linear infinite; }
body.bar-line.po-scrolled .gal-bar::after { opacity: .9; }
@keyframes prLine { from { background-position: 200% 0; } to { background-position: 0 0; } }
body.bar-line .gal-bar-brand .gal-brand-k { width: 30px; height: 30px; }
body.bar-line .gal-brand-word { font-size: 23px; gap: .25em; }
body.bar-line .gal-brand-word .gname { font-weight: 800; color: var(--tx); letter-spacing: -0.0625em; text-transform: none; font-size: inherit; }
body.bar-line .gal-brand-word .gname sup { font-size: 10px; letter-spacing: 0; margin-left: 2px; vertical-align: top; position: relative; top: -3px; font-weight: 700; }
@media (max-width: 480px) { body.bar-line .gal-brand-word { font-size: 18.5px; } }

/* ── the hero ── */
.pr-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(10px, 3vw, 50px); padding: calc(var(--barh) + 20px) clamp(18px, 5vw, 84px) 34px; overflow: hidden; }
.pr-hero:has(.pr-ring.empty) { grid-template-columns: minmax(0, 1fr); min-height: 62vh; }
.pr-hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.pr-logo img { max-height: clamp(90px, 23vh, 220px); max-width: min(100%, 580px); object-fit: contain; filter: drop-shadow(-7px 0 22px rgba(168, 85, 247, .5)) drop-shadow(7px 0 22px rgba(255, 123, 0, .4)); }
.pr-name { display: flex; flex-direction: column; align-items: flex-start; font-weight: 900; line-height: .88; letter-spacing: -0.05em; font-size: clamp(50px, 8.4vw, 156px); max-width: 100%; }
.pr-hero-in { width: 100%; }
.pr-name .l2 { font-size: .4em; line-height: 1.02; letter-spacing: -0.02em; margin-top: .22em; text-transform: uppercase; }
.pr-sub.po-sub { text-shadow: none; }
.pr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.pr-ctas .gal-link-btn, .pr-ctas .gal-contact-btn { min-height: 48px; padding: 8px 22px; border-radius: 999px; }
.pr-hero-in .gal-socials-row { justify-content: flex-start; }
/* the ring (gallery.js writes the ring's turn and each card's --f: 1 = facing you) */
.pr-ring { position: relative; height: clamp(320px, 64vh, 660px); perspective: 1300px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; --cw: 200px; opacity: 0; transform: scale(.8); }
body.gal-in .pr-ring { opacity: 1; transform: none; transition: opacity .9s ease .15s, transform 1.4s var(--ease) .15s; }
.pr-ring:active { cursor: grabbing; }
.pr-ring.empty { display: none; }
.pr-ring::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 22%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--acc-w), .28), transparent 70%); filter: blur(12px); }
.pr-ring-in { position: absolute; left: 56%; top: 47%; width: var(--cw); height: calc(var(--cw) * 1.5); margin: calc(var(--cw) * -.75) 0 0 calc(var(--cw) / -2); transform-style: preserve-3d; will-change: transform; }
.pr-ring-card { position: absolute; inset: 0; padding: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--imgbg); cursor: pointer; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); transition: box-shadow .25s; }
.pr-ring-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; pointer-events: none; }
.pr-ring-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--bg); opacity: calc(.8 - var(--f, 1) * .8); }
.pr-ring-card:hover { box-shadow: 0 0 0 2px var(--hov-yellow), -14px 0 50px rgba(168, 85, 247, .5), 14px 0 50px rgba(255, 123, 0, .42), 0 30px 70px rgba(0, 0, 0, .6); }
@media (max-width: 900px) {
  .pr-hero { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding-top: calc(var(--barh) + 26px); padding-bottom: 10px; }
  .pr-ring { height: clamp(300px, 50vh, 460px); }
}

/* ── the days: numerals, and a line of the three hues that slides to the chosen one ── */
body.days-numerals .gal-nav { max-width: none; margin: 0; padding: 0; }
body.days-numerals .gal-nav-sticky { margin: 0; padding: 4px clamp(14px, 5vw, 84px) 0; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--gline); }
body.days-numerals .gal-nav-sticky.stuck { background: var(--glass); }
body.days-numerals .po-chap-row { position: relative; gap: 2px; padding: 0; }
body.days-numerals .po-chap { position: relative; z-index: 1; min-width: 0; padding: 10px 20px 14px 8px; gap: 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: .5; transition: opacity .2s, transform .35s var(--spring); }
body.days-numerals .po-chap:hover { opacity: 1; transform: translateY(-2px); }
body.days-numerals .po-chap.on { opacity: 1; background: transparent; box-shadow: none; }
body.days-numerals .po-chap .d { font-size: 40px; }
body.days-numerals .po-chap.on .d { background: none; -webkit-text-fill-color: currentColor; color: var(--tx); text-shadow: -2px 0 0 rgba(168, 85, 247, .75), 2px 0 0 rgba(255, 123, 0, .7); }
body.days-numerals .po-chap.mix .d, body.days-numerals .po-chap.glob .d { font-size: 17px; letter-spacing: .1em; }
.pr-ind { background: linear-gradient(90deg, var(--pur), var(--pink), var(--or)); clip-path: inset(calc(100% - 3px) 6px 0 6px round 3px); }
body.days-numerals .po-filters { padding: 8px 0 10px; }
body.days-numerals .po-eds { padding-top: 6px; }

/* ── the wall: a mosaic on a grid of half-height rows (rebuildGridPrism writes --cols / --rh) ── */
body.wall-mosaic .gal-grid-wrap { max-width: none; margin: 0; padding: 16px clamp(14px, 5vw, 84px) 70px; }
body.wall-mosaic .gal-grid.pr-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); grid-auto-rows: var(--rh, 120px); gap: var(--gap, 12px); grid-auto-flow: dense; align-items: stretch; }
.pr-card { grid-row: span 2; }
.pr-card.wide { grid-column: span 2; }
.pr-card.feat { grid-column: span 2; grid-row: span 4; }
.po-head.pr-head { grid-column: 1 / -1; align-self: end; padding: 0 4px 6px; }
body.wall-mosaic .gal-card { border-radius: var(--pr-r); border: 0; background: var(--imgbg); }
body.wall-mosaic .gal-card img.th { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 30%; }
body.wall-mosaic .gal-ad { border-radius: var(--pr-r); display: flex; flex-direction: column; justify-content: center; }
/* the reveal: the tile tips forward into place and a band of light crosses it */
body.rv-tip .gal-card.rv { opacity: 0; filter: none; transform-origin: 50% 100%; transform: perspective(900px) rotateX(20deg) translateY(54px) scale(.93); }
body.rv-tip .gal-card.rv.in { opacity: 1; filter: none; transform: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, box-shadow .25s; transition-delay: var(--d, 0s), var(--d, 0s), 0s; }
body.rv-tip .gal-card.rv.in.rvd { transform-origin: 50% 50%; }
body.rv-tip .gal-card.rv.in::before { animation: prSweep 1.15s ease-out backwards; animation-delay: calc(var(--d, 0s) + .18s); }
@keyframes prSweep { 0% { opacity: .95; background-position: 125% 50%; } 100% { opacity: 0; background-position: -25% 50%; } }
/* the glare (follows the hand) and the foil (the brand hues, lit by the tilt) */
body.hv-holo .gal-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .85) 50%, transparent 66%); background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%);
}
body.hv-holo .gal-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: color-dodge;
  background: linear-gradient(calc(110deg + var(--tx, 0) * 90deg), rgba(168, 85, 247, .5), rgba(236, 72, 153, .3) 35%, rgba(255, 123, 0, .45) 65%, rgba(255, 217, 77, .35));
}
@media (hover: hover) and (pointer: fine) {
  body.hv-holo .gal-card.rv.in:hover {
    transform: perspective(800px) rotateY(calc(var(--tx, 0) * 17deg)) rotateX(calc(var(--ty, 0) * -17deg)) scale(1.06);
    transition: transform .14s ease-out, box-shadow .25s; transition-delay: 0s; z-index: 6;
    box-shadow: 0 0 0 2px var(--hov-yellow),
      calc(var(--tx, 0) * -36px - 10px) calc(var(--ty, 0) * -36px) 60px rgba(168, 85, 247, .5),
      calc(var(--tx, 0) * 36px + 10px) calc(var(--ty, 0) * 36px) 60px rgba(255, 123, 0, .42),
      0 30px 60px rgba(0, 0, 0, .55);
  }
  body.hv-holo .gal-card:hover::before { opacity: .9; }
  body.hv-holo .gal-card:hover::after { opacity: .55; }
  body.hv-holo .gal-card:hover img.th { transform: scale(1.13) translate(calc(var(--tx, 0) * -16px), calc(var(--ty, 0) * -16px)); transition: transform .2s ease-out; }
}
body.hv-holo .gal-card.rv.in:active { transform: perspective(800px) scale(.95); transition: transform .12s ease-out; transition-delay: 0s; }
body.wall-mosaic .gal-foot { max-width: none; }
@media (max-width: 640px) { body.wall-mosaic { --pr-r: 11px; } body.wall-mosaic .gal-grid-wrap { padding-left: 10px; padding-right: 10px; } }

/* ── the viewer: a coverflow over a floor that reflects ── */
body.vw-coverflow .gal-viewer { --spad: 8vw; overflow: hidden; background: rgba(3, 3, 8, calc(.95 * var(--dim, 1))); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pr-vbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--dim, 1); background:
  radial-gradient(58% 52% at 16% 0%, rgba(168, 85, 247, .36), transparent 70%),
  radial-gradient(58% 52% at 84% 0%, rgba(255, 123, 0, .27), transparent 70%),
  linear-gradient(180deg, transparent 0 78%, rgba(255, 255, 255, .05) 78.2%, rgba(255, 255, 255, 0) 100%); }
body.vw-coverflow .gal-viewer > *:not(.pr-vbg):not(.pr-num):not(.pr-prog) { position: relative; z-index: 1; }
body.vw-coverflow .gal-viewer-stage { padding: 0 var(--spad) 6vh; }
body.vw-coverflow .cf { perspective: 1500px; bottom: 6vh; }
body.vw-coverflow .cf-it { transform: translateX(calc(var(--o) * 50%)) translateZ(calc(var(--a) * -280px)) rotateY(calc(var(--o) * -44deg)); opacity: calc(1.2 - var(--a) * .5); }
body.vw-coverflow .cf-it img, body.vw-coverflow .gal-viewer-wrap img.media {
  border-radius: 10px; box-shadow: 0 40px 100px rgba(0, 0, 0, .75);
  -webkit-box-reflect: below 8px linear-gradient(transparent 76%, rgba(0, 0, 0, .22));
}
body.vw-coverflow .gal-viewer.opening .cf-it:not(.c0) { animation: prSide .85s cubic-bezier(.2, .8, .2, 1) .22s backwards; }
@keyframes prSide { from { transform: translateX(calc(var(--o) * 120%)) translateZ(-700px) rotateY(calc(var(--o) * -85deg)); opacity: 0; } }
body.vw-coverflow .gal-viewer-count { display: none; }   /* the big numeral says it */
body.vw-coverflow .gal-arrow { background: rgba(255, 255, 255, .05); }
.pr-num { position: absolute; left: clamp(14px, 4vw, 60px); bottom: 22px; z-index: 3; display: flex; align-items: baseline; gap: 8px; color: #f4f4f6; font-variant-numeric: tabular-nums; pointer-events: none; }
.pr-num b { font-weight: 900; font-size: clamp(34px, 5vw, 66px); letter-spacing: -0.04em; line-height: 1; text-shadow: -2px 0 0 rgba(168, 85, 247, .75), 2px 0 0 rgba(255, 123, 0, .65); }
.pr-num span { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #a3a8b8; }
.pr-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, .08); pointer-events: none; }
.pr-prog i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--pur), var(--pink), var(--or)); transition: transform .45s var(--ease); }
@media (max-width: 760px) {
  body.vw-coverflow .gal-viewer { --spad: 6px; }
  body.vw-coverflow .gal-viewer-stage { padding-bottom: 3vh; }
  body.vw-coverflow .cf { bottom: 3vh; }
  body.vw-coverflow .cf-it { transform: translateX(calc(var(--o) * 78%)) translateZ(calc(var(--a) * -320px)) rotateY(calc(var(--o) * -50deg)); }
  .pr-num { left: 14px; top: 12px; bottom: auto; }
  .pr-num b { font-size: 30px; }
  body.vw-coverflow .gal-viewer-name { visibility: hidden; }
}

/* ── the opening, «prism» variant: the ring ── */
.gi-ring { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 46%; pointer-events: none; opacity: 0; transform: scale(.7); transition: opacity .8s ease, transform 1.5s cubic-bezier(.2, .8, .2, 1); --w: 200px; }
.gi.s-ring .gi-ring { opacity: 1; transform: none; }
.gi-ring::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 46% at 50% 34%, rgba(7, 7, 12, .78), rgba(7, 7, 12, .2) 80%); }
.gi-ring-in { position: absolute; left: 50%; top: 62%; width: var(--w); height: calc(var(--w) * 1.5); margin: calc(var(--w) * -.75) 0 0 calc(var(--w) / -2); transform-style: preserve-3d; animation: giSpin 28s linear infinite; }
@keyframes giSpin { from { transform: translateZ(calc(var(--R) * -1)) rotateY(0deg); } to { transform: translateZ(calc(var(--R) * -1)) rotateY(-360deg); } }
.gi-ring-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.gi.gi-prism .gi-ev { top: 30%; z-index: 5; }
.gi.gi-prism .gi-tag { top: calc(30% + 10vh); z-index: 5; }
.gi.gi-prism .gi-news { z-index: 5; }