/* ==========================================================================
   ArcanePlayer — Homepage
   Card/grid/video-card styling now lives in assets/css/cards.css (shared
   with the genre archive and single-article templates). This file only
   holds what's actually homepage-specific: the hero and the alternating
   section background.
   ========================================================================== */

.sg-main {
	background-color: var(--sg-color-bg, #0A0F0A);
}

.sg-main .sg-section:nth-of-type(odd) {
	background-color: var(--sg-color-bg-alt, #0D130D);
}

.sg-main .sg-section:nth-of-type(even) {
	background-color: var(--sg-color-bg, #0A0F0A);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.sg-hero {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	background-color: #10160f;
}

.sg-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-color: #10160f;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.sg-hero__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.sg-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(10, 15, 10, 0.95) 0%,
		rgba(10, 15, 10, 0.75) 40%,
		rgba(10, 15, 10, 0.15) 100%
	);
}

.sg-hero__content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding: 64px 6vw;
}

.sg-hero__headline {
	font-family: var(--sg-font-display, 'Rajdhani', sans-serif);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.1;
	color: var(--sg-color-text-title, #FFFFFF);
	margin: 0 0 20px;
}

.sg-hero__subheadline {
	font-family: var(--sg-font-body, 'Manrope', sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sg-color-text-body, #A9B8A9);
	max-width: 480px;
	margin: 0 0 32px;
}

.sg-hero__cta {
	display: inline-block;
	font-family: var(--sg-font-display, 'Rajdhani', sans-serif);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #05130a;
	background: linear-gradient(90deg, var(--sg-color-accent-start, #39FF14), var(--sg-color-accent-end, #00B140));
	padding: 14px 36px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 0 24px rgba(57, 255, 20, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sg-hero__cta:hover,
.sg-hero__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0 32px rgba(57, 255, 20, 0.4);
}

.sg-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--sg-color-border, #2A332A);
	color: var(--sg-color-text-title, #FFFFFF);
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sg-hero__arrow:hover,
.sg-hero__arrow:focus-visible {
	background-color: rgba(57, 255, 20, 0.15);
	border-color: var(--sg-color-accent-start, #39FF14);
}

.sg-hero__arrow--prev {
	left: 20px;
}

.sg-hero__arrow--next {
	right: 20px;
}

.sg-hero__dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
}

.sg-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--sg-color-border, #2A332A);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sg-hero__dot.is-active {
	background-color: var(--sg-color-accent-start, #39FF14);
	transform: scale(1.3);
}