/*
 * gpluo.cn — UI fixes that are not dark-mode problems.
 *
 * gpluo-dark.css keeps its invariant (everything in it is scoped to body.dark, so
 * light mode is byte-for-byte untouched), which leaves nowhere honest to put a fix
 * that changes both modes. This is that place: the card page-turn animation.
 *
 * Loaded by gpluo-ui.php at wp_enqueue_scripts priority 100, after the theme
 * (priority 10) and after gpluo-dark.css (99). Section 1 needs no !important: its
 * rules either out-specify the theme outright or tie with it and win on print order.
 *
 * Section 2 used to be the mouse pointer — the owner's own .ani art rebuilt as APNG
 * for WebKit plus a stepped still set for Blink. It came off the live site on
 * 2026-10-21 at the owner's request ("先把它下掉吧，使用系统自带而非网站配置的光标。
 * 这样兼容性也最好"); the pointer is the browser's own again. The stylesheet, the
 * builder and everything measured about it are kept in ~/Claude/gpluo-front
 * (proposed/mu-plugin-gpluo-ui.css.with-cursors-2026-10-21, cur_*.py, FINDINGS.md
 * 二十七到二十九), and the art is still on the server under mu-plugins/cursors/,
 * so putting it back is one file push.
 *
 * gpluo-ui.php still blanks the theme's five cursor options: without that the theme
 * prints its own url(...s.nmxc.ltd/...cur) rules and the site is back to drawing a
 * cursor of its own, which is the thing just removed.
 *
 * Delete gpluo-ui.php and gpluo-ui.css and the site is back to the theme's own
 * behaviour.
 */


/* ------------------------------------------------------------------------- 1.
 * The page-turn at the bottom-right of a card thumbnail: the two icons that swap
 * during it now travel along the fold's diagonal.
 *
 * What the owner reported (2026-10-20, item 2): "hover触发翻页时，上层的图标消失、
 * 下层的图标出现，都不自然（瞬间消失），我希望它们的消失、出现方向沿着翻页的对角线
 * 向左上，这样才真的像是自然的翻页和内容切换".
 *
 * The cast, all of it at bottom:10px right:10px of .post-thumb:
 *
 *   .category-icon   the category picture, an 80px circle, z-index 10, appended to
 *                    .post-thumb by the owner's own initCategoryIcons() script.
 *                    style.css fades it out on hover (opacity:0) and its own
 *                    transition list already names transform — but nothing in the
 *                    theme ever changes transform, so it fades in place.
 *   .post-thumb a::after
 *                    the 40px "open this post" arrow (child theme's
 *                    category_pic/default.png), z-index 10, opacity 0 → 1 with a
 *                    0.2s delay. Also a pure fade.
 *   .page-flip       the corner that lifts, 0 → 100px over 0.5s on the same
 *                    cubic-bezier, transform-origin bottom right, z-index 9.
 *
 * So the fold moves for half a second while both icons snap, which is what reads as
 * unnatural. The fold runs at 135° from the bottom-right corner, so "along the
 * diagonal, toward the upper-left" is translate(-N, -N) in CSS coordinates:
 *
 *   leaving  the category picture drifts up-left and shrinks, as if the lifting
 *            corner picked it up — 0.45s on the flip's own easing curve, so the two
 *            motions are one motion;
 *   arriving the arrow starts down-right of where it lands, i.e. under the fold, and
 *            slides up-left into place while it grows — delayed 0.14s so the page
 *            has actually opened before its new content appears.
 *
 * The delays are written on the :hover rules only, so un-hovering reverses without
 * waiting: the arrow slides back down-right into the closing fold immediately.
 *
 * Specificity, since none of it uses !important: .post-thumb .category-icon (0,2,0)
 * beats style.css's .category-icon (0,1,0); .post-thumb:hover .category-icon
 * (0,3,0) beats (0,2,0); the two ::after rules tie with style.css:5755/5771 at
 * (0,1,2) and (0,2,2) and win because this file prints last.
 *
 * prefers-reduced-motion keeps the fades and drops the travel: the swap still reads
 * as a swap, it just stops moving.
 */
.post-thumb .category-icon {
	transform: translate(0, 0) scale(1);
	transition: transform 0.45s cubic-bezier(0.645, 0.045, 0.355, 1),
	            opacity 0.35s ease;
}

.post-thumb:hover .category-icon {
	opacity: 0;
	transform: translate(-26px, -26px) scale(0.72);
}

.post-thumb a::after {
	transform: translate(18px, 18px) scale(0.5);
	transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
	            opacity 0.25s ease;
}

.post-thumb a:hover::after {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.14s,
	            opacity 0.3s ease 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	.post-thumb .category-icon,
	.post-thumb:hover .category-icon,
	.post-thumb a::after,
	.post-thumb a:hover::after {
		transform: none;
	}
}