/* ChillBanking hero rotator
   Slides are grid-stacked (all in one cell) so the container height stays put
   while they cross-slide — no layout jump as you rotate. Progressive
   enhancement: `is-multi` is added by JS, so with no JS only the active slide
   shows (display:none on the rest) and the dots stay hidden. */

.cb-hero-rotator { position: relative; }

/* stack every slide in the same grid cell; tallest defines the height */
.cb-hero-track { display: grid; }
.cb-hero-track > .cb-hero-slide { grid-area: 1 / 1; min-width: 0; }

/* Drop each slide's own bottom border so the ONLY divider at the hero/keyword
   boundary is the keyword strip's existing top border — and let the dots rest
   right on that single line instead of being stranded between two rules. */
.cb-hero-rotator .cb-hero-slide { border-bottom: 0; }

/* single-slide / no-JS state: show only the active slide, nothing fancy */
.cb-hero-rotator:not(.is-multi) .cb-hero-slide:not(.is-active) { display: none; }

/* ---- multi-slide animation (only once JS adds .is-multi) ----
   Non-active slides are pulled out of hit-testing AND the tab order via
   pointer-events:none + visibility:hidden (works in every browser, not just
   ones with `inert`). visibility flips to hidden only AFTER the fade. */
.cb-hero-rotator.is-multi .cb-hero-slide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(64px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .6s;
}
/* leaving: stays visible while it fades out, but non-interactive */
.cb-hero-rotator.is-multi .cb-hero-slide.is-leaving {
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	transform: translateX(-64px);
}
/* active: declared LAST so it wins if .is-leaving ever lingers on the same node */
.cb-hero-rotator.is-multi .cb-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}
/* stepping backwards mirrors the entry/exit sides (attribute selector wins on specificity) */
.cb-hero-rotator.is-multi[data-dir="back"] .cb-hero-slide { transform: translateX(-64px); }
.cb-hero-rotator.is-multi[data-dir="back"] .cb-hero-slide.is-leaving { transform: translateX(64px); }
.cb-hero-rotator.is-multi[data-dir="back"] .cb-hero-slide.is-active { transform: translateX(0); }

/* ---- nav dots (revealed only once JS is ready) ---- */
/* sit the dots on the keyword strip's top border: -3px pulls the line up to the
   dots' vertical centre, and z-index lifts the (opaque) dots above it so the
   rule shows in the gaps and to the right — never through a pill. */
.cb-hero-nav { display: none; align-items: center; margin-top: var(--s-5, 24px); margin-bottom: -3px; position: relative; z-index: 1; }
.cb-hero-rotator.cb-rotator-ready .cb-hero-nav { display: flex; }
.cb-hero-dots { display: flex; gap: 10px; }
.cb-hero-dot {
	width: 26px; height: 6px; padding: 0; border: 0; border-radius: 99px;
	background: var(--ink-4, #9a8e7c); cursor: pointer; /* opaque so the line can't bleed through */
	transition: background .3s ease, width .3s ease;
}
.cb-hero-dot:hover { background: var(--ink-3, #6b6052); }
.cb-hero-dot.is-on { width: 42px; background: var(--ember, #b8431a); }
.cb-hero-dot > span { display: block; width: 100%; height: 100%; }
.cb-hero-dot:focus-visible { outline: 2px solid var(--ember, #b8431a); outline-offset: 4px; }

/* ---- CTA: invite the click (cheap transform-only cues; no perpetual repaint) ---- */
.cb-hero-rotator .home-hero__cta { transition: transform .25s ease; }
.cb-hero-rotator .home-hero__cta .cb-cta-arrow { display: inline-block; transition: transform .25s ease; }
@media (prefers-reduced-motion: no-preference) {
	.cb-hero-rotator .home-hero__cta .cb-cta-arrow { animation: cbCtaNudge 1.7s ease-in-out infinite; }
}
.cb-hero-rotator .home-hero__cta:hover { transform: translateY(-1px); }
.cb-hero-rotator .home-hero__cta:hover .cb-cta-arrow { animation: none; transform: translateX(6px); }

@keyframes cbCtaNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* ---- respect reduced motion (keep an opacity crossfade, no movement) ---- */
@media (prefers-reduced-motion: reduce) {
	.cb-hero-rotator.is-multi .cb-hero-slide { transition: opacity .25s linear, visibility 0s linear .25s; transform: none !important; }
	.cb-hero-rotator.is-multi .cb-hero-slide.is-active { transition: opacity .25s linear, visibility 0s linear 0s; }
	.cb-hero-rotator .home-hero__cta,
	.cb-hero-rotator .home-hero__cta .cb-cta-arrow { animation: none !important; }
}