@property --launch-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #0b111b;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 48px);
    overflow-x: hidden;
    isolation: isolate;
    color: #f5f7fa;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(ellipse at 10% 10%, #142a37, transparent 60%),
        radial-gradient(ellipse at 90% 90%, #29251c, transparent 55%),
        #0b111b;
}

/* Iluminação suave do fundo */
body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 25% 35%,
            rgba(63, 217, 228, .17),
            transparent 40%
        ),
        radial-gradient(
            ellipse at 75% 65%,
            rgba(224, 177, 79, .14),
            transparent 38%
        );
    animation: launchAurora 18s ease-in-out infinite alternate;
}

.launch-card {
    position: relative;
    isolation: isolate;
    width: min(100%, 840px);
    padding: clamp(28px, 6vw, 64px);
    border: 1px solid rgba(164, 219, 231, .15);
    border-radius: 32px;
    background: rgba(12, 19, 28, .78);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
        0 32px 100px rgba(0, 0, 0, .40),
        0 0 65px rgba(65, 217, 230, .06);
    text-align: center;
}

/* Luz percorrendo a borda */
.launch-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
        from var(--launch-angle),
        transparent 0deg,
        transparent 230deg,
        rgba(90, 225, 235, .15) 275deg,
        #74eaf0 310deg,
        #f5e3b2 340deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: launchBorder 7s linear infinite;
}

.launch-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 32px;
}

.launch-brand img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.launch-brand span {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: #f1eee7;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .launch-brand span {
        background: linear-gradient(
            110deg,
            #cbd1da 40%,
            #ffffff 48%,
            #ffe8b0 52%,
            #cbd1da 60%
        );
        background-size: 250% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: launchShine 4s ease-in-out infinite;
    }
}

.launch-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(225, 191, 119, .28);
    border-radius: 999px;
    background: rgba(224, 181, 89, .07);
    color: #e7cd93;
    font-size: .875rem;
    font-weight: 600;
}

.launch-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #e7cd93;
    box-shadow: 0 0 12px rgba(231, 205, 147, .55);
    animation: launchPulse 3s ease-in-out infinite;
}

h1 {
    margin: 28px 0 20px;
    font-size: clamp(2rem, 5.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.045em;
}

h1 span {
    color: #87e6ed;
}

.launch-soon {
    margin: 0 0 20px;
    font-size: clamp(1.125rem, 3vw, 1.4rem);
    color: #e8cf99;
    font-weight: 600;
}

.launch-description {
    max-width: 540px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.8;
    color: #b9c5d2;
}

.launch-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0;
}

.launch-features span {
    padding: 10px 14px;
    border: 1px solid rgba(148, 179, 203, .16);
    border-radius: 12px;
    background: rgba(156, 198, 222, .04);
    color: #dce5ed;
    font-size: .875rem;
}

/* Faixa decorativa, sem representar percentual de progresso */
.launch-light {
    height: 2px;
    max-width: 280px;
    margin: 32px auto 24px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(163, 196, 216, .12);
}

.launch-light::after {
    content: "";
    display: block;
    height: 100%;
    width: 45%;
    background: linear-gradient(
        90deg,
        transparent,
        #87e6ed,
        #e8cf99,
        transparent
    );
    animation: launchTravel 3.5s ease-in-out infinite;
}

.launch-footer {
    margin: 0;
    color: #a5b1bf;
    font-size: .875rem;
    line-height: 1.6;
}

@keyframes launchBorder {
    to { --launch-angle: 360deg; }
}

@keyframes launchAurora {
    from { transform: translate(-3%, -2%) scale(1); }
    to   { transform: translate(4%, 3%) scale(1.08); }
}

@keyframes launchShine {
    0%, 15% { background-position: 100% 50%; }
    80%, 100% { background-position: 0% 50%; }
}

@keyframes launchPulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes launchTravel {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(330%); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
    }
}