/* 光影器材页 v5 精选（2026-11-01）。two.css 为共享样式不改；本文件只放本页样式。灰黑底 + 少量荧光绿。 */
:root{--paper:#0e0e0f;--ink:#ececec;--sub:#8c8c90;--line:#26262a}
body{background:#0e0e0f;color:#ececec}
.nav{background:rgba(9,9,9,.94);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.mk{display:inline-flex;align-items:center;gap:10px}
.mk::before{content:"";width:28px;height:1px;background:var(--sub)}
.rv{transition-delay:var(--d,0s)}

/* 一张连续画布：开篇 → 器材四图 → 设备卡 → 花絮（低调 · 外景 · 高调） */
.canvas{position:relative;overflow:hidden;padding-bottom:120px;background:
  radial-gradient(640px 300px at 6% 220px,rgba(122,232,0,.07),transparent 70%),
  radial-gradient(600px 300px at 96% 140px,rgba(0,229,204,.05),transparent 70%),
  radial-gradient(700px 360px at 50% 62%,rgba(122,232,0,.04),transparent 70%)}

/* 开篇：主句 + 两句副句，字号适中 */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:72px;padding:148px 0 56px}
.head h1{margin-top:20px;color:#f4f4f4}
.h-main{display:block;font:700 56px/1.15 "HS Sans";letter-spacing:-.02em}
.h-sub{display:block;margin-top:18px;padding-left:18px;border-left:2px solid var(--lime);font:400 22px/1.6 "HS Sans";color:#c9c9cc}
.say{max-width:430px;padding-bottom:6px;font:400 15px/1.9 "HS Sans";color:#a6a6aa}

/* 器材首排：列宽按原图宽高比（2:3 / 3:4 / 2:3 / 3:4）分配，四张等高、不裁切 */
.store{list-style:none;display:grid;grid-template-columns:2fr 2.25fr 2fr 2.25fr;gap:6px;padding:0 6px}
.q-1 .photo-btn,.q-3 .photo-btn{aspect-ratio:2/3}
.q-2 .photo-btn,.q-4 .photo-btn{aspect-ratio:3/4}

.photo-btn{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#161618;cursor:zoom-in;overflow:hidden}
.photo-btn img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.photo-btn::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff10;pointer-events:none;transition:box-shadow .4s}
.photo-btn:hover img,.photo-btn:focus-visible img{transform:scale(1.025)}
.photo-btn:hover::after,.photo-btn:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(170,255,0,.55)}

/* 精选设备：图片之后独立排列；细线分格，荧光绿只作顶边短线与 hover */
.gear{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:72px 0 96px;border-top:1px solid #ffffff1f}
.gear li{position:relative;padding:28px 28px 32px 0;border-bottom:1px solid #ffffff14}
.gear li:not(:nth-child(4n+1)){padding-left:28px;border-left:1px solid #ffffff14}
.gear li::before{content:"";position:absolute;top:-1px;left:0;width:24px;height:2px;background:var(--lime);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.gear li:not(:nth-child(4n+1))::before{left:28px}
.gear li:hover::before{width:56px}
.gear h2{font:700 20px/1.3 "HS Sans";color:#f4f4f4}
.gear p{margin-top:12px;font:400 14px/1.85 "Poppins","HS Sans";color:#b4b4b8}

/* 花絮：按明暗与场景成组，组内宽窄错落、同排等高；组间留出呼吸 */
.set{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;padding:0 6px}
.set+.set{margin-top:56px}
/* 低调：大横幅 + 竖幅 / 三张 5·4·3 */
.l-a{grid-column:1/9}.l-a .photo-btn{aspect-ratio:16/10}
.l-b{grid-column:9/13}.l-b .photo-btn{aspect-ratio:4/5}
.l-b .photo-btn img{object-position:50% 55%}
.l-c{grid-column:1/6}.l-c .photo-btn{aspect-ratio:16/9}
.l-d{grid-column:6/10}.l-d .photo-btn{aspect-ratio:4/2.81}
.l-e{grid-column:10/13}.l-e .photo-btn{aspect-ratio:3/2.81}
/* 外景：两张对开 */
.o-a,.o-b{grid-column:span 6}
.o-a .photo-btn,.o-b .photo-btn{aspect-ratio:3/2}
/* 高调：7·5 / 5·7 交错 */
.h-a{grid-column:1/8}.h-a .photo-btn{aspect-ratio:16/9}
.h-b{grid-column:8/13}.h-b .photo-btn{aspect-ratio:5/3.94}
.h-c{grid-column:1/6}.h-c .photo-btn{aspect-ratio:5/3.94}
.h-d{grid-column:6/13}.h-d .photo-btn{aspect-ratio:16/9}

/* 原图查看 */
html.lock{overflow:hidden}
.lb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,8,9,.97);color:#fff}
.lb::backdrop{background:rgba(0,0,0,.7)}
.lb[open]{display:grid;place-items:center}
.lb img{max-width:calc(100vw - 48px);max-height:calc(100vh - 120px);width:auto;height:auto;object-fit:contain}
.lb-ctrl{position:fixed;right:24px;bottom:24px;display:flex;align-items:center;gap:10px}
.lb-count{font:500 13px/1 "Poppins";color:#ffffffa0;margin-right:8px}
.lb-btn{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff55;background:transparent;color:#fff;font:400 18px/1 "Poppins";cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.lb-btn:hover{background:var(--lime);border-color:var(--lime);color:#000}

.foot{background:#0a0a0b;color:#c8c8cc}

@media(prefers-reduced-motion:reduce){.photo-btn img,.gear li::before{transition:none}.photo-btn:hover img{transform:none}}

@media(max-width:1100px){
  .wrap{width:calc(100% - 64px)}
  .nav .wrap{gap:20px}.menu{gap:20px}
  .h-main{font-size:46px}.h-sub{font-size:19px}
  .gear{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gear li:not(:nth-child(4n+1)){padding-left:0;border-left:0}
  .gear li:not(:nth-child(4n+1))::before{left:0}
  .gear li:nth-child(2n){padding-left:28px;border-left:1px solid #ffffff14}
  .gear li:nth-child(2n)::before{left:28px}
}
@media(max-width:760px){
  .wrap,.nav .wrap,.foot .wrap{width:calc(100% - 40px)}
  .nav .brand{font-size:18px}.menu{display:none}
  .head{flex-direction:column;align-items:flex-start;gap:24px;padding:112px 0 36px}
  .h-main{font-size:32px}.h-sub{font-size:16px;margin-top:14px;padding-left:14px}
  .say{font-size:14px}
  .store{grid-template-columns:2fr 2.25fr;gap:4px;padding:0 4px}
  .gear{margin:48px 0 64px}
  .gear li,.gear li:nth-child(2n){padding:20px 0 22px;border-left:0}
  .gear li:nth-child(2n){padding-left:16px;border-left:1px solid #ffffff14}
  .gear li:nth-child(2n)::before{left:16px}
  .gear h2{font-size:17px}.gear p{font-size:13px}
  .set{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0 4px}
  .set+.set{margin-top:32px}
  .l-a,.h-a,.h-d,.o-a,.o-b{grid-column:1/3}
  .l-b,.l-c,.l-d,.l-e,.h-b,.h-c{grid-column:auto}
  .l-a .photo-btn,.h-a .photo-btn,.h-d .photo-btn,.o-a .photo-btn,.o-b .photo-btn{aspect-ratio:3/2}
  .l-b .photo-btn,.l-c .photo-btn,.l-d .photo-btn,.l-e .photo-btn{aspect-ratio:4/5}
  .h-b .photo-btn,.h-c .photo-btn{aspect-ratio:1}
  .lb img{max-width:100vw;max-height:calc(100vh - 100px)}
  .lb-ctrl{left:0;right:0;justify-content:center;bottom:20px}
  .foot .wrap{flex-direction:column;gap:24px}.foot nav{flex-wrap:wrap;justify-content:center;gap:18px}
}