/* Spirit Crossing sponsor block: shared by the wishlist splash and the homepage. */
/* Markup lives in main/templates/main/_spirit_crossing_sponsor.html; walkers in js/sponsor-band.js. */

/* Strong alpha because the videos sit on the dark #131114 band; a normal light shadow would be invisible there: */
.sc-video {
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.75);
}
/* Solid dark strip; #131114 matches the homepage pills and search card: */
.sc-well {
	background-color: #131114;
	color: #ffffff;
}
#sponsor-band {
	position: relative;
	overflow: hidden;
}
#sponsor-band h2 {
	position: relative;
	z-index: 1;
}
/* Outer walker: horizontal travel only. */
.sponsor-character {
	position: absolute;
	left: 100%;   /* Start just off the right edge; the keyframes walk it left. */
	bottom: -150px;   /* Some of the height pokes below the band; clipped by overflow:hidden. */
	display: inline-block;
	z-index: 2;
	animation-name: sponsor-walk;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes sponsor-walk {
	/* -100vw clears the band width, extra -100% clears the character's own width. */
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100vw - 100%)); }
}
.sponsor-character--rev {
	left: 0;   /* Mirror of the forward walker: start off the left edge. */
	animation-name: sponsor-walk-rev;
}
@keyframes sponsor-walk-rev {
	/* scaleX(-1) flips the sprite so it faces the way it's walking. */
	from { transform: translateX(-100%) scaleX(-1); }
	to   { transform: translateX(100vw) scaleX(-1); }
}
.sponsor-character__img {
	display: block;
	height: 250px;
	width: auto;
	/* drop-shadow follows the PNG silhouette; 0 x-offset so flipped (scaleX(-1)) characters' shadows still fall the same way. */
	filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.35));
	animation-name: sponsor-bob;
	animation-iteration-count: infinite;
}
@keyframes sponsor-bob {
	/* abs(cos) walk bob, not a sine: rounded peak (velocity 0) at top, sharp cusp at the footfall dip (velocity max); -15% is the static baseline. */
	0%   { transform: translateY(calc(-15% - 5px)); animation-timing-function: ease-in;  }
	50%  { transform: translateY(-15%);               animation-timing-function: ease-out; }
	100% { transform: translateY(calc(-15% - 3px)); }
}

/* Same face as the "Bookmarked Games" homepage heading: */
.sc-well h3 {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 0.84;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}
/* Same face as the "Updated Daily" / "On Sale" homepage pills: */
.sc-well .btn {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}