@charset "utf-8";

.hp-momentum-slide {
    background-color:#02060f!important;
    background-image:url('/rely/images/home_momentum/momentum-bg.png')!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    cursor:default;
}

.hp-momentum-stage {
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}

.hp-momentum-bg-video {
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    object-fit:cover;
    pointer-events:none;
}

.hp-momentum-planet-mask {
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    z-index:4;
    display:block;
    background-image:url('/rely/images/home_momentum/momentum-bg.png');
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    clip-path:ellipse(max(15.8vw, 28.1vh) max(9.3vw, 16.5vh) at 50.5% 44%);
    pointer-events:auto;
}

.hp-momentum-center-lockup {
    position:absolute;
    top:47%;
    left:50%;
    z-index:5;
    pointer-events:none;
    transform:translate(-50%, -50%);
    user-select:none;
}

.hp-momentum-orbit {
    --momentum-radius:min(39vw, 570px);
    --momentum-upright-scale:3.2258;
    width:min(84vw, 1280px);
    aspect-ratio:1;
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    transform:translate(-50%, -50%) scaleY(.31);
    transform-origin:center center;
}

.hp-momentum-spinner {
    width:100%;
    height:100%;
    position:relative;
    animation-play-state:paused;
}

.hp-momentum-slide.is-active .hp-momentum-spinner {
    animation:hpMomentumSpin 28s linear infinite;
}

.hp-momentum-node-position {
    width:0;
    height:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:rotate(var(--momentum-angle)) translateX(var(--momentum-radius));
    transform-origin:0 0;
}

.hp-momentum-upright {
    position:absolute;
    transform:translate(-50%, -50%) rotate(calc(-1 * var(--momentum-angle))) rotate(0deg) scaleY(var(--momentum-upright-scale));
    transform-origin:center center;
    animation-play-state:paused;
}

.hp-momentum-slide.is-active .hp-momentum-upright {
    animation:hpMomentumCounterSpin 28s linear infinite;
}

.hp-momentum-slide.is-interacting .hp-momentum-spinner,
.hp-momentum-slide.is-interacting .hp-momentum-upright {
    animation-play-state:paused;
}

.hp-momentum-node {
    min-width:0;
    padding:0;
    position:relative;
    display:block;
    border:0;
    background:transparent;
    color:#ffffff;
    font-family:"Microsoft YaHei", "PingFang SC", sans-serif;
    text-align:center;
    white-space:nowrap;
    cursor:pointer;
    transform:scale(1);
    transform-origin:center center;
    transition:transform .18s ease;
}

.hp-momentum-node:focus {
    outline:none;
}

.hp-momentum-node:focus-visible .hp-momentum-label {
    outline:2px solid rgba(255,255,255,.88);
    outline-offset:7px;
}

.hp-momentum-node.is-selected {
    transform:scale(1.2);
    z-index:5;
}

.hp-momentum-label {
    display:block;
    font-size:clamp(30px, 2.5vw, 40px);
    font-weight:700;
    line-height:1.15;
    letter-spacing:0;
    text-shadow:0 0 16px rgba(42,137,255,.7);
}

.hp-momentum-indicator {
    width:23px;
    height:23px;
    position:absolute;
    top:50%;
    right:calc(100% + 14px);
    box-sizing:border-box;
    border:2px solid #ffffff;
    border-radius:50%;
    opacity:0;
    transform:translateY(-50%) scale(.76);
    transition:opacity .18s ease, transform .18s ease;
}

.hp-momentum-indicator:after {
    width:11px;
    height:11px;
    position:absolute;
    top:4px;
    left:4px;
    border-radius:50%;
    background:#ffffff;
    content:"";
}

.hp-momentum-detail {
    width:max-content;
    max-width:calc(100vw - 24px);
    position:absolute;
    top:calc(100% + 17px);
    left:50%;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%, -8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.hp-momentum-tag {
    max-width:100%;
    padding:5px 15px;
    display:block;
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.92);
    border-radius:999px;
    color:#ffffff;
    font-size:12px;
    font-weight:400;
    line-height:1.1;
    text-overflow:ellipsis;
    text-shadow:none;
    white-space:nowrap;
}

.hp-momentum-node.is-selected .hp-momentum-indicator {
    opacity:1;
    transform:translateY(-50%) scale(1);
}

.hp-momentum-node.is-selected .hp-momentum-detail {
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
}

.hp-momentum-lockup {
    width:min(35vw, 500px)!important;
    height:auto!important;
    margin:0!important;
    display:block;
}

@keyframes hpMomentumSpin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes hpMomentumCounterSpin {
    from { transform:translate(-50%, -50%) rotate(calc(-1 * var(--momentum-angle))) rotate(0deg) scaleY(var(--momentum-upright-scale)); }
    to { transform:translate(-50%, -50%) rotate(calc(-1 * var(--momentum-angle))) rotate(-360deg) scaleY(var(--momentum-upright-scale)); }
}

@media (max-width:800px) {
    .hp-momentum-orbit {
        --momentum-radius:min(57vw, calc(50vw - 30px));
        --momentum-upright-scale:1.8519;
        width:132vw;
        top:50%;
        transform:translate(-50%, -50%) scaleY(.54);
    }

    .hp-momentum-label {
        font-size:23px;
    }

    .hp-momentum-indicator {
        width:16px;
        height:16px;
        right:calc(100% + 8px);
        border-width:1px;
    }

    .hp-momentum-indicator:after {
        width:8px;
        height:8px;
        top:3px;
        left:3px;
    }

    .hp-momentum-detail {
        max-width:calc(100vw - 24px);
        top:calc(100% + 12px);
        gap:6px;
    }

    .hp-momentum-tag {
        padding:4px 11px;
        font-size:11px;
    }

    .hp-momentum-lockup {
        width:min(36vw, 180px)!important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .hp-momentum-bg-video {
        display:none;
    }

    .hp-momentum-slide.is-active .hp-momentum-spinner,
    .hp-momentum-slide.is-active .hp-momentum-upright {
        animation:none;
    }

    .hp-momentum-node,
    .hp-momentum-indicator,
    .hp-momentum-detail {
        transition:none;
    }
}