/*
Homepage slider. Swiper (assets/vendor/swiper) drives the actual sliding
— seamless loop, RTL, touch/keyboard — via swiper-bundle.min.css/.js,
enqueued alongside this file. Everything here is purely the visual layer
(backgrounds, content, nav/dot appearance), not carousel mechanics.
RTL-native: the hardcoded left positioning of .hero-slide__content and
row-reverse on .hero-slide--game are intentional (see header.css's note
on the same convention), not an oversight.
*/

.hero-slider {
	position: relative;
	max-width: 1600px;
	margin: 32px auto;
	padding: 0 16px;
}

.hero-slide {
	position: relative;
	aspect-ratio: 3 / 1.545;
	overflow: hidden;
}

/* "image"-kind slides: a single full-bleed <img>. "game"-kind slides use
   the same class on a plain <div style="background-image:...">  instead
   (background-size/position below cover that case; they're no-ops on an
   <img>), so one rule serves both markups. */
.hero-slide__bg {
	position: absolute;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	inset: 0;
}

.hero-slide__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}


.hero-slide__bgcontainer {
	position: absolute;
	border-radius: 8px;
	inset: 0;
	top:32px;
	overflow: hidden;
}


/* "game"-kind slides: slide_image (the slide's own field, same one
   "image"-kind slides use) sits as the full-bleed background
   (.hero-slide__bg above); the brand color(s) sit on top of it as a
   translucent tint (.hero-slide__overlay) so the photo stays visible
   through the color. When there's no slide_image at all, the overlay is
   the only background and goes fully opaque (.hero-slide__overlay--solid)
   instead of translucent.

   Content and the product's game_image sit above those two background
   layers as a row: content on the physical left, image on the right —
   row-reverse under our RTL-only setup (no LTR variant to support), same
   convention as header.css. */
.hero-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.9;
}

.hero-slide__overlay--solid {
	opacity: 1;
}

.hero-slide--game {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.hero-slide__content {
	position: relative;
	z-index: 2;
	flex: 1 1 44%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-3);
	min-width: 0;
	padding-right: var(--space-5);
}

@media (min-width: 768px) {
	.hero-slide__content {
		padding-right: calc(2 * var(--space-8));
		gap: var(--space-4);
	}
}

.hero-slide__media {
	position: relative;
	z-index: 2;
	flex: 1 1 40%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 0;
}

.hero-slide__game-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.hero-slide__logo {
	width: 100%;
	max-width: 220px;
	height: 80px;
	object-fit: contain;
	object-position: left center;
}

.hero-slide__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	color: #fff;
}

.hero-slide__price {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--space-4);
	padding-block: var(--space-2);
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 0.15);
	color: #fff;
	font-weight: var(--font-semibold);
	font-size: var(--text-base);
}

.hero-slide__price .woocommerce-Price-amount {
	unicode-bidi: isolate;
}



.hero-slide__cta {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: var(--space-5);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--color-ink);
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
	transition: background-color var(--transition-fast);
}

.hero-slide__cta:hover {
	background: color-mix(in srgb, #fff 85%, black);
}

/* Prev/next --------------------------------------------------------------------- */

.hero-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 0.85);
	color: var(--color-ink);
	transition: background-color var(--transition-fast);
	border-radius: 0 10px 10px  0;
}

.hero-slider__nav:hover {
	background: #fff;
}

.hero-slider__nav--prev {
	inset-inline-start: 0;
	border-radius: 10px 0 0 10px;
}

.hero-slider__nav--next {
	inset-inline-end: 0;
}

/* rotate(90deg) on a down-chevron points left, rotate(-90deg) points
   right (CSS rotation is clockwise) — prev (right side) should point
   right, next (left side) should point left, matching each button's own
   direction of travel. */
.hero-slider__nav--prev .icon {
	transform: rotate(-90deg);
}

.hero-slider__nav--next .icon {
	transform: rotate(90deg);
}

/* Dots ------------------------------------------------------------------------------ */

.hero-slider__dots {
	position: absolute;
	bottom: var(--space-5) !important;
	inset-inline: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}

.hero-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 0.5);
	transition: width var(--transition-fast), background-color var(--transition-fast);
}

.hero-slider__dot.is-active {
	width: 20px;
	background: #fff;
}

/* Entrance choreography ------------------------------------------------------------
   Swiper adds/removes .swiper-slide-active as slides change — these
   keyframes just hang off that class, so they replay on their own every
   time a slide becomes current (forward, backward, autoplay, doesn't
   matter). No JS involved. Exit is Swiper's own slide transition; we
   don't sequence a separate fade-out before it. */

@keyframes heroBgZoom {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

@keyframes heroDropIn {
	from { opacity: 0; transform: translateY(-50px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes heroRiseIn {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes heroMediaExit {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(40px); }
}

/* :not(.swiper-slide-active) matches every inactive slide, but the
   animation only plays once — right when a slide loses .swiper-slide-active
   and starts matching this rule for the first time — then holds at its
   "forwards" end state (faded out, shifted down) for as long as it stays
   inactive. The moment it becomes active again this rule stops matching
   (mutually exclusive with .swiper-slide-active below), so the two
   swap cleanly on every transition, in and out. */
.swiper-slide:not(.swiper-slide-active) .hero-slide__media {
	animation: heroMediaExit 400ms ease-in forwards;
}

.swiper-slide-active .hero-slide__bg {
	animation: heroBgZoom 900ms ease-out both;
}

.swiper-slide-active .hero-slide__logo {
	animation: heroDropIn 600ms ease-out both;
}

.swiper-slide-active .hero-slide__title {
	animation: heroDropIn 600ms ease-out 120ms both;
}

.swiper-slide-active .hero-slide__price {
	animation: heroDropIn 600ms ease-out 220ms both;
}

.swiper-slide-active .hero-slide__cta {
	animation: heroDropIn 600ms ease-out 320ms both;
}

.swiper-slide-active .hero-slide__media {
	animation: heroRiseIn 700ms ease-out 150ms both;
}

@media (prefers-reduced-motion: reduce) {
	.swiper-slide-active .hero-slide__bg,
	.swiper-slide-active .hero-slide__logo,
	.swiper-slide-active .hero-slide__title,
	.swiper-slide-active .hero-slide__price,
	.swiper-slide-active .hero-slide__cta,
	.swiper-slide-active .hero-slide__media,
	.swiper-slide:not(.swiper-slide-active) .hero-slide__media {
		animation: none;
	}
}



@media (max-width: 1023.98px) {

	.hero-slide__bgcontainer {
		border-radius: 0;
		top: 24px;
	}

	.hero-slider__dots {
		display:none
	}

	.hero-slider__nav {
		display:none
	}
}


@media (max-width: 767.98px) {
	.hero-slide__title {
		font-size: 17px;
	}

	.hero-slide__price {
		padding-inline: var(--space-2);
		padding-block: 3px;
		font-size: 12px;
	}

	.hero-slide__cta {
		min-height: 28px;
		padding-inline: var(--space-3);
		font-size: 11px;
	}

	img.hero-slide__logo {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 7px 15px;
}

.hero-slide__content {
    position: unset;
    z-index: 3;
    padding-top: 5%;
}
}