/* ==========================================================================
   创面-水凝胶数字孪生仿真 · fx.css
   3A 战术 HUD 增强层（在 app.css / layout.css / ux.css 之后加载）
   --------------------------------------------------------------------------
   来源与迁移规律（三个已上线案例的反推）：
     · HPNS 深海仿真      —— 深海暗场 + 单一青蓝主色 + 扫描线/战术网格/暗角/
                            KenBurns + 240px 光标光晕 + 多层鼠标视差 + FX 微交互类库
     · 减压病 DCS 教学     —— 切角容器 clip-path(14px) + 四角角标 + mono 标签 +
                            细边框低透明度 + 零 emoji 全内联 SVG + reduce-motion 全关
     · 归航 VR 平台        —— 三层深蓝黑底 + 26px L 形四角括号 + 40px 网格(0.05) +
                            120px 扫描带 9s + mono 字母间距标签 + 半透明细边按钮
   本层遵守的纪律：
     1) 只用一个强调色（沿用本项目的青 --cyan），氛围层一律用同色极低透明度，
        不引入第二种装饰色；琥珀/红仍只作语义（警示/危险）。
     2) 切角与圆角互斥：一旦 clip-path 生效，同一元素 border-radius 归零。
     3) 所有动效在 prefers-reduced-motion 下关闭，且关键内容 opacity 兜底为 1。
     4) 打印时全部氛围层与切角失效，避免裁切正文。
     5) 不引入任何外链字体/图标；零 emoji。
   ========================================================================== */

:root {
  /* 切角尺度 */
  --ch: 9px;
  --ch-sm: 7px;
  /* HUD 线色（同一强调色的低透明版本） */
  --hud-line: rgba(63, 214, 196, .18);
  --hud-line-soft: rgba(126, 178, 196, .10);
  --hud-corner: rgba(63, 214, 196, .52);
  /* 统一缓动 */
  --fx-ease: cubic-bezier(.22, .8, .28, 1);
}

/* ==========================================================================
   一、全局 HUD 氛围层（.hudfx，由 js/fx.js 注入，pointer-events:none）
   ========================================================================== */

.hudfx {
  position: fixed;
  inset: 0;
  z-index: 50;               /* 内容之上、抽屉 60 / 报告 92 / 引导 90 / 轻提示 95 之下 */
  pointer-events: none;
  --px1: 0px; --py1: 0px;    /* 视差第一层（角标） */
  --px2: 0px; --py2: 0px;    /* 视差第二层（刻度尺） */
}
.hudfx * { pointer-events: none; }

/* 暗角：把视线压向中央，边缘压暗但不影响正文可读性 */
.hudfx__vig {
  position: absolute; inset: 0;
  background: radial-gradient(124% 92% at 50% 44%, transparent 56%, rgba(0, 0, 0, .30) 100%);
}

/* 四角 26px L 形括号 —— 透过取景器看世界 */
.hudfx__corners { position: absolute; inset: 0; transform: translate3d(var(--px1), var(--py1), 0); }
.hudfx__corners span { position: absolute; width: 26px; height: 26px; border: 2px solid var(--hud-corner); }
.hudfx__corners span:nth-child(1) { left: 11px;  top: 11px;    border-right: 0; border-bottom: 0; }
.hudfx__corners span:nth-child(2) { right: 11px; top: 11px;    border-left: 0;  border-bottom: 0; }
.hudfx__corners span:nth-child(3) { left: 11px;  bottom: 11px; border-right: 0; border-top: 0; }
.hudfx__corners span:nth-child(4) { right: 11px; bottom: 11px; border-left: 0;  border-top: 0; }

/* 顶端刻度尺：短刻度 44px 一档、长刻度 220px 一档更深 */
.hudfx__ticks {
  position: absolute; left: 0; right: 0; top: 0; height: 7px;
  transform: translate3d(var(--px2), var(--py2), 0);
  background-image:
    repeating-linear-gradient(90deg, var(--hud-line) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(63, 214, 196, .34) 0 1px, transparent 1px 220px);
  background-repeat: no-repeat;
  background-size: 100% 4px, 100% 7px;
}

/* 120px 扫描带，9s 一趟，mix-blend-mode 让文字不被糊掉 */
.hudfx__scan {
  position: absolute; left: 0; right: 0; height: 120px;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,
    transparent 0,
    rgba(63, 214, 196, .030) 42%,
    rgba(63, 214, 196, .075) 50%,
    rgba(63, 214, 196, .030) 58%,
    transparent 100%);
  animation: hudScan 9s linear infinite;
}
@keyframes hudScan {
  0%   { transform: translateY(-140px); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateY(102vh); opacity: 0; }
}

/* 光标光晕（240px，跟随鼠标，screen 混合） */
.hudfx__glow {
  position: absolute; left: 0; top: 0;
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(63, 214, 196, .16) 0,
    rgba(63, 214, 196, .06) 42%,
    transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
.hudfx.is-live .hudfx__glow { opacity: 1; }

/* ==========================================================================
   二、切角面板（军事切角替代圆角；切角与圆角互斥，故 radius 归零）
   ========================================================================== */

.stage__frame,
.pane--chart,
.micro__view,
.report__panel,
.drawer__panel,
.ctl, .dose, .readout, .gap,
.stages {
  border-radius: 0;
  clip-path: polygon(
    var(--ch) 0,
    100% 0,
    100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,
    0 100%,
    0 var(--ch)
  );
}

.scenario,
.ifu,
.toast,
.tour__card {
  border-radius: 0;
  clip-path: polygon(
    var(--ch-sm) 0,
    100% 0,
    100% calc(100% - var(--ch-sm)),
    calc(100% - var(--ch-sm)) 100%,
    0 100%,
    0 var(--ch-sm)
  );
}

/* ==========================================================================
   三、排版：mono 读数 + 战术编号标签
   ========================================================================== */

.stat b,
.dose__list dd,
.gap__list li b,
.scenario__val,
.timeline__clock b,
.report__params dd,
.report__table td:not(:first-child),
td.tone-ok, td.tone-warn, td.tone-bad,
td[data-tone="ok"], td[data-tone="warn"], td[data-tone="bad"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* 控制台分区编号 01 / 02 / … —— 仪器面板式的分节标识 */
.pane--console { counter-reset: fxsec; }
.pane--console .ctl,
.pane--console .dose,
.pane--console .readout,
.pane--console .gap { counter-increment: fxsec; }
.pane--console .ctl > label::before,
.pane--console .dose > h3::before,
.pane--console .readout > h3::before,
.pane--console .gap > h3::before {
  content: counter(fxsec, decimal-leading-zero);
  display: inline-block;
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: rgba(63, 214, 196, .78);
  vertical-align: 1px;
}

/* 状态徽章左侧呼吸指示点 */
.stage__badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(63, 214, 196, .85);
  animation: fxLed 2.4s ease-in-out infinite;
}
@keyframes fxLed { 0%, 100% { opacity: .34; } 50% { opacity: 1; } }

/* 分区标题条：标题后拉一条青色渐隐细线填满整行（军事面板 section rule） */
.rsec > h3,
.pane__head h3,
.dose > h3,
.readout > h3,
.gap > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rsec > h3::after,
.pane__head h3::after {
  content: "";
  flex: 1 1 auto;
  min-width: 14px;
  height: 1px;
  position: static;
  background: linear-gradient(90deg, rgba(63, 214, 196, .52), rgba(63, 214, 196, .14) 46%, transparent);
  box-shadow: 0 0 6px rgba(63, 214, 196, .22);
}

/* 选中文字与进度条发光 */
::selection { background: rgba(63, 214, 196, .30); color: #04191a; }
.meter i { box-shadow: 0 0 12px -2px rgba(63, 214, 196, .55); }

/* ==========================================================================
   四、FX 微交互（按钮泛光 / 流光 / 级联入场 / 行指示条）
   ========================================================================== */

@keyframes fxRiseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes fxSheen  { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
@keyframes fxLineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 按钮：hover 上浮 + 泛光；掠过时一道流光 */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .15) 50%, transparent 68%);
  transform: translateX(-120%);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .95), 0 0 0 1px rgba(63, 214, 196, .22);
}
.btn:hover::after { animation: fxSheen .75s var(--fx-ease); }
.btn--next { border-color: rgba(63, 214, 196, .48); }
.btn--next:hover { box-shadow: 0 0 18px -6px rgba(63, 214, 196, .6), 0 0 0 1px rgba(63, 214, 196, .40); }

/* 面板级联入场：视图激活时错峰升起 */
.view.is-active .pane { animation: fxRiseIn .5s var(--fx-ease) both; }
.view.is-active .pane:nth-child(2) { animation-delay: .07s; }
.view.is-active .pane:nth-child(3) { animation-delay: .14s; }

/* 报告弹窗正文六节错峰入场 */
.report.is-open .report__body > .rsec { animation: fxRiseIn .45s var(--fx-ease) both; }
.report.is-open .report__body > .rsec:nth-child(2) { animation-delay: .06s; }
.report.is-open .report__body > .rsec:nth-child(3) { animation-delay: .12s; }
.report.is-open .report__body > .rsec:nth-child(4) { animation-delay: .18s; }
.report.is-open .report__body > .rsec:nth-child(5) { animation-delay: .24s; }

/* 步骤条：当前步左侧指示条；表格选中行同款 */
.stagepill { transition: color .15s, background .15s, box-shadow .15s, transform .15s; }
.stagepill:hover { transform: translateX(1px); }
.stagepill.is-on { box-shadow: inset 2px 0 0 rgba(63, 214, 196, .85); }
tbody tr.is-on th { box-shadow: inset 3px 0 0 rgba(63, 214, 196, .70); }

/* ==========================================================================
   五、开屏 boot 序列（.boot，由 js/fx.js 注入；同会话只播一次，可点击跳过）
   ========================================================================== */

.boot {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 560px at 50% 42%, #0a1520 0%, #04070b 72%);
  transition: opacity .48s ease, transform .48s ease;
  cursor: pointer;
}
.boot[hidden] { display: none; }
.boot.is-out { opacity: 0; transform: translateY(-14px); }

.boot__grid {
  position: absolute; inset: -40vh -40vw;
  background-image:
    linear-gradient(rgba(63, 214, 196, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 214, 196, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(58% 48% at 50% 50%, #000 12%, transparent 78%);
  mask-image: radial-gradient(58% 48% at 50% 50%, #000 12%, transparent 78%);
}
.boot__scan {
  position: absolute; left: 0; right: 0; height: 180px;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, rgba(63, 214, 196, .07) 50%, transparent);
  animation: bootScanY 3.1s linear infinite;
}
@keyframes bootScanY { 0% { transform: translateY(-200px); } 100% { transform: translateY(102vh); } }
.boot__vig {
  position: absolute; inset: 0;
  background: radial-gradient(126% 96% at 50% 46%, transparent 38%, rgba(0, 0, 0, .58) 100%);
}

.boot__stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  padding: 0 26px; text-align: center;
}

.boot__beam {
  width: min(560px, 82vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 214, 196, .78), transparent);
  transform-origin: center;
  animation: fxLineGrow .55s var(--fx-ease) both;
}

.boot__title {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0;
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 700; letter-spacing: .07em;
  color: #f2f7ff;
  text-shadow: 0 0 26px rgba(63, 214, 196, .35);
}
.boot__title span {
  display: inline-block;
  opacity: 0; filter: blur(12px);
  animation: bootChIn .62s var(--fx-ease) both;
}
@keyframes bootChIn { to { opacity: 1; filter: blur(0); } }

.boot__sub {
  margin: 0;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(63, 214, 196, .82);
  opacity: 0; animation: fxRiseIn .5s var(--fx-ease) both;
}
.boot__spine {
  width: min(420px, 72vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  opacity: 0; animation: fxRiseIn .5s var(--fx-ease) both;
}
.boot__lines {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: 0; list-style: none;
  text-align: left;
  font-family: var(--mono); font-size: 11.5px;
  color: rgba(139, 160, 194, .92);
}
.boot__lines li {
  opacity: 0; transform: translateX(-6px);
  animation: bootLineIn .42s var(--fx-ease) both;
  white-space: nowrap;
}
.boot__lines li b { color: var(--cyan); font-weight: 600; }
@keyframes bootLineIn { to { opacity: 1; transform: none; } }

.boot__hint {
  margin: 4px 0 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em;
  color: rgba(133, 152, 173, .85);
  opacity: 0; animation: fxRiseIn .5s var(--fx-ease) both, fxLed 2.6s ease-in-out infinite 1.6s;
}

/* ==========================================================================
   六、按钮体系 v2.1 —— 仿归航（零圆角 + 对角切角 + 主/次双层）
   --------------------------------------------------------------------------
   归航实测原式（guihang.pages.dev 内联 CSS）：
     .btn { display:inline-flex; min-width:120px; padding:12px 22px; font-size:15px;
            letter-spacing:2px; color:var(--green); background:rgba(12,22,40,.75);
            border:1px solid var(--green-dim);
            clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),
                              calc(100% - 8px) 100%,0 100%,0 8px); }
     .btn:hover  { background:var(--green-deep); border-color:var(--green);
                   box-shadow:0 0 14px rgba(94,184,255,.25) }
     .btn:active { transform:scale(.97) }
     .btn.primary{ background:linear-gradient(180deg,#16365c,#12304a); border-color:var(--green) }
     .btn.ghost  { background:transparent; border-color:var(--line2);
                   padding:8px 14px; font-size:13px }
     .btn.small  { padding:7px 12px; font-size:13px; min-width:80px; letter-spacing:1px }
     .btn.disabled { opacity:.4; pointer-events:none }
   照抄会坏的三处，做适配（有意为之，不是漏抄）：
     1) 不给 min-width —— 中文标签长短差大，硬等宽会把右侧控制台挤溢；本项目刚把页面级
        溢出压到 0，不为按钮对齐牺牲它。
     2) letter-spacing 2px → .06em —— 中文按 2px 字距会散架。
     3) 主色仍用本项目的青 #3fd6c4，不引归航的 #5eb8ff（全站单一强调色纪律）。
   三条工程约束：
     · 切角与圆角互斥，这里所有可点元素 border-radius 一律归零。
     · clip-path 会把 outline 与外侧 box-shadow 一起裁掉 → 焦点环改用 inset box-shadow。
     · 切角必须写成 6 点式（左上 + 右下各一刀、45° 对称、尺寸一致）。写成 5 点会少一个
       转折点，右侧整条边变成一根长斜边、右下角被斜着削掉一大块 —— 师兄 09-15 10:19 抓到
       的就是这个（.btn / .btn--icon / .tag 组 / 输入框 / 报告小标签全部中招）。
   ========================================================================== */

:root {
  --ch-btn: 8px;     /* 常规按钮切角 */
  --ch-btn-s: 5px;   /* 小件切角：标签 / 徽章 / 图标按钮 / 输入框 */
}

/* ---- 1. 常规按钮：透明底 + 细描边（等价于归航的 ghost 位） ---- */
.btn {
  border-radius: 0;
  clip-path: polygon(var(--ch-btn) 0, 100% 0,
                     100% calc(100% - var(--ch-btn)), calc(100% - var(--ch-btn)) 100%,
                     0 100%, 0 var(--ch-btn));
  background: rgba(12, 22, 40, .55);
  border-color: rgba(63, 214, 196, .26);
  padding: 7px 16px;
  letter-spacing: .06em;
  transition: background .15s, border-color .15s, box-shadow .2s, transform .1s, color .15s;
}
.btn:hover {
  background: rgba(22, 54, 73, .82);
  border-color: rgba(63, 214, 196, .72);
  box-shadow: 0 0 18px -5px rgba(63, 214, 196, .55), inset 0 0 0 1px rgba(63, 214, 196, .12);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(63, 214, 196, .62); }
.btn:disabled, .btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; box-shadow: none; }

/* ---- 2. 主操作：实心青色渐变 + 亮边（归航 .btn.primary 位） ---- */
.btn--next {
  background: linear-gradient(180deg, #1c5058, #103440);
  border-color: rgba(63, 214, 196, .62);
  color: #eafffb;
  font-weight: 600;
}
.btn--next:hover {
  background: linear-gradient(180deg, #27646d, #14454f);
  border-color: var(--cyan);
  box-shadow: 0 0 22px -6px rgba(63, 214, 196, .72), inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ---- 3. 图标按钮与选中态 ---- */
.btn--icon, .btn--settings { letter-spacing: 0; }
.btn--icon {
  width: 36px; height: 32px; padding: 0;
  clip-path: polygon(var(--ch-btn-s) 0, 100% 0, 100% calc(100% - var(--ch-btn-s)),
                     calc(100% - var(--ch-btn-s)) 100%, 0 100%, 0 var(--ch-btn-s));
}
.btn[aria-pressed="true"] {
  background: rgba(63, 214, 196, .16);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(63, 214, 196, .35);
}

/* ---- 4. 小尺寸可点元素与徽章 ---- */
.tag, .preset, .bottle-tip, .report__grade, .ifu__tog {
  border-radius: 0;
  clip-path: polygon(var(--ch-btn-s) 0, 100% 0, 100% calc(100% - var(--ch-btn-s)),
                     calc(100% - var(--ch-btn-s)) 100%, 0 100%, 0 var(--ch-btn-s));
}
.preset[aria-pressed="true"] { letter-spacing: .04em; }
.report__steps .rst__tag {
  border-radius: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
/* 步骤条同样是并排分段控件：与导航同理，逐段切角会在下边缘切出一排缺口。
   照归航保持矩形 + 零圆角，选中态靠 .is-on 的青色填充表达（师兄 10:19 要求一并改掉）。 */
.stagepill, .stagepill i { border-radius: 0; clip-path: none; }
/* 药瓶旁提示：外扩散光环会被 clip-path 裁掉，改用 drop-shadow 做呼吸 */
.bottle-tip { animation: fxTipPulse 2.6s ease-in-out infinite; }
.bottle-tip.is-done { animation: none; filter: none; }
@keyframes fxTipPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(63, 214, 196, .22)); }
  50%      { filter: drop-shadow(0 0 8px rgba(63, 214, 196, .62)); }
}

/* ---- 5. 导航：并排分段控件，刻意不切角 ----
   三个 tab 各自切角、容器再切一个更大的角，两层切口不一致，
   整条下边缘看起来就像被斜着切掉了。导航属于「位置指示」不是「操作按钮」，
   照归航的做法保持矩形 + 零圆角，选中态仍由弱青底与内描边表达。 */
.nav, .nav__item { border-radius: 0; clip-path: none; }

/* ---- 6. 输入类 ---- */
.ctl input[type="number"], .opts select, .opts input {
  border-radius: 0;
  clip-path: polygon(var(--ch-btn-s) 0, 100% 0, 100% calc(100% - var(--ch-btn-s)),
                     calc(100% - var(--ch-btn-s)) 100%, 0 100%, 0 var(--ch-btn-s));
}

/* ---- 7. 左直角 + 右下 45° 斜切的条形件（v1 遗留的「右缘圆角」） ---- */
.warn, .stat, .verdict, .gap__list li, .dsec--alert,
.dose__list div.is-hero, .report__params > div, .stage__badge, .toast {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}

/* 仪表元素保留圆形（状态点 / 进度条 / 列表标记），与切角不冲突 */
@media (max-width: 700px) {
  :root { --ch-btn: 7px; --ch-btn-s: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover { box-shadow: none; }
  .bottle-tip { animation: none; }
}
@media print {
  .btn, .btn--icon, .tag, .preset, .bottle-tip, .report__grade, .ifu__tog,
  .stagepill, .nav, .nav__item, .warn, .stat, .verdict, .gap__list li,
  .dsec--alert, .dose__list div.is-hero, .report__params > div, .stage__badge,
  .report__steps .rst__tag {
    clip-path: none !important;
  }
}

/* ==========================================================================
   七、窄屏与减弱动效、打印
   ========================================================================== */

@media (max-width: 700px) {
  :root { --ch: 8px; --ch-sm: 6px; }
  .hudfx__corners span { width: 18px; height: 18px; }
  .hudfx__corners span:nth-child(1),
  .hudfx__corners span:nth-child(3) { left: 7px; }
  .hudfx__corners span:nth-child(2),
  .hudfx__corners span:nth-child(4) { right: 7px; }
  .hudfx__glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hudfx__scan { display: none; }
  .boot { display: none !important; }
  .btn::after { display: none; }
  .btn:hover { transform: none; }
  .stage__badge::before { animation: none; opacity: 1; }
  .view.is-active .pane,
  .report.is-open .report__body > .rsec,
  .boot__title span,
  .boot__sub, .boot__spine, .boot__lines li, .boot__hint, .boot__beam {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

@media print {
  .hudfx, .boot { display: none !important; }
  .stage__frame, .pane--chart, .micro__view, .report__panel, .drawer__panel,
  .ctl, .dose, .readout, .gap, .stages, .scenario, .ifu, .toast, .tour__card {
    clip-path: none !important;
  }
  .view.is-active .pane,
  .report.is-open .report__body > .rsec { animation: none !important; opacity: 1 !important; }
  .btn::after { display: none !important; }
  .stage__badge::before { animation: none !important; }
}