.case-page {
    width: min(calc(100% - 48px), 1264px);
    padding-top: 64px;
}

.case-detail-hero {
    grid-template-columns: 48% 52%;
    min-height: 470px;
    background: linear-gradient(135deg, #f7f7f8 0%, #eef0f3 100%);
}

.case-detail-visual {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    background: #17191d;
    isolation: isolate;
}

.case-detail-visual:before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom right, #000, transparent 88%);
}

.case-detail-visual:after {
    position: absolute;
    right: -130px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    content: "";
    background: rgba(229,21,21,.14);
    filter: blur(4px);
    z-index: -1;
}

.case-visual-core {
    position: absolute;
    left: 50%;
    top: 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    color: #fff;
    background: #e51515;
    box-shadow: 0 0 0 18px rgba(229,21,21,.1), 0 24px 60px rgba(0,0,0,.35);
    transform: translate(-50%,-50%);
    z-index: 3;
}

.case-visual-core i { font-size: 3rem; }

.case-visual-orbit {
    position: absolute;
    left: 50%;
    top: 48%;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.orbit-one { width: 265px; height: 265px; border-top: 3px solid #e51515; animation: case-orbit-clockwise 9s linear infinite; }
.orbit-two { width: 390px; height: 390px; border-style: dashed; }


.case-visual-node {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 13px;
    height: 13px;
    border: 3px solid #17191d;
    border-radius: 50%;
    background: #e51515;
    box-shadow: 0 0 0 1px rgba(255,255,255,.35);
    z-index: 2;
    margin: -6px;
}

.node-one { animation: case-node-orbit-one 9s linear infinite, case-node-pulse 2.8s ease-in-out infinite; }
.node-two { animation: case-node-orbit-two 13s linear infinite, case-node-pulse 2.8s .9s ease-in-out infinite; }
.node-three { animation: case-node-orbit-three 11s linear infinite, case-node-pulse 2.8s 1.8s ease-in-out infinite; }
.case-visual-core { animation: case-core-float 4.5s ease-in-out infinite; }

@keyframes case-node-orbit-one {
    from { transform: rotate(0deg) translateX(132px); }
    to { transform: rotate(360deg) translateX(132px); }
}

@keyframes case-orbit-clockwise {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to { transform: translate(-50%,-50%) rotate(360deg); }
}

@keyframes case-node-orbit-two {
    from { transform: rotate(210deg) translateX(195px); }
    to { transform: rotate(-150deg) translateX(195px); }
}

@keyframes case-node-orbit-three {
    from { transform: rotate(80deg) translateX(195px); }
    to { transform: rotate(440deg) translateX(195px); }
}

@keyframes case-node-pulse {
    0%, 100% { opacity: .5; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 0 0 rgba(229,21,21,0); }
    50% { opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 0 10px rgba(229,21,21,.12); }
}

@keyframes case-core-float {
    0%, 100% { transform: translate(-50%,-50%); }
    50% { transform: translate(-50%,calc(-50% - 7px)); }
}

.case-detail-visual small {
    position: absolute;
    right: 34px;
    bottom: 30px;
    color: rgba(255,255,255,.52);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .18em;
    text-align: right;
}

@media (max-width: 991.98px) {
    .case-detail-hero { grid-template-columns: 1fr; }
    .case-detail-visual { min-height: 350px; order: -1; }
}

@media (max-width: 767.98px) {
    .case-page { width: min(calc(100% - 32px), 1264px); padding-top: 40px; }
    .case-detail-visual { min-height: 280px; }
    .case-visual-core { width: 96px; height: 96px; }
    .case-visual-core i { font-size: 2.2rem; }
    .orbit-one { width: 190px; height: 190px; }
    .orbit-two { width: 270px; height: 270px; }
}

@media (prefers-reduced-motion: reduce) {
    .case-visual-orbit,
    .case-visual-node,
    .case-visual-core { animation: none; }
}