/* =========================================================
   枢云美化 - 特效与元素样式
   ========================================================= */

/* ---------- 粒子背景 ---------- */
#sb-particles {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: .55;
}
body.sb-particles #main,
body.sb-particles .site-header,
body.sb-particles .site-footer,
body.sb-particles .fab {
	position: relative;
	z-index: 1;
}

/* ---------- 鼠标跟随光晕 ---------- */
#sb-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(168, 85, 247, .22) 0%, rgba(99, 102, 241, .12) 35%, transparent 70%);
	opacity: 0;
	transition: opacity .4s ease;
	mix-blend-mode: screen;
	will-change: transform;
}
body.sb-cursor:hover #sb-cursor { opacity: 1; }
@media (max-width: 860px) { #sb-cursor { display: none; } }

/* ---------- 页面加载动画 ---------- */
#sb-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 18px;
	background: #0c0d1f;
	transition: opacity .6s ease, visibility .6s ease;
}
#sb-loader.is-hidden { opacity: 0; visibility: hidden; }
.sb-loader-ring {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .12);
	border-top-color: var(--primary, #6366f1);
	border-right-color: var(--primary-2, #d946ef);
	animation: sb-spin .9s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-loader-brand { display: flex; align-items: center; gap: 10px; }
.sb-loader-mark {
	width: 36px; height: 36px; border-radius: 11px;
	background: var(--grad, linear-gradient(120deg, #6366f1, #d946ef));
	color: #fff; font-weight: 700; font-size: 19px;
	display: grid; place-items: center;
	box-shadow: 0 8px 24px -6px rgba(99, 102, 241, .7);
}
.sb-loader-text { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .5px; }

/* =========================================================
   卡片悬浮效果
   ========================================================= */
body.sb-card-lift .post-card,
body.sb-card-lift .side-card,
body.sb-card-lift .res {
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
body.sb-card-lift .post-card:hover,
body.sb-card-lift .side-card:hover,
body.sb-card-lift .res:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 50px -20px rgba(49, 46, 129, .35);
}

body.sb-card-lift-glow .post-card,
body.sb-card-lift-glow .side-card,
body.sb-card-lift-glow .res {
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, filter .35s ease;
}
body.sb-card-lift-glow .post-card:hover,
body.sb-card-lift-glow .side-card:hover,
body.sb-card-lift-glow .res:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 54px -18px rgba(99, 102, 241, .45), 0 0 0 1px rgba(168, 85, 247, .25);
	filter: drop-shadow(0 8px 20px rgba(168, 85, 247, .18));
}

body.sb-card-scale .post-card,
body.sb-card-scale .side-card,
body.sb-card-scale .res {
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
body.sb-card-scale .post-card:hover,
body.sb-card-scale .side-card:hover,
body.sb-card-scale .res:hover {
	transform: scale(1.03);
	box-shadow: 0 26px 50px -18px rgba(49, 46, 129, .4);
}

body.sb-card-border .post-card,
body.sb-card-border .side-card,
body.sb-card-border .res {
	position: relative;
	transition: transform .3s ease;
}
body.sb-card-border .post-card::before,
body.sb-card-border .side-card::before,
body.sb-card-border .res::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad, linear-gradient(120deg, #6366f1, #d946ef));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
body.sb-card-border .post-card:hover::before,
body.sb-card-border .side-card:hover::before,
body.sb-card-border .res:hover::before { opacity: 1; }
body.sb-card-border .post-card:hover,
body.sb-card-border .side-card:hover,
body.sb-card-border .res:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 50px -20px rgba(99, 102, 241, .4);
}

/* =========================================================
   玻璃拟态
   ========================================================= */
body.sb-glass .post-card,
body.sb-glass .side-card,
body.sb-glass .hero-side,
body.sb-glass .page-head,
body.sb-glass .single,
body.sb-glass .res,
body.sb-glass .notice {
	background: rgba(255, 255, 255, .62) !important;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .7);
}
body.sb-glass .site-header {
	background: rgba(255, 255, 255, .5) !important;
}
body.sb-glass .user-card {
	background: rgba(255, 255, 255, .7) !important;
}

/* =========================================================
   图片悬浮效果
   ========================================================= */
body.sb-img-zoom .post-card .thumb img { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
body.sb-img-zoom .post-card:hover .thumb img { transform: scale(1.12); }

body.sb-img-gray .post-card .thumb img {
	filter: grayscale(1);
	transition: filter .4s ease, transform .7s ease;
}
body.sb-img-gray .post-card:hover .thumb img { filter: grayscale(0); transform: scale(1.08); }

body.sb-img-blur .post-card .thumb img {
	filter: blur(4px);
	transition: filter .4s ease, transform .7s ease;
}
body.sb-img-blur .post-card:hover .thumb img { filter: blur(0); transform: scale(1.08); }

body.sb-img-zoom .entry-cover img,
body.sb-img-zoom .hero-main .hero-img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
body.sb-img-zoom .entry-cover:hover img,
body.sb-img-zoom .hero-main:hover .hero-img { transform: scale(1.06); }

/* =========================================================
   按钮悬浮效果
   ========================================================= */
body.sb-btn-pulse .btn-login,
body.sb-btn-pulse .res-btn,
body.sb-btn-pulse .checkin {
	transition: box-shadow .3s ease, transform .25s ease;
}
body.sb-btn-pulse .btn-login:hover,
body.sb-btn-pulse .res-btn:hover,
body.sb-btn-pulse .checkin:hover {
	animation: sb-pulse 1.2s ease-in-out infinite;
}
@keyframes sb-pulse {
	0%, 100% { box-shadow: 0 10px 22px -10px rgba(99, 102, 241, .8); }
	50% { box-shadow: 0 10px 30px -4px rgba(217, 70, 239, .9); }
}

body.sb-btn-lift .btn-login,
body.sb-btn-lift .res-btn,
body.sb-btn-lift .checkin,
body.sb-btn-lift .btn-ghost {
	transition: transform .25s ease, box-shadow .25s ease;
}
body.sb-btn-lift .btn-login:hover,
body.sb-btn-lift .res-btn:hover,
body.sb-btn-lift .checkin:hover,
body.sb-btn-lift .btn-ghost:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(99, 102, 241, .7);
}

body.sb-btn-shine .btn-login,
body.sb-btn-shine .res-btn,
body.sb-btn-shine .checkin {
	position: relative;
	overflow: hidden;
}
body.sb-btn-shine .btn-login::after,
body.sb-btn-shine .res-btn::after,
body.sb-btn-shine .checkin::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	transition: left .6s ease;
	pointer-events: none;
}
body.sb-btn-shine .btn-login:hover::after,
body.sb-btn-shine .res-btn:hover::after,
body.sb-btn-shine .checkin:hover::after { left: 140%; }

/* =========================================================
   自定义滚动条
   ========================================================= */
body.sb-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
body.sb-scrollbar::-webkit-scrollbar-track { background: transparent; }
body.sb-scrollbar::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--primary, #6366f1), var(--primary-2, #d946ef));
	border-radius: 99px;
	border: 2px solid var(--bg, #f6f7fc);
}
body.sb-scrollbar::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
body.sb-scrollbar { scrollbar-width: thin; scrollbar-color: var(--primary, #6366f1) transparent; }

/* =========================================================
   代码块美化
   ========================================================= */
body.sb-code .entry-content pre {
	position: relative;
	background: linear-gradient(180deg, #161832, #11132a) !important;
	border: 1px solid rgba(99, 102, 241, .25);
	box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
	overflow: hidden;
}
body.sb-code .entry-content pre::before {
	content: "";
	display: block;
	height: 30px;
	margin: -18px -20px 14px;
	padding: 0 20px;
	background: rgba(0, 0, 0, .28);
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	background-image:
		radial-gradient(circle at 12px 50%, #ff5f56 6px, transparent 7px),
		radial-gradient(circle at 30px 50%, #ffbd2e 6px, transparent 7px),
		radial-gradient(circle at 48px 50%, #27c93f 6px, transparent 7px);
	background-repeat: no-repeat;
}
body.sb-code .entry-content pre code { color: #e6e8ff; }
body.sb-code .entry-content code:not(pre code) {
	background: linear-gradient(120deg, rgba(99, 102, 241, .12), rgba(217, 70, 239, .1));
	color: var(--primary, #6366f1);
	border: 1px solid rgba(99, 102, 241, .18);
}

/* =========================================================
   滚动入场动画
   ========================================================= */
.sb-reveal {
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}
.sb-reveal.is-visible { opacity: 1; transform: none; }

body.sb-reveal-fade-up .sb-reveal { transform: translateY(40px); }
body.sb-reveal-zoom .sb-reveal { transform: scale(.92); }
body.sb-reveal-slide .sb-reveal { transform: translateX(-40px); }
body.sb-reveal-flip .sb-reveal { transform: perspective(900px) rotateX(18deg); }

@media (prefers-reduced-motion: reduce) {
	.sb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	#sb-loader, #sb-cursor, #sb-particles { display: none !important; }
}