/* Optimize.Bet homepage. Keep these overrides separate from the shared styles. */
#home {
	background-color: #05070f;
}

body.ob-login-body {
	background-color: #05070f;
}

body.ob-login-body:not(.mobile-menu-open) #header {
	background-color: transparent;
	background-image: none;
	backdrop-filter: none;
}

/* Account pages always use the Optimize.Bet dark theme. */
body.ob-account-body {
	background: #030c14;
	color: #f5f5f7;
	color-scheme: dark;
}

.ob-account-page .home-link-button {
	background-color: #131620;
	color: #fff;
	border: 1px solid #454a5f;
	border-radius: 0.5em;
	padding: 0.8em 2.15em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: border-color .1s linear;
}

.ob-account-page .home-link-button:hover {
	border-color: #565861;
}

.ob-account-actions {
	gap: 1em;
	align-items: center;
}

body.ob-account-body footer,
#home footer {
	background-color: transparent;
	background-image: none;
	border-top: 1px solid rgb(255 255 255 / 15%);
}

.ob-login-main {
	min-height: calc(85svh - 5em);
	padding: 4em 0;
	box-sizing: border-box;
}

.ob-login-card-width {
	max-width: 36em;
}

#home .ob-login-card {
	padding-top: 3.6em;
}

#home a.home-pricing-button,
.ob-account-page .ob-membership-button {
	background-color: #195afe;
	background-image: none;
	color: #fff;
	transition: background-color .2s;
}

#home a.home-pricing-button:hover,
.ob-account-page .ob-membership-button:hover {
	background-color: #1048d4;
	background-image: none;
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	footer {
		background-color: transparent;
		background-image: inherit;
		border-top: 1px solid rgb(255 255 255 / 5%);
	}
}

#home .home-logo-animation-container {
	/* Center in 70% of the available viewport to sit at its 35% line. */
	height: calc(70svh - 3.556em);
	min-height: 360px;
	background: #06070d;
	overflow: hidden;
	isolation: isolate;
}

#home .home-logo-lockup {
	position: absolute;
	left: 6%;
	top: 50%;
	width: 88%;
	z-index: 2;
	transform: translateY(-50%);
	pointer-events: none;
}

#home .hero-radar_component .hp-circle_ob-logo {
	width: 70%;
	height: 70%;
	display: block;
	margin-left: 0.3em;
	color: #4491f7;
	fill: #4491f7;
}

#home .home-logo-wordmark { display: block; }

#home .home-logo-wordmark img {
	display: block;
	width: 100%;
	height: auto;
	filter: invert(1);
	transform-origin: center;
}

#home .home-logo-bet {
	position: relative;
	margin-top: 12px;
	margin-left: auto;
	width: 39%;
	aspect-ratio: 2.5;
}

#home .home-logo-bet img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
	visibility: hidden;
}

#home .home-logo-bet img.is-active { visibility: visible; }
#home .home-logo-animation-container.is-preparing .home-logo-wordmark img { opacity: 0; }
#home .home-logo-animation-container.is-preparing .home-logo-bet img { visibility: hidden; }

#home .home-logo-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(110px, 19vw, 280px);
	aspect-ratio: 1;
	z-index: 1;
	pointer-events: none;
}

#home .home-logo-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Static positions also provide the no-JavaScript / reduced-motion view. */
#home .home-logo-icon-football { transform: translate(-210%, -120%) rotate(-14deg); }
#home .home-logo-icon-baseball { transform: translate(65%, -110%) rotate(12deg); }
#home .home-logo-icon-basketball { transform: translate(-135%, 10%) rotate(10deg); z-index: 3; }
#home .home-logo-icon-hockey { transform: translate(15%, 10%) rotate(-12deg); z-index: 3; }

#home .home-logo-animation-container.is-animating .home-logo-wordmark img {
	will-change: transform;
}

/* Each icon stays in its own cell; entrance and idle motion use separate elements. */
#home .home-sports-bouncing-icons {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(24px, 3vw, 48px);
	min-height: 360px;
	align-items: center;
	justify-items: center;
}

#home .home-sport-icon-entry {
	--sport-index: 0;
	--sport-float-duration: 5.2s;
	--sport-float-offset: -12px;
	width: 90%;
	max-width: 240px;
	aspect-ratio: 1;
	pointer-events: none;
}

#home .home-sport-icon-entry:nth-child(2) { --sport-index: 1; --sport-float-duration: 6.7s; --sport-float-offset: 10px; }
#home .home-sport-icon-entry:nth-child(3) { --sport-index: 2; --sport-float-duration: 5.9s; --sport-float-offset: -9px; }
#home .home-sport-icon-entry:nth-child(4) { --sport-index: 3; --sport-float-duration: 7.3s; --sport-float-offset: 12px; }

#home .home-sport-icon-entry img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#home .home-sports-bouncing-icons.is-ready:not(.has-entered) .home-sport-icon-entry {
	opacity: 0;
	transform: translateY(24px);
}

#home .home-sports-bouncing-icons.has-entered .home-sport-icon-entry {
	animation: home-sport-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--sport-index) * 180ms);
}

#home .home-sports-bouncing-icons.has-entered .home-sport-icon-entry img {
	animation: home-sport-float var(--sport-float-duration) ease-in-out infinite both;
	animation-delay: calc(900ms + var(--sport-index) * 480ms);
}

#home .home-sports-bouncing-icons:not(.is-visible) .home-sport-icon-entry,
#home .home-sports-bouncing-icons:not(.is-visible) .home-sport-icon-entry img {
	animation-play-state: paused;
}

@keyframes home-sport-reveal {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes home-sport-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(var(--sport-float-offset)); }
}

@media (prefers-reduced-motion: reduce) {
	#home .home-sports-bouncing-icons .home-sport-icon-entry,
	#home .home-sports-bouncing-icons .home-sport-icon-entry img {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (min-width: 1280px) {
	#home .home-logo-animation-container { height: calc(70svh - 3.556em + 64px); }
	#home .home-logo-lockup { left: 10%; top: calc(50% - 32px); width: 80%; }
}

@media (max-width: 767px) {
	#home .home-logo-lockup { left: 8%; top: 50%; width: 84%; }
	#home .home-logo-bet { width: 58%; margin-top: 10px; }
	#home .home-logo-icon { width: clamp(100px, 30vw, 190px); }
	#home .home-logo-icon-football { transform: translate(-160%, -180%) rotate(-14deg); }
	#home .home-logo-icon-baseball { transform: translate(50%, -160%) rotate(12deg); }
	#home .home-logo-icon-basketball { transform: translate(-150%, 55%) rotate(10deg); }
	#home .home-logo-icon-hockey { transform: translate(25%, 65%) rotate(-12deg); }
}