@use '../utils' as *;

/* Stack Card */

.stack-card {
    position: relative;
    .stack-card__inner {
        padding: 440px 40px 40px 40px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left bottom;
        border-radius: 20px;
        overflow: hidden;
        position: sticky !important;
        top: 100px;
        z-index: 100;
        height: 610px;
        overflow-y: scroll;
        @media #{$xs} {
            padding: 320px 40px 40px 40px;
        }
        &::-webkit-scrollbar {
            width: 0px;
        }
        &:nth-last-of-type(1) {
            margin-bottom: 0px;
        }
        a {
            display: inline-block;
            color: #0B1728;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 500;
            line-height: normal;
            padding: 13px 28px;
            border-radius: 10px;
            border: 1px solid rgba(11, 23, 40, 0.2);
            background: rgba(11, 23, 40, 0.06);
            margin-top: 30px;
            i {
                margin-left: 4px;
            }
        }
    }
}

.fix-scroll {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

// :root {
//     --card-height: 40vw;
//     --card-margin: 4vw;
//     --card-top-offset: 1em;
//     --numcards: 4;
//     --outline-width: 0px;
// }
// #card_1 {
//     --index: 5;
// }
// #card_2 {
//     --index: 10;
// }
// #card_3 {
//     --index: 15;
// }
// .card__content {
//     height: 610px;
//     display: flex;
//     align-items: end;
//     padding-left: 40px;
//     padding-bottom: 70px;
// }
// .card__content a {
//     display: inline-block;
//     color: #0B1728;
//     font-family: Roboto;
//     font-size: 15px;
//     font-weight: 500;
//     line-height: normal;
//     padding: 13px 28px;
//     border-radius: 10px;
//     border: 1px solid rgba(11, 23, 40, 0.2);
//     background: rgba(11, 23, 40, 0.06);
//     margin-top: 30px;
//     i {
//         margin-left: 4px;
//     }
// }
// #cards {
//     height: 750px;
//     overflow: auto;
//     color: #fff;
//     padding-bottom: calc(var(--numcards) * var(--card-top-offset));
//     margin-bottom: var(--card-margin);
// }
// .stack-card {
//     position: sticky;
//     top: 0;
//     padding-top: calc(var(--index) * var(--card-top-offset));
// }
// @supports (animation-timeline: works) {
//     @scroll-timeline cards-element-scrolls-in-body {
//         source: selector(body);
//         scroll-offsets: /* Start when the start edge touches the top of the scrollport */
//         selector(#cards) start 1, /* End when the start edge touches the start of the scrollport */
//         selector(#cards) start 0;
//         start: selector(#cards) start 1;
//         /* Start when the start edge touches the top of the scrollport */
//         end: selector(#cards) start 0;
//         /* End when the start edge touches the start of the scrollport */
//         time-range: 4s;
//     }
//     .stack-card {
//         --index0: calc(var(--index) - 1);
//         /* 0-based index */
//         --reverse-index: calc(var(--numcards) - var(--index0));
//         /* reverse index */
//         --reverse-index0: calc(var(--reverse-index) - 1);
//         /* 0-based reverse index */
//     }
//     .card__content {
//         transform-origin: 50% 0%;
//         will-change: transform;
//         --duration: calc(var(--reverse-index0) * 1s);
//         --delay: calc(var(--index0) * 1s);
//         animation: var(--duration) linear scale var(--delay) forwards;
//         animation-timeline: cards-element-scrolls-in-body;
//     }
//     @keyframes scale {
//         to {
//             transform: scale(calc( 1.1 - calc(0.1 * var(--reverse-index))));
//         }
//     }
// }
// #cards {
//     list-style: none;
//     display: grid;
//     grid-template-columns: 1fr;
//     grid-template-rows: repeat(var(--numcards), var(--card-height));
// }