/* ============================================================
   YUEQI 2026 — desktop.css
   仅桌面端（≥761px）：光标系统 / 步骤转场 / 桌面布局细节
   ============================================================ */

/* ----------------------------------------------------------
   自定义光标系统（桌面）
   ---------------------------------------------------------- */

body, button, a, input, select, textarea, label { cursor: none; }

#cursor {
    position: fixed !important;
    left: 0 !important; top: 0 !important;
    width: 18px; height: 18px;
    margin: 0 !important; padding: 0 !important;
    border: 1px solid rgba(25,31,38,.68);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    box-sizing: border-box;
    transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0) translate3d(-50%, -50%, 0);
    will-change: transform, width, height;
    transition:
        width 420ms cubic-bezier(.16,1,.3,1),
        height 420ms cubic-bezier(.16,1,.3,1),
        background-color 300ms ease,
        border-color 300ms ease,
        opacity 200ms ease;
}

#cursor .cursor-label {
    position: absolute;
    left: 50%; top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .14em;
    opacity: 0;
    transition: opacity 220ms ease;
}

#cursor.hover {
    width: 46px; height: 46px;
    background: rgba(255,255,255,.12);
    border-color: rgba(25,31,38,.78);
}
#cursor.hover .cursor-label { opacity: 1; }

#cursor.button-hover {
    width: 64px; height: 64px;
    background: rgba(255,255,255,.20);
    border-color: rgba(20,26,32,.85);
}

#cursor.input-hover {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.08);
    border-color: rgba(50,60,70,.65);
}

#cursor.clicking { width: 12px !important; height: 12px !important; }

#cursor.cursor-hidden { opacity: 0; }

html.cursor-enabled,
html.cursor-enabled body,
html.cursor-enabled button,
html.cursor-enabled a,
html.cursor-enabled input,
html.cursor-enabled textarea,
html.cursor-enabled select,
html.cursor-enabled label {
    cursor: none !important;
}

/* ----------------------------------------------------------
   桌面端磁吸按钮
   ---------------------------------------------------------- */
.primary.magnetic-active { transition: transform .18s cubic-bezier(.16,1,.3,1); }

/* ----------------------------------------------------------
   桌面端步骤转场（横向位移较大）
   ---------------------------------------------------------- */

.step.yq-enter-forward {
    opacity: 0; visibility: visible; pointer-events: none;
    transform: translate3d(7vw, 0, 0) scale(.985);
    filter: blur(7px);
    z-index: 30;
    animation: yqEnterForward 760ms cubic-bezier(.16,1,.3,1) forwards;
}

.step.yq-enter-back {
    opacity: 0; visibility: visible; pointer-events: none;
    transform: translate3d(-7vw, 0, 0) scale(.985);
    filter: blur(7px);
    z-index: 30;
    animation: yqEnterBack 760ms cubic-bezier(.16,1,.3,1) forwards;
}

.step.yq-leave-forward {
    opacity: 1; visibility: visible; pointer-events: none;
    z-index: 20;
    animation: yqLeaveForward 760ms cubic-bezier(.16,1,.3,1) forwards;
}

.step.yq-leave-back {
    opacity: 1; visibility: visible; pointer-events: none;
    z-index: 20;
    animation: yqLeaveBack 760ms cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes yqLeaveForward {
    0%   { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate3d(-5vw,0,0) scale(.985); filter: blur(8px); }
}
@keyframes yqEnterForward {
    0%   { opacity: 0; transform: translate3d(7vw,0,0) scale(.985); filter: blur(8px); }
    45%  { opacity: .8; }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@keyframes yqLeaveBack {
    0%   { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate3d(5vw,0,0) scale(.985); filter: blur(8px); }
}
@keyframes yqEnterBack {
    0%   { opacity: 0; transform: translate3d(-7vw,0,0) scale(.985); filter: blur(8px); }
    45%  { opacity: .8; }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}

/* 转场期间禁止按钮重复触发 */
body.yq-transitioning .next,
body.yq-transitioning .back,
body.yq-transitioning #back {
    pointer-events: none !important;
}

/* 桌面端开屏提示 hover 微反馈 */
.open-hint { transition: transform .4s var(--ease), background .3s; }
html.cursor-enabled .open-hint:hover {
    background: rgba(255,255,255,.55);
    transform: translateY(-1px);
}

/* 返回按钮贴到最右边缘 */
.topbar { padding-right: 1vw; }

/* 桌面端隐藏移动端垂直进度线 */
#progress-line { display: none !important; }

/* ----------------------------------------------------------
   桌面端：步骤操作按钮固定在右下角，始终贴到最右端
   ---------------------------------------------------------- */

.step .actions {
    position: fixed;
    right: 2.5vw;
    bottom: 4vh;
    max-width: none;
    width: auto;
    margin: 0;
    justify-content: flex-end;
    gap: 14px;
    z-index: 25;
}

.step .actions > span { display: none; }