/* =========================================================
   Shared Sword Cinematic Background — v4
   ---------------------------------------------------------
   首页展台和全站背景使用同一透明狼首剑。Hero 滚动时由展品
   交接成固定巨剑，随后镜头从剑柄沿剑身扫到剑尖。
   所有装饰层 aria-hidden、pointer-events:none。
   ========================================================= */

:root {
    --sword-handoff: 0;
}

/* 舞台：固定铺满视口，置于内容之后 */
.global-sword-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg, #050608);
    opacity: 0;
    will-change: opacity;
}

.global-sword-stage,
.global-sword-stage *,
.global-sword-stage *::before,
.global-sword-stage *::after {
    box-sizing: border-box;
}

/* 全剑虚影：始终可见的极淡完整剑形，提供「这是一把剑」的识别锚点 */
.sword-ghost-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.sword-ghost {
    width: 43.5vh;
    height: 94vh;
    background-image: url('../images/longclaw-screen-used-weathered-v2-transparent.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.10;
    filter: blur(38px) saturate(0.85) brightness(0.72);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* 镜头：视口大小的透镜，居中放置（被拉高的）主剑 */
.sword-camera {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    will-change: transform;
}

.cinematic-sword {
    height: 220vh;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    transform-origin: 50% 50%;
    filter: saturate(0.82) contrast(1.1) brightness(0.86);
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.hero-artifact [data-sword-role="showcase"],
.hero-artifact .console-topbar,
.hero-artifact .console-body,
.hero-artifact .stage-caption,
.hero-artifact .blade-aura,
.hero-artifact .blade-orbit,
.hero-artifact .blade-hint {
    will-change: transform, opacity;
}

.hero-artifact [data-sword-role="showcase"] {
    transform-origin: 50% 50%;
}

/* 三剑武器库：只通过合成层属性完成弧形换位。 */
.weapon-armory {
    --armory-drag: 0px;
    position: absolute;
    inset: 0 0 68px;
    z-index: 2;
    overflow: visible;
    perspective: 1100px;
    transform-style: preserve-3d;
    touch-action: pan-y;
    outline: none;
    transform: translate3d(var(--armory-drag), 0, 0);
    will-change: transform;
}

.weapon-armory.is-dragging .armory-weapon {
    transition: none;
}

.weapon-armory:focus-visible {
    border-radius: 42% 42% 30% 30%;
    box-shadow: inset 0 0 0 1px rgba(231, 191, 120, 0.56);
}

.armory-weapon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 44%;
    height: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    transform-origin: 50% 54%;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition:
        transform 460ms cubic-bezier(0.22, 0.76, 0.22, 1),
        opacity 360ms ease;
}

.armory-weapon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    filter:
        contrast(1.08)
        saturate(0.92)
        brightness(0.96)
        drop-shadow(0 28px 30px rgba(0, 0, 0, 0.58));
}

.armory-weapon[data-slot="center"] {
    z-index: 3;
    opacity: 1;
    transform: translate3d(-50%, 0, 70px) scale(1);
}

.armory-weapon[data-slot="left"] {
    z-index: 1;
    opacity: 0.34;
    transform: translate3d(-118%, 10%, 0) rotateY(24deg) rotateZ(-4deg) scale(0.66);
}

.armory-weapon[data-slot="right"] {
    z-index: 1;
    opacity: 0.34;
    transform: translate3d(18%, 10%, 0) rotateY(-24deg) rotateZ(4deg) scale(0.66);
}

.armory-weapon[data-slot="center"] img {
    filter:
        contrast(1.1)
        saturate(0.98)
        brightness(1.05)
        drop-shadow(8px 30px 32px rgba(0, 0, 0, 0.62))
        drop-shadow(0 0 18px rgba(126, 226, 255, 0.12));
}

.armory-readout {
    position: absolute;
    right: 7%;
    bottom: 4px;
    left: 7%;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 3px 10px;
    pointer-events: none;
}

.armory-readout span {
    color: rgba(231, 191, 120, 0.76);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
}

.armory-readout strong {
    color: rgba(244, 241, 233, 0.94);
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.armory-readout p {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(244, 241, 233, 0.52);
    font-size: 10px;
    line-height: 1.45;
}

.hero-artifact .blade-hint {
    bottom: 66px;
}

/* 刃面呼吸扫光：让金属有生命，但始终克制 */
.blade-sheen {
    position: absolute;
    z-index: 3;
    inset: 4% 28% 4% 28%;
    opacity: 0.20;
    background: linear-gradient(100deg, transparent 36%, rgba(229, 236, 237, 0.75) 50%, transparent 64%);
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
            mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
    transform: translateX(-50%);
    animation: blade-breathe 7.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes blade-breathe {
    0%, 100% { opacity: 0.07; transform: translateX(-54%); }
    50%      { opacity: 0.20; transform: translateX(48%); }
}

/* 氛围层（暗角/辉光/薄雾）压在剑身之上，营造舞台光 */
.sword-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.sword-vignette {
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(ellipse 58% 80% at 50% 48%, transparent 0%, rgba(0, 0, 0, 0.66) 55%, rgba(0, 0, 0, 0.94) 100%),
        radial-gradient(ellipse 90% 120% at 50% 50%, rgba(5, 6, 8, 0.5), transparent 50%);
}

.sword-halo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 78% at 50% 42%, rgba(199, 165, 109, 0.10), transparent 55%),
        radial-gradient(ellipse 28% 58% at 50% 55%, rgba(143, 210, 227, 0.06), transparent 50%);
    opacity: 0.9;
    mix-blend-mode: screen;
}

.sword-mist {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 50% 25% at 30% 30%, rgba(143, 210, 227, 0.08), transparent 60%),
        radial-gradient(ellipse 50% 25% at 70% 70%, rgba(199, 165, 109, 0.07), transparent 60%);
    filter: blur(70px);
    opacity: 0.6;
    animation: sword-mist-drift 22s ease-in-out infinite alternate;
}

@keyframes sword-mist-drift {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* 内容层必须浮于剑气背景之上 */
body:has(.global-sword-stage) {
    position: relative;
}

body:has(.global-sword-stage) main,
body:has(.global-sword-stage) .footer {
    position: relative;
    z-index: 1;
}

/* 大屏：主剑再大一点，虚影略收 */
@media (min-width: 1600px) {
    .cinematic-sword { height: 238vh; }
    .sword-ghost { width: 40.5vh; height: 92vh; opacity: 0.09; }
}

/* 平板：适度缩小 */
@media (max-width: 1024px) {
    .cinematic-sword { height: 190vh; }
    .sword-ghost { opacity: 0.08; }
    .sword-halo { opacity: 0.6; }
}

/* 移动端：降低存在感与运动幅度 */
@media (max-width: 760px) {
    .cinematic-sword {
        height: 164vh;
        filter: saturate(0.78) contrast(1.06) brightness(0.72);
    }

    .sword-ghost { opacity: 0.06; }
    .blade-sheen { opacity: 0.12; animation-duration: 9s; }
    .sword-halo { opacity: 0.45; }
    .sword-vignette {
        background:
            radial-gradient(ellipse 55% 70% at 50% 48%, transparent 0%, rgba(0, 0, 0, 0.82) 62%, rgba(0, 0, 0, 0.97) 100%),
            radial-gradient(ellipse 90% 120% at 50% 50%, rgba(5, 6, 8, 0.62), transparent 50%);
    }

    .weapon-armory {
        inset: 0 0 82px;
        perspective: 760px;
    }

    .armory-weapon {
        width: 48%;
    }

    .armory-weapon[data-slot="left"] {
        transform: translate3d(-104%, 9%, 0) rotateY(16deg) rotateZ(-3deg) scale(0.62);
    }

    .armory-weapon[data-slot="right"] {
        transform: translate3d(4%, 9%, 0) rotateY(-16deg) rotateZ(3deg) scale(0.62);
    }

    .armory-readout {
        right: 5%;
        left: 5%;
    }

    .armory-readout p {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .cinematic-sword { height: 150vh; }
}

/* 桌面项目区保留玻璃层次，但不再把经过其后的剑纹抹成一团光。 */
@media (min-width: 761px) {
    body:has(.global-sword-stage) .projects :is(.featured-project, .showcase-rail, .project-card) {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
            rgba(7, 9, 11, 0.34) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
}

/* 减少动效偏好：保留静态背景，关闭动画与微视差 */
@media (prefers-reduced-motion: reduce) {
    :root { --sword-handoff: 1; }
    .global-sword-stage { opacity: 0.28; }

    .blade-sheen,
    .sword-mist { animation: none; }

    .blade-sheen { opacity: 0.07; }
    .sword-ghost { opacity: 0.07; }

    .weapon-armory {
        --armory-drag: 0px !important;
    }

    .armory-weapon {
        transition: opacity 120ms linear;
    }
}

/* 打印与纯文本环境：隐藏装饰背景 */
@media print {
    .global-sword-stage { display: none !important; }
}