.intro--banner { isolation: isolate; }
.intro--banner h1, .intro--banner > .cta { z-index: 3; }
.cosmic-hero {
    --drift-x: 0px;
    --drift-y: 0px;
    position: absolute;
    width: 450px;
    height: 490px;
    right: -24px;
    bottom: 20px;
    pointer-events: none;
    z-index: 0;
}
.cosmic-hero__halo {
    position: absolute;
    inset: 9% -6% 5%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(15,51,255,.22), rgba(32,117,220,.07) 46%, transparent 70%);
    transform: translate(calc(var(--drift-x) * -.4), calc(var(--drift-y) * -.4));
    animation: cosmic-glow 7s ease-in-out infinite alternate;
}
.cosmic-hero__figure {
    position: absolute;
    inset: 0 12px 0 22px;
    transform: translate(var(--drift-x), var(--drift-y));
    transition: transform .35s ease-out;
}
.intro--banner .cosmic-hero__figure img {
    display: block;
    position: static;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.4));
    animation: cosmic-float 8s ease-in-out infinite;
}
.cosmic-hero__orbit {
    position: absolute;
    left: -2%;
    top: 24%;
    width: 108%;
    height: 45%;
    border-radius: 50%;
    border: 1px solid rgba(81,133,255,.3);
    transform: translate(calc(var(--drift-x) * -.6), calc(var(--drift-y) * -.6)) rotate(-27deg);
    transition: transform .65s ease-out;
}
.cosmic-hero__orbit--back {
    box-shadow: 0 -1px 12px rgba(31,88,255,.15);
}
.cosmic-hero__orbit--back::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #8ccfff;
    border-radius: 50%;
    top: 18%;
    right: 10%;
    box-shadow: 0 0 14px #397cff;
}
.cosmic-hero__orbit--front {
    top: 35%;
    left: -4%;
    width: 112%;
    height: 36%;
    border-color: transparent transparent rgba(89,174,255,.65) rgba(61,115,255,.3);
    transform: translate(calc(var(--drift-x) * 1.5), calc(var(--drift-y) * 1.5)) rotate(-27deg);
    filter: drop-shadow(0 2px 6px rgba(39,105,255,.35));
}
.cosmic-hero__stars { position: absolute; inset: 0; }
.cosmic-hero__stars i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #a7d9ff;
    box-shadow: 0 0 12px #407aff;
    animation: cosmic-star 4s ease-in-out infinite alternate;
}
.cosmic-hero__stars i:nth-child(1) { left: 8%; top: 28%; }
.cosmic-hero__stars i:nth-child(2) { right: 2%; top: 16%; animation-delay: -1s; }
.cosmic-hero__stars i:nth-child(3) { left: 15%; bottom: 21%; animation-delay: -2s; }
.cosmic-hero__stars i:nth-child(4) { right: 7%; bottom: 12%; animation-delay: -3s; }
.cosmic-hero__stars i:nth-child(5) { left: 39%; top: 7%; width: 2px; height: 2px; }
.section:not(.section--is-active) .cosmic-hero *,
html[data-page-hidden] .cosmic-hero * { animation-play-state: paused; }
@keyframes cosmic-float {
    0%, 100% { transform: translateY(5px) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
}
@keyframes cosmic-glow { from { opacity: .6; } to { opacity: 1; } }
@keyframes cosmic-star { from { opacity: .25; } to { opacity: .85; } }
@media (max-width: 1180px) {
    .cosmic-hero { width: 390px; height: 410px; right: -10px; }
}
@media (max-width: 900px) {
    .cosmic-hero { width: 310px; height: 335px; right: -12px; }
}
@media (max-width: 600px) {
    .cosmic-hero { width: 205px; height: 255px; right: -18px; bottom: 20px; opacity: .65; }
    .intro--banner h1 { text-shadow: 0 2px 22px #0c0c0c; }
    .cosmic-hero__orbit { opacity: .5; }
}
@media (max-width: 600px) and (max-height: 750px) {
    .cosmic-hero { width: 170px; height: 205px; opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .cosmic-hero *, .intro--banner .cosmic-hero__figure img { animation: none; transition: none; }
    .cosmic-hero { --drift-x: 0px !important; --drift-y: 0px !important; }
}