/* =========================================================================
   Connectors: third-party brand marks on light tiles that flip to reveal
   other tools. Marks render in their own official colours, which is the
   correct nominative use, so the site palette does not apply inside a tile.
   ========================================================================= */

.connectors {
	align-items: center;
}

.tiles {
	display: grid;
	gap: clamp(10px, 1.1vw, 16px);
	justify-items: center;
}

.tiles__row {
	display: flex;
	gap: clamp(10px, 1.1vw, 16px);
	justify-content: center;
}

.tile {
	--tile: clamp(64px, 7.4vw, 104px);
	width: var(--tile);
	height: var(--tile);
	flex: none;
	perspective: 620px;
}

.tile__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.72s cubic-bezier(0.45, 0.05, 0.25, 1);
}

.tile.is-flipped .tile__inner {
	transform: rotateY(180deg);
}

.tile__face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: #FFFFFF;
	border-radius: var(--r-md);
	box-shadow: 0 1px 0 rgba(11, 18, 32, 0.5);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.tile__face--back {
	transform: rotateY(180deg);
}

.tile__face svg {
	width: 46%;
	height: 46%;
	display: block;
}

/* A slow drift so the grid reads as live between flips. It sits on the outer
   element so it never fights the flip transform on the inner one. */
@keyframes am-tile-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

.js .tile {
	animation: am-tile-float 7s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}

.js .tile:hover {
	animation-play-state: paused;
}

.tile:hover .tile__inner {
	transform: translateY(-4px);
}

.tile.is-flipped:hover .tile__inner {
	transform: rotateY(180deg) translateY(4px);
}

.connectors__note {
	margin-top: var(--md);
	color: var(--muted);
	font-size: 0.96rem;
	max-width: min(46ch, 100%);
}

@media (max-width: 860px) {
	.tiles {
		margin-top: var(--md);
	}
	.tile {
		--tile: clamp(58px, 17vw, 84px);
	}
}

/* Motion turned down: no float, no flip. The tiles simply sit there. */
@media (prefers-reduced-motion: reduce) {
	.js .tile {
		animation: none;
	}
	.tile__inner,
	.tile.is-flipped .tile__inner,
	.tile:hover .tile__inner {
		transition: none;
		transform: none;
	}
}