.bus {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
}

.bus > div.face {
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bus .top { grid-column: 2; grid-row: 2; transform: rotate(0deg); }
.bus .left { grid-column: 2; grid-row: 1; transform: rotate(180deg); }
.bus .front { grid-column: 3; grid-row: 2; transform: rotate(-90deg); }
.bus .right { grid-column: 2; grid-row: 3; transform: rotate(0deg); }
.bus .rear { grid-column: 1; grid-row: 2; transform: rotate(90deg); }
.bus .bottom { grid-column: 2; grid-row: 4; transform: rotate(0deg); }

.paper-net {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    min-height: 70px;
    perspective: 1200px;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateY(-10deg);
    flex-wrap: wrap;
}

.paper-net > div {
    position: absolute;
    display: flex;
}

.paper-net .top    { transform: rotateX(90deg) translateZ(23px); }
.paper-net .bottom { transform: rotateX(-90deg) translateZ(18px); }
.paper-net .rear { transform: rotateY(-90deg) translateZ(88px);  }
.paper-net .right { transform: translateZ(20px); }
.paper-net .front { transform: rotateY(90deg) translateZ(88px); }
.paper-net .left  { transform: rotateY(180deg) translateZ(20px); }

.warp {
    position: relative;
    perspective: 600px;
}
.warp > span:hover ~ .paper-net { box-shadow: none; }
.warp > span {
    position: absolute;
    width: 50%;
    height: 50%;
    pointer-events: auto;
}

.warp .nw { top: 0; left: 0; }
.warp .ne { top: 0; right: 0; }
.warp .sw { bottom: 0; left: 0; }
.warp .se { bottom: 0; right: 0; }

.warp .sw:hover ~ .paper-net { transform: rotateX(-45deg) rotateY(-130deg); }
.warp .nw:hover ~ .paper-net { transform: rotateX(15deg) rotateY(-130deg); }
.warp .ne:hover ~ .paper-net { transform: rotateX(-15deg) rotateY(45deg); }
.paper-net:hover {
    transform: rotateX(-30deg) rotateY(-50deg)!important;
    box-shadow: none;
}

.paper-net .clone:is(.top, .bottom) {
    background-color: silver; height: 34px; width: 125px;
    transition: opacity 2s ease-in;
    opacity: 0.9; /* Fully visible */
    pointer-events: auto; /* Allow interactions */
}

.paper-net:hover .top {
    opacity: 0;
    pointer-events: none;
}

.bus-view span:hover {
    outline: 2px solid rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    outline-offset: 2px; /* Creates spacing around the highlight */
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.6); /* Soft yellow glow */
    filter: brightness(1.2); /* Slightly brightens on hover */
    will-change: transform;
    clip-path: initial;
}