/* ==========================================================================
   Zeta Set Banner
   Riso / CMYK misprint look taken from the Zeta Set card frames:
   off-register ink plates, cyan + magenta + yellow bands, halftone grain.
   Every selector is scoped to .zsb so theme styles stay out and ours stay in.
   ========================================================================== */

.zsb {
	--zsb-black: #000;
	--zsb-paper: #eceee9;
	--zsb-cyan: #00dcff;
	--zsb-magenta: #ff2bb0;
	--zsb-yellow: #fff200;
	--zsb-cyan-ink: #29aae1;
	--zsb-yellow-ink: #ffe600;
	--zsb-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--zsb-serif: "Sorts Mill Goudy", "Goudy Old Style", Garamond, Georgia, serif;
	--zsb-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* The banner sizes itself to the space the theme gives it (container
	   queries), so it works full width, in a content column or in a sidebar. */
	container: zsb / inline-size;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--zsb-black);
	color: var(--zsb-paper);
	font-family: var(--zsb-serif);
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.zsb *,
.zsb *::before,
.zsb *::after {
	box-sizing: border-box;
}

/* Edge-to-edge option: breaks out of the theme's content column.
   --zsb-sbw (scrollbar width) is set by the script so there is no sideways scroll. */
.zsb.zsb--full {
	width: calc(100vw - var(--zsb-sbw, 0px));
	max-width: none;
	margin-left: calc(50% - 50vw + var(--zsb-sbw, 0px) / 2);
	margin-right: 0;
}

/* ---------- Background layers ---------- */

.zsb .zsb__bg {
	position: absolute;
	inset: 0;
	z-index: -4;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: 78% 70%;
}

.zsb__shade {
	position: absolute;
	inset: 0;
	z-index: -3;
	background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .62) 34%, rgba(0, 0, 0, 0) 60%);
	pointer-events: none;
}

/* Paper grain + faint scanlines */
.zsb__fx {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: overlay;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4px);
}

/* Cyan band + off-register magenta hairline across the top, like the card frames */
.zsb__band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 12px;
	pointer-events: none;
}

.zsb__band::before,
.zsb__band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	transform-origin: 0 50%;
	animation: zsb-print .9s cubic-bezier(.7, 0, .2, 1) both;
}

.zsb__band::before {
	top: 0;
	height: 7px;
	background: var(--zsb-cyan-ink);
}

.zsb__band::after {
	top: 9px;
	height: 2px;
	background: var(--zsb-magenta);
	translate: -8px 0;
	animation-delay: .18s;
}

/* Thin glitch bar the script sweeps across during a "misprint" */
.zsb__scanbar {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--zsb-bar-top, 40%);
	z-index: 2;
	height: 10px;
	opacity: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, var(--zsb-cyan) 0 30%, transparent 30% 55%, var(--zsb-magenta) 55% 75%, transparent 75%);
	mix-blend-mode: screen;
}

/* ---------- Layout ---------- */

.zsb__inner {
	--zsb-card-w: clamp(118px, 15.5cqi, 250px);
	position: relative;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(16px, 3cqi, 48px);
	width: 100%;
	max-width: 1440px;
	min-height: clamp(360px, 34cqi, 560px);
	margin: 0 auto;
	padding: clamp(40px, 5cqi, 76px) clamp(20px, 6cqi, 96px) clamp(28px, 3.5cqi, 56px);
}

.zsb__copy {
	position: relative;
	z-index: 2;
	max-width: 34rem;
}

/* ---------- Headline: three ink plates, screen-blended ----------
   Where all three plates overlap the type reads white; where they slip,
   cyan, magenta and yellow fringes show, like the misprinted card titles. */

.zsb .zsb__title {
	position: relative;
	isolation: isolate;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-family: var(--zsb-display);
	font-size: clamp(3rem, 8.2cqi, 8rem);
	font-weight: 900;
	font-stretch: 125%;
	font-style: normal;
	line-height: .84;
	letter-spacing: -.025em;
	text-transform: none;
	text-shadow: none;
}

.zsb .zsb__title::before,
.zsb .zsb__title::after {
	content: none;
}

.zsb__plate {
	display: block;
	mix-blend-mode: screen;
	will-change: transform;
}

.zsb__plate--y {
	position: relative;
	color: var(--zsb-yellow);
	animation: zsb-plate-y 1s var(--zsb-ease-out) .15s both;
}

.zsb__plate--c,
.zsb__plate--m {
	position: absolute;
	inset: 0;
}

.zsb__plate--c {
	color: var(--zsb-cyan);
	translate: -3px -2px;
	animation: zsb-plate-c 1.05s var(--zsb-ease-out) .28s both;
}

.zsb__plate--m {
	color: var(--zsb-magenta);
	translate: 3px 2px;
	animation: zsb-plate-m 1.05s var(--zsb-ease-out) .4s both;
}

.zsb__word {
	display: block;
}

/* ---------- Stamp, sentence, button ---------- */

.zsb .zsb__stock {
	display: inline-block;
	margin: clamp(16px, 1.8cqi, 26px) 0 0;
	padding: .16em .55em .2em;
	border: 0;
	background: var(--zsb-cyan-ink);
	color: #000;
	font-family: var(--zsb-display);
	font-size: clamp(1.05rem, 1.9cqi, 1.6rem);
	font-weight: 800;
	font-stretch: 100%;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	transform: rotate(-2.5deg);
	box-shadow: 5px 4px 0 var(--zsb-magenta);
	animation: zsb-stamp .55s cubic-bezier(.3, 1.6, .5, 1) 1.05s both;
}

.zsb .zsb__text {
	max-width: 36ch;
	margin: clamp(16px, 1.6cqi, 22px) 0 0;
	padding: 0;
	color: var(--zsb-paper);
	font-family: var(--zsb-serif);
	font-size: clamp(1.02rem, 1.3cqi, 1.22rem);
	font-weight: 400;
	line-height: 1.45;
	text-transform: none;
	animation: zsb-fade .7s ease 1.25s both;
}

.zsb .zsb__cta {
	display: inline-block;
	margin-top: clamp(18px, 2cqi, 28px);
	padding: .82em 1.35em .86em;
	border: 0;
	border-radius: 6px;
	background: var(--zsb-paper);
	color: #000;
	font-family: var(--zsb-display);
	font-size: clamp(.98rem, 1.1cqi, 1.1rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	box-shadow: -3px -2px 0 var(--zsb-cyan), 3px 3px 0 var(--zsb-magenta);
	transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
	animation: zsb-fade .7s ease 1.4s both;
}

.zsb .zsb__cta:hover,
.zsb .zsb__cta:focus-visible {
	background: #fff;
	color: #000;
	text-decoration: none;
	box-shadow: -7px -4px 0 var(--zsb-cyan), 7px 5px 0 var(--zsb-magenta);
	transform: translateY(-1px);
}

.zsb .zsb__cta:focus-visible {
	outline: 3px solid var(--zsb-yellow);
	outline-offset: 6px;
}

/* ---------- Card fan ---------- */

.zsb__cards {
	position: relative;
	z-index: 1;
	height: calc(var(--zsb-card-w) * 1.395 * 1.2);
}

.zsb .zsb__cards-link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	outline: none;
}

.zsb__card {
	--x: 0%;
	--y: 0%;
	--r: 0deg;
	--w: var(--zsb-card-w);
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: block;
	width: var(--w);
	aspect-ratio: 600 / 837;
	transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
}

.zsb__card--1 { --x: -74%; --y: 7%;  --r: -11deg; }
.zsb__card--2 { --x: 0%;   --y: -3%; --r: 1.5deg; --w: calc(var(--zsb-card-w) * 1.08); z-index: 2; }
.zsb__card--3 { --x: 74%;  --y: 8%;  --r: 12deg; }

.zsb__card:hover {
	z-index: 5;
}

.zsb__deal,
.zsb__float,
.zsb__tilt {
	display: block;
	width: 100%;
	height: 100%;
}

/* Cards are dealt in from the right, one after another */
.zsb__deal {
	animation: zsb-deal .95s var(--zsb-ease-out) both;
}
.zsb__card--1 .zsb__deal { animation-delay: .55s; }
.zsb__card--2 .zsb__deal { animation-delay: .68s; }
.zsb__card--3 .zsb__deal { animation-delay: .81s; }

/* Idle drift */
.zsb__float {
	animation: zsb-float 6s ease-in-out infinite alternate;
	will-change: transform;
}
.zsb__card--1 .zsb__float { animation-delay: -1.2s; }
.zsb__card--2 .zsb__float { animation-delay: -3.4s; animation-duration: 7s; }
.zsb__card--3 .zsb__float { animation-delay: -5.1s; animation-duration: 6.5s; }

/* Pointer tilt (angles set by the script) */
.zsb__tilt {
	position: relative;
	overflow: hidden;
	border-radius: 4.5% / 3.2%;
	box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .4);
	transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ls, 1));
	transition: transform .45s var(--zsb-ease-out), box-shadow .45s var(--zsb-ease-out);
	will-change: transform;
}

.zsb__card:hover .zsb__tilt {
	--lift: -14px;
	--ls: 1.06;
	box-shadow: 0 34px 50px -14px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
	transition-duration: .18s;
}

.zsb .zsb__tilt img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Foil sheen that sweeps across each card now and then */
.zsb__tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(110deg,
		transparent 32%,
		rgba(0, 220, 255, .28) 42%,
		rgba(255, 255, 255, .55) 48%,
		rgba(255, 43, 176, .28) 54%,
		rgba(255, 242, 0, .22) 60%,
		transparent 70%);
	background-size: 300% 100%;
	background-position: 120% 0;
	mix-blend-mode: overlay;
	animation: zsb-sheen 7s ease-in-out infinite;
}
.zsb__card--1 .zsb__tilt::after { animation-delay: 2.2s; }
.zsb__card--2 .zsb__tilt::after { animation-delay: 2.5s; }
.zsb__card--3 .zsb__tilt::after { animation-delay: 2.8s; }

/* Glare that follows the pointer */
.zsb__tilt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%);
	mix-blend-mode: soft-light;
	transition: opacity .3s ease;
}

.zsb__card:hover .zsb__tilt::before {
	opacity: 1;
}

/* ---------- Ticker ---------- */

.zsb__ticker {
	position: relative;
	z-index: 3;
	flex: none;
	overflow: hidden;
	padding: 12px 0 9px;
	background: var(--zsb-yellow-ink);
	color: #000;
	animation: zsb-ticker-in .6s var(--zsb-ease-out) 1.5s both;
}

/* Off-register magenta hairline inside the yellow band, as on the cards */
.zsb__ticker::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--zsb-magenta);
	translate: 6px 0;
}

.zsb__track {
	display: flex;
	width: max-content;
	animation: zsb-marquee 90s linear infinite;
}

.zsb__group {
	display: flex;
	flex: none;
	align-items: center;
}

.zsb__tick,
.zsb__sep {
	font-family: var(--zsb-display);
	font-size: clamp(.86rem, 1.05cqi, 1rem);
	font-weight: 800;
	font-stretch: 108%;
	line-height: 1.2;
	white-space: nowrap;
}

.zsb__sep {
	padding: 0 1.1em;
	font-weight: 400;
	letter-spacing: .08em;
}

/* ---------- Keyframes ---------- */

@keyframes zsb-print {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes zsb-plate-y {
	from { transform: translate(-46px, 0); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes zsb-plate-c {
	from { transform: translate(-90px, -14px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes zsb-plate-m {
	from { transform: translate(70px, 16px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes zsb-stamp {
	from { transform: rotate(-14deg) scale(1.7); opacity: 0; }
	to { transform: rotate(-2.5deg) scale(1); opacity: 1; }
}

@keyframes zsb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes zsb-deal {
	from { transform: translate(140%, 30%) rotate(24deg); opacity: 0; }
	45% { opacity: 1; }
	to { transform: none; opacity: 1; }
}

@keyframes zsb-float {
	from { transform: translateY(-6px) rotate(-.7deg); }
	to { transform: translateY(7px) rotate(.7deg); }
}

@keyframes zsb-sheen {
	0%, 70% { background-position: 120% 0; }
	92%, 100% { background-position: -20% 0; }
}

@keyframes zsb-ticker-in {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@keyframes zsb-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Pause everything while the banner is scrolled out of view */
.zsb.is-offscreen *,
.zsb.is-offscreen *::before,
.zsb.is-offscreen *::after {
	animation-play-state: paused !important;
}

/* ---------- Narrow banners (phones, content columns): stack copy over cards ---------- */

@container zsb (max-width: 780px) {
	.zsb__inner {
		--zsb-card-w: clamp(100px, 30cqi, 190px);
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		min-height: 0;
		padding: 44px clamp(20px, 6cqi, 44px) 26px;
	}

	.zsb .zsb__bg {
		object-position: 86% 100%;
	}

	.zsb__shade {
		background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .1) 100%);
	}

	.zsb .zsb__title {
		font-size: clamp(3rem, 17cqi, 6rem);
	}

	.zsb__cards {
		margin-top: 18px;
	}
}

/* Phones get the portrait artwork; keep its ray burst behind the cards */
@media (max-width: 700px) {
	.zsb .zsb__bg {
		object-position: 50% 100%;
	}
}

/* No pointer tilt on touch screens */
@media (hover: none) {
	.zsb__card:hover .zsb__tilt {
		--lift: 0px;
		--ls: 1;
	}
}

/* ---------- Reduced motion: final layout, no movement ---------- */

@media (prefers-reduced-motion: reduce) {
	.zsb *,
	.zsb *::before,
	.zsb *::after {
		animation: none !important;
		transition: none !important;
	}

	.zsb__track {
		transform: none;
	}
}