@layer components {
    .site-motion-rail {
        --motion-progress: 0%;
        position: fixed;
        z-index: 90;
        top: calc(var(--header-height) + clamp(42px, 7vh, 82px));
        right: clamp(16px, 2.25vw, 42px);
        bottom: clamp(38px, 6vh, 74px);
        width: 20px;
        display: grid;
        grid-template-rows: auto minmax(90px, 1fr);
        justify-items: center;
        gap: 18px;
        pointer-events: none;
        color: var(--muted);
    }
    .site-motion-rail[hidden] { display: none; }
    .site-motion-rail > span {
        font-size: .55rem;
        font-weight: 750;
        letter-spacing: .24em;
        line-height: 1;
        writing-mode: vertical-rl;
    }
    .site-motion-rail__track {
        position: relative;
        width: 1px;
        height: 100%;
        display: block;
        overflow: hidden;
        background: color-mix(in srgb, var(--text) 22%, transparent);
        font-style: normal;
    }
    .site-motion-rail__track b {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--motion-progress);
        display: block;
        background: color-mix(in srgb, var(--accent) 62%, transparent);
        box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
        transition: height .12s linear;
    }
    .site-motion-rail__track em {
        position: absolute;
        z-index: 2;
        top: -58px;
        left: 0;
        width: 1px;
        height: 58px;
        display: block;
        background: linear-gradient(transparent, var(--accent) 48%, transparent);
        filter: drop-shadow(0 0 5px var(--accent));
        animation: bmd-motion-rail-vertical 2.35s cubic-bezier(.45, 0, .35, 1) infinite;
    }

    .motion-card-target {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        overflow: clip;
    }
    .motion-card-pulse {
        position: absolute;
        z-index: 8;
        right: auto;
        bottom: 0;
        left: 0;
        width: 34%;
        height: 2px;
        display: block;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 75%, transparent));
        transform: translateX(-110%);
    }
    .motion-card-target:hover > .motion-card-pulse,
    .motion-card-target:focus-visible > .motion-card-pulse,
    .motion-card-target:focus-within > .motion-card-pulse {
        animation: bmd-motion-card-sweep .82s var(--ease-out) both;
        animation-delay: 0ms;
    }
    .motion-card-target.is-motion-seen > .motion-card-pulse {
        animation: bmd-motion-card-sweep .92s var(--ease-out) both;
        animation-delay: var(--motion-card-delay, 0ms);
    }

    .motion-panel-pulse {
        position: absolute;
        z-index: 20;
        top: 0;
        left: 0;
        width: 32%;
        height: 2px;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(90deg, transparent, var(--accent) 32%, var(--accent) 68%, transparent);
        filter: drop-shadow(0 0 6px var(--accent));
        transform: translateX(-110%);
    }
    .lightbox[open] > .motion-panel-pulse {
        animation: bmd-motion-panel-open 1.05s var(--ease-out) both;
    }
}

@keyframes bmd-motion-rail-vertical {
    0% { top: -58px; opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
@keyframes bmd-motion-rail-horizontal {
    0% { left: -74px; opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@keyframes bmd-motion-card-sweep {
    0% { transform: translateX(-110%); opacity: 0; }
    16% { opacity: 1; }
    84% { opacity: 1; }
    100% { transform: translateX(395%); opacity: 0; }
}
@keyframes bmd-motion-panel-open {
    0% { transform: translateX(-110%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(315%); opacity: 0; }
}

@media (max-width: 900px) {
    @layer components {
        .site-motion-rail {
            top: var(--header-height);
            right: 0;
            bottom: auto;
            left: 0;
            width: 100%;
            height: 3px;
            display: block;
        }
        .site-motion-rail > span { display: none; }
        .site-motion-rail__track {
            width: 100%;
            height: 3px;
            background: color-mix(in srgb, var(--text) 16%, transparent);
        }
        .site-motion-rail__track b {
            width: var(--motion-progress);
            height: 100%;
            transition: width .12s linear;
        }
        .site-motion-rail__track em {
            top: 0;
            left: -74px;
            width: 74px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent) 48%, transparent);
            animation-name: bmd-motion-rail-horizontal;
        }
        .motion-card-pulse { height: 2px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-motion-rail__track em,
    .motion-card-pulse,
    .motion-panel-pulse,
    .scroll-cue i { display: none !important; animation: none !important; }
    .site-motion-rail__track b { transition: none; }
}