/*
vars
*/
:root {
    --vortex-diameter: 30rem;
    --vortex-3d-perspective: 1000px;
    --vortex-3d-perspective-origin: 50% 50%;

    --vortex-element-width: 2.4rem;
    --vortex-element-height: 1rem;

    --vortex-font-family: 'Roboto Mono', monospace;
    --vortex-font-color: white;
    --vortex-font-size: 0.61rem;
    --vortex-font-weight: 700;

    --vortex-rotation-step-0: 0deg;
    --vortex-rotation-step-1: 8deg;
    --vortex-rotation-step-2: 16deg;
    --vortex-rotation-step-3: 24deg;
    --vortex-rotation-step-4: 32deg;

    --vortex-rotation-y-start: 0deg;
    --vortex-rotation-x-start: -90deg;
    --vortex-rotation-y: var(--vortex-rotation-y-start);
    --vortex-rotation-x: var(--vortex-rotation-x-start);

    --vortex-scale-factor: 0.25; /* 0 - 0.5 */

    --vortex-transition-duration: 1.5s;
    --vortex-transition-timing-function: ease-out;

    --vortex-animation-main-duration: 15s;
    --vortex-animation-sub-duration: 1.5s;

    --vortex-pi-factor: 3.14159;

    --vortex-backface-visibility: hidden; /* visible */

    --vortex-text-translate-x-max: -96%;
}

/*
global
*/
@import url(//fonts.googleapis.com/css2?family=Roboto+Mono&display=swap);

*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    background-color: black;
}

/*
vortex
*/
.vortex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vortex-wrapper {
    --_diameter: var(--vortex-diameter);
    --_radius: calc(var(--_diameter) * 0.5);
    --_element-width: var(--vortex-element-width);
    --_element-height: var(--vortex-element-height);
    perspective: var(--vortex-3d-perspective);
    perspective-origin: var(--vortex-3d-perspective-origin);
    transform-style: preserve-3d;
    width: var(--_diameter);
    height: var(--_diameter);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition-duration: var(--vortex-transition-duration);
    transition-timing-function: var(--vortex-transition-timing-function);
}

.vortex-wrapper-rotation-y,
.vortex-wrapper-rotation-x {
    width: inherit;
    height: inherit;
    perspective-origin: inherit;
    transform-style: inherit;
    animation-iteration-count: inherit;
    animation-timing-function: inherit;
    transition-duration: inherit;
    transition-timing-function: inherit;
}

.vortex-wrapper-rotation-y {
    animation-name: vortex-animation-main-rotation-y;
    animation-duration: calc(var(--vortex-animation-main-duration) * var(--vortex-pi-factor));
    transform: rotateY(var(--vortex-rotation-y));
}
.vortex-wrapper-rotation-x {
    animation-name: vortex-animation-main-rotation-x;
    animation-duration: calc(var(--vortex-animation-main-duration) * calc(var(--vortex-pi-factor) * 2));
    transform: rotateX(var(--vortex-rotation-x));
}

@keyframes vortex-animation-main-rotation-y { 
    0% { transform: rotateY(calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start))); }
    25% { transform: rotateY(var(--vortex-rotation-y-start)); }
    50% { transform: rotateY(calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start))); }
    75% { transform: rotateY(var(--vortex-rotation-y-start)); }
    100% { transform: rotateY(calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start))); }
}
@keyframes vortex-animation-main-rotation-x { 
    0% { transform: rotateX(calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-x-start))); }
    25% { transform: rotateX(var(--vortex-rotation-x-start)); }
    50% { transform: rotateX(calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start))); }
    75% { transform: rotateX(var(--vortex-rotation-x-start)); }
    100% { transform: rotateX(calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-x-start))); }
}

.vortex-wrapper .vortex-element {
    --_width: var(--_element-width);
    --_height: var(--_element-height);
    --_rotation: calc(360 / var(--_num-elements) * var(--_i) * 1deg);
    position: absolute;
    left: calc(var(--_radius) - var(--_element-width) * 0.5);
    top: calc(var(--_radius) - var(--_element-height) * 0.5);
    transform: rotateY(var(--_rotation)) translateZ(var(--_radius));
    transform-style: inherit;
    width: var(--_width);
    height: var(--_height);
}

.vortex-wrapper .vortex-element .vortex-sub-element{
    --step-angle: 12.85deg;
    --angle: calc((var(--_j) - (var(--_num-sub-elements) - 1) * 0.4) * var(--step-angle));
    position: absolute;
    left: 50%;
    top: 50%;
    transform-style: inherit;
    width: var(--_width);
    height: var(--_height);
    display: flex;
    align-items: center;
    justify-content: center;
    transform:
        rotateX(calc(var(--angle) + 90deg))
        translateZ(calc(var(--_radius) * 0.7))
        scaleX(max(calc(calc(var(--_num-sub-elements) - var(--_j)) * var(--vortex-scale-factor)), 1));
}

.vortex-wrapper .vortex-element .vortex-sub-element:first-child > div {
    mask-image: linear-gradient(to right, black, transparent);
}
.vortex-wrapper .vortex-element .vortex-sub-element:last-child > div {
    mask-image: linear-gradient(to right, transparent, black);
}

.vortex-wrapper .vortex-element .vortex-sub-element > div {
    width: var(--_width);
    height: var(--_height);
    transform-style: inherit;
    transform: rotate(90deg);
    backface-visibility: var(--vortex-backface-visibility);
    overflow: hidden;
}


.vortex-wrapper .vortex-element .vortex-sub-element > div > div {
    width: var(--_width);
    height: var(--_height);
    font-family: var(--vortex-font-family);
    color: var(--vortex-font-color);
    font-size: var(--vortex-font-size);
    font-weight: var(--vortex-font-weight);
    animation: vortex-animation-sub var(--vortex-animation-sub-duration) linear infinite;
}

@keyframes vortex-animation-sub {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--vortex-text-translate-x-max)); }
}

.vortex .vortex-controls-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows:    repeat(9, 1fr);
}

.vortex .vortex-controls-wrapper > div {
    width: 100%;  
    height: 100%;
    /* border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.15s ease-in-out; */
}

/* .vortex .vortex-controls-wrapper > div:hover {
    background-color: rgba(255, 255, 255, 0.1);
} */

/* center */
.vortex:has(.vortex-controls-wrapper > div:nth-child(40):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}

/* center left row */
.vortex:has(.vortex-controls-wrapper > div:nth-child(40):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(39):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(38):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(37):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}

/* center right row */
.vortex:has(.vortex-controls-wrapper > div:nth-child(42):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(43):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(44):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(45):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-x-start));
}

/* center top row */
.vortex:has(.vortex-controls-wrapper > div:nth-child(32):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(23):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(14):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(5):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}

/* center bottom row */
.vortex:has(.vortex-controls-wrapper > div:nth-child(50):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(59):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(68):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(77):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-0) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-x-start));
}

/* row 1 top*/
.vortex:has(.vortex-controls-wrapper > div:nth-child(1):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(2):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(3):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(4):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(6):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(7):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(8):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(9):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-x-start));
}

/* row 2 */
.vortex:has(.vortex-controls-wrapper > div:nth-child(10):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(11):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(12):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(13):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(15):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(16):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(17):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(18):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-x-start));
}

/* row 3 */
.vortex:has(.vortex-controls-wrapper > div:nth-child(19):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(20):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(21):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(22):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(24):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(25):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(26):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(27):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-x-start));
}

/* row 4 */
.vortex:has(.vortex-controls-wrapper > div:nth-child(28):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(29):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(30):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(31):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(33):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(34):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(35):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(36):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-x-start));
}

/* row 6 */
.vortex:has(.vortex-controls-wrapper > div:nth-child(46):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(47):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(48):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(49):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(51):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(52):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(53):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(54):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-x-start));
}

/* row 7 */
.vortex:has(.vortex-controls-wrapper > div:nth-child(55):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(56):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(57):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(58):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(60):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(61):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(62):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(63):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-x-start));
}

/* row 8 */
.vortex:has(.vortex-controls-wrapper > div:nth-child(64):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(65):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(66):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(67):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(69):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(70):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(71):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(72):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}

/* row 9 bottom */
.vortex:has(.vortex-controls-wrapper > div:nth-child(73):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-4) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(74):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(75):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-2) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(76):hover) {
    --vortex-rotation-y: calc(calc(var(--vortex-rotation-step-1) * -1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(78):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-1) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(79):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-2) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(80):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-3) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}
.vortex:has(.vortex-controls-wrapper > div:nth-child(81):hover) {
    --vortex-rotation-y: calc(var(--vortex-rotation-step-4) + var(--vortex-rotation-y-start));
    --vortex-rotation-x: calc(calc(var(--vortex-rotation-step-3) * -1) + var(--vortex-rotation-x-start));
}S

.vortex:has(.vortex-controls-wrapper > div:hover) .vortex-wrapper .vortex-wrapper-rotation-y,
.vortex:has(.vortex-controls-wrapper > div:hover) .vortex-wrapper .vortex-wrapper-rotation-x {
    animation: none;
}
.vortex:has(.vortex-controls-wrapper > div:hover) .vortex-wrapper .vortex-wrapper-rotation-y {
    animation: none;
}