/* ==========================================================================
   FITOORNAMA — CINEMATIC HERO
   ========================================================================== */


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

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100svh;
	overflow: hidden;
	color: #f7f4ed;
	background: #1e1e1e;
	isolation: isolate;
}

.hero-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #1e1e1e;
}

.hero-slide {
	position: absolute;
	inset: -2%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transform: scale(1.015);
	will-change: opacity, transform;
	transition:
		opacity 2.2s ease-in-out,
		transform 9s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.hero-slide.active {
	z-index: 1;
	opacity: 1;
	transform: scale(1.09);
}


/* --------------------------------------------------------------------------
   Cinematic overlay
   -------------------------------------------------------------------------- */

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			rgba(12, 14, 13, 0.50) 0%,
			rgba(12, 14, 13, 0.22) 28%,
			rgba(12, 14, 13, 0.24) 55%,
			rgba(12, 14, 13, 0.58) 100%
		),
		linear-gradient(
			to right,
			rgba(12, 14, 13, 0.22) 0%,
			rgba(12, 14, 13, 0.02) 45%,
			rgba(12, 14, 13, 0.18) 100%
		);
}

.hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: clamp(90px, 14vh, 180px);
	content: "";
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(247, 244, 237, 0) 0%,
		rgba(247, 244, 237, 0.05) 55%,
		rgba(247, 244, 237, 0.12) 100%
	);
}


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

.hero-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100svh;
	padding:
		clamp(190px, 24vh, 270px)
		32px
		clamp(130px, 16vh, 185px);
	text-align: center;
}

.hero-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 980px);
	margin: auto;
	padding-inline: clamp(0px, 3vw, 42px);
}


/* --------------------------------------------------------------------------
   Entry animation
   -------------------------------------------------------------------------- */

.hero-kicker,
.hero-title,
.hero-subtitle,
.hero-button {
	opacity: 0;
	transform: translateY(24px);
	animation: heroContentEnter 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-kicker {
	animation-delay: 180ms;
}

.hero-title {
	animation-delay: 340ms;
}

.hero-subtitle {
	animation-delay: 500ms;
}

.hero-button {
	animation-delay: 680ms;
}

@keyframes heroContentEnter {

	to {
		opacity: 1;
		transform: translateY(0);
	}

}


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.hero-kicker {
	display: block;
	margin: 0 0 24px;
	color: rgba(247, 244, 237, 0.72);
	font-family: "Inter", sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hero-title {
	max-width: 960px;
	margin: 0;
	color: #f7f4ed;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(3.7rem, 7.6vw, 7.3rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 0.96;
	text-wrap: balance;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);
}

.hero-subtitle {
	max-width: 700px;
	margin: 30px 0 0;
	color: rgba(247, 244, 237, 0.88);
	font-family: "Inter", sans-serif;
	font-size: clamp(0.82rem, 1.1vw, 1rem);
	font-weight: 400;
	letter-spacing: 0.13em;
	line-height: 1.8;
	text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Explore More CTA
   -------------------------------------------------------------------------- */

.hero-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: 190px;
	margin-top: 44px;
	padding: 16px 30px;
	overflow: hidden;
	border: 1px solid rgba(247, 244, 237, 0.54);
	border-radius: 0;
	color: #f7f4ed;
	background: rgba(247, 244, 237, 0.02);
	font-family: "Inter", sans-serif;
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.17em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition:
		color 300ms ease,
		background-color 300ms ease,
		border-color 300ms ease,
		transform 300ms ease;
}

.hero-button::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: #2f4a42;
	transform: translateY(102%);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-button::after {
	display: inline-block;
	content: "↓";
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 300ms ease;
}

.hero-button:hover,
.hero-button:focus-visible {
	border-color: #2f4a42;
	color: #f7f4ed;
	transform: translateY(-3px);
}

.hero-button:hover::before,
.hero-button:focus-visible::before {
	transform: translateY(0);
}

.hero-button:hover::after,
.hero-button:focus-visible::after {
	transform: translateY(4px);
}

.hero-button:focus-visible {
	outline: 2px solid #b88a3d;
	outline-offset: 5px;
}


/* --------------------------------------------------------------------------
   Scroll indicator
   -------------------------------------------------------------------------- */

.hero-scroll {
	position: absolute;
	bottom: 30px;
	left: 50%;
	z-index: 12;
	width: 22px;
	height: 72px;
	transform: translateX(-50%);
	pointer-events: none;
}

.hero-scroll span {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 1px;
	height: 64px;
	background: rgba(247, 244, 237, 0.68);
	transform: translateX(-50%) scaleY(0.15);
	transform-origin: top;
	animation: heroScrollLine 2.6s ease-in-out infinite;
}

@keyframes heroScrollLine {

	0% {
		opacity: 0;
		transform: translateX(-50%) scaleY(0.15);
		transform-origin: top;
	}

	35% {
		opacity: 1;
		transform: translateX(-50%) scaleY(1);
		transform-origin: top;
	}

	65% {
		opacity: 1;
		transform: translateX(-50%) scaleY(1);
		transform-origin: bottom;
	}

	100% {
		opacity: 0;
		transform: translateX(-50%) scaleY(0.12);
		transform-origin: bottom;
	}

}


/* --------------------------------------------------------------------------
   Hero leaving viewport
   -------------------------------------------------------------------------- */

.hero.is-leaving .hero-text {
	opacity: 0.38;
	transform: translateY(-14px);
	transition:
		opacity 500ms ease,
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.hero-content {
		padding:
			clamp(165px, 21vh, 220px)
			28px
			clamp(120px, 15vh, 160px);
	}

	.hero-title {
		font-size: clamp(3.4rem, 8vw, 5.8rem);
	}

	.hero-subtitle {
		margin-top: 26px;
	}

	.hero-button {
		margin-top: 38px;
	}

}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {

	.hero {
		min-height: 100svh;
	}

	.hero-slide {
		background-position: center center;
	}

	.hero-content {
		min-height: 100svh;
		padding:
			clamp(145px, 20vh, 185px)
			22px
			120px;
	}

	.hero-text {
		width: 100%;
		padding-inline: 0;
	}

	.hero-kicker {
		margin-bottom: 20px;
		font-size: 0.62rem;
		letter-spacing: 0.32em;
	}

	.hero-title {
		max-width: 680px;
		font-size: clamp(3rem, 13vw, 5rem);
		line-height: 0.98;
	}

	.hero-subtitle {
		max-width: 520px;
		margin-top: 24px;
		font-size: 0.72rem;
		letter-spacing: 0.1em;
		line-height: 1.7;
	}

	.hero-button {
		min-width: 176px;
		margin-top: 34px;
		padding: 15px 24px;
		font-size: 0.65rem;
	}

	.hero-scroll {
		bottom: 22px;
		height: 58px;
	}

	.hero-scroll span {
		height: 52px;
	}

}


/* --------------------------------------------------------------------------
   Small mobile
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.hero-content {
		padding-right: 18px;
		padding-left: 18px;
	}

	.hero-title {
		font-size: clamp(2.75rem, 14vw, 4.1rem);
	}

	.hero-subtitle {
		font-size: 0.66rem;
		letter-spacing: 0.08em;
	}

	.hero-button {
		width: auto;
		max-width: 100%;
	}

}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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

	.hero-slide {
		transition: opacity 500ms linear;
		transform: none;
	}

	.hero-slide.active {
		transform: none;
	}

	.hero-kicker,
	.hero-title,
	.hero-subtitle,
	.hero-button {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.hero-scroll span {
		opacity: 0.7;
		transform: translateX(-50%);
		animation: none;
	}

	.hero-button,
	.hero-button::before,
	.hero-button::after,
	.hero-text {
		transition: none;
	}

}