/* Marquee with scroll direction, styled with the Bekifft tokens (site.css). */
.marquee-section { width: 100vw; margin-left: calc(50% - 50vw); display: flex; flex-flow: column; gap: var(--bk-space-5); padding: var(--bk-space-9) 0; overflow: clip; }
.marquee-advanced { width: 100vw; position: relative; overflow: hidden; }
.marquee-advanced__scroll { will-change: transform; width: 100%; display: flex; position: relative; }
.marquee-advanced__collection { will-change: transform; display: flex; position: relative; }
.marquee-advanced__item { justify-content: flex-start; align-items: center; font-size: max(4em, 8vw); display: flex; }
.marquee__advanced__p { white-space: nowrap; margin: 0 .25em 0 0; font-family: var(--bk-font-display); font-size: 1em; line-height: var(--bk-lh-tight); color: var(--bk-text); }
.marquee__advanced__p.is--outline { color: transparent; -webkit-text-stroke: 2px var(--bk-cream-100); }
.marquee__advanced__arrow-svg { color: var(--bk-accent); width: 1em; margin-right: .25em; position: relative; flex: none; }

/* Arrow turns with the scroll direction */
.marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="inverted"] .marquee__advanced__arrow-svg { transition: 0.5s cubic-bezier(0.625, 0.05, 0, 1); transform: rotate(-180deg); }
[data-marquee-status="inverted"] .marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="normal"] .marquee__advanced__arrow-svg { transform: rotate(-359.999deg); }

/* Crossing marquee bands (after the hero): two rotated strips with a solid background, running in opposite directions.
   Reuses the .marquee-advanced markup + marquee-scroll-direction.js; the bands only add rotation, colour and size. */
.marquee-x { position: relative; overflow: clip; background: var(--bk-bg); min-height: clamp(320px, 48vw, 620px); }
.marquee-x__band { position: absolute; left: -10%; width: 120%; top: 50%; padding: calc(var(--bk-space-5) + 4px) 0 var(--bk-space-3); border: var(--bk-border-w) solid; }
.marquee-x__band--cream { background: var(--bk-cream-100); border-color: color-mix(in srgb, var(--bk-cream-100) 88%, var(--bk-black)); transform: translateY(-50%) rotate(-7deg); z-index: 1; }
.marquee-x__band--orange { background: var(--bk-accent); border-color: color-mix(in srgb, var(--bk-accent) 85%, var(--bk-black)); transform: translateY(-50%) rotate(7deg); z-index: 2; box-shadow: 0 var(--bk-space-4) var(--bk-space-6) rgba(0, 0, 0, .55); } /* top band casts the shadow onto the cream one */
.marquee-x .marquee-advanced { width: 100%; }
.marquee-x .marquee-advanced__item { font-size: clamp(2.25rem, 6vw, 5.5rem); }
.marquee-x .marquee__advanced__p { color: var(--bk-brown-800); text-transform: uppercase; }
.marquee-x__band--cream .marquee__advanced__arrow-svg { color: var(--bk-accent); }
.marquee-x__band--orange .marquee__advanced__arrow-svg { color: var(--bk-cream-400); }
/* the display font's capitals sit lower in the line box than its centre, so nudge the arrows down to the middle of the caps */
.marquee-x .marquee__advanced__arrow-svg { top: -.04em; }