/**
 * Motion layer for New Bloggers Theme.
 *
 * Uses Framer/Motion runtime from the page when present, with CSS/WAAPI fallback.
 */

:root {
	--nbt-motion-distance: 28px;
	--nbt-motion-duration: 720ms;
	--nbt-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.nbt-motion-ready [data-nbt-motion] {
	opacity: 0;
	transform: translate3d(0, var(--nbt-motion-distance), 0) scale(0.985);
	will-change: opacity, transform;
}

.nbt-motion-ready [data-nbt-motion="hero"] {
	transform: translate3d(0, 18px, 0) scale(0.97);
}

.nbt-motion-ready [data-nbt-motion="ticker"] {
	transform: translate3d(-16px, 0, 0);
}

.nbt-motion-ready [data-nbt-motion].is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	transition:
		opacity var(--nbt-motion-duration) var(--nbt-motion-ease),
		transform var(--nbt-motion-duration) var(--nbt-motion-ease);
	transition-delay: var(--nbt-motion-delay, 0ms);
}

.nbt-motion-ready [data-nbt-motion="hero"].is-visible {
	transition-duration: 900ms;
}

.nbt-motion-ready .cst-featured-hero__tile,
.nbt-motion-ready .nbt-ew-hero__story-card,
.nbt-motion-ready .nbt-crypto-card,
.nbt-motion-ready .nbt-ew-post-card,
.nbt-motion-ready .nbt-ew-market-card,
.nbt-motion-ready .cst-card {
	transform-origin: center;
}

.nbt-motion-ready .cst-featured-hero__tile.is-visible,
.nbt-motion-ready .nbt-ew-hero__story-card.is-visible,
.nbt-motion-ready .nbt-crypto-card.is-visible,
.nbt-motion-ready .nbt-ew-post-card.is-visible,
.nbt-motion-ready .nbt-ew-market-card.is-visible,
.nbt-motion-ready .cst-card.is-visible {
	transition-delay: var(--nbt-motion-delay, 0ms);
}

.nbt-motion-ready .cst-featured-hero__tile:hover,
.nbt-motion-ready .nbt-ew-hero__story-card:hover,
.nbt-motion-ready .nbt-crypto-card:hover,
.nbt-motion-ready .nbt-ew-post-card:hover,
.nbt-motion-ready .nbt-ew-market-card:hover,
.nbt-motion-ready .cst-card:hover {
	transform: translate3d(0, -6px, 0) scale(1.01);
}

.nbt-motion-ready .cst-header.is-scrolled,
.nbt-motion-ready .cst-header {
	transition:
		transform 260ms ease,
		box-shadow 260ms ease,
		background-color 260ms ease;
}

.nbt-motion-ready .cst-header.is-scrolled {
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}

.nbt-motion-ready .nbt-crypto-ticker,
.nbt-motion-ready .nbt-ew-ticker {
	position: relative;
	overflow: hidden;
}

.nbt-motion-ready .nbt-crypto-ticker::after,
.nbt-motion-ready .nbt-ew-ticker::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -35%;
	width: 28%;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
	animation: nbt-motion-sheen 4.8s ease-in-out infinite;
}

.nbt-motion-ready .nbt-ew-newsletter,
.nbt-motion-ready .nbt-crypto-newsletter__inner {
	position: relative;
	overflow: hidden;
}

.nbt-motion-ready .nbt-ew-newsletter::before,
.nbt-motion-ready .nbt-crypto-newsletter__inner::before {
	content: "";
	position: absolute;
	inset: -40% auto auto -20%;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 65%);
	animation: nbt-motion-orbit 9s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes nbt-motion-sheen {
	0%,
	55% {
		transform: translateX(0);
		opacity: 0;
	}
	65% {
		opacity: 1;
	}
	100% {
		transform: translateX(520%);
		opacity: 0;
	}
}

@keyframes nbt-motion-orbit {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(210%, 45%, 0) scale(1.16);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbt-motion-ready [data-nbt-motion],
	.nbt-motion-ready [data-nbt-motion].is-visible,
	.nbt-motion-ready .cst-featured-hero__tile:hover,
	.nbt-motion-ready .nbt-ew-hero__story-card:hover,
	.nbt-motion-ready .nbt-crypto-card:hover,
	.nbt-motion-ready .nbt-ew-post-card:hover,
	.nbt-motion-ready .nbt-ew-market-card:hover,
	.nbt-motion-ready .cst-card:hover {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nbt-motion-ready .nbt-crypto-ticker::after,
	.nbt-motion-ready .nbt-ew-ticker::after,
	.nbt-motion-ready .nbt-ew-newsletter::before,
	.nbt-motion-ready .nbt-crypto-newsletter__inner::before {
		animation: none;
		display: none;
	}
}