/* Signature launch transition: 2.45 seconds, with safe short/reduced modes. */

.launch-experience {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: grid;
    place-items: center;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 68%, rgba(0, 229, 255, .12), transparent 24%),
        radial-gradient(circle at 50% 110%, rgba(123, 97, 255, .22), transparent 42%),
        #01030b;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .2s;
}

.launch-experience.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

body.is-launching {
    overflow: hidden;
}

.launch-core,
.launch-portal {
    position: absolute;
    left: 50%;
    top: 63%;
    width: min(36vw, 360px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.launch-core {
    display: grid;
    place-items: center;
    opacity: 0;
}

.is-active .launch-core {
    animation: coreArrival 1.45s ease both;
}

.core-ring,
.core-energy {
    position: absolute;
    border-radius: 50%;
}

.core-ring {
    inset: 10%;
    border: 1px solid rgba(0, 229, 255, .55);
    box-shadow: 0 0 28px rgba(0, 229, 255, .13), inset 0 0 28px rgba(0, 229, 255, .08);
}

.ring-one::before,
.ring-one::after,
.ring-two::before,
.ring-two::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8ef5ff;
    box-shadow: 0 0 18px #00e5ff;
}

.ring-one::before { left: 14%; top: 11%; }
.ring-one::after { right: 8%; bottom: 24%; }

.ring-two {
    inset: 24%;
    border-color: rgba(123, 97, 255, .7);
}

.ring-two::before { right: 5%; top: 29%; }
.ring-two::after { left: 18%; bottom: 8%; }

.is-active .ring-one { animation: ringSpin 2s linear infinite; }
.is-active .ring-two { animation: ringSpinReverse 1.5s linear infinite; }

.core-energy {
    inset: 38%;
    background: white;
    box-shadow: 0 0 18px #fff, 0 0 55px #00e5ff, 0 0 110px rgba(123, 97, 255, .8);
    animation: energyPulse .38s ease-in-out infinite alternate;
}

.launch-craft {
    position: absolute;
    left: 50%;
    top: 60%;
    width: clamp(78px, 9vw, 122px);
    opacity: 0;
    filter: drop-shadow(0 0 18px rgba(0, 229, 255, .33));
    transform: translate(-50%, 42vh) scale(.78);
}

.launch-craft svg {
    display: block;
    width: 100%;
    height: auto;
}

.is-active .launch-craft {
    animation: craftLaunch 1.72s cubic-bezier(.55, .02, .72, .34) .55s both;
}

.launch-stars {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.is-active .launch-stars {
    opacity: 1;
}

.launch-stars span {
    position: absolute;
    top: -38vh;
    width: 1px;
    height: 30vh;
    background: linear-gradient(to bottom, transparent, rgba(180, 239, 255, .86), transparent);
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, .7));
    transform: translateY(0) scaleY(.25);
}

.launch-stars span:nth-child(1) { left: 5%; animation-delay: 1.08s; }
.launch-stars span:nth-child(2) { left: 13%; animation-delay: 1.22s; }
.launch-stars span:nth-child(3) { left: 22%; animation-delay: 1.14s; }
.launch-stars span:nth-child(4) { left: 33%; animation-delay: 1.28s; }
.launch-stars span:nth-child(5) { left: 43%; animation-delay: 1.04s; }
.launch-stars span:nth-child(6) { left: 54%; animation-delay: 1.2s; }
.launch-stars span:nth-child(7) { left: 63%; animation-delay: 1.1s; }
.launch-stars span:nth-child(8) { left: 71%; animation-delay: 1.31s; }
.launch-stars span:nth-child(9) { left: 79%; animation-delay: 1.17s; }
.launch-stars span:nth-child(10) { left: 87%; animation-delay: 1.26s; }
.launch-stars span:nth-child(11) { left: 94%; animation-delay: 1.07s; }
.launch-stars span:nth-child(12) { left: 49%; animation-delay: 1.34s; }

.is-active .launch-stars span {
    animation-name: starAcceleration;
    animation-duration: .62s;
    animation-timing-function: cubic-bezier(.55, .03, .86, .34);
    animation-iteration-count: 2;
}

.launch-portal {
    top: 44%;
    width: 18vmin;
    opacity: 0;
    border: 2px solid rgba(121, 234, 255, .72);
    background: radial-gradient(circle, white 0 5%, #00e5ff 8%, rgba(123, 97, 255, .6) 24%, transparent 58%);
    box-shadow: 0 0 45px rgba(0, 229, 255, .65), 0 0 110px rgba(123, 97, 255, .55), inset 0 0 38px white;
}

.is-active .launch-portal {
    animation: portalOpen .62s cubic-bezier(.12, .75, .18, 1) 1.84s both;
}

.launch-readout {
    position: absolute;
    left: 50%;
    bottom: clamp(34px, 8vh, 82px);
    width: min(440px, calc(100% - 48px));
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    transform: translateX(-50%);
    text-align: center;
}

.launch-brand-mark {
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
    border: 1px solid rgba(0, 229, 255, .42);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 26px rgba(0, 229, 255, .24);
}

.launch-eyebrow {
    color: rgba(199, 211, 247, .42);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .24em;
}

#launchStatus {
    min-height: 25px;
    color: #eefcff;
    font-size: clamp(14px, 2.2vw, 19px);
    letter-spacing: .16em;
    text-shadow: 0 0 18px rgba(0, 229, 255, .5);
}

.launch-progress {
    width: 100%;
    height: 2px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
}

.launch-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #00e5ff, #7b61ff, #fff);
    box-shadow: 0 0 14px rgba(0, 229, 255, .65);
    transform: translateX(-100%);
}

.is-active .launch-progress i {
    animation: launchProgress 2.28s linear both;
}

.launch-experience.is-short .launch-core,
.launch-experience.is-short .launch-craft,
.launch-experience.is-short .launch-stars {
    display: none;
}

.launch-experience.is-short .launch-portal {
    top: 50%;
    animation: shortPortal .5s ease both;
}

.launch-experience.is-short .launch-progress i {
    animation-duration: .45s;
}

@keyframes coreArrival {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    32%, 75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes ringSpinReverse { to { transform: rotate(-360deg); } }
@keyframes energyPulse { to { transform: scale(1.2); opacity: .8; } }

@keyframes craftLaunch {
    0% { opacity: 0; transform: translate(-50%, 16vh) scale(.76); }
    10% { opacity: 1; }
    54% { opacity: 1; transform: translate(-50%, -7vh) scale(.96); }
    100% { opacity: 0; transform: translate(-50%, -92vh) scale(.38); }
}

@keyframes starAcceleration {
    0% { opacity: 0; transform: translateY(0) scaleY(.2); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translateY(160vh) scaleY(2.2); }
}

@keyframes portalOpen {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
    45% { opacity: 1; }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(13); }
}

@keyframes shortPortal {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(13); }
}

@keyframes launchProgress { to { transform: translateX(0); } }

@media (max-width: 600px) {
    .launch-core {
        width: min(72vw, 330px);
    }

    .launch-craft {
        width: 84px;
    }

    #launchStatus {
        font-size: 13px;
        letter-spacing: .12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .launch-experience.is-active .launch-core,
    .launch-experience.is-active .launch-craft,
    .launch-experience.is-active .launch-stars {
        display: none;
    }

    .launch-experience.is-active .launch-portal {
        top: 50%;
        animation: shortPortal .01ms linear both !important;
    }
}