:root {
    --grey: #212121;
    --separator: #e7e7e7;
    --muted: #858687;
    --green: #049b30;
    --green-bright: #02ae00;
    --green-background: #e9fae8;
    --red: #ec172b;
    --s: 1;
    --vw: 100vw;
    --vh: 100vh;
    --motion-page-duration: 520ms;
    --motion-page-offset: 14px;
    --motion-modal-in: 260ms;
    --motion-modal-out: 180ms;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

body[data-animation="snappy"] {
    --motion-page-duration: 280ms;
    --motion-page-offset: 8px;
    --motion-modal-in: 180ms;
    --motion-modal-out: 140ms;
    --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

@font-face {
    font-family: "Cera Round Pro";
    src: url("../fonts/CeraRoundPro-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cera Round Pro";
    src: url("../fonts/CeraRoundPro-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cera Round Pro";
    src: url("../fonts/CeraRoundPro-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; width: 100%; }
body { overflow-x: hidden; background: #fff; color: var(--grey); font-family: "Cera Round Pro", Arial, sans-serif; }
button { border: 0; margin: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
img { display: block; }

.page { zoom: var(--s); display: flex; justify-content: center; width: var(--vw); min-height: var(--vh); padding: 12px; }
.page__content { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 600px; }

body:not([data-animation="none"]) .page.is-entering:not(.is-ready) .bonus-banner,
body:not([data-animation="none"]) .page.is-entering:not(.is-ready) .how-it-works,
body:not([data-animation="none"]) .page.is-entering:not(.is-ready) .bonuses,
body:not([data-animation="none"]) .page.is-entering:not(.is-ready) .bonuses__open,
body:not([data-animation="none"]) .page.is-entering:not(.is-ready) .discount-info {
    opacity: 0;
    transform: translateY(var(--motion-page-offset));
}

.page.is-ready .bonus-banner,
.page.is-ready .how-it-works,
.page.is-ready .bonuses,
.page.is-ready .bonus-card,
.page.is-ready .bonuses__open,
.page.is-ready .discount-info {
    animation: page-enter var(--motion-page-duration) var(--motion-ease) both;
}

.page.is-ready .how-it-works { animation-delay: 70ms; }
.page.is-ready .bonuses { animation-delay: 140ms; }
.page.is-ready .bonuses__open { animation-delay: 190ms; }
.page.is-ready .discount-info { animation-delay: 230ms; }
.page.is-ready .bonus-card:nth-child(2) { animation-delay: 180ms; }
.page.is-ready .bonus-card:nth-child(3) { animation-delay: 220ms; }

@keyframes page-enter {
    from { opacity: 0; transform: translateY(var(--motion-page-offset)); }
    to { opacity: 1; transform: translateY(0); }
}

body[data-animation="none"] .page.is-ready *,
body[data-animation="none"] .page.is-ready,
body[data-animation="none"] .modal,
body[data-animation="none"] .modal__content {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .page.is-ready *,
    .page.is-ready,
    .modal,
    .modal__content {
        animation: none !important;
    }
}