/* Lightweight, code-native atmosphere for the first screen. */
.frame1 {
    isolation: isolate;
}

.frame1 .textBlock,
.frame1 .slider {
    position: relative;
    z-index: 2;
}

.frame1 h1.header {
    margin: 0;
}

.innovation-cosmos {
    position: absolute;
    inset: -120px -18vw -140px -18vw;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .82;
    background:
        radial-gradient(circle at 17% 24%, rgba(135, 198, 237, .52) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .48) 0 1px, transparent 1.8px),
        radial-gradient(circle at 88% 64%, rgba(135, 198, 237, .4) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 78%, rgba(255, 255, 255, .3) 0 1px, transparent 1.6px),
        radial-gradient(ellipse at 78% 44%, rgba(68, 151, 210, .12), transparent 45%);
    background-size: 170px 170px, 230px 230px, 290px 290px, 370px 370px, auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.innovation-cosmos::before {
    content: "";
    position: absolute;
    inset: 20% 6% 8% 42%;
    opacity: .28;
    background:
        repeating-linear-gradient(90deg, rgba(135, 198, 237, .22) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(135, 198, 237, .16) 0 1px, transparent 1px 42px);
    transform: perspective(520px) rotateX(62deg) rotateZ(-8deg);
    transform-origin: 50% 100%;
}

.innovation-orb {
    position: absolute;
    display: block;
    border: 1px solid rgba(180, 224, 252, .5);
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .28), transparent 18%),
        radial-gradient(circle at 62% 72%, rgba(76, 154, 213, .15), rgba(5, 13, 29, .12) 55%, transparent 72%);
    box-shadow:
        inset -12px -15px 26px rgba(30, 111, 176, .14),
        inset 4px 4px 14px rgba(255, 255, 255, .08),
        0 0 34px rgba(75, 166, 229, .11);
    animation: iqssi-float 11s ease-in-out infinite;
}

.innovation-orb--one {
    width: 68px;
    height: 68px;
    top: 20%;
    left: 57%;
}

.innovation-orb--two {
    width: 34px;
    height: 34px;
    top: 57%;
    left: 47%;
    animation-delay: -4s;
    animation-duration: 9s;
}

.innovation-orb--three {
    width: 104px;
    height: 104px;
    right: 6%;
    bottom: 7%;
    opacity: .54;
    animation-delay: -7s;
    animation-duration: 15s;
}

.innovation-star {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #dff4ff;
    box-shadow: 0 0 10px 2px rgba(135, 198, 237, .75);
    animation: iqssi-pulse 4s ease-in-out infinite;
}

.innovation-star--one {
    top: 31%;
    right: 27%;
}

.innovation-star--two {
    left: 34%;
    bottom: 28%;
    animation-delay: -2s;
}

.code-whisper {
    position: absolute;
    right: 7%;
    bottom: 14%;
    display: grid;
    gap: 8px;
    color: rgba(160, 215, 247, .22);
    font: 500 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .08em;
    transform: rotate(-4deg);
}

.code-whisper span:nth-child(2) {
    transform: translateX(24px);
}

.code-whisper span:nth-child(3) {
    transform: translateX(-16px);
}

@keyframes iqssi-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(10px, -16px, 0) scale(1.035); }
}

@keyframes iqssi-pulse {
    0%, 100% { opacity: .28; transform: scale(.8); }
    50% { opacity: .95; transform: scale(1.25); }
}

@media (max-width: 1023px) {
    .innovation-cosmos {
        inset-inline: -30vw;
        opacity: .7;
    }

    .innovation-orb--one {
        left: auto;
        right: 18%;
    }

    .innovation-orb--three,
    .code-whisper {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .innovation-orb,
    .innovation-star {
        animation: none;
    }
}