/* ==========================================================
   CARD MODAL (FLIP)
   ========================================================== */

:root
{
    --card-modal-radius: 24px;
    --card-modal-duration: 420ms;
    --card-modal-easing: cubic-bezier(.22,1,.36,1);
}


/* ==========================================================
   ROOT
   ========================================================== */

.card-modal
{
    position: fixed;
    inset: 0;

    z-index: 9999;

    pointer-events: none;

    opacity: 0;

    transition: opacity .25s ease;
}

.card-modal.active
{
    opacity: 1;
    pointer-events: auto;
}


/* ==========================================================
   BACKDROP
   ========================================================== */

.card-modal-backdrop
{
    position: absolute;
    inset: 0;

    background: rgba(14,18,26,.52);

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    transition:
        backdrop-filter .45s ease,
        -webkit-backdrop-filter .45s ease,
        background .45s ease;
}

.card-modal.active .card-modal-backdrop
{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================
   FLYING CARD
   Именно этот элемент будет летать по экрану.
   ========================================================== */

.card-modal-card
{
    position: fixed;

    left: 0;
    top: 0;

    width: 0;
    height: 0;

    overflow: hidden;

    background: white;

    border-radius: 8px;

    border: 1px solid var(--primary-light);

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    will-change:
        transform,
        width,
        height,
        border-radius,
        box-shadow;

    transition:
        transform var(--card-modal-duration) var(--card-modal-easing),
        width var(--card-modal-duration) var(--card-modal-easing),
        height var(--card-modal-duration) var(--card-modal-easing),
        border-radius var(--card-modal-duration) var(--card-modal-easing),
        box-shadow var(--card-modal-duration) var(--card-modal-easing);
}


/* состояние после раскрытия */

.card-modal.active .card-modal-card
{
    border-radius: var(--card-modal-radius);

    box-shadow:
        0 40px 120px rgba(0,0,0,.22);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.card-modal-content
{
    opacity: 0;

    transform: translateY(18px);

    transition:
        opacity .25s ease .18s,
        transform .25s ease .18s;

    height: 100%;
}

.card-modal.active .card-modal-content
{
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================
   Клонированная карточка
   ========================================================== */

.card-modal-content .problem-card
{
    width: 100%;
    max-width: none;

    height: auto;

    min-height: 100%;

    border: none;

    border-radius: inherit;

    overflow: visible;

    box-shadow: none;

    transform: none !important;
}

.card-modal-content .problem-card::after
{
    display: none;
}


/* ==========================================================
   CLOSE
   ========================================================== */

.card-modal-close
{
    position: absolute;

    top: 22px;
    right: 22px;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease;

    z-index: 20;
}

.card-modal-close:hover
{
    background: white;

    transform:
        rotate(90deg)
        scale(1.08);
}


/* ==========================================================
   SCROLL
   ========================================================== */

.card-modal-card
{
    overflow: hidden;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}


.card-modal-card.ready-scroll
{
    overflow-y: auto;
}

.card-modal-card::-webkit-scrollbar
{
    width: 8px;
}

.card-modal-card::-webkit-scrollbar-track
{
    background: transparent;
}

.card-modal-card::-webkit-scrollbar-thumb
{
    border-radius: 20px;

    background: rgba(0,0,0,.18);
}

.card-modal-card::-webkit-scrollbar-thumb:hover
{
    background: rgba(0,0,0,.35);
}


/* Firefox */

.card-modal-card
{
    scrollbar-width: thin;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px)
{
    .card-modal-close
    {
        top:16px;
        right:16px;
    }

    .card-modal-card
    {
        border-radius:0 !important;
    }
}