用户:汐际/签名/style.css

/* 整体可见性：0~68.75% 可见，之后 5s 整体隐藏 */
@keyframes saturn-sig-cycle {
  0%      { opacity: 1; }
  68.75%  { opacity: 0; }
  100%    { opacity: 0; }
}

/* 底座：不规律电火花节奏 */
@keyframes saturn-base-cycle {
  0%, 0.08%, 0.14%, 0.22%, 0.30%, 0.40%, 0.50%, 0.60%, 0.72%, 0.86% { background:#05080a; }
  0.04%, 0.10%, 0.16%, 0.26%, 0.34%, 0.46%, 0.54%, 0.66%, 0.80%, 0.94% { background:#1b2228; }
  3.125%, 65.625% { background:#1b2228; }
  65.72%, 65.86%, 66.04%, 66.24%, 66.48%, 66.72% { background:#05080a; }
  65.78%, 65.94%, 66.14%, 66.36%, 66.60%, 66.86% { background:#1b2228; }
  68.75%, 100% { background:#1b2228; }
}

/* 顶部长条：与底座错开相位 */
@keyframes saturn-bar-cycle {
  0%, 0.04%, 0.10%, 0.16%, 0.26%, 0.34%, 0.46%, 0.54%, 0.66%, 0.80%, 0.94% { background:rgba(13,140,187,.08); }
  0.02%, 0.06%, 0.12%, 0.20%, 0.30%, 0.40%, 0.50%, 0.60%, 0.72%, 0.86% { background:rgba(13,140,187,.4); }
  3.125%, 65.625% { background:rgba(13,140,187,.4); }
  65.66%, 65.80%, 65.98%, 66.18%, 66.42%, 66.66% { background:rgba(13,140,187,.08); }
  65.72%, 65.86%, 66.06%, 66.28%, 66.54%, 66.80% { background:rgba(13,140,187,.4); }
  68.75%, 100% { background:rgba(13,140,187,.4); }
}

/* 标签：25 次硬切（0.5s 内） */
@keyframes saturn-tag-cycle {
  0%,0.125%,0.25%,0.375%,0.5%,0.625%,0.75%,0.875%,1%,1.125%,1.25%,1.375%,1.5%,1.625%,1.75%,1.875%,2%,2.125%,2.25%,2.375%,2.5%,2.625%,2.75%,2.875%,3% { opacity:0; }
  0.0625%,0.1875%,0.3125%,0.4375%,0.5625%,0.6875%,0.8125%,0.9375%,1.0625%,1.1875%,1.3125%,1.4375%,1.5625%,1.6875%,1.8125%,1.9375%,2.0625%,2.1875%,2.3125%,2.4375%,2.5625%,2.6875%,2.8125%,2.9375%,3.0625%,3.125%,65.625% { opacity:1; }
  65.6875%,65.8125%,65.9375%,66.0625%,66.1875%,66.3125%,66.4375%,66.5625%,66.6875%,66.8125%,66.9375%,67.0625%,67.1875%,67.3125%,67.4375%,67.5625%,67.6875%,67.8125%,67.9375%,68.0625%,68.1875%,68.3125%,68.4375%,68.5625%,68.6875%,68.75%,100% { opacity:0; }
  65.75%,65.875%,66%,66.125%,66.25%,66.375%,66.5%,66.625%,66.75%,66.875%,67%,67.125%,67.25%,67.375%,67.5%,67.625%,67.75%,67.875%,68%,68.125%,68.25%,68.375%,68.5%,68.625% { opacity:1; }
}

@keyframes sci-fi-scan {
  0%     { transform: translateY(0); }
  41.67% { transform: translateY(-267%); }
  100%   { transform: translateY(-267%); }
}

@keyframes faithful-content-cycle {
  0%, 45%   { opacity: 1; visibility: visible; }
  50%, 95%  { opacity: 0; visibility: hidden; }
  100%      { opacity: 1; visibility: visible; }
}
@keyframes faithful-badges-cycle {
  0%, 45%   { opacity: 0; visibility: hidden; }
  50%, 95%  { opacity: 1; visibility: visible; }
  100%      { opacity: 0; visibility: hidden; }
}


@keyframes pixel-red-region {
  0%, 100% { clip-path: polygon(0 0, 20% 0, 20% 5%, 40% 5%, 40% 0, 60% 0, 60% 5%, 80% 5%, 80% 0, 100% 0, 100% 20%, 95% 20%, 95% 40%, 100% 40%, 100% 60%, 95% 60%, 95% 80%, 100% 80%, 100% 100%, 80% 100%, 80% 95%, 60% 95%, 60% 100%, 40% 100%, 40% 95%, 20% 95%, 20% 100%, 0 100%, 0 80%, 5% 80%, 5% 60%, 0 60%, 0 40%, 5% 40%, 5% 20%, 0 20%); }
  25%      { clip-path: polygon(0 5%, 20% 5%, 20% 0, 40% 0, 40% 5%, 60% 5%, 60% 0, 80% 0, 80% 5%, 100% 5%, 100% 25%, 95% 25%, 95% 45%, 100% 45%, 100% 65%, 95% 65%, 95% 85%, 100% 85%, 100% 100%, 80% 100%, 80% 95%, 60% 95%, 60% 100%, 40% 100%, 40% 95%, 20% 95%, 20% 100%, 0 100%, 0 85%, 5% 85%, 5% 65%, 0 65%, 0 45%, 5% 45%, 5% 25%, 0 25%); }
  50%      { clip-path: polygon(0 0, 20% 0, 20% 4%, 40% 4%, 40% 0, 60% 0, 60% 6%, 80% 6%, 80% 0, 100% 0, 100% 20%, 96% 20%, 96% 40%, 100% 40%, 100% 60%, 94% 60%, 94% 80%, 100% 80%, 100% 100%, 80% 100%, 80% 96%, 60% 96%, 60% 100%, 40% 100%, 40% 94%, 20% 94%, 20% 100%, 0 100%, 0 80%, 6% 80%, 6% 60%, 0 60%, 0 40%, 4% 40%, 4% 20%, 0 20%); }
  75%      { clip-path: polygon(0 6%, 20% 6%, 20% 0, 40% 0, 40% 4%, 60% 4%, 60% 0, 80% 0, 80% 6%, 100% 6%, 100% 25%, 96% 25%, 96% 45%, 100% 45%, 100% 65%, 94% 65%, 94% 85%, 100% 85%, 100% 100%, 80% 100%, 80% 96%, 60% 96%, 60% 100%, 40% 100%, 40% 96%, 20% 96%, 20% 100%, 0 100%, 0 85%, 4% 85%, 4% 65%, 0 65%, 0 45%, 6% 45%, 6% 25%, 0 25%); }
}

@keyframes pixel-warp-1 {
  0%   { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.6; }
  25%  { transform: translate(6px, -3px) skew(-8deg, 4deg); opacity: 0.95; }
  50%  { transform: translate(-4px, 5px) skew(6deg, -3deg); opacity: 0.4; }
  75%  { transform: translate(3px, 2px) skew(-4deg, 6deg); opacity: 0.85; }
  100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.6; }
}

@keyframes pixel-warp-2 {
  0%   { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.7; }
  25%  { transform: translate(-7px, 4px) skew(10deg, -5deg); opacity: 0.95; }
  50%  { transform: translate(5px, -6px) skew(-6deg, 8deg); opacity: 0.3; }
  75%  { transform: translate(-3px, 3px) skew(8deg, -4deg); opacity: 0.9; }
  100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.7; }
}

@keyframes pixel-warp-3 {
  0%   { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.5; }
  33%  { transform: translate(4px, 8px) skew(5deg, -10deg); opacity: 0.9; }
  66%  { transform: translate(-3px, -5px) skew(-7deg, 6deg); opacity: 0.4; }
  100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.5; }
}

@keyframes pixel-warp-4 {
  0%   { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.6; }
  33%  { transform: translate(-8px, -3px) skew(-9deg, 5deg); opacity: 0.9; }
  66%  { transform: translate(6px, 4px) skew(7deg, -6deg); opacity: 0.35; }
  100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.6; }
}

@keyframes pixel-warp-5 {
  0%   { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.7; }
  25%  { transform: translate(5px, 6px) skew(-5deg, 8deg); opacity: 1; }
  75%  { transform: translate(-4px, -4px) skew(9deg, -5deg); opacity: 0.3; }
  100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.7; }
}

@keyframes pixel-warp-6 {
  0%   { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.5; }
  50%  { transform: translate(7px, -5px) skew(-7deg, 7deg); opacity: 0.95; }
  100% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 0.5; }
}

/* 基础隐藏 */
.sf-screen { display: none; }
#sf-p1 { display: flex; animation: sf-hide 0s 3s forwards; }
#sf-p2 { animation: sf-show 0s 3s forwards; }

/* 3秒后自动动画 */
@keyframes sf-hide { to { display: none; } }
@keyframes sf-show { to { display: flex; } }

/* 点击后激活（target 优先级最高） */
#sf-p2:target, #sf-p3:target, #sf-p4:target { display: flex !important; animation: none !important; }
#sf-p3:target ~ #sf-p1, #sf-p3:target ~ #sf-p2,
#sf-p4:target ~ #sf-p1, #sf-p4:target ~ #sf-p2 { display: none !important; }

/* 正文层显示 */
#sf-doc { display: none; }
#sf-p3:target ~ #sf-doc { display: block; }

/* 加载圈的旋转动画 */
@keyframes sf-spin { 100% { transform: rotate(360deg); } }