section.categories {
    color: #fff;
    background-color: #2c2c2c;

    padding-top: calc(50 * var(--rpx));
    padding-bottom: calc(40 * var(--rpx));
}

.cat-list {
    display: flex;
    align-items: stretch;
    --gap: calc(10 * var(--rpx));
    gap: var(--gap);
    --rest-width: calc(100% - 30 * var(--rpx));
    height: calc(640 * var(--rpx));
}

.cat {
    flex: 0 0 calc(var(--rest-width) * 350 / 1570);
    position: relative;
    transition: flex .5s cubic-bezier(0.15, 1, 0.336, 1);
    overflow: hidden;
}

.cat.active {
    flex: 0 0 calc(var(--rest-width) * 520 / 1570);
}

.cat .default-layer,
.cat .hover-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.cat .default-layer {
    z-index: 220;
}

.cat .cat-info {
    position: relative;
    z-index: 235;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: calc(36 * var(--rpx));
    gap: calc(36 * var(--rpx));
    width: 100%;
    height: 100%;
}

.cat .hover-layer {
    visibility: hidden;
    opacity: 0;
    z-index: 240;
    transition: .2s;
}

.cat-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: 80% center;
}

.cat .default-layer::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, #000f, #0000);
    z-index: 225;
    transition: .2s;
}

.cat.active .default-layer::after {
    height: 100%;
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
}

.cat-name {
    font-size: calc(28 * var(--rpx-50));
    position: relative;
    z-index: 230;
    white-space: nowrap;
}

.cat-icon {
    width: calc(100 * var(--rpx));
    height: calc(100 * var(--rpx));
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .1);
    position: relative;
    z-index: 230;

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.cat-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat.active .hover-layer {
    opacity: 1;
    visibility: visible;
    transition: .3s;
}

.hover-layer .cat-back {
    z-index: 240;
}

.hover-layer::after {
    content: "";
    z-index: 245;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #000f 10%, #0000);
}

.hover-layer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cat-link {
    position: relative;
    z-index: 260;
    background-color: var(--theme-crimson);
    height: calc(80 * var(--rpx));

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(28 * var(--rpx-50));
    white-space: nowrap;
    transition: .2s;
}

.cat-link:hover {
    padding-right: calc(80 * var(--rpx));
    background-color: var(--theme-red);
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
}

.cat-link i.arr {
    background-color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    aspect-ratio: 1/1;
    width: auto;
    transform-origin: right bottom;
    transform: scale(12.5%);
    transition: .2s;
}

.cat-link i.arr::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    background: url("../images/icon_arr_right.svg") center/contain no-repeat;
    transform: rotate(-45deg) translateX(-75%);
    opacity: 0;
    filter: url(#crimson-overlay);
    transition: .2s;
}

.cat-link:hover i.arr {
    transform: none;
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
}

.cat-link:hover i.arr::after {
    transform: rotate(-45deg);
    opacity: 1;
    transition: .5s .1s cubic-bezier(0.15, 1, 0.336, 1), opacity .2s .1s;
}

.lineup-links {
    height: calc(100% - 80 * var(--rpx));
    background-color: rgba(255, 255, 255, .1);
    z-index: 260;
    padding: 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
    font-size: calc(18rem / 16);
    overflow: auto;
}

.lineup-links::-webkit-scrollbar {
    width: 6px;
    background: #0002;
    border-radius: 1px;
}

.lineup-links::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgb(255, 255, 255, .5);
}

.lineup-links::-webkit-scrollbar-track {
    background: transparent;
}

.lineup-link {
    display: flex;
    align-items: center;
    padding-left: calc(24em / 16);
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    height: calc(60em / 18);
    transition: .2s;
}

.lineup-link::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    height: .6em;
    width: .48em;
    margin: auto;
    left: .8em;
    background: url("../images/icon_angle_right_white.svg") center/contain no-repeat;
    transition: .2s;
}

.lineup-link:hover{
    padding-left: calc(36em / 16);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
}
.lineup-link:hover::before{
    left: calc(24em / 16);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
}

.lineup-link::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle farthest-side at center, #fff4, #fff0 );
    pointer-events: none;
    opacity: 0;
    transition: .2s;
}

.lineup-link:hover::after{
    opacity: 1;
    transition: .3s;
}

section.filters{
    background-color: #2C2C2C;
    color: rgba(255, 255, 255, .7);
    margin-top: -1px;
    position: relative;
    z-index: 300;
}

.title-for-table{
    margin-top: calc(120 * var(--rpx-50));
    margin-bottom: 0;
}