/* Pixelated scroll transition + the section that follows the hero. Pixel colour = the next section's background (--bk-bg). */
.pixelated-scroll-transition { z-index: 10; pointer-events: none; color: var(--bk-bg); position: absolute; inset: auto 0% 0%; }
[data-pixelated-scroll-panel] { display: flex; flex-direction: row; width: 100%; }
[data-pixelated-scroll-column] { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; flex: 1 1 0%; min-width: 0; }
[data-pixelated-scroll-pixel] { aspect-ratio: 1; width: 100%; background-color: currentColor; backface-visibility: hidden; will-change: opacity; }
[data-pixelated-scroll-transition][data-mode="reveal"] { inset: 0% 0% auto; }
[data-pixelated-scroll-transition][data-pixel-ratio="2.5/1"] [data-pixelated-scroll-pixel] { aspect-ratio: 2.5/1; }

/* section after the hero. Bottom padding = height of the pixel grid (6 rows of square pixels, 100vw / columns each), so the pixels never cover the buttons. */
@media (max-width: 991px) { .next-show { --px-cols: 20; } }
@media (max-width: 478px) { .next-show { --px-cols: 12; } }
.next-show { --px-cols: 32; background: var(--bk-bg); display: grid; place-items: center; padding: var(--bk-space-7) var(--bk-gutter) calc(clamp(18px, 2.1vw, 30px) + 6 * 100vw / var(--px-cols)); text-align: center; position: relative; }
.next-show__inner { width: 100%; max-width: 820px; }
.next-show__title { margin: 0; font-family: var(--bk-font-display); font-weight: 400; font-size: clamp(40px, min(8vw, 12svh), 104px); line-height: var(--bk-lh-tight); color: var(--bk-text); }
.next-show__lead { margin: var(--bk-space-5) auto 0; max-width: 560px; font-size: var(--bk-text-md); color: var(--bk-text-body); }
.next-show__timer { margin-bottom: var(--bk-space-7); }
.next-show__timer-label { margin: 0 0 var(--bk-space-3); color: var(--bk-text-muted); font-size: var(--bk-text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.next-show .bk-cd { justify-content: center; }
.next-show__cta { margin-top: var(--bk-space-7); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bk-space-4); }
.next-show__btn { display: inline-block; text-decoration: none; font-weight: 800; font-size: var(--bk-text-md); padding: var(--bk-space-4) var(--bk-space-7); border-radius: var(--bk-radius-pill); }
.next-show__btn--ghost { background: var(--bk-cream-100); color: var(--bk-brown-800); }   /* filled (was outlined) */
.next-show__btn--ghost:hover { color: var(--bk-brown-800); }
.next-show__btn--primary { background: var(--bk-accent); color: var(--bk-on-accent); box-shadow: var(--bk-shadow-glow); }
.next-show__btn--primary:hover { color: var(--bk-on-accent); }
.next-show a:focus-visible { outline: 3px solid var(--bk-orange-200); outline-offset: 3px; }

/* Pixel shape: opt in with data-pixel-shape="pumpkin" on the wrapper. The shape is oversized so neighbouring cells overlap and the cover stays gap-free. */
[data-pixelated-scroll-transition][data-pixel-shape="pumpkin"] [data-pixelated-scroll-pixel] { background: none; position: relative; }
[data-pixelated-scroll-transition][data-pixel-shape="pumpkin"] [data-pixelated-scroll-pixel]::before { content: ""; position: absolute; inset: -45%; background-color: currentColor; -webkit-mask: url(../img/shape-pumpkin.svg) center / contain no-repeat; mask: url(../img/shape-pumpkin.svg) center / contain no-repeat; }
[data-pixelated-scroll-transition][data-pixel-shape="ghost"] [data-pixelated-scroll-pixel] { background: none; position: relative; }
[data-pixelated-scroll-transition][data-pixel-shape="ghost"] [data-pixelated-scroll-pixel]::before { content: ""; position: absolute; inset: -75%; background-color: currentColor; -webkit-mask: url(../img/shape-ghost.png) center / contain no-repeat; mask: url(../img/shape-ghost.png) center / contain no-repeat; }