@charset "utf-8";
/* =========================================================
   神域官网 · 两大区块轮播
   RING  .sy--ring  sm2 层  smps8/1-10.gif  (400x600 竖图)
   WIDE  .sy--wide  sm3 层  smps8/g1-g3.gif (1240x650)
   ★ 铁律：当前突出显示的那张 100% 原始像素、水平居中、上边距 100px；
     悬浮特效只允许位移/发光/扫光/滤镜，禁止任何 scale 缩放。
   ========================================================= */

/* 让 conic-gradient 的角度可被动画（Edge/Chrome 支持） */
@property --syA { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------- 公共 ---------- */
.sy {
    position: absolute; top: 100px; left: 0; width: 100%;
    z-index: 20;
}
.sy, .sy * { box-sizing: border-box; }
.sy ul { list-style: none; margin: 0; padding: 0; }
.sy img { display: block; border: 0; -webkit-user-drag: none; }
/* ★ 图片一律按原始像素渲染，绝不拉伸/裁切/缩放 */
.sy-slide img { width: auto !important; height: auto !important; max-width: none !important; object-fit: fill; }

/* ---------- 箭头（smps8/1.png 左、2.png 右，49x80） ---------- */
.sy-arrow {
    position: absolute; width: 49px; height: 80px; z-index: 80;
    cursor: pointer; padding: 0; border: 0; background: none;
    opacity: 1; filter: brightness(1);
    transition: transform .25s ease;
    animation: syArrowGlow 1.7s ease-in-out infinite;
}
.sy-arrow img { position: relative; z-index: 2; }
/* 箭头外圈光晕（常驻呼吸） */
.sy-arrow:before {
    content: ''; position: absolute; left: 50%; top: 50%; z-index: 1;
    width: 104px; height: 146px; margin: -73px 0 0 -52px; border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,214,130,.55), rgba(255,168,40,.24) 56%, transparent 76%);
    animation: syArrowHalo 1.7s ease-in-out infinite;
}
.sy-arrow:hover { opacity: 1; transform: scale(1.16); }
.sy-arrow.sy-dis { opacity: .2; cursor: default; transform: none; animation: none; }
.sy-arrow.sy-dis:before { display: none; }
.sy-hide { display: none !important; }

@keyframes syArrowGlow {
    0%,100% { filter: brightness(1) drop-shadow(0 0 6px rgba(255,214,130,.95)) drop-shadow(0 0 16px rgba(240,160,45,.7)) drop-shadow(0 4px 10px rgba(0,0,0,.9)); }
    50%     { filter: brightness(1) drop-shadow(0 0 14px rgba(255,240,185,1)) drop-shadow(0 0 34px rgba(255,185,65,1)) drop-shadow(0 4px 10px rgba(0,0,0,.9)); }
}
/* 光晕常亮（不再压暗），只保留呼吸缩放 */
@keyframes syArrowHalo {
    0%,100% { opacity: 1; transform: scale(.88); }
    50%     { opacity: 1; transform: scale(1.16); }
}


/* =========================================================
   RING · 环形舞台（sm2 / 1-10.gif / 400x600）
   ========================================================= */
/* 右侧固定客服浮条 #Floatingbars（z-index:1000000，x 1762~1928）原本会把右箭头整块盖住、
   完全点不到。抬到浮条之上即可。页面内除它没有其它 fixed 元素；轮播图最右只到 x=1689、
   分页居中不宽，都不会压到浮条，唯一重叠的就是箭头本身。 */
.sy--ring { z-index: 1000001; }

.sy--ring .sy-stage {
    position: relative; width: 1920px; height: 600px; margin: 0 auto;
    perspective: 1700px;
}
.sy--ring .sy-slide {
    position: absolute; left: 50%; top: 0; width: 400px; height: 600px; margin-left: -200px;
    transform-origin: 50% 50%;
    transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
/* 图片外框：悬浮特效全在这一层，与 JS 定位 transform 分离，互不覆盖 */
.sy--ring .sy-box {
    position: relative; width: 400px; height: 600px; overflow: hidden;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, filter .45s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,.75);
}
.sy--ring .sy-slide.is-on .sy-box { z-index: 5; }

/* 默认金边 */
.sy--ring .sy-box:after {
    content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    border: 1px solid rgba(232,180,90,.35);
    transition: border-color .4s ease, box-shadow .4s ease;
}
.sy--ring .sy-slide.is-on .sy-box:after {
    border: 2px solid rgba(232,180,90,.95);
    box-shadow: inset 0 0 46px rgba(232,180,90,.22), 0 0 40px rgba(232,180,90,.35);
}

/* --- 悬浮：旋转流光边框 --- */
.sy--ring .sy-box .sy-spin {
    position: absolute; inset: -3px; z-index: 7; pointer-events: none; opacity: 0;
    padding: 2px; border-radius: 4px;
    background: conic-gradient(from var(--syA), #e8b45a, rgba(255,230,176,.15) 22%, transparent 34%,
                               transparent 62%, #ffe6b0 74%, rgba(232,180,90,.15) 86%, #e8b45a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    transition: opacity .35s ease;
}
.sy--ring .sy-box:hover .sy-spin { opacity: 1; animation: sySpin 2.2s linear infinite; }
@keyframes sySpin { to { --syA: 360deg; } }

/* --- 悬浮：斜向扫光 --- */
.sy--ring .sy-box .sy-shine {
    position: absolute; top: -60%; left: 0; width: 60%; height: 220%; z-index: 8;
    pointer-events: none; transform: translateX(-260%) rotate(22deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 35%,
                                rgba(255,240,205,.55) 50%, rgba(255,255,255,.08) 65%, transparent);
    filter: blur(2px);
}
.sy--ring .sy-box:hover .sy-shine { animation: syShine .9s cubic-bezier(.3,.1,.2,1); }
@keyframes syShine { from { transform: translateX(-260%) rotate(22deg); } to { transform: translateX(420%) rotate(22deg); } }

/* --- 悬浮：能量脉冲环 --- */
.sy--ring .sy-box .sy-pulse {
    position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px;
    z-index: 7; pointer-events: none; border-radius: 50%; opacity: 0;
    border: 2px solid rgba(255,214,130,.9);
    box-shadow: 0 0 24px rgba(232,180,90,.7), inset 0 0 24px rgba(232,180,90,.45);
}
.sy--ring .sy-box:hover .sy-pulse { animation: syPulse 1.5s ease-out infinite; }
@keyframes syPulse {
    0%   { opacity: .85; transform: scale(.35); }
    70%  { opacity: .18; transform: scale(2.5); }
    100% { opacity: 0;   transform: scale(3.1); }
}

/* --- 悬浮：四角括号展开 --- */
.sy--ring .sy-box .sy-c { position: absolute; width: 30px; height: 30px; z-index: 9; pointer-events: none;
    opacity: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1); }
.sy--ring .sy-box .sy-c.tl { left: 8px;  top: 8px;    border-left: 2px solid #ffd68a;  border-top: 2px solid #ffd68a;    transform: translate(-10px,-10px); }
.sy--ring .sy-box .sy-c.tr { right: 8px; top: 8px;    border-right: 2px solid #ffd68a; border-top: 2px solid #ffd68a;    transform: translate(10px,-10px); }
.sy--ring .sy-box .sy-c.bl { left: 8px;  bottom: 8px; border-left: 2px solid #ffd68a;  border-bottom: 2px solid #ffd68a; transform: translate(-10px,10px); }
.sy--ring .sy-box .sy-c.br { right: 8px; bottom: 8px; border-right: 2px solid #ffd68a; border-bottom: 2px solid #ffd68a; transform: translate(10px,10px); }
.sy--ring .sy-box:hover .sy-c { opacity: 1; transform: translate(0,0); }

/* --- 悬浮：整体上浮 + 发光 + 提亮（不缩放） --- */
.sy--ring .sy-slide.is-on .sy-box:hover {
    transform: translateY(-14px);
    box-shadow: 0 26px 70px rgba(0,0,0,.9), 0 0 60px rgba(232,180,90,.55);
    filter: brightness(1.1) saturate(1.16) contrast(1.04);
}

/* 图注编号 */
.sy--ring .sy-cap {
    position: absolute; left: 0; right: 0; bottom: -34px; text-align: center;
    font: 700 13px/1 Arial, "Microsoft YaHei"; letter-spacing: 3px;
    color: rgba(232,180,90,.55); opacity: 0; transition: opacity .4s ease, color .4s ease;
}
.sy--ring .sy-slide.is-on .sy-cap { opacity: 1; }
.sy--ring .sy-slide.is-on:hover .sy-cap { color: #ffe6b0; }

/* 底部横条分页 */
.sy--ring .sy-dash { display: flex; gap: 9px; justify-content: center; margin-top: 76px; }
.sy--ring .sy-dash i {
    width: 24px; height: 4px; border-radius: 2px; cursor: pointer;
    background: rgba(255,255,255,.2); transition: all .3s ease;
}
.sy--ring .sy-dash i:hover { background: rgba(255,255,255,.5); }
.sy--ring .sy-dash i.on {
    width: 44px; background: linear-gradient(90deg,#e8b45a,#ffe6b0);
    box-shadow: 0 0 12px rgba(232,180,90,.8);
}
/* 这层箭头贴左右两端 */
.sy--ring .sy-prev { left: 130px;  top: 260px; }
.sy--ring .sy-next { right: 130px; top: 260px; }


/* =========================================================
   WIDE · 宽幅典藏（sm3 / g1-g3.gif / 1240x650）
   ========================================================= */
.sy--wide .sy-stage {
    position: relative; width: 1240px; height: 650px; margin: 0 auto;
}
.sy--wide .sy-slide {
    position: absolute; left: 0; top: 0; width: 1240px; height: 650px;
    opacity: 0; transition: opacity .8s ease;
}
.sy--wide .sy-slide.is-on { opacity: 1; z-index: 5; }
.sy--wide .sy-box {
    position: relative; width: 1240px; height: 650px; overflow: hidden;
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, filter .5s ease;
    box-shadow: 0 16px 56px rgba(0,0,0,.8);
}
.sy--wide .sy-box:after {
    content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    border: 1px solid rgba(232,180,90,.32);
    transition: border-color .4s ease, box-shadow .4s ease;
}
.sy--wide .sy-slide.is-on .sy-box:after {
    border: 2px solid rgba(232,180,90,.9);
    box-shadow: inset 0 0 70px rgba(232,180,90,.18), 0 0 46px rgba(232,180,90,.32);
}

/* --- 悬浮：旋转流光边框 --- */
.sy--wide .sy-box .sy-spin {
    position: absolute; inset: -3px; z-index: 7; pointer-events: none; opacity: 0;
    padding: 2px; border-radius: 4px;
    background: conic-gradient(from var(--syA), #e8b45a, rgba(255,230,176,.2) 20%, transparent 32%,
                               transparent 60%, #ffe6b0 72%, rgba(232,180,90,.2) 88%, #e8b45a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    transition: opacity .35s ease;
}
.sy--wide .sy-box:hover .sy-spin { opacity: 1; animation: sySpin 2.6s linear infinite; }

/* --- 悬浮：宽幅扫光（角度更平，适合横图） --- */
.sy--wide .sy-box .sy-shine {
    position: absolute; top: -80%; left: 0; width: 42%; height: 260%; z-index: 8;
    pointer-events: none; transform: translateX(-320%) rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 34%,
                                rgba(255,242,210,.5) 50%, rgba(255,255,255,.06) 66%, transparent);
    filter: blur(3px);
}
.sy--wide .sy-box:hover .sy-shine { animation: syShineW 1.05s cubic-bezier(.3,.1,.2,1); }
@keyframes syShineW { from { transform: translateX(-320%) rotate(16deg); } to { transform: translateX(560%) rotate(16deg); } }

/* --- 悬浮：上下双向扫描线 --- */
.sy--wide .sy-box .sy-scan {
    position: absolute; left: 0; right: 0; height: 2px; z-index: 8; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,214,130,.95), transparent);
    box-shadow: 0 0 18px rgba(232,180,90,.9);
}
.sy--wide .sy-box .sy-scan.s1 { top: 0; }
.sy--wide .sy-box .sy-scan.s2 { bottom: 0; }
.sy--wide .sy-box:hover .sy-scan.s1 { animation: syScan1 1.6s ease-in-out infinite; }
.sy--wide .sy-box:hover .sy-scan.s2 { animation: syScan2 1.6s ease-in-out infinite; }
@keyframes syScan1 { 0%{opacity:0;transform:translateY(0)} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0;transform:translateY(650px)} }
@keyframes syScan2 { 0%{opacity:0;transform:translateY(0)} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0;transform:translateY(-650px)} }

/* --- 悬浮：四角括号 --- */
.sy--wide .sy-box .sy-c { position: absolute; width: 44px; height: 44px; z-index: 9; pointer-events: none;
    opacity: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1); }
.sy--wide .sy-box .sy-c.tl { left: 10px;  top: 10px;    border-left: 3px solid #ffd68a;  border-top: 3px solid #ffd68a;    transform: translate(-14px,-14px); }
.sy--wide .sy-box .sy-c.tr { right: 10px; top: 10px;    border-right: 3px solid #ffd68a; border-top: 3px solid #ffd68a;    transform: translate(14px,-14px); }
.sy--wide .sy-box .sy-c.bl { left: 10px;  bottom: 10px; border-left: 3px solid #ffd68a;  border-bottom: 3px solid #ffd68a; transform: translate(-14px,14px); }
.sy--wide .sy-box .sy-c.br { right: 10px; bottom: 10px; border-right: 3px solid #ffd68a; border-bottom: 3px solid #ffd68a; transform: translate(14px,14px); }
.sy--wide .sy-box:hover .sy-c { opacity: 1; transform: translate(0,0); }

/* --- 悬浮：整体上浮（不缩放） --- */
.sy--wide .sy-slide.is-on .sy-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 34px 90px rgba(0,0,0,.92), 0 0 70px rgba(232,180,90,.5);
    filter: brightness(1.08) saturate(1.14) contrast(1.03);
}

/* 底部方块分页 */
.sy--wide .sy-sq { display: flex; gap: 12px; justify-content: center; margin-top: 58px; }
.sy--wide .sy-sq i {
    width: 34px; height: 6px; border-radius: 3px; cursor: pointer;
    background: rgba(255,255,255,.18); transition: all .3s ease;
}
.sy--wide .sy-sq i:hover { background: rgba(255,255,255,.45); }
.sy--wide .sy-sq i.on {
    width: 52px; background: linear-gradient(90deg,#e8b45a,#ffe6b0);
    box-shadow: 0 0 12px rgba(232,180,90,.8);
}
/* 这层箭头在画面外侧 */
.sy--wide .sy-prev { left: 50%; margin-left: -750px; top: 285px; }
.sy--wide .sy-next { left: 50%; margin-left: 701px;  top: 285px; }


/* =========================================================
   GRID · 装备展示静态网格（sm2 / 1-10.gif / 360x510）
   4 列 × 3 行（4+4+2），最后一行水平居中。
   不做轮播：根节点故意不带 `sy` 类，JS 的 boot() 不会实例化它，
   但仍保留 `sy--ring` 复用上面整段悬浮特效（一个字没改）。
   ========================================================= */
.sy--grid, .sy--grid * { box-sizing: border-box; }
.sy--grid ul { list-style: none; margin: 0; padding: 0; }
.sy--grid img { display: block; border: 0; -webkit-user-drag: none; }

/* 根容器：没有箭头了，不必再压过 #Floatingbars（网格右边缘 1746 < 浮条 1762，本就不重叠） */
.sy--ring.sy--grid {
    position: absolute; left: 0; top: 220px; width: 1920px; z-index: 20;
}
/* 列距 44 → 一行 4 张 = 4*360 + 3*44 = 1572，居中后左右各 174，右边缘 1746 不碰浮条 */
.sy--ring.sy--grid .sy-stage {
    position: static; width: 1572px; height: auto; margin: 0 auto; perspective: none;
}
.sy--ring.sy--grid .sy-stage > ul {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 48px 44px;                     /* 行距 48 / 列距 44 */
}
.sy--ring.sy--grid .sy-slide {
    position: relative; left: auto; top: auto;
    width: 360px; height: 510px; margin: 0;
    transform: none; opacity: 1; visibility: visible;
}
.sy--ring.sy--grid .sy-box { width: 360px; height: 510px; }

/* 网格里每张都是主角：统一给高亮金边（ring 里只有中心那张 .is-on 才有） */
.sy--ring.sy--grid .sy-box:after {
    border: 2px solid rgba(232,180,90,.95);
    box-shadow: inset 0 0 46px rgba(232,180,90,.22), 0 0 40px rgba(232,180,90,.35);
}
/* 上浮+发光：原规则挂在 .is-on 上，静态网格没有该状态，这里补齐（数值与原来一致） */
.sy--ring.sy--grid .sy-box:hover {
    transform: translateY(-14px);
    box-shadow: 0 26px 70px rgba(0,0,0,.9), 0 0 60px rgba(232,180,90,.55);
    filter: brightness(1.1) saturate(1.16) contrast(1.04);
}
.sy--ring.sy--grid .sy-slide:hover { z-index: 5; }
.sy--ring.sy--grid .sy-slide:hover .sy-cap { opacity: 1; color: #ffe6b0; }

/* .sm2 原本固定 1920x900 + overflow:hidden，装不下 3 行（100 + 510*3 + 48*2 + 60 ≈ 1790）。
   ★ 背景图一律 `background-size: auto` —— 按图片原始像素显示，绝不拉伸/压缩变形。
     （当前 sm2.jpg 已换成 1920x1790，正好铺满；以后再换任意尺寸都不会变形。）
     第二层渐变只是垫底用，防止图片比层矮时露出硬切的白/黑边，
     其起点色取 sm2.jpg 最后一行平均色 #3a2a20，衔接才不会有跳变。 */
.sm2 {
    height: 1900px;
    background-color: #3a2a20;
    background-image: url(../images/sm2.jpg),
                      linear-gradient(to bottom, #3a2a20 0%, #0b0908 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left top;
    background-size: auto, 100% 100%;
}


/* =========================================================
   COLS · 宽幅静态单列（sm3 / g1-g3.gif / 1240x650）
   每行一张，共 3 行，水平居中，行距 80px。
   不做轮播：根节点故意不带 `sy` 类，JS 的 boot() 不会实例化它，
   但仍保留 `sy--wide` 复用上面整段悬浮特效（一个字没改）。
   ========================================================= */
.sy--cols, .sy--cols * { box-sizing: border-box; }
.sy--cols ul { list-style: none; margin: 0; padding: 0; }
.sy--cols img { display: block; border: 0; -webkit-user-drag: none; }
/* 图片依旧按原始像素渲染，绝不拉伸/缩放 */
.sy--cols .sy-slide img { width: auto !important; height: auto !important; max-width: none !important; }

.sy--wide.sy--cols {
    position: absolute; left: 0; top: 100px; width: 1920px; z-index: 20;
}
.sy--wide.sy--cols .sy-stage {
    position: static; width: 1240px; height: auto; margin: 0 auto;
}
.sy--wide.sy--cols .sy-stage > ul { display: block; }
.sy--wide.sy--cols .sy-slide {
    position: relative; left: auto; top: auto;
    width: 1240px; height: 650px; margin: 0 0 80px;
    opacity: 1; visibility: visible; transition: none;
}
.sy--wide.sy--cols .sy-slide:last-child { margin-bottom: 0; }

/* 每张都是主角：统一给高亮金边（轮播时只有 .is-on 那张才有） */
.sy--wide.sy--cols .sy-box:after {
    border: 2px solid rgba(232,180,90,.9);
    box-shadow: inset 0 0 70px rgba(232,180,90,.18), 0 0 46px rgba(232,180,90,.32);
}
/* 上浮+发光：原规则挂在 .is-on 上，静态没有该状态，这里补齐（数值与原来一致） */
.sy--wide.sy--cols .sy-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 34px 90px rgba(0,0,0,.92), 0 0 70px rgba(232,180,90,.5);
    filter: brightness(1.08) saturate(1.14) contrast(1.03);
}
.sy--wide.sy--cols .sy-slide:hover { z-index: 5; }
.sy--wide.sy--cols .sy-slide:hover .sy-cap { color: #ffe6b0; }


.sm3 {
    height: 1200px;
    background-color: #31241b;
    background-image: url(../images/sm3.jpg),
                      linear-gradient(to bottom, #31241b 0%, #0b0908 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left 1000px;
    background-size: auto, 100% 200px;
}

/* --- 宽幅轮播：图下方编号（与图注对齐，避免压到分页） --- */
.sy--wide .sy-cap {
    position: absolute; left: 0; right: 0; bottom: -34px; text-align: center;
    font: 700 15px/1 Arial, "Microsoft YaHei"; letter-spacing: 5px;
    color: rgba(255,214,130,.88); opacity: 0; text-shadow: 0 2px 8px rgba(0,0,0,.9);
    transition: opacity .4s ease, color .4s ease;
}
.sy--wide .sy-slide.is-on .sy-cap { opacity: 1; }
.sy--wide .sy-slide.is-on:hover .sy-cap { color: #ffe6b0; }
/* 切换瞬间未加载完的 5MB 大图不至于闪白 */
.sy--wide .sy-box { background: #17100c; }

/* ---------- sm1 循环滚动图压暗（v2）
   ★ 30% 压暗只作用于图片本身（filter），不再盖背景图 —— 否则 sm1/sm2 背景出现明暗断层 ---------- */
.sm1-mask { position: relative; }
.sm1-mask .img-ticker img { filter: brightness(.7); }

/* ---------- 四边渐变遮罩（v2）：只盖图片高度带（素材统一 268x402 顶对齐 → 层高 402），
   左右各挡 ~27%（约520px）黑度 90%；上边黑度 50% / 下边黑度 75%（2026-09-28 用户指定：上半边别太黑、下半边稍黑）。
   层不再延伸到条带底边，条带下部 198px 空隙背景保持原亮度，与 sm2 交界无断层 ---------- */
.sm1-mask:before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; height: 402px; z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(90deg,  rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 10%, rgba(0,0,0,.28) 19%, transparent 27%),
        linear-gradient(-90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 10%, rgba(0,0,0,.28) 19%, transparent 27%),
        linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.26) 8%,  rgba(0,0,0,.1) 15%, transparent 21%),
        linear-gradient(0deg,   rgba(0,0,0,.75) 0%, rgba(0,0,0,.42) 8%, rgba(0,0,0,.18) 15%, transparent 21%);
}