:root {
    --page-width: min(100vw, 430px);
    --u: calc(var(--page-width) / 1080);
    --blue: #071954;
    --gold: #f6e0b2;
    --white: #fff;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: #030b24;
    color: var(--white);
    font-family:
        'Source Han Sans SC', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}

button {
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

.landing-page {
    position: relative;
    width: var(--page-width);
    min-height: calc(2884 * var(--u));
    margin: 0 auto;
    overflow: hidden;
    background: var(--blue);
}

.landing-page::before {
    position: absolute;
    top: 0;
    left: calc(-83 * var(--u));
    width: calc(1244 * var(--u));
    height: calc(2210 * var(--u));
    content: '';
    opacity: 0.5;
    background: url('./assets/hero-bg.png') center top / cover no-repeat;
}

.landing-page > * {
    position: relative;
    z-index: 1;
}

.hero-copy {
    padding-top: calc(150 * var(--u));
    text-align: center;
}

.avatar-frame {
    width: calc(260 * var(--u));
    height: calc(260 * var(--u));
    margin: 0 auto;
    overflow: hidden;
    border: calc(5 * var(--u)) solid #ffebbb;
    border-radius: 50%;
}

.avatar-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-copy h1 {
    width: calc(860 * var(--u));
    margin: calc(73 * var(--u)) auto 0;
    color: var(--white);
    font-size: calc(60 * var(--u));
    font-weight: 500;
    line-height: calc(80 * var(--u));
    text-align: center;
}

.hero-copy h1 span {
    display: inline;
}

.hero-copy h1 span:last-child {
    display: block;
}

.hero-copy p {
    margin: calc(52 * var(--u)) auto 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: calc(40 * var(--u));
    font-weight: 400;
    line-height: calc(60 * var(--u));
    text-align: center;
    white-space: nowrap;
}

.gift-panel {
    position: relative;
    width: calc(1016 * var(--u));
    height: calc(786 * var(--u));
    margin: calc(52 * var(--u)) auto 0;
    overflow: hidden;
    background-image:
        url('./assets/panel-top.png'), url('./assets/panel-bottom.png'),
        url('./assets/panel-middle.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
        top center,
        bottom center,
        center center;
    background-size:
        100% auto,
        100% auto,
        100% 100%;
}

.gift-panel h2 {
    margin: calc(128 * var(--u)) 0 0;
    color: var(--gold);
    font-size: calc(60 * var(--u));
    font-weight: 500;
    line-height: calc(60 * var(--u));
    text-align: center;
}

.gift-subtitle {
    margin: calc(28 * var(--u)) 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: calc(30 * var(--u));
    font-weight: 400;
    line-height: calc(30 * var(--u));
    text-align: center;
}

.gift-reward {
    position: absolute;
    top: calc(188 * var(--u));
    left: calc(297 * var(--u));
    width: calc(486 * var(--u));
    height: calc(486 * var(--u));
}

.reward-orb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.gold-stack {
    position: absolute;
    top: calc(184 * var(--u));
    left: calc(155.5 * var(--u));
    display: block;
    width: calc(176 * var(--u));
    height: auto;
}

.gift-reward strong {
    position: absolute;
    top: calc(96 * var(--u));
    left: calc(318 * var(--u));
    color: var(--gold);
    font-size: calc(40 * var(--u));
    font-weight: 500;
    line-height: calc(36 * var(--u));
    white-space: nowrap;
}

.gift-footnote {
    position: absolute;
    top: calc(651 * var(--u));
    left: 50%;
    width: calc(720 * var(--u));
    margin: 0;
    color: var(--gold);
    font-size: calc(34 * var(--u));
    font-weight: 500;
    line-height: calc(40 * var(--u));
    text-align: center;
    transform: translate(-50%, -50%);
}

.preview-carousel {
    width: 100%;
    margin-top: calc(40 * var(--u));
}

.preview-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.preview-scroll::-webkit-scrollbar {
    display: none;
}

.preview-track {
    display: flex;
    width: max-content;
    gap: calc(40 * var(--u));
    padding: 0 calc(32 * var(--u));
    animation: inviteLandingScroll 18s linear infinite;
}

.preview-scroll:hover .preview-track,
.preview-scroll:active .preview-track,
.preview-scroll.is-dragging .preview-track {
    animation-play-state: paused;
}

.preview-card {
    flex: 0 0 auto;
    width: calc(564 * var(--u));
    height: calc(1002 * var(--u));
    overflow: hidden;
    border-radius: calc(40 * var(--u));
}

.preview-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(1079 * var(--u));
    height: calc(186 * var(--u));
    margin: calc(60 * var(--u)) 0 0 calc(1 * var(--u));
    color: var(--gold);
    font-size: calc(50 * var(--u));
    font-weight: 700;
    line-height: calc(70 * var(--u));
    text-align: center;
    text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
    background: url('./assets/cta-button.png') center / 100% 100% no-repeat;
}

.download-button:active {
    transform: translateY(calc(2 * var(--u)));
}

.toast {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: calc(80 * var(--u));
    max-width: calc(780 * var(--u));
    padding: calc(20 * var(--u)) calc(30 * var(--u));
    border-radius: calc(18 * var(--u));
    opacity: 0;
    color: #fff;
    font-size: calc(28 * var(--u));
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.72);
    transform: translate(-50%, calc(16 * var(--u)));
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes inviteLandingScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--loop-width, 1208 * var(--u))));
    }
}

@media (prefers-reduced-motion: reduce) {
    .preview-track {
        animation: none;
    }
}