/**
 * The Four Tabs – Blog Front Page
 * animations.css — reveal, hover, scroll effects, micro-interactions.
 */

/* ============================================================
   1. Scroll reveal
   ============================================================ */
html.tft-bfp-js [data-tft-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--tft-bfp-ease), transform 0.8s var(--tft-bfp-ease);
	transition-delay: var(--tft-bfp-delay, 0s);
}

html.tft-bfp-js [data-tft-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

html.tft-bfp-js [data-tft-reveal="left"] {
	transform: translateX(-36px);
}

html.tft-bfp-js [data-tft-reveal="left"].is-visible {
	transform: translateX(0);
}

html.tft-bfp-js [data-tft-reveal="right"] {
	transform: translateX(36px);
}

html.tft-bfp-js [data-tft-reveal="right"].is-visible {
	transform: translateX(0);
}

html.tft-bfp-js [data-tft-reveal="scale"] {
	transform: scale(0.92);
}

html.tft-bfp-js [data-tft-reveal="scale"].is-visible {
	transform: scale(1);
}

/* Stagger helper (set via JS inline custom property on siblings) */
html.tft-bfp-js [data-tft-stagger] > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--tft-bfp-ease), transform 0.7s var(--tft-bfp-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

html.tft-bfp-js [data-tft-stagger].is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   2. Reading progress bar
   ============================================================ */
.tft-bfp-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	z-index: 1000;
	background: transparent;
	pointer-events: none;
}

.tft-bfp-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--tft-bfp-accent), var(--tft-bfp-accent-2), var(--tft-bfp-accent-3));
	border-radius: 0 4px 4px 0;
	box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

/* ============================================================
   3. Sticky category bar
   ============================================================ */
.tft-bfp-sticky-cats {
	position: sticky;
	top: 0;
	z-index: 90;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 12px 0;
	background: rgba(5, 5, 5, 0.72);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--tft-bfp-border);
	scrollbar-width: none;
	opacity: 0;
	transform: translateY(-110%);
	transition: opacity 0.35s ease, transform 0.4s var(--tft-bfp-ease);
}

.tft-bfp-sticky-cats.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.tft-bfp-sticky-cats::-webkit-scrollbar {
	display: none;
}

.tft-bfp-sticky-cats a {
	flex-shrink: 0;
}

/* ============================================================
   4. Floating parallax helper
   ============================================================ */
[data-tft-parallax] {
	will-change: transform;
}

/* ============================================================
   5. Hover micro-interactions
   ============================================================ */
/* Gradient border movement on cards */
.tft-bfp-card {
	background:
		linear-gradient(var(--tft-bfp-card), var(--tft-bfp-card)) padding-box,
		linear-gradient(120deg, rgba(0, 229, 255, 0.2), rgba(139, 92, 246, 0.2), rgba(0, 229, 255, 0.2)) border-box;
	border: 1px solid transparent;
}

.tft-bfp-card::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: conic-gradient(from var(--tft-bfp-glow-angle, 0deg), transparent 70%, rgba(0, 229, 255, 0.5) 85%, transparent 100%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 1;
}

.tft-bfp-card:hover::after {
	opacity: 0.6;
}

/* Icon rotate on hover of list arrow (kept in cards.css) */

/* ============================================================
   6. Magnetic button (JS enhances; base fallback)
   ============================================================ */
.tft-bfp-btn-magnetic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* Image fade-in once JS is active (no-JS shows images immediately) */
.tft-bfp-js .tft-bfp-card__img,
.tft-bfp-js .tft-bfp-list-item__img {
	opacity: 0;
	transition: opacity 0.55s ease;
}

.tft-bfp-js .tft-bfp-card__img.is-loaded,
.tft-bfp-js .tft-bfp-list-item__img.is-loaded {
	opacity: 1;
}

/* Cursor-driven border glow (updated by motion.js) */
.tft-bfp-card {
	--tft-bfp-glow-angle: 0deg;
	transform: translateZ(0);
}

/* Magnetic button inner label keeps crisp while outer transforms */
.tft-bfp-btn-magnetic > * {
	pointer-events: none;
}

/* ============================================================
   7. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	[data-tft-reveal],
	[data-tft-stagger],
	[data-tft-stagger] > *,
	.tft-bfp-hero__glass,
	.tft-bfp-orb,
	.tft-bfp-mesh,
	.tft-bfp-mouse__wheel,
	.tft-bfp-card,
	.tft-bfp-list-item,
	.tft-bfp-popular-tile,
	.tft-bfp-sticky-cats {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}