/* Existing PJ Designs rocket. Original animation credit: Julia Miocene, https://codepen.io/miocene/pen/dRLbGP. Ported from the existing AnimatedPlanets component. */

        .universe {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-around;
          height: 100%;
          min-height: 280px;
          width: 100%;
          max-width: 900px;
          margin: auto;
          overflow: visible;
        }
        .universe__part *, .universe__part *::before, .universe__part *::after {
          position: absolute;
          content: '';
        }

        /* ===== PART 3: Rocket Launch ===== */
        .universe__part {
          position: relative;
          width: 266px; height: 250px;
          transform: scale(1.9); /* Shrunk by ~1/3 from 2.8 */
          margin-top: 50px;
          margin-bottom: 40px;
        }
        .universe__part .universe__planet {
          top: 163px; left: 79px;
          height: 67px; width: 106px;
          border-radius: 7px 7px 50px 50px;
          background: linear-gradient(180deg, #ebf3fe 34%, #77cdff 35%, #77cdff 47%, #58b6fc 48%);
        }
        .universe__part .universe__planet:before {
          left: 14px; top: 11px;
          height: 20px; width: 36px;
          border-radius: 20px 20px 0 0;
          background: #77cdff;
        }
        .universe__part .universe__planet:after {
          top: 25px; left: 58px;
          width: 40px; height: 20px;
          border-radius: 0 0 30px 30px;
          background: #77cdff;
        }
        .universe__part .universe__hills {
          top: 119px; left: 150px;
          height: 44px; width: 30px;
          border-radius: 20px 20px 0 0;
          background: #306CF2;
        }
        .universe__part .universe__hills:before {
          left: -20px; top: 10px;
          height: 34px; width: 30px;
          border-radius: 15px 15px 0 0;
          background: #3EADFC;
          box-shadow: 4px 0 0 rgba(0, 0, 0, 0.1);
          z-index: 10;
        }
        .universe__part .universe__hills:after {
          left: -16px; top: 31px;
          height: 24px; width: 32px;
          border-radius: 15px 15px 0 0;
          background: #EBF3FE;
          z-index: 10;
        }
        .universe__part .universe__bubble:nth-child(1) {
          top: 160px; left: 86px;
          height: 8px; width: 8px;
          border-radius: 100%;
          background: #FFFFFF;
          animation: universe-star 4s ease infinite;
        }
        .universe__part .universe__bubble:nth-child(2) {
          top: 151px; left: 91px;
          height: 18px; width: 18px;
          border-radius: 100%;
          background: #FFFFFF;
          animation: universe-star 5s ease infinite;
          animation-delay: -2s;
        }
        .universe__part .universe__bubble:nth-child(3) {
          top: 155px; left: 107px;
          height: 14px; width: 14px;
          border-radius: 100%;
          background: #FFFFFF;
          animation: universe-star 3s ease infinite;
          animation-delay: -1s;
        }
        .universe__part .universe__bubble:nth-child(4) {
          top: 154px; left: 120px;
          height: 10px; width: 10px;
          border-radius: 100%;
          background: #FFFFFF;
          animation: universe-star 6s ease infinite;
        }
        .universe__part .universe__bubble:nth-child(5) {
          top: 149px; left: 126px;
          height: 16px; width: 16px;
          border-radius: 100%;
          background: #FFFFFF;
          animation: universe-star 4s ease infinite;
          animation-delay: -2s;
        }
        .universe__part .universe__bubble:nth-child(6) {
          top: 160px; left: 118px;
          height: 8px; width: 8px;
          border-radius: 100%;
          background: #FFFFFF;
          animation: universe-star 5s ease infinite;
          animation-delay: -1s;
        }
        .universe__part .universe__rocket {
          top: 116px; left: 96px;
          height: 14px; width: 39px;
          border-radius: 50% 50% 2px 2px / 100% 100% 2px 2px;
          background: #2D97F7;
          animation: universe-rocket 3s ease-in-out infinite;
          z-index: 5;
          cursor: pointer;
          transition: filter 0.2s;
          isolation: isolate;
        }
        .universe__part .universe__rocket:hover {
          filter: brightness(1.2) drop-shadow(0 0 8px rgba(45, 151, 247, 0.4));
        }
        .universe__part .universe__rocket:before {
          top: -18px; left: 7px;
          height: 32px; width: 26px;
          border-radius: 50% 50% 2px 2px / 100% 100% 2px 2px;
          background: linear-gradient(to right, #ffffff 49%, #a8d3fd 50%);
        }
        .universe__part .universe__rocket:after {
          top: 14px; left: 13px;
          height: 4px; width: 12px;
          border-radius: 2px;
          background: #2D97F7;
        }
        .universe__part .universe__rocket-window {
          top: -7px; left: 14px;
          height: 8px; width: 8px;
          border-radius: 100%;
          background: #214A8A;
          border: 2px solid #A8D4F9;
        }
        .universe__part .universe__rocket-light {
          top: 18px; left: 17px;
          height: 29px; width: 5px;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
        }
        .universe__part .universe__sattelite {
          top: 73px; left: 140px;
          height: 32px; width: 32px;
          border-radius: 100%;
          background: linear-gradient(to right, #fa016d 0%, rgba(250, 1, 109, 0) 100%);
        }
        .universe__part .universe__sattelite:before {
          left: 34px; top: -8px;
          height: 9px; width: 9px;
          border-radius: 100%;
          background: #2D97F7;
        }
        .universe__part .universe__sattelite:after {
          left: 49px; top: 16px;
          height: 3px; width: 3px;
          border-radius: 100%;
          background: #EEF9FF;
        }

        /* Part 3 Stars */
        .universe__part .universe__star:nth-child(11) {
          top: 80px; left: 66px;
          height: 3px; width: 3px;
          animation: universe-star 6s linear infinite;
          animation-delay: -2s;
        }
        .universe__part .universe__star:nth-child(11):before {
          left: 0px; top: 1px;
          height: 1px; width: 100%;
          border-radius: 1px;
          background: #2D97F5;
        }
        .universe__part .universe__star:nth-child(11):after {
          left: 1px; top: 0px;
          height: 100%; width: 1px;
          border-radius: 1px;
          background: #2D97F5;
        }
        .universe__part .universe__star:nth-child(12) {
          top: 69px; left: 83px;
          height: 8px; width: 8px;
          animation: universe-star 6s linear infinite;
          animation-delay: -3s;
        }
        .universe__part .universe__star:nth-child(12):before {
          left: 0px; top: 3px;
          height: 2px; width: 100%;
          border-radius: 2px;
          background: white;
        }
        .universe__part .universe__star:nth-child(12):after {
          left: 3px; top: 0px;
          height: 100%; width: 2px;
          border-radius: 2px;
          background: white;
        }
        .universe__part .universe__star:nth-child(13) {
          top: 91px; left: 73px;
          height: 3px; width: 3px;
          animation: universe-star 6s linear infinite;
          animation-delay: -4s;
        }
        .universe__part .universe__star:nth-child(13):before {
          left: 0px; top: 1px;
          height: 1px; width: 100%;
          border-radius: 1px;
          background: #2D97F5;
        }
        .universe__part .universe__star:nth-child(13):after {
          left: 1px; top: 0px;
          height: 100%; width: 1px;
          border-radius: 1px;
          background: #2D97F5;
        }
        .universe__part .universe__star:nth-child(14) {
          top: 78px; left: 119px;
          height: 6px; width: 6px;
          animation: universe-star 6s linear infinite;
          animation-delay: -5s;
        }
        .universe__part .universe__star:nth-child(14):before {
          left: 0px; top: 2px;
          height: 2px; width: 100%;
          border-radius: 2px;
          background: #2D97F5;
        }
        .universe__part .universe__star:nth-child(14):after {
          left: 2px; top: 0px;
          height: 100%; width: 2px;
          border-radius: 2px;
          background: #2D97F5;
        }
        .universe__part .universe__star:nth-child(15) {
          top: 76px; left: 195px;
          height: 3px; width: 3px;
          animation: universe-star 6s linear infinite;
          animation-delay: -1s;
        }
        .universe__part .universe__star:nth-child(15):before {
          left: 0px; top: 1px;
          height: 1px; width: 100%;
          border-radius: 1px;
          background: #2D97F5;
        }
        .universe__part .universe__star:nth-child(15):after {
          left: 1px; top: 0px;
          height: 100%; width: 1px;
          border-radius: 1px;
          background: #2D97F5;
        }

        /* ===== Animations ===== */
        @keyframes universe-ufo {
          0% { transform: translateY(0); }
          50% { transform: translateY(5px); }
          100% { transform: translateY(0); }
        }
        @keyframes universe-rocket {
          0% { transform: translateY(0) rotate(0deg); }
          25% { transform: translateY(-4px) rotate(-0.5deg); }
          50% { transform: translateY(5px) rotate(0.3deg); }
          75% { transform: translateY(-2px) rotate(-0.3deg); }
          100% { transform: translateY(0) rotate(0deg); }
        }

        /* SpaceX style launch, flip, and suicide burn landing */
        @keyframes universe-rocket-spacex {
          0%   { transform: translate(0, 0) rotate(0deg); }
          /* Liftoff - heavy, slow start straight up */
          15%  { transform: translate(0, -100px) rotate(0deg); }
          /* Ascend high out of frame */
          35%  { transform: translate(0, -500px) rotate(0deg); }
          /* Apogee - engine off, flip 180 degrees to retrograde */
          50%  { transform: translate(0, -520px) rotate(180deg); }
          /* Falling straight back down */
          65%  { transform: translate(0, -200px) rotate(180deg); }
          /* Grid fins / thrusters flip it back upright for landing */
          80%  { transform: translate(0, -80px) rotate(360deg); }
          /* Suicide burn deceleration - coming in heavy */
          92%  { transform: translate(0, -15px) rotate(360deg); }
          /* Gentle touchdown */
          100% { transform: translate(0, 0) rotate(360deg); }
        }

        @keyframes universe-exhaust-spacex {
          0%   { opacity: 0; transform: scaleY(0.5); }
          /* Ignition */
          2%   { opacity: 1; transform: scaleY(1); }
          /* Full thrust liftoff */
          15%  { opacity: 1; transform: scaleY(4.5); }
          /* Main engine cutoff (MECO) */
          32%  { opacity: 0; transform: scaleY(0); }
          /* Flip burn */
          48%  { opacity: 1; transform: scaleY(1.5); }
          52%  { opacity: 0; transform: scaleY(0); }
          /* Suicide burn ignition (landing) */
          75%  { opacity: 1; transform: scaleY(4); }
          /* Throttling down just before touchdown */
          96%  { opacity: 1; transform: scaleY(1.5); }
          100% { opacity: 0; transform: scaleY(0.5); }
        }

        /* Massive smoke plumes for liftoff and landing */
        @keyframes universe-smoke-spacex {
          0%   { opacity: 0; transform: scale(0.5) translate(0, 0); }
          /* Ignition smoke burst */
          2%   { opacity: 0.8; transform: scale(2) translate(0, 10px); }
          /* Smoke fills the pad as rocket slowly lifts off */
          10%  { opacity: 0.6; transform: scale(4) translate(0, 20px); filter: blur(4px); }
          /* Smoke dissipates as rocket clears the tower */
          20%  { opacity: 0; transform: scale(6) translate(0, 40px); filter: blur(8px); }
          /* Wait for landing */
          75%  { opacity: 0; transform: scale(0.5) translate(0, 0); }
          /* Suicide burn smoke */
          85%  { opacity: 0.7; transform: scale(3) translate(0, 15px); filter: blur(3px); }
          /* Residual landing smoke dissipates */
          100% { opacity: 0; transform: scale(5) translate(0, 30px); filter: blur(8px); }
        }

        /* Use ease-in-out for a very smooth, heavy-feeling rocket start and landing */
        .universe__rocket--launching {
          animation: universe-rocket-spacex 9s ease-in-out forwards !important;
        }
        .universe__rocket--launching .universe__rocket-exhaust {
          animation: universe-exhaust-spacex 9s ease-in-out forwards !important;
        }
        .universe__rocket--launching .universe__rocket-smoke {
          animation: universe-smoke-spacex 9s ease-in-out forwards !important;
        }
        @keyframes universe-ufo-light {
          0% { opacity: 1; }
          50% { opacity: .6; }
          100% { opacity: 1; }
        }
        @keyframes universe-star {
          0% { transform: scale(1); }
          50% { transform: scale(2); }
          100% { transform: scale(1); }
        }
        @keyframes universe-float {
          0% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
          100% { transform: translateY(0); }
        }
        @keyframes universe-exhaust-flicker {
          0% { opacity: 0.9; transform: scaleY(1) scaleX(1); }
          25% { opacity: 1; transform: scaleY(1.15) scaleX(0.9); }
          50% { opacity: 0.8; transform: scaleY(0.9) scaleX(1.1); }
          75% { opacity: 1; transform: scaleY(1.1) scaleX(0.95); }
          100% { opacity: 0.9; transform: scaleY(1) scaleX(1); }
        }
        @keyframes universe-exhaust-glow {
          0% { opacity: 0.3; }
          50% { opacity: 0.6; }
          100% { opacity: 0.3; }
        }

        /* Rocket exhaust flame */
        .universe__rocket-exhaust {
          position: absolute;
          top: 16px; left: 11px;
          width: 16px; height: 18px;
          border-radius: 0 0 50% 50%;
          background: linear-gradient(to bottom, #ffa500 0%, #ff6b00 40%, #ff3d00 70%, rgba(255, 61, 0, 0) 100%);
          animation: universe-exhaust-flicker 0.3s ease-in-out infinite;
          z-index: -1;
          transform-origin: 50% 0%;
          will-change: transform, opacity;
        }
        .universe__rocket-exhaust:before {
          position: absolute;
          content: '';
          top: 1px; left: 3px;
          width: 10px; height: 12px;
          border-radius: 0 0 50% 50%;
          background: linear-gradient(to bottom, #ffff00 0%, #ffa500 60%, rgba(255, 165, 0, 0) 100%);
          animation: universe-exhaust-flicker 0.2s ease-in-out infinite;
          animation-delay: -0.1s;
        }
        .universe__rocket-exhaust:after {
          position: absolute;
          content: '';
          top: -4px; left: 2px;
          width: 12px; height: 12px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(255, 165, 0, 0.4) 0%, rgba(255, 165, 0, 0) 70%);
          animation: universe-exhaust-glow 1.5s ease-in-out infinite;
        }

        /* Rocket Smoke Plumes */
        .universe__rocket-smoke {
          position: absolute;
          top: 30px; left: -10px;
          width: 60px; height: 60px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(230,240,255,1) 0%, rgba(200,220,240,0.8) 40%, rgba(180,200,230,0) 70%);
          z-index: -2;
          opacity: 0;
          pointer-events: none;
        }
        .universe__rocket-smoke.s2 {
          top: 35px; left: 5px;
          width: 80px; height: 70px;
          background: radial-gradient(circle, rgba(240,245,255,1) 0%, rgba(210,230,250,0.7) 50%, rgba(190,210,240,0) 80%);
          animation-delay: 0.5s;
        }
        .universe__rocket-smoke.s3 {
          top: 25px; left: -25px;
          width: 70px; height: 50px;
          background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(220,235,255,0.9) 30%, rgba(200,220,245,0) 65%);
          animation-delay: 0.2s;
        }

        /* ===== Responsive: hide side scenes on small screens ===== */
        @media (max-width: 768px) {
          .universe {
            min-height: 150px;
            justify-content: center;
          }
          .universe__part {
            transform: scale(0.9);
            margin-top: -40px;
            margin-bottom: -40px;
          }
        }
        @media (min-width: 769px) and (max-width: 1024px) {
          .universe {
            min-height: 250px;
          }
          .universe__part {
            transform: scale(1.5);
            margin-top: 20px;
            margin-bottom: 20px;
          }
        }