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

/* =========================================
   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;
}

body.action-edit .sf-container,
body.action-history .sf-container { display: none !important; }

/* =========================================
   2. 页面基础状态
   ========================================= */
.sf-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    box-sizing: border-box; z-index: 1;
}

/* 底层欢迎页：默认始终铺开 */
#sf-p2 { display: flex; }

/* =========================================
   3. 加载页 3 秒自动跳转（借鉴 Wikidot 思路）
   ========================================= */
#sf-p1 {
    display: flex; z-index: 100; background: #1a1a1a;
    /* 关键：强制在 3 秒后瞬间触发 display: none */
    animation: sf-auto-hide 0.1s 3s forwards;
}

@keyframes sf-auto-hide {
    to { display: none; }
}

/* 动态省略号特效 */
.sf-dots::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: sf-dot-typing 1.5s infinite;
}

@keyframes sf-dot-typing {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* 旋转特效 */
@keyframes sf-spin { 100% { transform: rotate(360deg); } }

/* =========================================
   4. 点击 Target 切换页面
   ========================================= */
/* 只要被 Target 激活，强制显示并置顶 */
#sf-p2:target, #sf-p3:target, #sf-p4:target {
    display: flex !important; z-index: 50 !important;
}

/* 如果被激活，立刻干掉还没结束倒计时的加载页 */
#sf-p2:target ~ #sf-p1,
#sf-p3:target ~ #sf-p1,
#sf-p4:target ~ #sf-p1 {
    animation: none !important;
    display: none !important;
}

#sf-p4 { background: rgba(0,0,0,0.75); }

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

/* 按钮穿透 */
.sf-btn a { color: inherit !important; text-decoration: none !important; display: block; width: 100%; height: 100%; }