:root {
    color-scheme: light;
    --mt-launch-bg: #f4f1ea;
    --mt-launch-panel: rgb(251 249 243 / 0.72);
    --mt-launch-text: #1a1814;
    --mt-launch-muted: rgb(26 24 20 / 0.5);
    --mt-launch-line: rgb(87 67 30 / 0.16);
    --mt-launch-gold: #8d7233;
    --mt-launch-gold-bright: #c8a96b;
}

:root.dark {
    color-scheme: dark;
    --mt-launch-bg: #07080a;
    --mt-launch-panel: rgb(13 15 18 / 0.74);
    --mt-launch-text: #f3efe7;
    --mt-launch-muted: rgb(243 239 231 / 0.5);
    --mt-launch-line: rgb(226 201 133 / 0.14);
    --mt-launch-gold: #c8a96b;
    --mt-launch-gold-bright: #e2c985;
}

.mt-pwa-launch {
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--mt-launch-bg);
    color: var(--mt-launch-text);
    font-family: Geist, Inter, ui-sans-serif, system-ui, sans-serif;
    transition:
        opacity 360ms ease,
        visibility 360ms ease;
}

.mt-pwa-launch::before,
.mt-pwa-launch::after {
    position: absolute;
    inset: 0;
    content: '';
    pointer-events: none;
}

.mt-pwa-launch::before {
    background: linear-gradient(var(--mt-launch-line) 1px, transparent 1px), linear-gradient(90deg, var(--mt-launch-line) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
    opacity: 0.28;
}

.mt-pwa-launch::after {
    background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--mt-launch-gold) 16%, transparent), transparent 38%);
}

.mt-pwa-launch__ambient {
    position: absolute;
    width: min(64vw, 34rem);
    aspect-ratio: 1;
    border: 1px solid var(--mt-launch-line);
    border-radius: 50%;
    box-shadow:
        0 0 0 3.5rem color-mix(in srgb, var(--mt-launch-gold) 2%, transparent),
        0 0 0 7rem color-mix(in srgb, var(--mt-launch-gold) 1.2%, transparent);
    animation: mt-pwa-launch-breathe 3.2s ease-in-out infinite;
}

.mt-pwa-launch__content {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(86vw, 22rem);
    flex-direction: column;
    align-items: center;
    padding: 2.75rem 2.25rem 2.25rem;
    border: 1px solid var(--mt-launch-line);
    border-radius: 1rem;
    background: var(--mt-launch-panel);
    box-shadow: 0 2.5rem 7rem -4rem color-mix(in srgb, var(--mt-launch-gold) 44%, transparent);
    backdrop-filter: blur(18px);
}

.mt-pwa-launch__mark {
    display: grid;
    width: 5.5rem;
    height: 8.4rem;
    place-items: center;
    color: var(--mt-launch-gold-bright);
    filter: drop-shadow(0 0 1.5rem color-mix(in srgb, var(--mt-launch-gold) 28%, transparent));
    animation: mt-pwa-launch-mark 2.4s ease-in-out infinite;
}

.mt-pwa-launch__mark img {
    display: block;
    width: 4.75rem;
    height: auto;
}

.mt-pwa-launch__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mt-pwa-launch__brand strong {
    font-size: 1.05rem;
    font-weight: 620;
    letter-spacing: 0.17em;
}

.mt-pwa-launch__brand span {
    margin-top: 0.32rem;
    color: var(--mt-launch-muted);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
}

.mt-pwa-launch__progress {
    width: 7.5rem;
    height: 1px;
    margin-top: 2rem;
    overflow: hidden;
    background: var(--mt-launch-line);
}

.mt-pwa-launch__progress span {
    display: block;
    width: 42%;
    height: 100%;
    background: var(--mt-launch-gold-bright);
    box-shadow: 0 0 0.75rem var(--mt-launch-gold);
    animation: mt-pwa-launch-progress 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.mt-pwa-launch__status {
    margin: 0.8rem 0 0;
    color: var(--mt-launch-muted);
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.mt-pwa-launch__stalled {
    display: none;
    max-width: 17rem;
    flex-direction: column;
    align-items: center;
    margin-top: 1.4rem;
    text-align: center;
}

.mt-pwa-launch noscript {
    display: flex;
    max-width: 17rem;
    flex-direction: column;
    align-items: center;
    margin-top: 1.4rem;
    text-align: center;
}

.mt-pwa-launch noscript strong {
    font-size: 0.78rem;
}

.mt-pwa-launch noscript span {
    margin-top: 0.4rem;
    color: var(--mt-launch-muted);
    font-size: 0.7rem;
    line-height: 1.5;
}

.mt-pwa-launch__stalled strong {
    font-size: 0.78rem;
}

.mt-pwa-launch__stalled span {
    margin-top: 0.4rem;
    color: var(--mt-launch-muted);
    font-size: 0.7rem;
    line-height: 1.5;
}

.mt-pwa-launch__stalled a {
    margin-top: 1rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--mt-launch-line);
    border-radius: 0.45rem;
    color: var(--mt-launch-gold-bright);
    font-size: 0.7rem;
    text-decoration: none;
}

.mt-pwa-launch[data-state='ready'] {
    visibility: hidden;
    opacity: 0;
}

.mt-pwa-launch[data-state='stalled'] .mt-pwa-launch__progress,
.mt-pwa-launch[data-state='stalled'] .mt-pwa-launch__status--loading {
    display: none;
}

.mt-pwa-launch[data-state='stalled'] .mt-pwa-launch__stalled {
    display: flex;
}

@keyframes mt-pwa-launch-progress {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(250%);
    }
}

@keyframes mt-pwa-launch-mark {
    0%,
    100% {
        opacity: 0.78;
        transform: translateY(0) scale(0.985);
    }

    50% {
        opacity: 1;
        transform: translateY(-0.2rem) scale(1);
    }
}

@keyframes mt-pwa-launch-breathe {
    0%,
    100% {
        opacity: 0.36;
        transform: scale(0.97);
    }

    50% {
        opacity: 0.66;
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mt-pwa-launch__ambient,
    .mt-pwa-launch__mark,
    .mt-pwa-launch__progress span {
        animation: none;
    }
}