用户:汐际/签名/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-wrapper { box-sizing: border-box; }
.sf-wrapper *, .sf-wrapper *::before, .sf-wrapper *::after { box-sizing: border-box; }

/* 卡片本体 */
.sf-card {
  max-width: 520px;
  margin: 1em 0;
  border: 1px solid #c8ccd1;
  border-radius: 12px;
  background: #fff;
  color: #202122;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  font-size: .95em;
  overflow: hidden;
}

/* 控制显示隐藏 */
.sf-page { display: none; }
.sf-doc { display: none; max-width: 520px; margin: 1em 0; padding: 0 4px; line-height: 1.7; }

#sf-p1 { display: block; } /* 默认显示 loading */

/* 第 2 步激活 */
#sf-p2:target { display: block; }
#sf-p2:target ~ #sf-p1 { display: none; }

/* 第 3 步激活 */
#sf-p3:target { display: block; }
#sf-p3:target ~ #sf-p1 { display: none; }
#sf-p3:target ~ #sf-doc { display: block; } /* 激活时显示外部正文 */

/* 内部排版 */
.sf-body { padding: 18px 20px; }
.sf-loading { display: flex; align-items: center; gap: 10px; color: #72777d; }
.sf-title { font-weight: 600; margin-bottom: 8px; }

/* Spinner 动画 */
.sf-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #c8ccd1; border-top-color: #3366cc;
  display: inline-block; animation: sf-spin .8s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* 按钮区域 */
.sf-footer {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  padding: 0 16px 14px;
}
.sf-btn {
  display: inline-block;
  font: inherit; font-size: .95em;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid #a2a9b1;
  background: #f8f9fa;
  color: #202122;
  cursor: pointer;
}
/* 消除内部 wiki 链接的默认样式 */
.sf-btn a {
  color: inherit !important;
  text-decoration: none !important;
}
.sf-btn:hover { background: #eaecf0; }
.sf-btn-primary { background: #3366cc; border-color: #3366cc; color: #fff; }
.sf-btn-primary:hover { background: #2a4b8d; border-color: #2a4b8d; }
.sf-btn-fake { opacity: .5; cursor: not-allowed; }

/* ===== 新增 APP 级过渡特效 ===== */
@keyframes sf-app-enter {
    0% { 
        opacity: 0; 
        transform: scale(0.96) translateY(15px); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* 页面切入动画 */
.sf-page:target, #sf-p1 {
    animation: sf-app-enter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 正文延迟淡入 */
#sf-doc { opacity: 0; }
#sf-p3:target ~ #sf-doc {
    display: block;
    animation: sf-app-enter 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}

/* 按钮点击时的物理回弹反馈（仿原生 App） */
.sf-btn {
    transition: transform 0.1s ease, background 0.2s !important;
}
.sf-btn:active:not(.sf-btn-fake) {
    transform: scale(0.92) !important;
}

/* ===== 授权弹窗层级控制 ===== */
#sf-p4:target { display: block !important; }
#sf-p4:target ~ #sf-p1 { display: none; }
#sf-p4:target ~ #sf-p2 { display: block; }