/* DEVSPROG rocket: local vector animation and one-shot settled state. */
.hero-rocket-wrap {
    cursor: default;
    touch-action: pan-y;
}

.hero-rocket-scene {
    --launch-distance: -100vh;
    --settled-offset: 0px;
    aspect-ratio: 0.75;
    contain: layout paint style;
}

.hero-rocket-scene::before {
    bottom: 0;
    width: 82%;
    height: 28%;
    background: radial-gradient(
        circle,
        rgba(158, 244, 255, 0.32) 0%,
        rgba(67, 132, 255, 0.16) 44%,
        rgba(0, 0, 0, 0) 76%
    );
    filter: blur(24px);
}

.hero-rocket-scene::after {
    top: 8%;
    width: 48%;
    height: 48%;
    background: radial-gradient(
        circle,
        rgba(142, 239, 255, 0.2) 0%,
        rgba(73, 98, 255, 0.08) 48%,
        rgba(0, 0, 0, 0) 76%
    );
    filter: blur(13px);
}

.hero-rocket-float {
    width: 100%;
    animation: devsprog-rocket-float 4.4s ease-in-out infinite;
}

.hero-rocket-orbit {
    width: 100%;
    animation: devsprog-rocket-tilt 6.2s ease-in-out infinite;
    will-change: transform, opacity;
}

.hero-rocket {
    display: block;
    overflow: visible;
    width: var(--rocket-width);
    max-width: 100%;
    height: auto;
    filter:
        drop-shadow(0 0 0.95rem rgba(91, 224, 255, 0.46))
        drop-shadow(0 0 2.4rem rgba(71, 102, 255, 0.18));
    transform-origin: 50% 54%;
    animation: devsprog-rocket-vibrate 0.18s linear infinite;
    shape-rendering: geometricPrecision;
    will-change: transform;
}

.rocket-energy-field {
    opacity: 0.78;
    filter: url("#rocketWideGlow");
    transform-origin: 180px 350px;
    animation: devsprog-energy-breathe 1.6s ease-in-out infinite alternate;
}

.rocket-energy-ring {
    fill: none;
    stroke: #8defff;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
}

.rocket-energy-ring-a {
    opacity: 0.42;
    animation: devsprog-energy-ring 1.9s ease-out infinite;
}

.rocket-energy-ring-b {
    opacity: 0.22;
    animation: devsprog-energy-ring 1.9s 0.7s ease-out infinite;
}

.rocket-energy-column {
    fill: url("#rocketFlameOuter");
    opacity: 0.34;
}

.rocket-plume {
    transform-origin: 180px 326px;
    animation: devsprog-plume-breathe 0.42s ease-in-out infinite alternate;
}

.rocket-flame-outer {
    fill: url("#rocketFlameOuter");
    opacity: 0.56;
    filter: url("#rocketWideGlow");
}

.rocket-flame-mid {
    fill: url("#rocketFlameOuter");
    opacity: 0.78;
    filter: url("#rocketSoftGlow");
}

.rocket-flame-core {
    fill: url("#rocketFlameCore");
    opacity: 0.98;
    filter: url("#rocketSoftGlow");
}

.rocket-vector-sparks {
    fill: #ddfbff;
    filter: url("#rocketSoftGlow");
}

.rocket-vector-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: devsprog-vector-spark 1.55s ease-out infinite;
}

.spark-b,
.spark-e {
    animation-delay: 0.32s;
}

.spark-c,
.spark-f {
    animation-delay: 0.76s;
}

.spark-d {
    animation-delay: 1.08s;
}

.rocket-vessel-glow {
    fill: rgba(55, 160, 255, 0.17);
    stroke: rgba(166, 246, 255, 0.72);
    stroke-width: 6;
    filter: url("#rocketSoftGlow");
}

.rocket-body {
    fill: url("#rocketBody");
    stroke: #baf8ff;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.rocket-wireframe {
    fill: none;
    stroke: rgba(225, 253, 255, 0.62);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rocket-fin {
    fill: url("#rocketFin");
    stroke: rgba(191, 249, 255, 0.9);
    stroke-width: 2;
    stroke-linejoin: round;
}

.rocket-fin-line {
    fill: none;
    stroke: rgba(220, 253, 255, 0.58);
    stroke-width: 1.2;
}

.rocket-window-halo {
    fill: none;
    stroke: rgba(142, 239, 255, 0.42);
    stroke-width: 5;
    filter: url("#rocketSoftGlow");
}

.rocket-window-frame {
    fill: rgba(3, 28, 83, 0.52);
    stroke: #d8fdff;
    stroke-width: 3;
}

.rocket-window {
    fill: url("#rocketWindow");
    stroke: rgba(157, 244, 255, 0.74);
    stroke-width: 1.5;
}

.rocket-window-shine,
.rocket-spine {
    fill: none;
    stroke: rgba(237, 255, 255, 0.78);
    stroke-width: 2;
    stroke-linecap: round;
}

.rocket-spine {
    stroke-width: 1.35;
    opacity: 0.58;
}

.rocket-engine {
    fill: rgba(3, 28, 83, 0.78);
    stroke: rgba(181, 247, 255, 0.9);
    stroke-width: 2;
}

.rocket-engine-light {
    fill: rgba(142, 239, 255, 0.72);
    filter: url("#rocketSoftGlow");
}

.hero-rocket-scene.is-launching .hero-rocket-float,
.hero-rocket-scene.is-launching .hero-rocket {
    animation: none !important;
}

.hero-rocket-scene.is-launching .hero-rocket-orbit {
    animation: devsprog-rocket-launch 4.0s cubic-bezier(0.18, 0.74, 0.13, 1) forwards !important;
}

.hero-rocket-scene.is-launching .rocket-plume {
    animation: devsprog-plume-launch 0.14s ease-in-out infinite alternate !important;
}

.hero-rocket-scene.is-launching .rocket-energy-field {
    animation: devsprog-energy-launch 0.72s ease-out forwards !important;
}

.hero-rocket-scene.is-returning::before,
.hero-rocket-scene.is-returning::after,
.hero-rocket-scene.is-settled::before,
.hero-rocket-scene.is-settled::after {
    opacity: 0;
}

.hero-rocket-scene.is-returning .rocket-plume,
.hero-rocket-scene.is-returning .rocket-energy-field,
.hero-rocket-scene.is-returning .rocket-vector-sparks,
.hero-rocket-scene.is-settled .rocket-plume,
.hero-rocket-scene.is-settled .rocket-energy-field,
.hero-rocket-scene.is-settled .rocket-vector-sparks {
    opacity: 0;
    visibility: hidden;
    animation: none !important;
}

.hero-rocket-scene.is-returning .hero-rocket-float,
.hero-rocket-scene.is-returning .hero-rocket,
.hero-rocket-scene.is-settled .hero-rocket-float,
.hero-rocket-scene.is-settled .hero-rocket {
    animation: none !important;
}

.hero-rocket-scene.is-returning .hero-rocket {
    filter: none !important;
}

.hero-rocket-scene.is-returning .hero-rocket-orbit {
    opacity: 0;
    animation: devsprog-rocket-return 0.95s ease-out forwards !important;
}

.hero-rocket-scene.is-settled .hero-rocket-orbit {
    animation: none !important;
    transform: translate3d(0, var(--settled-offset), 0) !important;
    will-change: auto;
}

.hero-rocket-scene.is-settled .hero-rocket {
    filter: none !important;
    transform: none !important;
    will-change: auto;
}

.hero-rocket-scene.is-settled .rocket-vessel-glow,
.hero-rocket-scene.is-settled .rocket-window-halo,
.hero-rocket-scene.is-settled .rocket-engine-light {
    filter: none;
    opacity: 0.24;
}

@keyframes devsprog-rocket-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -9px, 0);
    }
}

@keyframes devsprog-rocket-tilt {
    0%,
    100% {
        transform: rotate(-0.75deg);
    }
    50% {
        transform: rotate(0.75deg);
    }
}

@keyframes devsprog-rocket-vibrate {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(0.55px, 0.4px, 0);
    }
    50% {
        transform: translate3d(-0.55px, -0.4px, 0);
    }
    75% {
        transform: translate3d(0.45px, -0.35px, 0);
    }
}

@keyframes devsprog-energy-breathe {
    from {
        opacity: 0.42;
        transform: scale(0.94);
    }
    to {
        opacity: 0.86;
        transform: scale(1.03);
    }
}

@keyframes devsprog-energy-ring {
    0% {
        opacity: 0.48;
        transform: scale(0.76);
    }
    100% {
        opacity: 0;
        transform: scale(1.24);
    }
}

@keyframes devsprog-plume-breathe {
    from {
        opacity: 0.78;
        transform: scale3d(0.96, 0.94, 1);
    }
    to {
        opacity: 1;
        transform: scale3d(1.03, 1.06, 1);
    }
}

@keyframes devsprog-vector-spark {
    0% {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scale(0.55);
    }
    24% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(1.2);
    }
}

@keyframes devsprog-rocket-launch {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    9% {
        opacity: 1;
        transform: translate3d(0, 9px, 0) scale3d(0.985, 1.025, 1);
    }
    20% {
        opacity: 1;
        transform: translate3d(0, -18px, 0) scale(1.015);
    }
    68% {
        opacity: 1;
        transform: translate3d(0, calc(var(--launch-distance) * 0.56), 0) scale(0.93);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, var(--launch-distance), 0) scale(0.78);
    }
}

@keyframes devsprog-plume-launch {
    from {
        opacity: 0.92;
        transform: scale3d(0.92, 1.02, 1);
    }
    to {
        opacity: 1;
        transform: scale3d(1.08, 1.18, 1);
    }
}

@keyframes devsprog-energy-launch {
    0% {
        opacity: 0.84;
        transform: scale(0.94);
    }
    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

@keyframes devsprog-rocket-return {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(var(--settled-offset) + 1rem), 0) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, var(--settled-offset), 0) scale(1);
    }
}

@media (max-width: 767.98px) {
    .devsprog-service-core .hero-rocket-scene {
        width: min(100%, 245px);
    }

    .devsprog-service-core .hero-rocket {
        width: min(100%, 195px);
        max-width: 195px;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .devsprog-service-core .hero-rocket-scene {
        width: min(100%, 360px);
    }

    .devsprog-service-core .hero-rocket {
        width: min(100%, 320px);
        max-width: 320px;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .devsprog-service-core .hero-rocket-scene {
        width: min(100%, 410px);
    }

    .devsprog-service-core .hero-rocket {
        width: min(100%, 320px);
        max-width: 320px;
    }
}

@media (min-width: 1440.02px) {
    .devsprog-service-core .hero-rocket-scene {
        width: min(100%, 470px);
    }

    .devsprog-service-core .hero-rocket {
        width: min(100%, 405px);
        max-width: 405px;
    }
}

/* Service page: continuous ascent with compressed wind trails. */
.service-rocket-wrap {
    overflow: hidden;
    border-radius: 1.5rem;
    pointer-events: none;
}

.service-rocket-scene {
    overflow: hidden;
}

.service-rocket-wind {
    position: absolute;
    inset: -32% 4% -12%;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    transform: skewX(-4deg);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    transition: opacity 0.4s ease;
}

.service-rocket-wind span {
    position: absolute;
    top: -32%;
    width: 2px;
    height: 34%;
    border-radius: 999px;
    background: linear-gradient(to bottom, transparent, rgba(218, 252, 255, 0.94), rgba(70, 178, 255, 0.12));
    box-shadow: 0 0 10px rgba(116, 226, 255, 0.46);
    opacity: 0;
    animation: service-rocket-wind-rush 0.9s linear infinite;
    animation-play-state: paused;
    will-change: transform, opacity;
}

.service-rocket-wind span:nth-child(1) {
    left: 7%;
    height: 26%;
    animation-duration: 0.82s;
    animation-delay: -0.34s;
}

.service-rocket-wind span:nth-child(2) {
    left: 18%;
    height: 38%;
    animation-duration: 1.08s;
    animation-delay: -0.78s;
}

.service-rocket-wind span:nth-child(3) {
    left: 30%;
    height: 24%;
    animation-duration: 0.72s;
    animation-delay: -0.18s;
}

.service-rocket-wind span:nth-child(4) {
    left: 42%;
    height: 31%;
    animation-duration: 0.96s;
    animation-delay: -0.61s;
}

.service-rocket-wind span:nth-child(5) {
    left: 58%;
    height: 29%;
    animation-duration: 0.76s;
    animation-delay: -0.43s;
}

.service-rocket-wind span:nth-child(6) {
    left: 70%;
    height: 40%;
    animation-duration: 1.12s;
    animation-delay: -0.92s;
}

.service-rocket-wind span:nth-child(7) {
    left: 82%;
    height: 23%;
    animation-duration: 0.68s;
    animation-delay: -0.27s;
}

.service-rocket-wind span:nth-child(8) {
    left: 93%;
    height: 34%;
    animation-duration: 0.88s;
    animation-delay: -0.54s;
}

.service-rocket-wake {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 34%;
    height: 42%;
    z-index: 1;
    border-radius: 50%;
    background: linear-gradient(
        to bottom,
        rgba(188, 248, 255, 0.5),
        rgba(53, 143, 255, 0.18) 42%,
        transparent 88%
    );
    filter: blur(20px);
    opacity: 0;
    transform: translateX(-50%) scaleX(0.72);
    animation: service-rocket-wake 0.52s ease-in-out infinite alternate;
    animation-play-state: paused;
    will-change: transform, opacity;
}

.service-rocket-scene .hero-rocket-float {
    animation: service-rocket-climb 1.8s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.service-rocket-scene .hero-rocket-orbit {
    animation: service-rocket-bank 3.6s ease-in-out infinite;
    animation-play-state: paused;
}

.service-rocket-scene .hero-rocket,
.service-rocket-scene .rocket-plume,
.service-rocket-scene .rocket-vector-spark {
    animation-play-state: paused;
}

.service-rocket-scene.is-visible .service-rocket-wind {
    opacity: 0.74;
}

.service-rocket-scene.is-visible .service-rocket-wind span,
.service-rocket-scene.is-visible .service-rocket-wake,
.service-rocket-scene.is-visible .hero-rocket-float,
.service-rocket-scene.is-visible .hero-rocket-orbit,
.service-rocket-scene.is-visible .hero-rocket,
.service-rocket-scene.is-visible .rocket-plume,
.service-rocket-scene.is-visible .rocket-vector-spark {
    animation-play-state: running;
}

.service-rocket-scene.is-visible .service-rocket-wake {
    opacity: 0.72;
}

@keyframes service-rocket-wind-rush {
    0% {
        opacity: 0;
        transform: translate3d(0, -18%, 0) scaleY(0.45);
    }
    16% {
        opacity: 0.88;
    }
    78% {
        opacity: 0.58;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 420%, 0) scaleY(1.3);
    }
}

@keyframes service-rocket-wake {
    from {
        opacity: 0.48;
        transform: translateX(-50%) scale3d(0.66, 0.9, 1);
    }
    to {
        opacity: 0.82;
        transform: translateX(-50%) scale3d(0.8, 1.08, 1);
    }
}

@keyframes service-rocket-climb {
    from {
        transform: translate3d(0, 8px, 0) scale(0.99);
    }
    to {
        transform: translate3d(0, -12px, 0) scale(1.015);
    }
}

@keyframes service-rocket-bank {
    0%,
    100% {
        transform: rotate(-0.8deg);
    }
    50% {
        transform: rotate(0.8deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-rocket-wind,
    .service-rocket-wake {
        display: none !important;
    }

    .rocket-plume,
    .rocket-energy-field,
    .rocket-vector-sparks {
        display: none !important;
    }

    .hero-rocket-float,
    .hero-rocket-orbit,
    .hero-rocket {
        animation: none !important;
    }

    .hero-rocket-orbit {
        transform: translate3d(0, var(--settled-offset), 0) !important;
    }

    .hero-rocket {
        filter: none !important;
    }
}