/* 「影视静帧」入口卡片与球面图墙。图墙固定深色，静帧在暗场里更出色。 */
.pw-stills-card{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:12px;padding:12px;background:#111214;color:#f1f1ef;border-radius:6px;text-transform:none;letter-spacing:0}
.pw-stills-card-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pw-stills-card-mosaic img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;display:block}
.pw-stills-card-text{display:flex;flex-direction:column;min-width:0;padding:0 4px 4px}
.pw-stills-card h2{font-size:26px;line-height:1.15;margin:6px 0 8px;font-weight:700}
.pw-stills-card p{margin:0;font-size:13px;line-height:1.6;white-space:normal;color:#c9c9c4}
.pw-stills-card .pw-stills-kicker{font-size:11px;color:#8d8e88;letter-spacing:.06em}
.pw-stills-launch{margin-top:14px;align-self:flex-start;display:inline-flex;gap:10px;align-items:center;padding:9px 16px;border:0;border-radius:999px;background:#f1f1ef;color:#111214;font:700 13px/1.2 var(--font-n27,sans-serif);cursor:pointer;white-space:nowrap;transition:transform .2s ease,background .2s ease}
.pw-stills-launch:hover{background:#fff;transform:translateY(-1px)}
.pw-stills-launch:focus-visible{outline:2px solid #f1f1ef;outline-offset:3px}
/* 手机作品格原本只是预览，这一项可以直接点开 */
@media(max-width:1023px){main button:has(img[alt="影视静帧"]){pointer-events:auto;position:relative;z-index:1}}

.pw-stills-open{overflow:hidden!important}
.pw-stills-dialog{--bar:60px;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#dddddd;color:#161616;overflow:hidden;font-family:var(--font-n27,sans-serif);letter-spacing:0;text-transform:none;z-index:2147483647}
.pw-stills-dialog[open]{display:flex;flex-direction:column;animation:pw-stills-in .35s ease-out both}
.pw-stills-dialog::backdrop{background:#dddddd}
.pw-stills-dialog.pw-stills-leaving{animation:pw-stills-out .16s ease-in both}
@keyframes pw-stills-in{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
@keyframes pw-stills-out{to{opacity:0}}

/* 顶栏浮在画面上，按钮才有东西可以透 */
.pw-stills-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));box-sizing:border-box;pointer-events:none}
.pw-stills-bar>*{pointer-events:auto}
.pw-stills-title{display:flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;box-sizing:border-box}
.pw-stills-bar strong{font-size:17px;font-weight:700}
.pw-stills-bar div>span{margin-left:10px;font-size:12px;opacity:.72}
.pw-stills-bar nav{display:flex;gap:10px;align-items:center}
.pw-stills-bar button{height:44px;padding:0 18px;border:0;border-radius:999px;color:inherit;font:400 14px/1 var(--font-n27,sans-serif);cursor:pointer;white-space:nowrap;transition:transform .55s cubic-bezier(.34,1.5,.64,1),background .25s ease,box-shadow .25s ease}
/* 按下轻轻一缩，松开时带一点回弹 */
.pw-stills-bar button:active,.pw-stills-lightbox button:active{transform:scale(.965);transition-duration:.12s}
.pw-stills-switch button,button.pw-stills-glass{position:relative;overflow:hidden}
/* 按下的位置亮起一团柔光，慢慢散开 */
.pw-stills-press{position:absolute;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffffff40 0,#ffffff14 38%,transparent 68%);opacity:0;animation:pw-stills-press .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pw-stills-press{0%{transform:scale(.2);opacity:1}100%{transform:scale(1);opacity:0}}
.pw-stills-bar button:focus-visible,.pw-stills-cell:focus-visible,.pw-stills-lightbox button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.pw-stills-switch{display:flex;gap:2px;padding:4px;border-radius:999px}
.pw-stills-bar .pw-stills-switch button{height:36px;padding:0 16px;background:transparent}
.pw-stills-bar .pw-stills-switch button:hover{background:#ffffff1c}
/* 选中的一段是一颗凸起的白色玻璃珠，和控制中心里亮起的按钮一样 */
.pw-stills-bar .pw-stills-switch button[aria-pressed="true"]{background:linear-gradient(180deg,#ffffffd9,#ffffffa3);color:#111214;text-shadow:none;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px #0000001a,inset 0 0 8px #ffffff80,0 3px 10px #00000047,0 1px 2px #00000026}

/* 液态玻璃：模糊并提亮背后的画面，一圈亮的折光边，上沿一道高光，下沿一点反光，再落一层柔和的影子 */
.pw-stills-glass{position:relative;isolation:isolate;color:#fff;text-shadow:0 1px 2px #00000059;background:linear-gradient(180deg,#ffffff1c 0%,#ffffff05 50%,#ffffff12 100%);-webkit-backdrop-filter:blur(5px) saturate(1.5) brightness(1.08);backdrop-filter:blur(5px) saturate(1.5) brightness(1.08);box-shadow:inset 0 1.5px 0 #ffffffbf,inset 0 -1.5px 0 #ffffff47,inset 0 0 12px 1px #ffffff26,inset 0 12px 14px -12px #ffffff4d,inset 0 -12px 16px -12px #00000026,0 12px 30px -10px #00000066,0 2px 6px #00000033}
.pw-stills-glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.6px;background:linear-gradient(140deg,#fffffff2,#ffffff59 24%,#ffffff1a 50%,#ffffff59 76%,#ffffffd9);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.pw-stills-glass::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 90% at 28% 0%,#ffffff2e,transparent 55%);pointer-events:none}
button.pw-stills-glass:hover{background:linear-gradient(180deg,#ffffff2e 0%,#ffffff0d 50%,#ffffff1f 100%)}
/* 浅色主题上的玻璃：底稍白、字用深色 */
.pw-stills-theme-paper .pw-stills-glass,.pw-stills-theme-statue .pw-stills-glass{color:#161616;text-shadow:none;background:linear-gradient(180deg,#ffffff99 0%,#ffffff4d 48%,#ffffff66 100%)}

.pw-stills-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.pw-stills-sphere{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pw-stills-sphere.pw-stills-dragging{cursor:grabbing}
.pw-stills-world{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.pw-stills-ball{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.pw-stills-tile{pointer-events:auto;position:absolute;left:0;top:0;padding:0;border:0;border-radius:14%/18%;overflow:hidden;background:#24272d;backface-visibility:hidden;-webkit-backface-visibility:hidden;cursor:inherit;box-shadow:0 10px 22px -10px #000000b3,0 0 0 1px #ffffff14}
.pw-stills-tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* 被鼠标吸起来时提亮：用一层很淡的白色盖上去，不给每张图加 filter（Safari 里每张图都会变成单独的图层，太多会画不出来） */
.pw-stills-tile::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:#fff;opacity:calc(var(--pop, 0) * .08);pointer-events:none}
/* 照片像一块有厚度的相片：上沿一道高光，四周细亮边，下沿压一点暗；被鼠标吸起来时光泽更亮 */
.pw-stills-tile::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(165deg,#ffffff2b 0%,#ffffff08 28%,transparent 55%,#00000033 100%);box-shadow:inset 0 1.5px 0 #ffffff59,inset 0 0 0 1px #ffffff1f,inset 0 -12px 20px -14px #000000a6;opacity:calc(.8 + var(--pop, 0) * .2)}
.pw-stills-tile:focus-visible{outline:2px solid #ededea;outline-offset:3px}
.pw-stills-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,#0b0c0fb0 100%)}
.pw-stills-reel{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pw-stills-reel.pw-stills-dragging{cursor:grabbing}
.pw-stills-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#77787a}
.pw-stills-reel canvas{display:block;width:100%;height:100%;outline:none}
.pw-stills-reel canvas:focus-visible{box-shadow:inset 0 0 0 2px #16161680}
.pw-stills-reel.pw-stills-over{cursor:pointer}
.pw-stills-reel .pw-stills-loading{pointer-events:none}
.pw-stills-hint{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));z-index:3;transform:translateX(-50%);margin:0;padding:10px 16px;border-radius:999px;font-size:12px;white-space:nowrap;pointer-events:none;transition:opacity .6s ease}
.pw-stills-hint-gone,.pw-stills-gridview .pw-stills-hint,.pw-stills-hint:empty{opacity:0}

.pw-stills-gridview .pw-stills-stage{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#00000030 transparent}
.pw-stills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;padding:74px max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left))}
.pw-stills-cell{padding:0;border:0;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:#c9c9c9;cursor:zoom-in}
.pw-stills-cell:hover img{transform:scale(1.04);filter:brightness(1.1)}
@media(max-width:600px){.pw-stills-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:64px 10px 30px}.pw-stills-bar{padding:10px 10px 0;gap:6px}.pw-stills-bar nav{gap:6px}.pw-stills-bar div>span{display:none}.pw-stills-title{height:40px;padding:0 14px}.pw-stills-bar button{height:40px;padding:0 13px;font-size:13px}.pw-stills-bar .pw-stills-switch button{height:32px;padding:0 11px}}

.pw-stills-lightbox{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#08090bf0;animation:pw-stills-in .25s ease-out both;touch-action:pan-y}
.pw-stills-lightbox figure{margin:0;width:100%;height:100%;display:grid;place-items:center;padding:64px 72px 56px;box-sizing:border-box}
.pw-stills-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;background:center/cover no-repeat;box-shadow:0 20px 80px #000a;transition:filter .3s ease}
.pw-stills-lightbox img.pw-stills-swap{filter:blur(6px)}
.pw-stills-lightbox figcaption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:12px;color:#8f9197;font-variant-numeric:tabular-nums}
.pw-stills-lightbox button{position:absolute;border:0;border-radius:999px;cursor:pointer;display:grid;place-items:center;font:300 28px/1 system-ui,sans-serif;transition:transform .2s ease,background .25s ease}
.pw-stills-nav{top:50%;width:52px;height:52px;margin-top:-26px}
.pw-stills-nav[data-step="-1"]{left:14px}.pw-stills-nav[data-step="1"]{right:14px}
.pw-stills-x{top:14px;right:18px;width:44px;height:44px;font-size:24px!important}
@media(max-width:600px){.pw-stills-lightbox figure{padding:56px 8px 48px}.pw-stills-nav{top:auto;bottom:8px;margin:0;width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.pw-stills-dialog[open],.pw-stills-dialog.pw-stills-leaving,.pw-stills-lightbox{animation:none}.pw-stills-cell img{transition:none}}

/* 背光灯笼主题：深色、暖色调 */
.pw-stills-theme-lantern{background:#0d0b0a;color:#efe9e1}
.pw-stills-theme-lantern::backdrop{background:#0d0b0a}
.pw-stills-theme-lantern .pw-stills-loading{color:#8a8279}
.pw-stills-theme-lantern .pw-stills-cell{background:#1d1a18}
.pw-stills-theme-lantern .pw-stills-reel canvas:focus-visible{box-shadow:inset 0 0 0 2px #efe9e180}
.pw-stills-theme-lantern.pw-stills-gridview .pw-stills-stage{scrollbar-color:#ffffff30 transparent}

/* 深色绸面主题：冷灰暗场 */
.pw-stills-theme-silk{background:radial-gradient(ellipse at 50% 45%,#2a2f37 0%,#16181d 55%,#0b0c0f 100%);color:#ededea}
.pw-stills-theme-silk::backdrop{background:#0b0c0f}
.pw-stills-theme-silk .pw-stills-loading{color:#8f9197}
.pw-stills-theme-silk .pw-stills-cell{background:#24272d}
.pw-stills-theme-silk .pw-stills-reel canvas:focus-visible{box-shadow:inset 0 0 0 2px #ededea80}
.pw-stills-theme-silk.pw-stills-gridview .pw-stills-stage{scrollbar-color:#ffffff30 transparent}