/* =========================================================================
 *  OV Bot — homepage only
 *  Hero call-to-action buttons, the hero-to-content seam, and the Explore
 *  section (#one). Loaded after main.css + chrome.css on index.ejs.
 *
 *  main.css styles every <a> (dotted underline, bold on hover, 0.5s
 *  transition) and every h2/p (teal, indented). The #intro / #one prefixes
 *  below are deliberate: they out-rank those globals without !important
 *  soup. Only borders need !important because `a:hover` uses it.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 *  Hero
 * ------------------------------------------------------------------------- */

/* Fade the hero into the next section instead of ending on a hard edge. */
#intro::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.82) 62%, #121212 100%);
	pointer-events: none;
	z-index: 1;
}
#intro > .inner { position: relative; z-index: 2; }

/* vid.mp4 is a 2.39:1 film letterboxed in 16:9, so black bars fill the top
   and bottom ~13% of the element and the picture ends in a straight edge.
   main.css fades the element (mask sized 110%, anchored top-left), which
   left that edge ~45% visible as a hard line above section 2. This mask is
   fitted to the video and reaches zero exactly where the picture ends.
   (At 1280px and below the video sits lower and that edge is covered.) */
@media screen and (min-width: 1281px) {
	#intro-vid {
		-webkit-mask: linear-gradient(to top, transparent 13%, #fff 32%, #fff 74%, transparent 87%) center / 100% 100% no-repeat;
		mask: linear-gradient(to top, transparent 13%, #fff 32%, #fff 74%, transparent 87%) center / 100% 100% no-repeat;
	}
}

/* The slide columns clipped the button shadows; nothing else needs the clip. */
#intro .column-left-content,
#intro .column-right-content { overflow: visible; }

.ov-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85em;
	margin: 0 0 2.2em 0.6em;
}

#intro .ov-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	height: 3.25em;
	padding: 0 1.6em;
	border-radius: 999px;
	border: 1px solid transparent !important;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#intro .ov-cta:hover { transform: translateY(-2px); font-weight: 700; }
#intro .ov-cta:active { transform: translateY(0); }
#intro .ov-cta svg { width: 1.3em; height: 1.3em; flex: none; }
#intro .ov-cta i { font-size: 0.9em; transition: transform 0.2s ease; }
#intro .ov-cta:hover i { transform: translateX(3px); }

#intro .ov-cta-primary {
	color: #03201c;
	background: linear-gradient(135deg, #03dac6 0%, #7ef4e6 100%);
	border: 1px solid rgba(126, 244, 230, 0.6) !important;
	box-shadow: 0 8px 22px rgba(3, 218, 198, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#intro .ov-cta-primary:hover {
	color: #03201c;
	border: 1px solid rgba(126, 244, 230, 0.9) !important;
	box-shadow: 0 12px 30px rgba(3, 218, 198, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#intro .ov-cta-ghost {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
#intro .ov-cta-ghost:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

/* -------------------------------------------------------------------------
 *  Explore (#one) — bento of Features / Changelog / Guidelines
 * ------------------------------------------------------------------------- */

.ov-bento {
	display: grid;
	grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
	gap: 1.1em;
	margin-top: 0.4em;
}

#one .ov-tile {
	--acc: 3, 218, 198;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 1.7em 1.8em 1.6em;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
	color: rgba(236, 242, 248, 0.92);
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	opacity: 1;
	translate: 0 0;
	transition:
		opacity 0.8s ease var(--d, 0s),
		translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s),
		transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}
#one .ov-tile:hover {
	transform: translateY(-4px);
	font-weight: 400;
	border: 1px solid rgba(var(--acc), 0.38) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--acc), 0.12);
}

/* Soft accent glow in the top-right corner of each tile */
#one .ov-tile::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -45%;
	right: -25%;
	width: 75%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--acc), 0.16) 0%, rgba(var(--acc), 0) 68%);
	opacity: 0.85;
	transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
}
#one .ov-tile:hover::before { opacity: 1; transform: scale(1.12); }

#one .ov-tile-purple { --acc: 187, 134, 252; }
#one .ov-tile-gold { --acc: 245, 196, 81; }

/* Reveal: tiles rise in one after another when the section scrolls in.
   `translate` is used here so it never fights the hover `transform`. */
#one .ov-tile:nth-child(1) { --d: 0.08s; }
#one .ov-tile:nth-child(2) { --d: 0.2s; }
#one .ov-tile:nth-child(3) { --d: 0.32s; }
#one.inactive .ov-tile,
body.is-preload #one .ov-tile { opacity: 0; translate: 0 2em; }

#one .ov-tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.7em;
	height: 2.7em;
	margin-bottom: 1.25em;
	border-radius: 14px;
	background: rgba(var(--acc), 0.12);
	border: 1px solid rgba(var(--acc), 0.3);
	color: rgb(var(--acc));
	font-size: 1em;
}

#one .ov-tile h2 {
	margin: 0 0 0.35em 0;
	color: #fff;
	font-size: 1.45em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

#one .ov-tile p {
	margin: 0 0 1.4em 0;
	max-width: 30em;
	color: rgba(236, 242, 248, 0.66);
	font-size: 0.9em;
	line-height: 1.65;
}

#one .ov-tile-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin-top: auto;
	color: rgb(var(--acc));
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.01em;
}
#one .ov-tile-link i { font-size: 0.85em; transition: transform 0.25s ease; }
#one .ov-tile:hover .ov-tile-link i { transform: translateX(4px); }

/* Features: the tall tile, with a fan of real in-game screenshots */
#one .ov-tile-lg { grid-row: span 2; }
#one .ov-tile-lg .ov-tile-link { margin-top: 0; }

/* The fan takes whatever height is left under the copy (at least enough for
   the cards) and centres the cards in it. */
.ov-fan {
	position: relative;
	align-self: stretch;
	flex: 1 0 auto;
	min-height: 250px;
	margin-top: 1.6em;
}
/* Whole screenshots, never cropped: fixed height, natural width. */
.ov-fan img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 205px;
	width: auto;
	max-width: none;
	border-radius: 12px;
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.09);
	transform-origin: 50% 100%;
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ov-fan img:nth-child(1) { transform: translate(-50%, -50%) translateX(-105px) rotate(-7deg); }
.ov-fan img:nth-child(2) { transform: translate(-50%, -50%) translateY(-12px); z-index: 2; }
.ov-fan img:nth-child(3) { transform: translate(-50%, -50%) translateX(105px) rotate(7deg); }
#one .ov-tile-lg:hover .ov-fan img:nth-child(1) { transform: translate(-50%, -50%) translateX(-118px) translateY(-4px) rotate(-9.5deg); }
#one .ov-tile-lg:hover .ov-fan img:nth-child(2) { transform: translate(-50%, -50%) translateY(-22px) scale(1.03); }
#one .ov-tile-lg:hover .ov-fan img:nth-child(3) { transform: translate(-50%, -50%) translateX(118px) translateY(-4px) rotate(9.5deg); }

/* With container queries, scale the cards to the tile's width so they fill
   it on big screens and never spill out of it on small ones. */
@supports (width: 1cqw) {
	#one .ov-tile-lg { container-type: inline-size; }
	.ov-fan { min-height: calc(clamp(150px, 44cqw, 300px) + 44px); }
	.ov-fan img { height: clamp(150px, 44cqw, 300px); }
	.ov-fan img:nth-child(1) { transform: translate(-50%, -50%) translateX(-24cqw) rotate(-7deg); }
	.ov-fan img:nth-child(3) { transform: translate(-50%, -50%) translateX(24cqw) rotate(7deg); }
	#one .ov-tile-lg:hover .ov-fan img:nth-child(1) { transform: translate(-50%, -50%) translateX(-27cqw) translateY(-4px) rotate(-9.5deg); }
	#one .ov-tile-lg:hover .ov-fan img:nth-child(3) { transform: translate(-50%, -50%) translateX(27cqw) translateY(-4px) rotate(9.5deg); }
}

/* -------------------------------------------------------------------------
 *  Responsive
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 980px) {
	.ov-bento { grid-template-columns: minmax(0, 1fr); }
	#one .ov-tile-lg { grid-row: auto; }
}

@media screen and (max-width: 736px) {
	.ov-hero-actions { margin-left: 0; }
	#one .ov-tile { padding: 1.4em 1.35em 1.35em; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	#one .ov-tile, .ov-fan img, #intro .ov-cta { transition: none; }
	#one.inactive .ov-tile, body.is-preload #one .ov-tile { opacity: 1; translate: 0 0; }
}