/* cards-swap.css */
:root { --t: .8s; }

/* регистрация кастом-свойств (безопасно держать глобально):
   они нужны, чтобы эти var могли анимироваться */
@property --p { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --v { syntax: '<number>'; initial-value: 0; inherits: true; }

/* ====== СКОУП ТОЛЬКО ДЛЯ ВИДЖЕТА ====== */
.card-stack * { margin: 0 }

.card-stack,
.card-stack article,
.card-stack button { display: grid }

/* дефолты переменных, чтобы не было "Cannot resolve" */
.card-stack {
    width: 100%;
    justify-self: start;

    --k: 0;      /* текущий индекс */
    --n: 1;      /* всего элементов */
    /* математика анимаций (с fallback'ами на случай, если JS ещё не проставил var'ы) */
    --p: var(--k, 0);
    --abs-p: abs(var(--k, 0) - var(--p));
    --end: clamp(0, var(--abs-p) - 1, 1);
    --dir: calc((1 - 2*var(--end)) * sign(var(--k, 0) - var(--p)));
    --fwd: calc(.5 * (1 + var(--dir)));
    --v: var(--k, 0);
    --abs-v: abs(var(--v) - var(--p));
    --prg: calc(var(--abs-v) / (1 - var(--end) + var(--end) * (var(--n, 1) - 1)));

    grid-gap: .5em 4em;
    grid-template: repeat(2, max-content) 1fr max-content / max-content 1fr;
    place-self: center;
    color: #f1f5f9;
    font: 1em poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* счётчик использует var — добавили fallback */
    counter-reset: k calc(1 + var(--k, 0)) n var(--n, 1);

    /* анимация "предыдущего" и "анимируемого" индексов */
    transition: --p 0s var(--t), --v var(--t);
}

/* полупрозрачный счётчик и подпись */
.card-stack::before,
.card-stack em { color: rgb(from currentColor r g b / .6) } /* можно заменить на rgba при желании */

.card-stack::before {
    grid-area: 1 / 2;
    width: 3ch;
    text-align: right;
    content: counter(k) '/' counter(n);
}

/* fallbacks для браузеров без math level 4 */
@supports not (scale: Abs(-2)) {
    .card-stack {
        --abs-p: max(var(--k, 0) - var(--p), var(--p) - var(--k, 0));
        --abs-v: max(var(--v) - var(--p), var(--p) - var(--v));
    }
}
@supports not (scale: Sign(-2)) {
    .card-stack { --dir: clamp(-1, (var(--k, 0) - var(--p)) * 100000, 1) }
}

/* ===== ЭЛЕМЕНТ СТЕКА ===== */
.card-stack article {
    /* дефолты для per-item var (иначе лайнтер тоже будет ругаться) */
    --i: 0;
    --a: 0deg;

    --abs-top: abs(var(--k, 0) - var(--i, 0));
    --not-top: min(1, var(--abs-top));
    --top: calc(1 - var(--not-top));

    --val-mov: ((1 - var(--fwd)) * var(--p) + var(--fwd) * var(--k, 0) - var(--i, 0));
    --abs-mov: abs(var(--val-mov));
    --not-mov: min(1, var(--abs-mov));
    --mov: calc(1 - var(--not-mov));

    grid-area: 1 / 1 / -1 / -1;
    /* subgrid не везде поддержан, оставляем, но ниже есть фоллбек */
    grid-template: subgrid / subgrid;

    /* mod() тоже не везде: ниже дам JS-фоллбек */
    z-index: mod(calc(var(--n, 1) - 1 + var(--i, 0) - var(--k, 0)), var(--n, 1));
    transition: z-index var(--t) cubic-bezier(1, -.9, 0, 1.9);
}

@supports not (grid-template-rows: subgrid) {
    /* фоллбек субгрида, чтобы всё не ломалось */
    .card-stack article { grid-template: none; }
}

@supports not (scale: Abs(-2)) {
    .card-stack article {
        --abs-top: max(var(--k, 0) - var(--i, 0), var(--i, 0) - var(--k, 0));
        --abs-mov: max(var(--val-mov), -1 * var(--val-mov));
    }
}

/* текст */
.card-stack h4,
.card-stack h2,
.card-stack h1,
.card-stack p,
.card-stack i,
.card-stack li,
.card-stack em {
    translate: 0 calc(var(--not-top) * 1lh);
    opacity: var(--top);
    transition: calc(.5 * var(--t)) calc(var(--top) * .5 * var(--t));
    transition-property: translate, opacity;
}

@supports not (width: 1lh) {
    /* на очень старых движках 1lh может не жить; тогда translate будет ~1em */
    .card-stack h2,
    .card-stack em { translate: 0 calc(var(--not-top) * 1em); }
}

.card-stack h2 { grid-area: 2 / 2 }
.card-stack em { grid-area: 3 / 2 }

/* картинка */
.card-stack img {
    --sin: sin(var(--prg) * .5turn);
    grid-area: 1 / 1 / -1;
    border: none;
    height: 34em;            /* измените высоту карточек */
    aspect-ratio: 16 / 10;         /* измените пропорции, например 4 / 3 или 16 / 9 */
    object-fit: contain;
    border-radius: .75em;    /* скругление углов */
    translate: calc(-150% * var(--mov) * sqrt(var(--sin)));
    rotate: calc((1 - var(--sin)) * var(--a));
}

.card-stack .controls {
    display: flex;
    gap: 2em;
    grid-area: 4 / 2;
    z-index: calc((1 - min(1, var(--abs-p))) * var(--n, 1));
    justify-content: flex-end;   /* прижать элементы внутри вправо */
    margin-left: auto;           /* прижать сам блок вправо в сетке */
    padding-right: 64px;
    padding-bottom: 128px;
}

/* Адаптив: уменьшение отступов и размера кнопок */
@media (max-width: 1199px) {
    .card-stack img {
        height: 28em;
    }
    .card-stack .controls {
        gap: 1.25em;
        padding-right: 32px;
        padding-bottom: 80px;
    }
    .card-stack button {
        font-size: 1.6em;
    }
}
/* планшеты */
@media (max-width: 991.98px) {
    .card-stack {
        grid-gap: .5em 2em;
    }
    .card-stack img {
        height: 22em;
        aspect-ratio: 16/10;
    }
    .card-stack .controls {
        gap: 1em;
        padding-right: 24px;
        padding-bottom: 56px;
    }
    .card-stack button {
        font-size: 1.4em;
    }
}
@media (max-width: 575.98px) {
    .card-stack {
        /* переопределяем сетку под колонку */
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto; /* img / text / controls */
        grid-gap: 12px;
    }

    /* Карточка занимает всю ширину по вертикали колонкой */
    .card-stack article {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; /* img + текст */
        grid-area: auto / auto / auto / auto;
        z-index: auto; /* стэк не перекрывает, чтобы читалось */
        transition: none;
    }

    /* Изображение первым блоком */
    .card-stack img {
        grid-row: 1;
        grid-column: 1;
        height: auto;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        translate: 0 !important;
        rotate: 0deg !important;
    }

    /* Текст — под картинкой, делаем видимым без анимаций сдвига */
    .card-stack h1,
    .card-stack h2,
    .card-stack h4,
    .card-stack p,
    .card-stack i,
    .card-stack li,
    .card-stack em {
        grid-row: 2;
        grid-column: 1;
        translate: 0 !important;
        opacity: 1 !important;
        transition: none !important;
        margin-top: 6px;
    }

    /* Счётчик, если используется ::before — отправим наверх/скроем для чистоты */
    .card-stack::before {
        display: none;
    }

    /* Кнопки переключения — последним блоком, на всю ширину, прижаты вправо */
    .card-stack .controls {
        grid-row: 3;
        grid-column: 1;
        justify-content: flex-end;
        gap: .75em;
        padding-right: 12px;
        padding-bottom: 0;
        margin-top: 4px;
    }

    /* Размер кнопок компактнее на мобилке */
    .card-stack button {
        font-size: 1.2em;
        width: 2.25rem;
        aspect-ratio: 1 / 1;
    }
}

/* кнопки */
.card-stack button {
    --sgn: -1;
    --prc: calc(var(--hov, 0) * 100%);
    --c: color-mix(in hsl, #818cf8 var(--prc), #52527a);

    border: none;
    /* небольшой фоллбек для 1lh */
    width: 1em;
    width: 1lh;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(from var(--c) r g b / .2);
    color: color-mix(in hsl, #818cf8 var(--prc), currentcolor);
    font: 900 2em/1.5 sans-serif;
    transition: .3s ease-out;
    transition-property: background-color, color;
}

.card-stack button::before {
    place-self: center;
    border: solid 2px;
    border-width: 2px 2px 0 0;
    width: 35%;
    aspect-ratio: 1;
    translate: calc(var(--sgn) * -15%);
    rotate: 45deg;
    scale: var(--sgn);
    content: '';
}

.card-stack button[data-inc='1'] { --sgn: 1 }
.card-stack button:is(:hover, :focus) { --hov: 1 }