#table {
    overflow: hidden;
    position: relative;
    background: url(../assets/paper.jpg);
}

.clan_card,
.clans_list {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

#table.is-visible .clan_card {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.6s ease, opacity 0.6s ease;
  transition-delay: 0.15s;
}

#table.is-visible .clans_list {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.6s ease, opacity 0.6s ease;
  transition-delay: 0.35s;
}


#table::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    top: 0;
    left: 0;
    background: #0000001f;
}

.table_back {
    position: relative;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
}

.table_back:before {
    content: "";
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
    height: 2px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

.table_back:after {
    content: "";
    position: absolute;
    top: 19px;
    width: 100%;
    left: 0;
    height: 2px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

.table_wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 112px 0;
}

.table_wrapper:before {
    content: "";
    position: absolute;
    bottom: 11px;
    width: 100%;
    left: 0;
    height: 4px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

.table_wrapper:after {
    content: "";
    position: absolute;
    top: 9px;
    width: 100%;
    left: 0;
    height: 6px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

.table_revers {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.clans_list {
    background: url(../assets/white-paper.jpg);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 1184px;
    height: 280px;
    padding: 48px 56px;
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
    position: relative;
}

.clans_list::after {
    content: '';
    width: 1120px;
    height: 232px;
    position: absolute;
    left: 32px;
    top: 24px;
    background: url(../assets/ottisk.svg) center / contain no-repeat;
    pointer-events: none;
}

.clans_list::before {
    content: '';
    width: 1136px;
    height: 216px;
    position: absolute;
    left: 24px;
    top: 32px;
    background: url(../assets/ottisk2.svg) center / contain no-repeat;
    pointer-events: none;
}

.clan_card {
    background: url(../assets/white-paper.jpg);
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
    max-width: 1184px;
    height: 470px;
    position: relative;
    width: 100%;
}

.clan_frame {
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.clan_item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font-family: Evolventa Bold;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.3s linear;
}

.clan_item.active {
    color: #AA0909;
}


.clan_item:hover {
    transform: scale(1.01);
}

.clan_content {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 80px 70px;
}

.clan_video {
    width: 552px;
    height: 310px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), #D9D9D9;
    box-shadow: 0 -1.232px 0.822px 0 #FFF inset, 0 1.236px 2.472px 0 rgba(0, 0, 0, 0.40) inset, 0 -0.822px 0 0 rgba(0, 0, 0, 0.25);
    aspect-ratio: 276/155;
}

.clan_video iframe {
    width: 100%;
    height: 100%;
}

.clan_pls {
    box-shadow: 0 0.822px 0 0 #FFF, 0 -0.822px 0 0 #00000040, 0 -1.232px 0.822px 0 #FFF inset, 0 -2.472px 0.494px 0 #ffffff4d inset, 0 1.236px 2.472px 0 #00000066 inset;
    width: 100%;
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clan_discribe_title {
    color: #AA0909;
    font-family: Colus;
    font-size: 31.548px;
    font-style: normal;
    font-weight: 400;
    line-height: 35.491px;
    letter-spacing: -0.315px;
}

.clan_discribe {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clan_discribe_text {
    font-size: 16px;
    line-height: 23.661px;
}

.clan_content {
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    pointer-events: none;
}

.clan_content:not([hidden]) {
    opacity: 1;
    pointer-events: all;
}

.clan_body {
    position: relative;
    width: 100%;
    height: 100%;
}

@media (max-width: 1220px) {

    .clan_card {
        background: none;
        box-shadow: none;
        max-width: 896px;
        height: 243px;
    }

    .big_frame {
        display: none;
    }

    .clan_content {
        padding: 0;
    }

    .clan_video {
        width: 436px;
        height: 243px;
    }

    .clan_discribe_title {
        font-size: 24px;
        line-height: 130%;
        letter-spacing: -0.24px;
    }

    .clan_discribe_text {
        font-size: 14px;
        line-height: 130%;
    }

    .clan_pls .white_form_but {
        height: 40px;
        width: 183px;
        min-width: 183px;
        background-size: contain;
        font-size: 12px;
        line-height: 18.462px;
    }

    .clan_item {
        font-size: 14px;
        line-height: 130%;
    }

    .clans_list {
        max-width: 896px;
        width: 100%;
        height: 246px;
    }

    .clans_list::before {
        content: '';
        width: 848px;
        height: 212px;
        position: absolute;
        left: 24px;
        top: 16px;
        background: url(../assets/ottisk3.svg) center / contain no-repeat;
    }

    .clans_list::after {
        content: '';
        width: 864px;
        height: 196px;
        position: absolute;
        left: 16px;
        top: 24px;
        background: url(../assets/ottisk4.svg) center / contain no-repeat;
        pointer-events: none;
    }
}

@media (max-width: 930px) {
    .clan_video {
        width: 346px;
        height: 194px;
    }

    .clan_discribe {
        gap: 8px;
    }

    .table_wrapper {
        padding: 62px 0;
    }

    .clan_card {
        height: 480px;
        max-width: 344px;
    }

    .clan_content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }

    .clan_pls .white_form_but {
    height: 52px;
    width: 240px;
    min-width: 95px;
    background-size: contain;
    font-size: 16px;
    line-height: 24px;
    }

    .clan_pls {
        height: 263px;
        gap: 8px;
    }

    .clans_list {
        height: 258px;
        overflow: scroll;
        padding: 26px 48px;
        gap: 0;
    }

    .clan_item {
        width: 150px;
        height: 20px
    }

    .clans_list::after {
        display: none;
    }

    .clans_list::before {
        width: 900px;
        height: 241px;
        left: 10px;
        top: 10px;
    }

    .table_revers {
        gap: 12px;
    }

    .table_back .petlya {
        display: none;
    }
}