/* ============================================================
   Capture Blocks — widget styles
   Per-instance settings (colours, speed, gap, sizes) are written
   by Elementor's control selectors; this file holds the mechanics
   and sensible on-brand defaults.
   ============================================================ */

/* Shared marquee keyframe */
@keyframes cb-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- Marquee ---------- */
.cb-marquee {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}
.cb-marquee__track {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	animation-name: cb-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}
.cb-marquee__group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* on-brand defaults — overridden by the Typography control if set */
	font-family: "Clash Display", system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
}
.cb-marquee__item,
.cb-marquee__sep { display: inline-flex; align-items: center; }
.cb-marquee__sep {
	opacity: 0.9;
	/* force text (not emoji) presentation for star/dingbat separators */
	font-variant-emoji: text;
}

.cb-marquee__track.cb-dir-right { animation-direction: reverse; }
.cb-marquee.cb-pause:hover .cb-marquee__track { animation-play-state: paused; }

/* ---------- Logo Carousel ---------- */
.cb-logos {
	overflow: hidden;
	width: 100%;
}
.cb-logos.cb-fade {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cb-logos__track {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	animation-name: cb-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}
.cb-logos__group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}
.cb-logos__item {
	display: inline-flex;
	align-items: center;
	transition: opacity 0.2s ease, filter 0.3s ease;
	text-decoration: none;
}
.cb-logos__item img {
	width: auto;
	display: block;
	/* height = base (set by the widget) × this logo's individual scale */
	height: calc(var(--cb-logo-base, 26px) * var(--cb-logo-scale, 1));
}
.cb-logos__track.cb-dir-right { animation-direction: reverse; }
.cb-logos.cb-pause:hover .cb-logos__track { animation-play-state: paused; }
.cb-logos.cb-gray .cb-logos__item img { filter: grayscale(1); }
.cb-logos.cb-gray .cb-logos__item:hover img { filter: none; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.cb-marquee__track,
	.cb-logos__track { animation: none; }
}

/* ---------- Team ---------- */
.cb-team {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}
.cb-team__member {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.cb-team.cb-align-center .cb-team__member { align-items: center; text-align: center; }
.cb-team.cb-align-left   .cb-team__member { align-items: flex-start; text-align: left; }

.cb-team__photo {
	width: 100%;
	max-width: 200px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 1.1rem;
	background: #eee;
}
.cb-team.cb-shape-circle  .cb-team__photo { border-radius: 50%; }
.cb-team.cb-shape-rounded .cb-team__photo { border-radius: 16px; }
.cb-team.cb-shape-square  .cb-team__photo { border-radius: 0; }

.cb-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.3s ease;
}
.cb-team.cb-gray .cb-team__photo img { filter: grayscale(1); }
.cb-team.cb-gray .cb-team__member:hover .cb-team__photo img { filter: none; }

/* on-brand defaults — override with the widget's colour/typography controls */
.cb-team__name {
	font-family: "Clash Display", system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.15rem;
	line-height: 1.1;
	margin: 0 0 0.1rem;
}
.cb-team__alias {
	font-family: "Clash Display", system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.82rem;
	color: #FC00AD;
	margin-bottom: 0.5rem;
}
.cb-team__roles {
	font-family: "Clash Display", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	opacity: 0.55;
	margin-bottom: 0.7rem;
}
.cb-team__bio {
	font-size: 0.92rem;
	line-height: 1.5;
	max-width: 32ch;
	margin: 0;
}
a.cb-team__insta { text-decoration: none; }
a.cb-team__insta:hover { text-decoration: underline; }
.cb-team__btn {
	display: inline-flex;
	align-items: center;
	margin-top: 1rem;
	font-family: "Clash Display", system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.8rem;
	padding: 0.55em 1.15em;
	border-radius: 999px;
	border: 2px solid #0a0a0a;
	color: #0a0a0a;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cb-team__btn:hover { background: #C0FD19; border-color: #C0FD19; }

/* ---------- Stickers ---------- */
.cb-stickers {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	/* stay invisible until positioned against the settled page height, then fade
	   in — avoids the "cluster at top, then jump apart" flash on load */
	opacity: 0;
	transition: opacity 0.45s ease;
}
.cb-stickers.cb-ready {
	opacity: 1;
}
/* Mobile: overlay scrolls with the page (height set by JS); off-screen stickers
   are skipped by the browser instead of composited every frame. */
.cb-stickers.cb-static {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
}
/* Parallax layer (JS sets transform). No filter here → cheap to move. */
.cb-sticker {
	position: absolute;
	top: 0;
	line-height: 1;
	will-change: transform;
}
/* Idle-float layer. Only transform animates, no filter → runs on the compositor. */
.cb-sticker__float {
	display: inline-block;
	line-height: 1;
	animation-name: cb-floaty;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: transform;
}
/* The glyph carries the filter and is STATIC, so the outline rasterises once
   and is cached — never re-rendered per frame. */
.cb-sticker i {
	display: inline-block;
	font-style: normal;
	line-height: 1;
	font-size: inherit;
	filter: drop-shadow( 0 5px 5px rgba(0, 0, 0, 0.2) );
}
.cb-stickers.cb-outline .cb-sticker i {
	/* die-cut white outline + lift — 4 cardinal passes (1px blur fills the
	   diagonals) instead of 8, roughly half the filter cost, ~same look */
	filter:
		drop-shadow(2px 0 1px #fff) drop-shadow(-2px 0 1px #fff)
		drop-shadow(0 2px 1px #fff) drop-shadow(0 -2px 1px #fff)
		drop-shadow(0 5px 5px rgba(0, 0, 0, 0.22));
}
@keyframes cb-floaty {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-13px); }
}
@media (prefers-reduced-motion: reduce) {
	.cb-sticker__float { animation: none; }
}
/* builder-only helper so the widget is easy to find/select */
.cb-stickers-editnote {
	display: inline-block;
	padding: 8px 12px;
	border: 1px dashed #FC00AD;
	border-radius: 8px;
	color: #FC00AD;
	font: 600 12px/1 system-ui, sans-serif;
}