/* Likinova hero slider — hand-rolled replacement for Slider Revolution.
   Only targets the >=1024px layout; below that the theme already swaps in
   a static mobile hero image, so no responsive rules are needed here. */

.lik-hero {
	/* every child is position:absolute, so this box has no intrinsic
	   content width — inside Elementor's flex wrapper that collapses
	   width:100% to 0. vw sidesteps the ancestor chain entirely. */
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}

.lik-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms linear;
	pointer-events: none;
}

.lik-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.lik-hero__layer {
	position: absolute;
	opacity: 0;
	transform: var(--lik-rest, none);
	will-change: transform, opacity;
}

/* Entrance animation only applies while the ancestor slide carries
   .is-active — adding/removing that class starts/stops the keyframes,
   so JS never has to reset anything to replay it on the next cycle. */
.lik-hero__slide.is-active .lik-hero__layer {
	animation-name: lik-layer-in;
	animation-duration: 800ms;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	animation-fill-mode: forwards;
	animation-delay: var(--lik-delay, 0ms);
}

@keyframes lik-layer-in {
	from {
		opacity: 0;
		transform: var(--lik-rest, none) translate(var(--lik-from-x, 0px), var(--lik-from-y, 0px));
	}
	to {
		opacity: 1;
		transform: var(--lik-rest, none);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lik-hero__slide.is-active .lik-hero__layer {
		animation: none;
		opacity: 1;
	}
}

/* -- image layers -- */

.lik-hero__img {
	right: var(--lik-x-d);
	width: var(--lik-w-d);
	height: var(--lik-h-d);
	object-fit: cover;
	max-width: none;
}

.lik-hero__img--big {
	top: 50%;
	--lik-rest: translateY(calc(-50% + var(--lik-y-d)));
}

.lik-hero__img--strip,
.lik-hero__img--portrait {
	bottom: var(--lik-y-d);
}

@media (max-width: 1239px) {
	.lik-hero__img {
		right: var(--lik-x-n);
		width: var(--lik-w-n);
		height: var(--lik-h-n);
	}
	.lik-hero__img--big {
		--lik-rest: translateY(calc(-50% + var(--lik-y-n)));
	}
	.lik-hero__img--strip,
	.lik-hero__img--portrait {
		bottom: var(--lik-y-n, 0);
	}
}

/* -- text layers -- */

.lik-hero__heading,
.lik-hero__sub {
	left: var(--lik-x-d);
	top: 50%;
	width: var(--lik-w-d, auto);
	margin: var(--lik-y-d) 0 0;
	--lik-rest: translateY(-50%);
}

.lik-hero__heading {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: var(--lik-s-d);
	line-height: 67px;
	color: #1d3a77;
}

.lik-hero__sub {
	font-family: 'Muli', Arial, sans-serif;
	font-size: var(--lik-s-d);
	line-height: var(--lik-s-d);
	color: #ff7d43;
}

@media (max-width: 1239px) {
	.lik-hero__heading,
	.lik-hero__sub {
		left: var(--lik-x-n);
		margin-top: var(--lik-y-n);
	}
	.lik-hero__heading {
		font-size: var(--lik-s-n);
	}
	.lik-hero__sub {
		font-size: var(--lik-s-n);
		line-height: var(--lik-s-n);
	}
}

/* -- button layer -- */

.lik-hero__btn {
	left: var(--lik-x-d);
	top: 50%;
	margin: var(--lik-y-d) 0 0;
	--lik-rest: translateY(-50%);
	display: inline-block;
	padding: 8px 44px;
	border: 1px solid #ff7d44;
	color: #ff7d44;
	background: transparent;
	font-family: 'Muli', Arial, sans-serif;
	font-size: 15px;
	line-height: 32px;
	letter-spacing: 2px;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}
.lik-hero__btn:hover,
.lik-hero__btn:focus-visible {
	background-color: #ff8a56;
	border-color: #ff8a56;
	color: #fff;
}

@media (max-width: 1239px) {
	.lik-hero__btn {
		left: var(--lik-x-n);
		margin-top: var(--lik-y-n);
	}
}

/* -- arrows -- */

.lik-hero__arrows {
	position: absolute;
	left: 122px;
	bottom: 81px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.lik-hero__arrow {
	width: 50px;
	height: 50px;
	border: 0;
	background: transparent;
	color: #ff7d43;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	outline: none;
}
.lik-hero__arrow:focus-visible {
	outline: 2px solid #ff7d43;
	outline-offset: -4px;
}

.lik-hero__arrow svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 1239px) {
	.lik-hero__arrows {
		left: 47px;
	}
}