/* Homepage story: one calm, scroll-led visual narrative on desktop. */
.premium-story {
	--story-progress: .3333;
	position: relative;
	overflow: clip;
	padding: clamp(4.5rem, 8vw, 8rem) 0;
	background:
		radial-gradient(circle at 8% 20%, rgb(244 122 34 / 10%), transparent 28%),
		radial-gradient(circle at 92% 72%, rgb(21 150 109 / 10%), transparent 30%),
		#fffdf9;
}

.premium-story__intro {
	max-width: 850px;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.premium-story__intro h2 {
	max-width: 16ch;
	margin: .25rem 0 1rem;
	font-size: clamp(2.35rem, 5vw, 4.8rem);
	line-height: 1.02;
	letter-spacing: -.05em;
}

.premium-story__intro > p:last-child {
	max-width: 660px;
	color: var(--muted);
	font-size: clamp(1rem, 1.6vw, 1.16rem);
}

.premium-story__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.32fr) minmax(330px, .68fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	align-items: start;
}

.premium-story__visual {
	position: sticky;
	top: 112px;
	overflow: hidden;
	height: clamp(440px, 68vh, 690px);
	background: #0b1d17;
	border: 1px solid rgb(16 37 31 / 14%);
	border-radius: 30px;
	box-shadow: 0 32px 85px rgb(16 37 31 / 18%);
	isolation: isolate;
}

.premium-story__visual::before,
.premium-story__visual::after {
	position: absolute;
	z-index: 3;
	content: "";
	pointer-events: none;
}

.premium-story__visual::before {
	inset: 0;
	background: linear-gradient(180deg, transparent 46%, rgb(4 14 11 / 58%) 100%);
}

.premium-story__visual::after {
	top: 22px;
	right: 22px;
	width: 10px;
	height: 10px;
	background: var(--orange);
	border: 6px solid rgb(255 255 255 / 12%);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 48%);
}

.premium-story__visual-item {
	position: absolute;
	z-index: 1;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.035);
	transition: opacity .62s ease, transform .72s cubic-bezier(.2, .72, .2, 1);
	will-change: opacity, transform;
}

.premium-story__visual-item.is-active {
	z-index: 2;
	opacity: 1;
	transform: scale(1);
}

.premium-story__visual-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.premium-story__status {
	position: absolute;
	z-index: 4;
	right: 28px;
	bottom: 25px;
	left: 28px;
	display: grid;
	grid-template-columns: auto minmax(70px, 1fr) auto;
	gap: .85rem;
	align-items: center;
	color: #fff;
	font-size: .76rem;
	font-weight: 850;
	letter-spacing: .08em;
}

.premium-story__status i {
	position: relative;
	display: block;
	overflow: hidden;
	height: 2px;
	background: rgb(255 255 255 / 28%);
	border-radius: 999px;
}

.premium-story__status i::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #ff9a50, #75e0b8);
	content: "";
	transform: scaleX(var(--story-progress));
	transform-origin: left center;
	transition: transform .62s cubic-bezier(.2, .72, .2, 1);
}

.premium-story__steps {
	margin-top: -9vh;
}

.premium-story__step {
	display: flex;
	min-height: 72vh;
	padding: 3rem 0;
	flex-direction: column;
	justify-content: center;
}

.premium-story.is-enhanced .premium-story__step {
	opacity: .4;
	transform: translateX(12px);
	transition: opacity .42s ease, transform .5s cubic-bezier(.2, .72, .2, 1);
}

.premium-story.is-enhanced .premium-story__step.is-active {
	opacity: 1;
	transform: translateX(0);
}

.premium-story__step > span {
	color: var(--orange);
	font-size: .76rem;
	font-weight: 900;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.premium-story__step h3 {
	max-width: 13ch;
	margin: .8rem 0 .8rem;
	font-size: clamp(2rem, 3.2vw, 3.35rem);
	line-height: 1.05;
	letter-spacing: -.045em;
}

.premium-story__step p {
	max-width: 470px;
	margin: 0;
	color: var(--muted);
	font-size: 1.04rem;
}

.premium-story__step .text-link {
	align-self: flex-start;
	margin-top: 1.4rem;
}

.premium-story__mobile-media {
	display: none;
}

@media (max-width: 900px) {
	.premium-story {
		padding: 4rem 0;
	}

	.premium-story__layout {
		display: block;
	}

	.premium-story__visual {
		display: none;
	}

	.premium-story__steps {
		display: grid;
		gap: 1.15rem;
		margin: 0;
	}

	.premium-story__step,
	.premium-story.is-enhanced .premium-story__step,
	.premium-story.is-enhanced .premium-story__step.is-active {
		overflow: hidden;
		min-height: 0;
		padding: 0 0 1.55rem;
		opacity: 1;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 21px;
		box-shadow: 0 14px 38px rgb(16 37 31 / 8%);
		transform: none;
	}

	.premium-story__mobile-media {
		display: block;
		overflow: hidden;
		margin-bottom: 1.4rem;
		aspect-ratio: 16 / 9;
		background: var(--ink);
	}

	.premium-story__mobile-media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.premium-story__step > span,
	.premium-story__step h3,
	.premium-story__step p,
	.premium-story__step .text-link {
		margin-right: 1.35rem;
		margin-left: 1.35rem;
	}

	.premium-story__step h3 {
		max-width: 17ch;
		font-size: clamp(1.75rem, 7vw, 2.55rem);
	}

	.premium-story__step p {
		font-size: 1rem;
	}
}

@media (max-width: 600px) {
	.premium-story {
		padding: 3.5rem 0;
	}

	.premium-story__intro {
		margin-bottom: 2rem;
	}

	.premium-story__intro h2 {
		font-size: clamp(2.15rem, 11vw, 3.15rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.premium-story__visual-item,
	.premium-story__status i::after,
	.premium-story.is-enhanced .premium-story__step {
		transition: none !important;
	}
}