@charset "utf-8";
/* =========================================================
   泰坦沉默 · sm4 层「gl 双图轮播」
   素材：smps8/gl/1.gif (863x560) 、smps8/gl/2.gif (1092x649)
   箭头：images/prev.png / images/next.png (74x74)
   ★ 铁律：图片 100% 原始像素渲染，绝不缩放（width/height auto + max-width:none）；
     水平居中；上边距 80px。
   ★ 两张图尺寸不同，所以「垂直居中」会破坏上边距 80px 的要求，
     这里统一 top:80px 顶对齐；容器高 800，最高图底 80+649=729，不会裁切。
   ★ 悬浮/进出场特效一律只做位移、透明度、发光、滤镜，不含任何 scale 缩放。
   本文件为独立新增，未改动 css.css。
   ========================================================= */

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

/* ---------- 公共 ---------- */
.glc {
    position: absolute; left: 0; top: 0; width: 1920px; height: 800px;
    z-index: 20;
}
.glc, .glc * { box-sizing: border-box; }
.glc ul { list-style: none; margin: 0; padding: 0; }
.glc img { display: block; border: 0; -webkit-user-drag: none; }

/* 舞台：纯定位用，不参与视觉 */
.glc-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 800px; }

/* 单张：满宽 flex 行 → 内部靠 justify-content:center 水平居中 */
.glc-slide {
    position: absolute; left: 0; right: 0; top: 80px;      /* ★ 上边距 80px */
    display: flex; justify-content: center;                 /* ★ 水平居中 */
    opacity: 0; pointer-events: none;
    transform: translateY(16px);
    transition: opacity .78s ease, transform .88s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.glc-slide.is-on { opacity: 1; pointer-events: auto; z-index: 5; transform: translateY(0); }

/* 图片外框：尺寸完全由图片撑开，特效都挂在这一层 */
.glc-box {
    position: relative; flex: 0 0 auto;
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, filter .5s ease;
}

/* ★ 绝不缩放：原图像素 1:1 */
.glc-box > img {
    position: relative; z-index: 2;
    width: auto !important; height: auto !important; max-width: none !important;
    object-fit: fill;
}

/* ---------- 背后呼吸光晕（让图不孤零零） ---------- */
.glc-halo {
    position: absolute; inset: -78px -62px; z-index: 1; pointer-events: none;
    background: radial-gradient(closest-side,
                rgba(255,198,104,.26), rgba(255,150,44,.13) 56%, rgba(255,120,20,0) 80%);
    filter: blur(4px);
    animation: glcBreathe 4.6s ease-in-out infinite;
}
@keyframes glcBreathe {
    0%, 100% { opacity: .72; transform: scale(.985); }
    50%      { opacity: 1;   transform: scale(1.045); }
}

/* ---------- 10px 描边（覆盖在图片最外圈）+ 内侧柔光 ----------
   用 ::after 的 border 做「内描边」：图片本身的尺寸与位置完全不变
   （仍 1:1 原像素、top 仍 80px），描边只是压在最外 10px 上。 */
.glc-box::after {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border: 10px solid rgba(232,180,90,.42);
    /* 第 1 层是贴内沿的 1px 亮线，勾出描边的"棱"，让平边框有立体感 */
    box-shadow: inset 0 0 0 1px rgba(255,230,164,.6),
                inset 0 0 68px rgba(232,180,90,.10);
    transition: border-color .45s ease, box-shadow .45s ease;
}
.glc-box:hover::after {
    border-color: rgba(232,180,90,.85);
    box-shadow: inset 0 0 0 1px rgba(255,246,210,.95),
                inset 0 0 86px rgba(232,180,90,.24),
                0 0 52px rgba(232,180,90,.4);
}

/* ---------- 画面层：只用来裁剪扫光/扫描线 ---------- */
.glc-frame { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }

/* 斜向扫光：切到这张时自动跑一次，悬浮再跑一次 */
.glc-shine {
    position: absolute; top: -80%; left: 0; width: 42%; height: 260%;
    transform: translateX(-330%) rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 34%,
                rgba(255,244,214,.52) 50%, rgba(255,255,255,.06) 66%, transparent);
    filter: blur(3px);
}
.glc-slide.is-on .glc-shine { animation: glcShine 1.15s cubic-bezier(.3,.1,.2,1) .12s both; }
.glc-box:hover .glc-shine { animation: glcShine .95s cubic-bezier(.3,.1,.2,1) both; }
@keyframes glcShine {
    from { transform: translateX(-330%) rotate(16deg); }
    to   { transform: translateX(560%) rotate(16deg); }
}
/* 未进入可视区前不放特效，避免白跑 */
.glc:not(.glc-live) .glc-shine,
.glc:not(.glc-live) .glc-scan { animation: none !important; }

/* 上下双向扫描线 */
.glc-scan {
    position: absolute; left: 0; right: 0; height: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,214,130,.95), transparent);
    box-shadow: 0 0 18px rgba(232,180,90,.9);
}
.glc-scan.t { top: 0; }
.glc-scan.b { bottom: 0; }
.glc-slide.is-on .glc-scan.t { animation: glcScanT 1.7s ease-in-out .18s infinite; }
.glc-slide.is-on .glc-scan.b { animation: glcScanB 1.7s ease-in-out .18s infinite; }
@keyframes glcScanT {
    0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; }
    88% { opacity: 1; } 100% { opacity: 0; transform: translateY(649px); }
}
@keyframes glcScanB {
    0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; }
    88% { opacity: 1; } 100% { opacity: 0; transform: translateY(-649px); }
}

/* ---------- 四角括号（卡角）：固定「离描边 10px」 ----------
   描边宽 10px，卡角要离描边 10px → 定位值 = 10(描边) + 10(间距) = 20px。
   ★ 位置任何状态都不动（常态、悬浮都恒定 20px），只做亮度/颜色的变化，
     这样"离描边十像素"在任何时刻都严格成立。 */
.glc-c {
    position: absolute; width: 46px; height: 46px; z-index: 5; pointer-events: none;
    opacity: .5;
    transition: opacity .38s ease, filter .38s ease;
}
.glc-c.tl { left: 20px;  top: 20px;    border-left: 2px solid #ffd68a; border-top: 2px solid #ffd68a; }
.glc-c.tr { right: 20px; top: 20px;    border-right: 2px solid #ffd68a; border-top: 2px solid #ffd68a; }
.glc-c.bl { left: 20px;  bottom: 20px; border-left: 2px solid #ffd68a; border-bottom: 2px solid #ffd68a; }
.glc-c.br { right: 20px; bottom: 20px; border-right: 2px solid #ffd68a; border-bottom: 2px solid #ffd68a; }
.glc-slide.is-on .glc-c { animation: glcCorner 3.4s ease-in-out infinite; }
.glc-box:hover .glc-c {
    opacity: 1; animation: none;
    filter: brightness(1.4) drop-shadow(0 0 6px rgba(255,214,130,.9));
}
@keyframes glcCorner {
    0%, 100% { opacity: .42; }
    50%      { opacity: .92; }
}

/* ---------- 悬浮：旋转流光边框（贴着图片外沿 2px） ---------- */
.glc-spin {
    position: absolute; inset: -2px; z-index: 6; pointer-events: none; opacity: 0;
    padding: 2px;
    background: conic-gradient(from var(--glcA), #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 .4s ease;
}
.glc-box:hover .glc-spin { opacity: 1; animation: glcSpin 2.8s linear infinite; }
@keyframes glcSpin { to { --glcA: 360deg; } }

/* ---------- 悬浮：整体上浮 + 发光 + 提亮（不缩放） ---------- */
.glc-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 34px 92px rgba(0,0,0,.92), 0 0 72px rgba(232,180,90,.5);
    filter: brightness(1.08) saturate(1.14) contrast(1.03);
}

/* =========================================================
   左右箭头（复用 images/prev.png / next.png）
   ========================================================= */
/* ★ 切换按钮：黑色投影（去掉原来的金色发光/金色光晕）
   近处一层小半径加深轮廓，远处一层大半径拉开层次，hover 时两层一起加深扩散。 */
.glc-arrow {
    position: absolute; width: 74px; height: 74px; z-index: 60;
    cursor: pointer; opacity: 1;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.92))
            drop-shadow(0 8px 20px rgba(0,0,0,.75));
    transition: transform .25s ease, filter .25s ease;
}
.glc-arrow img { position: relative; z-index: 2; width: 74px; height: 74px; }
/* 原金色径向光晕已按「黑色投影」要求撤掉 */
.glc-arrow::before { display: none; }
.glc-arrow:hover {
    transform: scale(1.14);
    filter: drop-shadow(0 5px 9px rgba(0,0,0,1))
            drop-shadow(0 14px 30px rgba(0,0,0,.9));
}
/* 贴在最宽那张图（1092）外侧 8px：左 414 / 右 1506 */
.glc-prev { left: 332px;  top: 365px; }
.glc-next { right: 332px; top: 365px; }

/* =========================================================
   底部分页（段 + 进度条）+ 两侧渐隐装饰线
   ========================================================= */
.glc-nav {
    position: absolute; left: 50%; top: 750px; z-index: 55;
    transform: translateX(-50%);
    display: flex; gap: 14px;
}
.glc-nav i {
    position: relative; display: block; width: 66px; height: 8px; border-radius: 4px;
    /* 暗底 + 金边：背景图很花，浅色半透明会糊掉看不清 */
    background: rgba(12,8,4,.62);
    box-shadow: inset 0 0 0 1px rgba(232,180,90,.5), 0 2px 8px rgba(0,0,0,.6);
    overflow: hidden; cursor: pointer;
    transition: width .45s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.glc-nav i:hover { box-shadow: inset 0 0 0 1px rgba(255,214,130,.95), 0 0 14px rgba(232,180,90,.6); }
.glc-nav i b {
    position: absolute; left: 0; top: 0; height: 100%; width: 0;
    background: linear-gradient(90deg,#e8b45a,#ffe6b0);
    box-shadow: 0 0 12px rgba(232,180,90,.9);
}
/* 当前段：加长 + 金边加强 + 外发光（用 inset 阴影而非 border，进度条高度不受影响） */
.glc-nav i.on {
    width: 104px;
    box-shadow: inset 0 0 0 1px rgba(255,214,130,.95), 0 0 18px rgba(232,180,90,.75);
}
/* 进度条：切到该段时按轮播间隔线性填满 */
.glc-nav i.on b { animation: glcProg 4000ms linear forwards; }
.glc[data-dur="5000"] .glc-nav i.on b { animation-duration: 5000ms; }
.glc[data-dur="6000"] .glc-nav i.on b { animation-duration: 6000ms; }
.glc[data-dur="3000"] .glc-nav i.on b { animation-duration: 3000ms; }
@keyframes glcProg { from { width: 0; } to { width: 100%; } }

/* 分页两侧的渐隐金线（自动跟随分页居中，不会错位） */
.glc-nav::before, .glc-nav::after {
    content: ''; position: absolute; top: 50%; margin-top: -1px; width: 220px; height: 1px;
    pointer-events: none;
}
.glc-nav::before { right: 100%; margin-right: 22px; background: linear-gradient(90deg, transparent, rgba(232,180,90,.75)); }
.glc-nav::after  { left: 100%;  margin-left: 22px;  background: linear-gradient(270deg, transparent, rgba(232,180,90,.75)); }

/* 未进入可视区时不自动播放（JS 只加 live 类，不隐藏任何东西） */
.glc-nav i.on b { animation-play-state: running; }
.glc:not(.glc-live) .glc-nav i.on b { animation: none; }