/* =====================================================
   ModArt Renov Framework
--------------------------------------------------------
   File        : hero.css
   Description : Hero Section
   Version     : 1.0.0
   Author      : Ayhan TACAR & Atlas
===================================================== */


/* =====================================================
   HERO
===================================================== */

.hero{

	position:relative;

	display:flex;

	align-items:center;

	justify-content:flex-start;

	min-height:100vh;
	min-height:100svh;

	overflow:hidden;

	isolation:isolate;

}


/* =====================================================
   HERO SLIDER
===================================================== */

.hero-slider{

	position:absolute;

	inset:0;

	z-index:0;

}

.hero-slide{

	position:absolute;

	inset:0;

	overflow:hidden;

	opacity:0;

	background-position:center;

	background-repeat:no-repeat;

	background-size:cover;

	backface-visibility:hidden;

	transform:translateZ(0);

	transition:
		opacity 1.4s ease,
		transform 8s linear;

}

.hero-slide.active{

	opacity:1;

	will-change:opacity,transform;

	animation:heroKenBurns 12s linear forwards;

}


/* =====================================================
   HERO OVERLAY
===================================================== */

.hero-overlay{

	position:absolute;

	inset:0;

	z-index:1;

	background:
		radial-gradient(
			circle at top,
			rgba(212,175,55,.05),
			transparent 55%
		),
		linear-gradient(
			180deg,
			rgba(0,0,0,.12) 0%,
			rgba(0,0,0,.24) 35%,
			rgba(0,0,0,.44) 70%,
			rgba(0,0,0,.60) 100%
		);

}


/* =====================================================
   HERO CONTAINER
===================================================== */

.hero-container{

	position:relative;

	z-index:2;

	width:100%;

}

.hero-content{

	max-width:720px;

	animation:heroContentFade .9s ease;

}

.hero-subtitle{

	display:inline-flex;

	flex-direction:column;

	align-items:flex-start;

	gap:10px;

	margin-bottom:22px;

	color:var(--color-primary);

	font-size:14px;

	font-weight:700;

	letter-spacing:6px;

	text-transform:uppercase;

	text-shadow:0 2px 8px rgba(0,0,0,.35);

}

.hero-subtitle::after{

	content:"";

	width:100%;

	height:2px;

	border-radius:999px;

	background:
		linear-gradient(
			90deg,
			rgba(212,175,55,1) 0%,
			rgba(212,175,55,.75) 70%,
			transparent 100%
		);

}


/* =====================================================
   HERO TYPOGRAPHY
===================================================== */

.hero h1{

	margin:0 0 28px;

	color:var(--color-text);

	font-size:clamp(48px,6vw,72px);

	font-weight:800;

	line-height:1.08;

	letter-spacing:-1.5px;

	text-wrap:balance;

	text-rendering:optimizeLegibility;

	text-shadow:0 4px 30px rgba(0,0,0,.40);

}

.hero p{

	max-width:620px;

	margin:0 0 42px;

	color:var(--color-text-light);

	font-size:22px;

	line-height:1.85;

	text-shadow:0 2px 12px rgba(0,0,0,.30);

}

/* =====================================================
   HERO BUTTONS
===================================================== */

.hero-buttons{

	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:18px;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	min-width:220px;

	will-change:transform;

}


/* =====================================================
   HERO PRIMARY BUTTON
===================================================== */

.hero-buttons .btn-primary{

	position:relative;

	overflow:hidden;

	transition:
		transform .35s ease,
		box-shadow .35s ease;

}

.hero-buttons .btn-primary:hover{

	transform:translateY(-4px);

	box-shadow:0 15px 35px rgba(212,175,55,.30);

}

.hero-buttons .btn-primary::before{

	content:"";

	position:absolute;

	top:0;

	left:-120%;

	width:80%;

	height:100%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.35),
			transparent
		);

	transition:left .8s ease;

}

.hero-buttons .btn-primary:hover::before{

	left:140%;

}


/* =====================================================
   HERO SECONDARY BUTTON
===================================================== */

.hero-buttons .btn-secondary{

	-webkit-backdrop-filter:blur(12px);

	backdrop-filter:blur(12px);

	transition:
		transform .35s ease,
		border-color .35s ease,
		background .35s ease;

}

.hero-buttons .btn-secondary:hover{

	transform:translateY(-4px);

}


/* =====================================================
   HERO CONTENT ANIMATION
===================================================== */

.hero-content > *{

	opacity:0;

	transform:translateY(25px);

	animation:heroFadeUp .8s ease forwards;

}

.hero-content > *:nth-child(1){

	animation-delay:.15s;

}

.hero-content > *:nth-child(2){

	animation-delay:.30s;

}

.hero-content > *:nth-child(3){

	animation-delay:.45s;

}

.hero-content > *:nth-child(4){

	animation-delay:.60s;

}


/* =====================================================
   HERO ANIMATIONS
===================================================== */

@keyframes heroKenBurns{

	from{

		transform:scale(1);

	}

	to{

		transform:scale(1.08);

	}

}

@keyframes heroContentFade{

	from{

		opacity:0;

	}

	to{

		opacity:1;

	}

}

@keyframes heroFadeUp{

	from{

		opacity:0;

		transform:translateY(25px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}


/* =====================================================
   HERO DOTS
===================================================== */

.hero-dots{

	position:absolute;

	left:50%;

	bottom:40px;

	z-index:5;

	display:flex;

	align-items:center;

	gap:12px;

	transform:translateX(-50%);

}

.hero-dot{

	width:12px;

	height:12px;

	border:0;

	border-radius:50%;

	background:rgba(255,255,255,.45);

	cursor:pointer;

	transition:
		transform .35s ease,
		background-color .35s ease,
		border-color .35s ease,
		box-shadow .35s ease;

}

.hero-dot:hover{

	transform:scale(1.2);

	background:rgba(255,255,255,.78);

	box-shadow:0 0 12px rgba(255,255,255,.35);

}

.hero-dot.active{

	background:linear-gradient(180deg,#f6d57a 0%,#d4a53b 100%);

	box-shadow:0 0 16px rgba(212,175,55,.65);

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:992px){

	.hero{

		justify-content:center;

		text-align:center;

	}

	.hero-content{

		max-width:100%;

	}

	.hero-subtitle{

		align-items:center;

	}

	.hero p{

		max-width:100%;

		margin-inline:auto;

	}

	.hero-buttons{

		justify-content:center;

	}

}

@media (max-width:768px){

	.hero{

		min-height:100vh;

		min-height:100dvh;

		padding-top:120px;

	}

	.hero h1{

		font-size:clamp(36px,10vw,52px);

	}

	.hero p{

		font-size:18px;

		line-height:1.7;

	}

	.hero-buttons{

		flex-direction:column;

		width:100%;

	}

	.hero-buttons .btn-primary,
	.hero-buttons .btn-secondary{

		width:100%;

		min-width:100%;

	}

	.hero-dots{

		bottom:25px;

	}

}

@media (max-width:480px){

	.hero{

		padding-top:110px;

	}

	.hero-subtitle{

		font-size:12px;

		letter-spacing:4px;

	}

	.hero h1{

		line-height:1.15;

	}

}


/* =====================================================
   PERFORMANCE
===================================================== */

.hero-slide{

	backface-visibility:hidden;

	transform:translateZ(0);

}

.hero-slide img{

	display:block;

	max-width:100%;

	height:auto;

	pointer-events:none;

	user-select:none;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce){

	.hero{

		scroll-behavior:auto;

	}

	.hero-slide,
	.hero-content,
	.hero-content > *{

		animation:none !important;

		transition:none !important;

		transform:none !important;

		opacity:1 !important;

	}

	.hero-buttons .btn-primary::before{

		display:none;

	}

}

/* =====================================================
   PREMIUM OVERRIDES
===================================================== */

.hero::after{
	content:"";
	position:absolute;
	inset:auto auto -12% -8%;
	width:min(44vw,560px);
	height:min(44vw,560px);
	border-radius:50%;
	background:radial-gradient(circle,rgba(212,175,55,.14),rgba(212,175,55,0) 68%);
	filter:blur(14px);
	pointer-events:none;
	z-index:1;
}

.hero-content{
	padding:34px 36px 32px;
	border:1px solid rgba(212,175,55,.16);
	border-radius:28px;
	background:transparent;
	box-shadow:0 18px 42px rgba(0,0,0,.14);
}

.hero-subtitle{
	margin-bottom:18px;
	color:#f0cf7a;
	letter-spacing:7px;
	text-shadow:0 3px 20px rgba(0,0,0,.42);
}

.hero h1{
	margin-bottom:24px;
	max-width:11ch;
	color:#f8f2e5;
	text-shadow:0 10px 34px rgba(0,0,0,.45);
}

.hero p{
	max-width:58ch;
	margin-bottom:34px;
	color:#ddd3be;
	font-size:21px;
	line-height:1.78;
}

.hero-buttons .btn-primary{
	box-shadow:0 16px 36px rgba(212,175,55,.18);
}

.hero-buttons .btn-secondary{
	border-color:rgba(212,175,55,.28);
	background:rgba(10,10,10,.32);
	color:#f3e7c7;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.hero-buttons .btn-secondary:hover{
	border-color:rgba(242,209,122,.52);
	background:rgba(18,18,18,.46);
	box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.hero-dots{
	bottom:64px;
	padding:0;
	border:none;
	border-radius:0;
	background:transparent;
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
}

.hero-dot{
	width:10px;
	height:10px;
	padding:0;
	background:rgba(255,255,255,.28);
	border-radius:2px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
	transform:rotate(45deg);
}

.hero-dot:hover{
	transform:rotate(45deg) scale(1.18);
}

.hero-dot.active{
	transform:rotate(45deg) scale(1.16);
	background:linear-gradient(180deg,#f6d57a 0%,#d4a53b 100%);
	box-shadow:0 0 18px rgba(212,175,55,.7);
}

@media (max-width:992px){
	.hero-content{
		padding:30px 24px 28px;
	}

	.hero h1{
		max-width:none;
	}
}

@media (max-width:768px){
	.hero-content{
		padding:26px 18px 24px;
		border-radius:22px;
		background:transparent;
	}

	.hero p{
		font-size:17px;
	}

	.hero-dots{
		bottom:54px;
	}
}