用户:汐际/签名/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; }
}

/* 核心：只在编辑/历史记录时隐藏 */
body.action-edit .sf-container,
body.action-history .sf-container {
    display: none !important;
}

/* 页面显隐基础状态与过渡 */
.sf-screen { 
    opacity: 0; 
    visibility: hidden; 
    z-index: 1; 
    transition: opacity 0.3s, visibility 0.3s; 
}

/* 默认显示 p2 */
#sf-p2 { 
    opacity: 1; 
    visibility: visible; 
}

/* 加载页 p1 盖在最上方，3秒后消失 */
#sf-p1 { 
    opacity: 1; 
    visibility: visible; 
    z-index: 100; 
    animation: sf-auto-hide 0s 3s forwards; 
}

@keyframes sf-auto-hide { 
    to { opacity: 0; visibility: hidden; z-index: -1; } 
}

/* 被点击跳转时，强制干掉 p1 */
#sf-p2:target ~ #sf-p1,
#sf-p4:target ~ #sf-p1,
#sf-p3:target ~ #sf-p1 { 
    animation: none !important; 
    opacity: 0 !important; 
    visibility: hidden !important; 
    z-index: -1 !important;
}

/* 被激活的页面显示 */
#sf-p2:target, 
#sf-p4:target, 
#sf-p3:target { 
    opacity: 1 !important; 
    visibility: visible !important; 
    z-index: 50 !important; 
}

/* 正文显隐 */
#sf-doc { display: none; }
#sf-p3:target ~ #sf-doc { 
    display: block; 
    animation: sf-fade-in 0.4s ease; 
}

/* 动画与链接穿透 */
@keyframes sf-spin { 100% { transform: rotate(360deg); } }
@keyframes sf-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }