/* ============================================================
   全站动效层 · v1.89
   ------------------------------------------------------------
   三件事（都是「加」上去的，不改任何页面布局）：
     ① 进站加载动画：队徽「盖章」落下 + 队名金色浮现 + 整体上揭
     ② 站点切换转场：原生 View Transitions，不支持的浏览器自动退幕布
     ③ 尊重 prefers-reduced-motion —— 有人看动效会晕

   配色按新方向走「红金扶正」：国旗红主色 + 金色强调。
   这一段是全站共享的，桌面和手机都生效。
   ============================================================ */

/* ---------- 设计令牌（本层自用；整站铺开时以主题里的 --r-*/--fs-* 为准） ---------- */
:root {
    --nfq-red: #C8102E;
    --nfq-red-deep: #8E0C1E;
    --nfq-red-dark: #9A0C22;
    --nfq-gold: #C9A227;
    --nfq-gold-light: #E7C55A;
}

/* ============================================================
   ① 进站加载动画
   ============================================================ */
.nfq-splash {
    position: fixed;
    inset: 0;
    /* v1.89d：**必须补上 width/height**。
       position:fixed + inset:0 盖的是「视口减去滚动条」——1440 的屏只盖到 1425，
       右边留 15px 缝，看着就像整体偏了 7px。用 100vw/100vh 才能真正铺满整屏。 */
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 8%, #D4233F 0%, var(--nfq-red) 38%, var(--nfq-red-deep) 100%);
    color: #fff;
    /* 上揭：整块往上收走 */
    transition: transform .46s cubic-bezier(.65, 0, .35, 1), opacity .46s ease;
    will-change: transform;
}
.nfq-splash.is-out {
    transform: translateY(-101%);
}
/* 第二层幕布：垫在动画背后的一块红（v1.89c）
   ------------------------------------------------------------
   原来是「前景揭走 → 背后那层红再化开」。队长说想做成**双层幕布**：
   两层都往上揭，一层接一层，更有仪式感。

   要点：**两层必须看得出是两层** —— 否则同一块红揭两次，看着还是一次。
   所以第二层用更深一档的红（有前后纵深），并且两层上揭时各带一条金边，
   那条金边就是「揭幕线」，走到哪就揭到哪。

   它永远是 pointer-events:none，所以**绝对不会挡住点击**。 */
.nfq-splash-bg {
    position: fixed;
    inset: 0;
    width: 100vw;      /* 同上：不补这两行右边会留一条缝 */
    height: 100vh;
    z-index: 99998;
    pointer-events: none;
    /* 比前景那层更深一档，一眼能看出后面还有一层 */
    background: linear-gradient(180deg, #A80F2B 0%, #8E0C1E 55%, #6E0817 100%);
    transform: none;
    transition: transform .52s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}
.nfq-splash-bg.is-out { transform: translateY(-101%); }
/* 第二层的「揭幕线」：上揭时贴着它的下沿往上走 */
.nfq-splash-bg::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--nfq-gold), var(--nfq-gold-light), var(--nfq-gold), transparent);
    opacity: .85;
}

/* 底部一条金色压边，上揭时最后离开视线 */
.nfq-splash::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--nfq-gold), var(--nfq-gold-light), var(--nfq-gold), transparent);
    opacity: .9;
}

.nfq-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

/* 队徽：盖章式落下（略带回弹） */
.nfq-splash-badge {
    width: 144px;
    height: 144px;
    display: grid;
    place-items: center;
    margin-bottom: 34px;
    opacity: 0;
    transform: scale(1.7) rotate(-8deg);
    animation: nfq-stamp .40s cubic-bezier(.2, 1.5, .4, 1) .04s forwards;
}
.nfq-splash-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .38));
}
.nfq-splash-badge.is-text {
    border-radius: 50%;
    background: linear-gradient(145deg, var(--nfq-red), var(--nfq-red-dark));
    border: 2px solid rgba(231, 197, 90, .85);
    font-size: 40px;
    color: var(--nfq-gold-light);
    font-weight: 700;
}
@keyframes nfq-stamp {
    to { opacity: 1; transform: scale(1) rotate(0); }
}

/* 队名：金色，逐字浮现 */
.nfq-splash-name {
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 6px;
    /* letter-spacing 会在最后一个字后面也留一格，让文字视觉中心偏左半个字距；
       text-indent 补一个整字距，正好把它拉回来（数学上刚好抵消） */
    text-indent: 6px;
    color: var(--nfq-gold-light);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .38);
    margin: 0;
}
.nfq-splash-name span {
    display: inline-block;
    /* ⚠️ 必须归零：字距是给「字与字之间」用的，但 span 会继承父级一次，
       相邻 span 之间浏览器再加一次 —— 等于每格加了两遍。
       双倍字距会把队名撑长一倍，小屏上直接挤到换行（中心也就跟着歪了）。 */
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: nfq-char .42s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes nfq-char {
    to { opacity: 1; transform: none; }
}

/* 金线展开 */
.nfq-splash-line {
    width: 0;
    height: 1px;
    margin: 26px 0 18px;
    background: linear-gradient(90deg, transparent, var(--nfq-gold-light), transparent);
    animation: nfq-line .42s cubic-bezier(.4, 0, .2, 1) .34s forwards;
}
@keyframes nfq-line {
    to { width: min(420px, 72vw); }
}

.nfq-splash-sub {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 8px;
    /* 字距把最后一个字也推开了，补回来一点，看着才是真居中 */
    text-indent: 8px;
    color: rgba(255, 255, 255, .82);
    opacity: 0;
    animation: nfq-char .42s ease .44s forwards;
}

/* ============================================================
   ② 站点切换转场
   ------------------------------------------------------------
   原生跨文档转场：Chrome / Edge / Safari 都认。
   Firefox 目前不认「@view-transition」，会自动跳过，
   由 ui.js 装的幕布兜底 —— 所以不会有「某个浏览器是坏的」。
   ============================================================ */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: nfq-vt-out .26s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
    animation: nfq-vt-in .34s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes nfq-vt-out {
    to { opacity: 0; transform: translateY(-10px) scale(.995); }
}
@keyframes nfq-vt-in {
    from { opacity: 0; transform: translateY(12px) scale(.997); }
}

/* 兜底幕布（只在不支持原生转场的浏览器里出现） */
.nfq-curtain {
    position: fixed;
    inset: 0;
    z-index: 99997;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(120% 90% at 50% 8%, #D4233F 0%, var(--nfq-red) 40%, var(--nfq-red-deep) 100%);
    transition: opacity .24s ease;
}
.nfq-curtain.is-on {
    opacity: 1;
    pointer-events: auto;
}
/* 幕布正中的小金线，纯装饰 */
.nfq-curtain::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, var(--nfq-gold-light), transparent);
    transition: width .24s ease;
}
.nfq-curtain.is-on::after { width: min(220px, 46vw); }

/* ============================================================
   ③ 尊重「减少动效」偏好
   ------------------------------------------------------------
   系统里开了这个开关的人（会晕动效），这一层全部让路：
   加载动画直接跳过，转场退化成瞬间切换。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nfq-splash-badge,
    .nfq-splash-name span,
    .nfq-splash-line,
    .nfq-splash-sub {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
    }
    .nfq-splash { transition-duration: .01ms !important; }
    .nfq-splash-bg { transition-duration: .01ms !important; }
    .nfq-curtain { transition-duration: .01ms !important; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
}

/* 手机端：按比例收，但仍然要「大」—— 队名 11 个字 × (23+4) = 297px，
   390 的屏减去两侧 24px 内边距还剩 342px，放得下；320 的小屏会有点紧，故再收一档。 */
@media (max-width: 480px) {
    .nfq-splash-badge { width: 116px; height: 116px; margin-bottom: 26px; }
    .nfq-splash-name { font-size: 23px; letter-spacing: 4px; text-indent: 4px; }
    .nfq-splash-line { margin: 20px 0 14px; }
    .nfq-splash-sub { font-size: 15px; letter-spacing: 6px; text-indent: 6px; }
}
@media (max-width: 360px) {
    .nfq-splash-badge { width: 96px; height: 96px; margin-bottom: 22px; }
    .nfq-splash-name { font-size: 19px; letter-spacing: 2.5px; text-indent: 2.5px; }
    .nfq-splash-sub { font-size: 13px; letter-spacing: 5px; text-indent: 5px; }
}

/* ============================================================
   v2.12 · 内测门控（见 ui.js 末尾那一节）
   ------------------------------------------------------------
   层级是刻意排的：遮罩 99996 < 转场幕布 99997 < 启动屏 99999 < 提示条 100001。
   所以被拦住的页面会**先正常放完启动屏**，再露出「内测中」整屏遮罩 ——
   不是一上来就砸一个黑屏，观感顺序对。
   ============================================================ */
.nfq-beta-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 14px;
    vertical-align: 1px;
    font-weight: 700;
    letter-spacing: .5px;
    /* v2.17：原来是「白字 + 半透明红底」，在**暗色主题**下被对比度体检判为 2.4:1
       （白字压在金色系底上）。改成**实心金底 + 深褐字** —— 金 #C9A227 配 #2A1E00
       约 9:1，两个主题都过，而且金色本来就是本站的重点色。 */
    color: #2A1E00;
    background: #C9A227;
}

.nfq-beta-toast {
    position: fixed;
    left: 50%;
    bottom: 38px;
    z-index: 100001;
    max-width: min(88vw, 460px);
    padding: 11px 18px;
    border-radius: 12px;
    background: rgba(24, 22, 26, .95);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translate(-50%, 14px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.nfq-beta-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.nfq-beta-lock {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 99996;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0f0d10;
    color: #fff;
    text-align: center;
}
.nfq-beta-lock-box { max-width: 560px; }
.nfq-beta-lock-ico { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.nfq-beta-lock h2 { margin: 0 0 12px; font-size: 22px; color: #F5D48A; }
.nfq-beta-lock p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.95; color: #D9D3D5; }
.nfq-beta-lock b { color: #fff; }
.nfq-beta-lock-back {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 999px;
    background: #C8102E;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
.nfq-beta-lock-back:hover { filter: brightness(1.1); }