/* === 通用翻转壳 === 正面/背面绕垂直中轴(Y) 3D 翻转。配 partials/flip.html + js/flip.js。
   awards 专属配色等内容样式不在此文件。 */

.flip-scene{perspective:2400px;margin-top:1rem;overflow:hidden}

/* 顶部分段胶囊开关:滑块位置标记当前面 */
.flip-switch{position:relative;display:inline-flex;margin:0 auto 1.6rem;padding:.28rem;border-radius:999px;background:color-mix(in srgb,var(--surface-1) 55%,transparent);border:1px solid var(--line);isolation:isolate}
.flip-scene{text-align:center}
/* 滑块:盖在当前选中段下,随翻转左右滑 */
.flip-seg-thumb{position:absolute;z-index:-1;top:.28rem;bottom:.28rem;left:.28rem;width:calc(50% - .28rem);border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 0 16px color-mix(in srgb,var(--accent) 22%,transparent);transition:transform .5s cubic-bezier(.5,.05,.2,1)}
.flip-scene.is-flipped .flip-seg-thumb{transform:translateX(100%)}
/* 段按钮 */
.flip-seg{position:relative;flex:0 0 auto;min-width:9rem;padding:.5rem 1.1rem;border:none;background:none;cursor:pointer;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.03em;color:var(--mid);border-radius:999px;transition:color .3s ease;white-space:nowrap}
.flip-seg:hover{color:var(--text)}
.flip-scene:not(.is-flipped) .flip-seg-front{color:var(--accent)}
.flip-scene.is-flipped .flip-seg-back{color:var(--accent)}

/* 翻转卡:绕垂直中轴 180°。高度由 JS 实时设置(两面均绝对定位,不参与流式高度) */
.flip-card{position:relative;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.5,.05,.2,1),height .5s ease}
.flip-scene.is-flipped .flip-card{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;top:0;left:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
/* JS 未就绪时的兜底:正面参与流式高度,背面隐藏,避免裸奔塌陷 */
.flip-scene:not(.js-ready) .flip-front{position:relative}
.flip-scene:not(.js-ready) .flip-back{display:none}

@media (prefers-reduced-motion:reduce){
  .flip-card{transition:none}
  .flip-seg-thumb{transition:none}
}