/* 烧心杯 UI · 主页面入口：主视觉 sx-hero / 导航 sx-nav / 入口卡 sx-entry / 视口动画 / 路由页面 */

/* ============ 主视觉 ============ */
.sx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--sx-topbar-h) + 24px) 0 clamp(72px, 12vh, 120px);
  background:
    radial-gradient(120% 70% at 0% 70%, color-mix(in srgb, var(--sx-gold-4) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--sx-bg) 0%, var(--sx-bg-2) 70%, var(--sx-bg) 100%);
}
/* 底部渐隐到页面底色，和下方板块无缝衔接 */
.sx-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--sx-bg)); }

.sx-hero__art { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .6s var(--sx-ease); }
.sx-hero.has-art .sx-hero__art { opacity: 1; }
.sx-hero__art picture { display: contents; }
.sx-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
/* 暖黑压暗：左→右、下→上，保证左下文字区可读 */
.sx-hero__art::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--sx-bg) 0%, color-mix(in srgb, var(--sx-bg) 75%, transparent) 28%, transparent 58%),
  linear-gradient(0deg, var(--sx-bg) 0%, color-mix(in srgb, var(--sx-bg) 70%, transparent) 30%, transparent 62%),
  linear-gradient(180deg, color-mix(in srgb, var(--sx-bg) 70%, transparent) 0%, transparent 14%); }
@media (max-width: 760px) {
  .sx-hero__art img { object-position: center top; }
  .sx-hero__art::after { background: linear-gradient(0deg, var(--sx-bg) 0%, var(--sx-bg) 18%, color-mix(in srgb, var(--sx-bg) 70%, transparent) 50%, transparent 78%); }
}

/* 光束层：视差只作用在外层，进场动画在内层，避免 transform 互相覆盖 */
.sx-hero__fx { position: absolute; inset: -4%; z-index: -1; pointer-events: none; transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 12px), 0); transition: transform .8s var(--sx-ease); }
.sx-hero__beam { position: absolute; inset: 0; transform-origin: 0% 90%; transition: opacity .6s var(--sx-ease); }
/* 有主视觉图时图里已有光束，CSS 光束降为补充光，避免两道光叠在一起 */
.sx-hero.has-art .sx-hero__beam { opacity: .3; }
.sx-hero.has-art .sx-hero__beam > i:nth-child(2) { display: none; }
.sx-hero__beam > i { position: absolute; inset: 0; display: block; }
/* 宽光幕：几何与 entry.js 的 BEAM 常量一致，光尘才会落在光束里 */
.sx-hero__beam > i:nth-child(1) {
  clip-path: polygon(0 88%, 100% -14%, 100% 50%);
  background: linear-gradient(100deg, color-mix(in srgb, var(--sx-beam) 55%, transparent) 0%, color-mix(in srgb, var(--sx-beam-2) 22%, transparent) 45%, color-mix(in srgb, var(--sx-gold-3) 6%, transparent) 100%);
  animation: sx-breathe 6s ease-in-out infinite;
}
/* 光芯 + 放射细纹（海报里的 rays） */
.sx-hero__beam > i:nth-child(2) {
  clip-path: polygon(0 89%, 100% 6%, 100% 30%);
  background:
    repeating-linear-gradient(152deg, transparent 0 46px, color-mix(in srgb, var(--sx-gold-1) 10%, transparent) 46px 48px),
    linear-gradient(100deg, color-mix(in srgb, var(--sx-gold-1) 90%, transparent) 0%, color-mix(in srgb, var(--sx-beam) 55%, transparent) 30%, color-mix(in srgb, var(--sx-beam-2) 12%, transparent) 100%);
  animation: sx-breathe 6s ease-in-out -3s infinite;
}
/* 柔光晕：沿光束轴的长椭圆，径向渐变自带模糊边，不用 filter（filter 会被 clip-path 裁硬） */
.sx-hero__beam > i:nth-child(3) {
  inset: auto -10% 12% 0; height: 50%; transform-origin: 0 100%; transform: rotate(-24deg) translateY(20%);
  background: radial-gradient(50% 50% at 30% 60%, color-mix(in srgb, var(--sx-beam) 30%, transparent), transparent 70%);
  animation: sx-breathe 6s ease-in-out -1.5s infinite;
}
/* 光源热点 */
.sx-hero__beam > i:nth-child(4) { inset: auto auto 12% -6%; width: 26%; aspect-ratio: 1; transform: translateY(50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--sx-gold-1) 85%, transparent), color-mix(in srgb, var(--sx-beam) 30%, transparent) 40%, transparent); }
.sx-hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; }

.sx-hero__inner { position: relative; z-index: 2; width: min(1200px, 100% - 48px); margin: 0 auto; }
/* 标题组：宽度跟随大标题，奖杯（可选）居中立在标题上方的留白里 */
.sx-hero__head { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
/* 奖杯下部（杯脚+底座）压在大标题后面，标题像火焰从奖杯里烧出来 */
/* 奖杯和标题都按视口高度取值，矮屏（笔记本、浏览器放大）时整组一起缩，按钮不会被挤出首屏 */
.sx-hero__head { --sx-trophy-h: clamp(150px, 50svh, 540px); }
.sx-hero__trophy { position: relative; z-index: 0; align-self: center; margin-bottom: calc(var(--sx-trophy-h) * -.4); transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 9px), 0); transition: transform .8s var(--sx-ease); }
.sx-hero__trophy .sx-trophy { --sx-trophy-h: inherit; }
.sx-hero__game, .sx-hero__title { position: relative; z-index: 1; }
.sx-hero.is-in .sx-hero__trophy .sx-trophy { animation: sx-trophy-in .9s var(--sx-ease-back) .1s both; }
@keyframes sx-trophy-in { from { opacity: 0; transform: translateY(40px) scale(.85); } }
/* 游戏 LOGO：立在奖杯右侧的留白里，底边落在大标题上沿（奖杯压在标题后的部分是 .4 倍高）；有 LOGO 后上方的小字游戏名就多余了 */
.sx-hero__logo {
  position: absolute; z-index: 0; bottom: calc(100% - var(--sx-trophy-h) * .6); left: calc(50% + var(--sx-trophy-h) * .26); height: calc(var(--sx-trophy-h) * 1.02); width: auto; max-width: none;
  pointer-events: none; user-select: none; filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--sx-bg) 80%, transparent));
  transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 14px), 0); transition: transform .8s var(--sx-ease);
}
.sx-hero__logo ~ .sx-hero__game { display: none; }
.sx-hero.is-in .sx-hero__logo { animation: sx-logo-in .8s var(--sx-ease-back) .2s both; }
@keyframes sx-logo-in { from { opacity: 0; translate: 0 30px; scale: .9; } }
/* 手机：奖杯右侧放不下，LOGO 改为居中放在奖杯上方 */
@media (max-width: 760px) {
  .sx-hero__logo { position: relative; bottom: auto; left: auto; order: -1; align-self: center; width: min(78vw, 320px); height: auto; margin-bottom: -6px; }
}
.sx-hero__game { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .5em; color: var(--sx-gold-2); text-shadow: 0 1px 6px var(--sx-bg); }
.sx-hero__title {
  margin: 0; font-weight: 900; line-height: 1; font-size: clamp(88px, min(15vw, 21svh), 196px); letter-spacing: .02em; color: var(--sx-fire-2);
  /* 轻微右倾，让字有冲劲 */
  transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -5px), 0) skewX(-7deg); transition: transform .8s var(--sx-ease);
}
/* 火焰层：同一段文字放在字后面，向上拉长的光晕 + SVG 噪声扭曲成火舌（滤镜由 entry.js 注入） */
.sx-hero__title::before {
  content: attr(aria-label); position: absolute; inset: 0; z-index: -1; pointer-events: none; white-space: nowrap;
  color: var(--sx-fire-2); transform-origin: 50% 100%;
  /* 阴影逐层上移、变暗、变虚：越往上火越淡；再经滤镜撕成一条条火舌 */
  text-shadow: 0 -.04em .02em var(--sx-fire-1), 0 -.1em .05em var(--sx-fire-2), 0 -.18em .08em var(--sx-fire-3), 0 -.28em .12em color-mix(in srgb, var(--sx-fire-3) 75%, transparent), 0 -.4em .18em color-mix(in srgb, var(--sx-fire-4) 55%, transparent);
  filter: url(#sx-fire);
  animation: sx-flame 1.6s ease-in-out infinite alternate;
}
/* 热光：字背后的橙色辉光，同时把奖杯底座压暗一点，标题更突出 */
.sx-hero__title::after {
  content: ''; position: absolute; inset: -18% -12% -10%; z-index: -2; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 60%, color-mix(in srgb, var(--sx-fire-4) 40%, transparent), color-mix(in srgb, var(--sx-bg) 35%, transparent) 60%, transparent 75%);
  animation: sx-breathe 2.4s ease-in-out infinite;
}
.sx-hero__char {
  display: inline-block; color: transparent;
  /* 字面：顶部白热，向下渐暗 */
  background: linear-gradient(180deg, var(--sx-fire-1) 8%, var(--sx-fire-2) 38%, var(--sx-fire-3) 66%, var(--sx-fire-4) 100%);
  -webkit-background-clip: text; background-clip: text;
  /* 描边不用 text-stroke：雅黑笔画轮廓互相重叠，text-stroke 会把字内部的重叠线也描出来。
     改用四向零模糊投影只描外轮廓，再叠侧面厚度和落地阴影 */
  filter: drop-shadow(.014em 0 0 var(--sx-fire-5)) drop-shadow(-.014em 0 0 var(--sx-fire-5)) drop-shadow(0 .014em 0 var(--sx-fire-5)) drop-shadow(0 -.014em 0 var(--sx-fire-5))
    drop-shadow(0 .03em 0 var(--sx-fire-4)) drop-shadow(0 .02em 0 var(--sx-fire-5)) drop-shadow(0 .06em .1em color-mix(in srgb, var(--sx-bg) 85%, transparent));
}
@keyframes sx-flame { 0% { transform: scaleY(1); opacity: .85; } 40% { transform: scaleY(1.06) skewX(1deg); opacity: 1; } 100% { transform: scaleY(1.02) skewX(-1deg); opacity: .9; } }
.sx-hero__sub { margin: 14px 0 0; font-size: clamp(18px, 2.2vw, 26px); font-weight: 800; letter-spacing: .12em; color: var(--sx-gold-2); }
.sx-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }

.sx-hero__prize {
  position: relative; overflow: hidden; display: inline-flex; align-items: baseline; gap: 10px;
  padding: 8px 22px 8px 18px; border-radius: 999px; color: var(--sx-on-gold); background: var(--sx-grad-gold);
  box-shadow: inset 0 1px 0 var(--sx-gold-1), inset 0 -2px 0 var(--sx-gold-4), var(--sx-glow-gold);
}
.sx-hero__prize-label { font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.sx-hero__prize-num { font-family: var(--sx-font-num); font-size: 30px; line-height: 1.1; letter-spacing: .02em; }
.sx-hero__prize-cur { font-family: var(--sx-font-num); font-size: 18px; }
.sx-hero__prize::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--sx-gold-1) 80%, transparent) 50%, transparent 65%); transform: translateX(-110%); animation: sx-shine 1s var(--sx-ease) 1.1s both; }

.sx-hero__status { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--sx-text-2); }
.sx-hero__status b { color: var(--sx-text); font-weight: 700; }
.sx-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-cyan); box-shadow: 0 0 0 0 var(--sx-cyan); animation: sx-pulse 1.6s ease-out infinite; }
.sx-hero__status.is-live b { color: var(--sx-cyan); }
.sx-hero__cd { display: inline-flex; align-items: baseline; gap: 4px; }
.sx-hero__cd span { font-family: var(--sx-font-num); font-size: 22px; color: var(--sx-text); min-width: 1.4em; padding: 0 4px; text-align: center; border-radius: var(--sx-r-sm); background: var(--sx-surface-2); box-shadow: inset 0 0 0 1px var(--sx-line); font-variant-numeric: tabular-nums; }
.sx-hero__cd small { font-size: 12px; color: var(--sx-text-3); margin-right: 4px; }
.sx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (min-width: 761px) and (max-height: 800px) {
  .sx-hero { padding-top: calc(var(--sx-topbar-h) + 8px); padding-bottom: 40px; }
  .sx-hero__sub { margin-top: 8px; }
  .sx-hero__meta, .sx-hero__actions { margin-top: 16px; }
}

.sx-hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 18px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border: 0; background: none; color: var(--sx-gold-2); cursor: pointer; border-radius: 50%; opacity: .75; transition: opacity var(--sx-t), transform var(--sx-t-fast); }
.sx-hero__scroll:hover { opacity: 1; }
.sx-hero__scroll:active { transform: scale(.96); }
.sx-hero__scroll svg { animation: sx-bob 1.8s ease-in-out infinite; }

/* 进场编排：光束扫入 0-.55s → 逐字弹入 .25s 起 → 其余 .6s 起淡入上移，全部 ≤1.2s */
.sx-hero.is-in .sx-hero__beam { animation: sx-beam-in .55s var(--sx-ease) both; }
/* 火焰在字落定后再窜起来；backwards 只管延迟期，结束后交还给闪烁动画 */
.sx-hero.is-in .sx-hero__title::before { animation: sx-flame 1.6s ease-in-out infinite alternate, sx-flame-in .7s var(--sx-ease) .55s backwards; }
@keyframes sx-flame-in { from { opacity: 0; transform: scaleY(.3); } }
.sx-hero.is-in .sx-hero__char { animation: sx-char-in .42s var(--sx-ease-back) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
.sx-hero.is-in .sx-hero__game, .sx-hero.is-in .sx-hero__sub, .sx-hero.is-in .sx-hero__meta, .sx-hero.is-in .sx-hero__actions, .sx-hero.is-in .sx-hero__scroll { animation: sx-rise .45s var(--sx-ease) both; }
.sx-hero.is-in .sx-hero__game { animation-delay: .15s; }
.sx-hero.is-in .sx-hero__sub { animation-delay: .55s; }
.sx-hero.is-in .sx-hero__meta { animation-delay: .65s; }
.sx-hero.is-in .sx-hero__actions { animation-delay: .72s; }
.sx-hero.is-in .sx-hero__scroll { animation-delay: .75s; }

@keyframes sx-beam-in { from { opacity: 0; transform: translate(-18%, 14%) scaleX(.2); } }
@keyframes sx-char-in { from { opacity: 0; transform: translateY(45%) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes sx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sx-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes sx-shine { to { transform: translateX(110%); } }
@keyframes sx-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@keyframes sx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sx-cyan) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* ============ 导航 ============ */
.sx-nav { position: fixed; z-index: 40; inset: 0 0 auto; height: var(--sx-topbar-h); transition: opacity var(--sx-t); }
/* 毛玻璃放在伪元素上：backdrop-filter 会让 fixed 子元素（手机 Tab 栏）失去视口定位 */
.sx-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--sx-t); background: color-mix(in srgb, var(--sx-bg) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sx-line); }
.sx-nav.is-solid::before { opacity: 1; }
.sx-nav__in { height: 100%; width: min(1200px, 100% - 32px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sx-nav__brand { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 900; font-size: 18px; letter-spacing: .08em; color: var(--sx-text); text-decoration: none; }
.sx-nav__brand::before { content: ''; width: 10px; height: 10px; transform: rotate(45deg); background: var(--sx-grad-gold); }
.sx-nav__links { position: relative; display: flex; gap: 4px; }
.sx-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--sx-r-sm); background: none; color: var(--sx-text-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: color var(--sx-t), background var(--sx-t), transform var(--sx-t-fast), filter var(--sx-t-fast); }
.sx-nav__link:hover { color: var(--sx-text); background: color-mix(in srgb, var(--sx-gold-2) 8%, transparent); }
.sx-nav__link:active { transform: scale(.96); filter: brightness(1.2); }
.sx-nav__link[aria-disabled='true'] { opacity: .4; pointer-events: none; }
.sx-nav__link.is-active { color: var(--sx-gold-1); }
.sx-nav__icon { display: none; }
.sx-nav__icon svg { display: block; width: 22px; height: 22px; }
.sx-nav__bar { position: absolute; left: 0; bottom: -7px; height: 2px; width: var(--w, 0); border-radius: 2px; background: var(--sx-grad-gold); box-shadow: var(--sx-glow-beam); transform: translateX(var(--x, 0)); opacity: 0; transition: transform var(--sx-t-slow) var(--sx-ease), width var(--sx-t-slow) var(--sx-ease), opacity var(--sx-t); }
.sx-nav__bar.is-on { opacity: 1; }

@media (max-width: 720px) {
  .sx-nav__links { position: fixed; inset: auto 0 0; z-index: 41; gap: 0; justify-content: space-around; height: calc(60px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--sx-bg) 92%, transparent); border-top: 1px solid var(--sx-line); }
  .sx-nav__link { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 0 2px; font-size: 11px; }
  .sx-nav__link:hover { background: none; }
  .sx-nav__icon { display: block; transition: transform var(--sx-t) var(--sx-ease-back); }
  .sx-nav__link.is-active .sx-nav__icon { transform: translateY(-2px); }
  .sx-nav__bar { top: -1px; bottom: auto; width: 24px; transform: translateX(calc(var(--x, 0px) + var(--w, 0px) / 2 - 12px)); }
  .sx-has-tabbar body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sx-hero { min-height: 88svh; padding-bottom: 72px; }
  .sx-hero__game { letter-spacing: .35em; font-size: 12px; }
  .sx-hero__head { --sx-trophy-h: clamp(170px, calc(88svh - 440px), 300px); }
  .sx-hero__prize-num { font-size: 26px; }
  .sx-hero__actions > * { flex: 1 1 140px; }
}
.sx-in-view .sx-nav { opacity: 0; pointer-events: none; }

/* ============ 入口卡 ============ */
.sx-entry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sx-gap); width: min(1200px, 100% - 32px); margin: 0 auto; }
.sx-entry__card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px;
  min-height: 88px; padding: 18px 18px; border-radius: var(--sx-r); text-align: left; color: var(--sx-text); text-decoration: none; font: inherit; cursor: pointer;
  border: 1px solid var(--sx-line-strong); background: linear-gradient(160deg, var(--sx-surface-2), var(--sx-surface) 60%);
  transition: transform var(--sx-t-fast), border-color var(--sx-t), box-shadow var(--sx-t), filter var(--sx-t-fast);
}
/* 光泽扫过：hover 时一条斜向高光从左划到右 */
.sx-entry__card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--sx-gold-1) 14%, transparent) 50%, transparent 70%); transform: translateX(-120%); }
.sx-entry__card:hover { border-color: var(--sx-gold-2); box-shadow: var(--sx-glow-gold); }
.sx-entry__card:hover::before { transform: translateX(120%); transition: transform .7s var(--sx-ease); }
.sx-entry__card:active { transform: scale(.96); filter: brightness(1.15); }
.sx-entry__card:disabled, .sx-entry__card[aria-disabled='true'] { opacity: .45; pointer-events: none; filter: grayscale(.6); }
.sx-entry__icon { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--sx-gold-1); background: color-mix(in srgb, var(--sx-gold-3) 18%, transparent); box-shadow: inset 0 0 0 1px var(--sx-line-strong); transition: transform var(--sx-t) var(--sx-ease-back); }
.sx-entry__icon svg { width: 22px; height: 22px; display: block; }
.sx-entry__title { font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.sx-entry__desc { grid-column: 2; font-size: 12px; color: var(--sx-text-3); }
.sx-entry__arrow { grid-row: 1 / span 2; grid-column: 3; color: var(--sx-gold-3); transition: transform var(--sx-t) var(--sx-ease), color var(--sx-t); }
.sx-entry__arrow svg { display: block; width: 18px; height: 18px; }
.sx-entry__card:hover .sx-entry__icon { transform: translateY(-3px) rotate(-6deg); }
.sx-entry__card:hover .sx-entry__arrow { transform: translateX(4px); color: var(--sx-gold-1); }
@media (max-width: 900px) { .sx-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .sx-entry { gap: 10px; }
  .sx-entry__card { grid-template-columns: 1fr auto; padding: 14px; min-height: 96px; gap: 8px; }
  .sx-entry__icon { grid-row: auto; width: 36px; height: 36px; }
  .sx-entry__title { grid-column: 1; font-size: 15px; }
  .sx-entry__desc { display: none; }
  .sx-entry__arrow { grid-row: 1; grid-column: 2; align-self: start; }
}

/* ============ 进入视口 ============ */
/* 只在 JS 生效后隐藏，避免脚本失败时内容永远不可见 */
.sx-js [data-reveal], .sx-js [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--sx-ease), transform .6s var(--sx-ease); transition-delay: calc(var(--sx-i, 0) * 70ms); }
.sx-js [data-reveal].is-revealed, .sx-js [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }

/* ============ 路由页面 ============ */
.sx-home { transition: transform var(--sx-t-slow) var(--sx-ease), filter var(--sx-t-slow) var(--sx-ease); }
.sx-home.is-behind { transform: translateX(-6%); filter: brightness(.45); }
.sx-in-view, .sx-in-view body { overflow: hidden; }
.sx-view__page { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--sx-bg); outline: none; box-shadow: -20px 0 50px color-mix(in srgb, var(--sx-bg) 70%, transparent); }
.sx-view__page.is-enter { animation: sx-page-in var(--sx-t-slow) var(--sx-ease) both; }
.sx-view__page.is-leave { animation: sx-page-out var(--sx-t-slow) var(--sx-ease) both; pointer-events: none; }
.sx-view__page.is-under { animation: sx-page-under var(--sx-t-slow) var(--sx-ease) both; }
@keyframes sx-page-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sx-page-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes sx-page-under { from { transform: translateX(-6%); filter: brightness(.45); } to { transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .sx-hero__fx { transform: none; }
  .sx-hero__title { transform: skewX(-7deg); }
  .sx-hero__beam > i, .sx-hero__scroll svg, .sx-hero__dot, .sx-hero__title::before, .sx-hero__title::after { animation: none !important; }
  .sx-home.is-behind { transform: none; }
  .sx-js [data-reveal], .sx-js [data-reveal-stagger] > * { transform: none; }
}