/* ==========================================================================
   Premium visual effects — CSS-first, GPU-friendly, reduced-motion aware.
   Kept subtle so LCP/INP/CLS are never harmed.
   ========================================================================== */

/* Card elevation on hover. */
.nexus-card-standard,
.nexus-card-hero {
	transition: transform var(--transition), box-shadow var(--transition);
	will-change: transform;
}
.nexus-card-standard:hover,
.nexus-card-hero:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* Image zoom on hover (contained by overflow:hidden media wrapper). */
.nexus-card-media img,
.nexus-compact-media img {
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.nexus-card:hover .nexus-card-media img,
.nexus-compact:hover .nexus-compact-media img {
	transform: scale(1.05);
}

/* Subtle gradient accent on section titles' active category sections. */
.nexus-cat-section .nexus-section-head { position: relative; }

/* Gradient border accent for the featured hero card (very subtle). */
.nexus-mag-feature .nexus-card-hero {
	position: relative;
	background:
		linear-gradient(var(--surface), var(--surface)) padding-box,
		linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 50%, transparent), transparent 60%) border-box;
	border: 1px solid transparent;
}

/* Glass effect for the search panel + sticky header (already blurred). */
.nexus-search-panel { backdrop-filter: saturate(1.1) blur(6px); }

/* Newsletter subtle sheen. */
.nexus-newsletter { position: relative; overflow: hidden; }
.nexus-newsletter::after {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 380px; height: 380px;
	background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
	pointer-events: none;
}

/* Button micro-interaction. */
.nexus-btn:active { transform: translateY(0) scale(0.98); }

/* Badge shine on hover. */
.nexus-cat-badge { transition: filter var(--transition-fast), transform var(--transition-fast); }
.nexus-card:hover .nexus-cat-badge { transform: translateY(-1px); }

/* Breaking label soft pulse dot. */
.nexus-breaking-label::after {
	content: "";
	position: absolute;
	right: -3px; top: -3px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
	animation: nexus-pulse 2s infinite;
}
@keyframes nexus-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
	70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Reveal-on-scroll (progressive; JS adds .is-visible). Falls back to visible. */
.nexus-reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
.nexus-reveal.is-visible { opacity: 1; transform: none; }
.no-js .nexus-reveal { opacity: 1; transform: none; }

/* ---- Respect reduced motion everywhere ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.nexus-card-standard:hover,
	.nexus-card-hero:hover { transform: none; }
	.nexus-card:hover .nexus-card-media img,
	.nexus-compact:hover .nexus-compact-media img { transform: none; }
	.nexus-breaking-label::after { animation: none; }
	.nexus-reveal { opacity: 1; transform: none; }
}