/**
 * mochii.css
 * Additional custom styles beyond what Tailwind provides.
 * Loaded after style.css (which is the WP stylesheet uri with theme header).
 */

/* ============================================================
   SECTION REVEAL — fade + slide up on scroll
   ============================================================ */
.mochii-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.mochii-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   NEWEST GRID — subtle entrance stagger
   ============================================================ */
#section-newest .grid > article:nth-child(1) { transition-delay: 0ms; }
#section-newest .grid > article:nth-child(2) { transition-delay: 60ms; }
#section-newest .grid > article:nth-child(3) { transition-delay: 120ms; }
#section-newest .grid > article:nth-child(4) { transition-delay: 180ms; }
#section-newest .grid > article:nth-child(5) { transition-delay: 240ms; }
#section-newest .grid > article:nth-child(6) { transition-delay: 300ms; }
#section-newest .grid > article:nth-child(7) { transition-delay: 360ms; }
#section-newest .grid > article:nth-child(8) { transition-delay: 420ms; }

/* ============================================================
   TOP 10 — rank number hover glow
   ============================================================ */
#section-charts ol li a:hover > span:first-child {
	text-shadow: 0 0 12px rgba(209, 149, 255, 0.6);
}

/* ============================================================
   HERO — slide title text shadow for readability
   ============================================================ */
#section-hero h2 {
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   NAV SIDEBAR — gradient border glow on hover
   ============================================================ */
#site-sidebar nav a:hover {
	background: linear-gradient(to right, rgba(209, 149, 255, 0.08), transparent);
}