/* Homepage motion layer */
:root {
	--motion-blue: #58b0ed;
	--motion-red: #e73f33;
	--motion-cyan: #65f0ff;
}

html {
	scroll-behavior: smooth;
}

#product-features,
#membership-purchase {
	scroll-margin-top: 96px;
}

.banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-size: cover;
	background-position: center;
}

.banner::before,
.banner::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.banner::before {
	inset: -35%;
	background:
		radial-gradient(circle at 18% 24%, rgba(255,255,255,.35), transparent 22%),
		radial-gradient(circle at 78% 18%, rgba(101,240,255,.28), transparent 24%),
		radial-gradient(circle at 70% 82%, rgba(231,63,51,.20), transparent 25%),
		linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));
	filter: blur(8px);
	animation: heroAurora 16s ease-in-out infinite alternate;
}

.banner::after {
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
	opacity: .34;
	animation: gridDrift 18s linear infinite;
}

.banner-in {
	position: relative;
	z-index: 1;
}

.banner-left {
	animation: heroDeviceEnter .9s cubic-bezier(.2,.8,.2,1) both;
}

.banner-left::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 360px;
	height: 360px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255,255,255,.38), rgba(101,240,255,.20) 36%, transparent 66%);
	filter: blur(6px);
	animation: deviceGlow 4.6s ease-in-out infinite;
}

.banner-left img {
	will-change: transform, filter;
	filter: drop-shadow(0 28px 40px rgba(11,67,122,.22));
}

.banner-left img:nth-child(1) {
	animation: screenFloatBack 7.5s ease-in-out infinite;
}

.banner-left img:nth-child(2) {
	animation: screenFloatFront 6.5s ease-in-out infinite;
}

.banner-right > * {
	animation: heroTextRise .85s cubic-bezier(.2,.8,.2,1) both;
}

.banner-right > *:nth-child(1) { animation-delay: .08s; }
.banner-right > *:nth-child(2) { animation-delay: .18s; }
.banner-right > *:nth-child(3) { animation-delay: .28s; }
.banner-right > *:nth-child(4) { animation-delay: .38s; }

.nav-title {
	text-shadow: 0 10px 35px rgba(0,0,0,.18);
}

.core-advantages {
	position: relative;
}

.core-advantages::after {
	content: "";
	display: block;
	width: 92px;
	height: 3px;
	margin: 18px auto 0;
	border-radius: 99px;
	background: linear-gradient(90deg, transparent, #fff, var(--motion-cyan), transparent);
	animation: linePulse 2.4s ease-in-out infinite;
}

.main-download-button,
.floating-download-button,
.edu-cta-button,
.membership-purchase .item .btn {
	position: relative;
	overflow: hidden;
}

.main-download-button::after,
.floating-download-button::after,
.edu-cta-button::after,
.membership-purchase .item .btn::after {
	content: "";
	position: absolute;
	top: -35%;
	bottom: -35%;
	left: -55%;
	width: 38%;
	transform: rotate(18deg);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
	animation: buttonShine 3.4s ease-in-out infinite;
}

.main-download-button {
	box-shadow: 0 18px 38px rgba(231,63,51,.30);
	animation: ctaBreath 3.2s ease-in-out infinite;
}

.social-proof-item {
	animation: chipPop .65s cubic-bezier(.2,.8,.2,1) both;
}

.social-proof-item:nth-child(1) { animation-delay: .52s; }
.social-proof-item:nth-child(2) { animation-delay: .62s; }
.social-proof-item:nth-child(3) { animation-delay: .72s; }

.content-item,
.convert-item,
.membership-purchase .item,
.edu-highlight,
.plugin-card,
.institution-card {
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.content-item:hover,
.convert-item:hover,
.membership-purchase .item:hover,
.plugin-card:hover,
.institution-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 36px rgba(25,61,104,.16);
}

.content-item:hover svg,
.content-item:hover::before,
.convert-item:hover img {
	animation: iconLift .7s ease both;
}

.feature-list-container .content-item > svg {
	display: none;
}

.feature-list-container .content-item::before {
	content: "";
	display: block;
	width: 104px;
	height: 104px;
	margin-right: 18px;
	flex: 0 0 104px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.feature-list-container .content-item:nth-child(1)::before {
	background-image: url("../img/features/chinese-correction.svg");
}

.feature-list-container .content-item:nth-child(2)::before {
	background-image: url("../img/features/typesetting-engine.svg");
}

.feature-list-container .content-item:nth-child(3)::before {
	background-image: url("../img/features/editor-convert.svg");
}

.feature-list-container .content-item:nth-child(4)::before {
	background-image: url("../img/features/word-export.svg");
}

.feature-list-container .content-item:nth-child(5)::before {
	background-image: url("../img/features/multi-format-copy.svg");
}

.feature-list-container .content-item:nth-child(6)::before {
	background-image: url("../img/features/formula-presets.svg");
}

.animation-ready .animate-on-scroll {
	opacity: 1;
	transform: none;
	transition: transform .28s ease, box-shadow .28s ease;
}

.animation-ready .animate-on-scroll.is-visible {
	opacity: 1;
	transform: none;
}

.animation-ready .feature-list-container,
.animation-ready .feature-list-container *,
.animation-ready #membership-purchase.animate-on-scroll,
.animation-ready #membership-purchase .animate-on-scroll {
	opacity: 1;
	transform: none;
}

.animation-ready .stagger-1 { transition-delay: .06s; }
.animation-ready .stagger-2 { transition-delay: .12s; }
.animation-ready .stagger-3 { transition-delay: .18s; }
.animation-ready .stagger-4 { transition-delay: .24s; }
.animation-ready .stagger-5 { transition-delay: .30s; }
.animation-ready .stagger-6 { transition-delay: .36s; }

.convert-title,
.format-title,
.feature-list-title {
	position: relative;
}

.convert-title::after,
.format-title::after,
.feature-list-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 72px;
	height: 4px;
	border-radius: 99px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, var(--motion-red), var(--motion-blue));
	box-shadow: 0 8px 20px rgba(88,176,237,.28);
}

.section-intro {
	position: relative;
	z-index: 1;
	margin-top: 18px;
}

.floating-download-bar {
	animation: barSlideUp .6s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes heroAurora {
	0% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
	100% { transform: translate3d(3%, 2%, 0) rotate(7deg) scale(1.08); }
}

@keyframes gridDrift {
	from { background-position: 0 0, 0 0; }
	to { background-position: 64px 64px, 64px 64px; }
}

@keyframes heroDeviceEnter {
	from { opacity: 0; transform: translateX(-34px) scale(.96); }
	to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes deviceGlow {
	0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
	50% { opacity: .92; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes screenFloatBack {
	0%, 100% { transform: translate(-50%, -50%) rotateY(30deg) translate3d(0,0,0); }
	50% { transform: translate(-50%, -50%) rotateY(30deg) translate3d(-10px,-14px,0); }
}

@keyframes screenFloatFront {
	0%, 100% { transform: translate(-50%, -50%) rotateY(30deg) translate3d(0,0,0); }
	50% { transform: translate(-50%, -50%) rotateY(30deg) translate3d(12px,10px,0); }
}

@keyframes heroTextRise {
	from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes linePulse {
	0%, 100% { opacity: .55; transform: scaleX(.78); }
	50% { opacity: 1; transform: scaleX(1); }
}

@keyframes buttonShine {
	0%, 42% { left: -55%; }
	68%, 100% { left: 120%; }
}

@keyframes ctaBreath {
	0%, 100% { transform: translateY(0); box-shadow: 0 18px 38px rgba(231,63,51,.30); }
	50% { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(231,63,51,.42); }
}

@keyframes chipPop {
	from { opacity: 0; transform: translateY(16px) scale(.92); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes iconLift {
	0% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-7px) scale(1.06); }
	100% { transform: translateY(0) scale(1.02); }
}

@keyframes barSlideUp {
	from { opacity: 0; transform: translateY(100%); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
	.banner::after {
		background-size: 42px 42px;
		opacity: .22;
	}

	.banner-left::before {
		width: 260px;
		height: 260px;
	}

	.feature-list-container .content-item::before {
		margin-right: 0;
		margin-bottom: 12px;
	}

	.main-download-button {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}

	.animation-ready .animate-on-scroll {
		opacity: 1;
		transform: none;
	}
}