用户:汐际/签名/style.css：修订间差异

2026年10月25日 (日) 11:33的版本

/* 整体可见性：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; }
}

/* =========================================
   1. 外壳限制与防遮挡（新增）
   ========================================= */
.sf-container {
    position: relative;
    width: 100%;
    max-width: 340px; /* 稍微变窄一点 */
    height: 480px;    /* 高度缩短，避免太长 */
    margin: 2em auto;
    background: #1a1a1a;
    border: 2px solid #4B0082;
    box-sizing: border-box;
    overflow: hidden;
    font-family: sans-serif;
    isolation: isolate; /* 防止内部高 z-index 跑到外面去 */
    z-index: 10;
}

/* 核心修复：当用户点击编辑，或者处于历史记录等页面时，直接隐藏卡片 */
body.action-edit .sf-container,
body.action-history .sf-container {
    display: none !important;
}

/* =========================================
   2. 页面默认隐藏与 3 秒跳转逻辑
   ========================================= */
.sf-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    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; 
    background: #1a1a1a;
    animation: sf-auto-hide 0s 3s forwards; 
}

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

/* =========================================
   3. 点击后的显隐控制
   ========================================= */

/* 当其他页面被点击（target）时，强制立刻隐藏 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;
}

/* 如果 p4 (授权弹窗) 被激活 */
#sf-p4:target { 
    opacity: 1 !important; 
    visibility: visible !important; 
    z-index: 50 !important; 
    background: rgba(0,0,0,0.75); 
}

/* 如果 p3 (成功页) 被激活 */
#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; }
/* =========================================
   4. 动画与穿透
   ========================================= */
@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%; }