body.space-scene-page {
  position: relative;
  background: #05040b;
  isolation: isolate;
}

body.space-scene-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 5, 14, 0.2), rgba(4, 5, 14, 0.56)),
    url("images/Spacebackground.png") center center / cover no-repeat;
  transform: scale(1.04);
  transform-origin: center center;
}

body.space-scene-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at top, rgba(128, 90, 213, 0.18), transparent 36%),
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(5, 4, 11, 0.04), rgba(5, 4, 11, 0.28));
  pointer-events: none;
}

.space-scene-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.space-scene-device {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  user-select: none;
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform;
  filter: drop-shadow(0 28px 44px rgba(5, 8, 20, 0.36));
  opacity: 1;
}

.space-scene-device-shell {
  height: auto;
  z-index: var(--scene-depth, 4);
}

.space-scene-device-shell.is-orbit-frozen {
  animation-play-state: paused !important;
}

.space-scene-device-drift {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

.space-scene-device-drift.is-orbit-disturbed {
  animation: space-scene-orbit-break var(--orbit-duration, 36000ms) linear both;
}

.space-scene-device-shell.is-colliding {
  z-index: 4;
}

.space-scene-device-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  will-change: transform, filter;
}

.space-scene-device-art.is-colliding {
  filter: drop-shadow(0 18px 42px rgba(150, 220, 255, 0.45)) saturate(1.18) brightness(var(--collision-flash, 1.2));
}

.space-scene-device-art.is-launched {
  animation: space-scene-collision-launch 1180ms cubic-bezier(0.14, 0.86, 0.18, 1) both;
}

.space-scene-device-art.is-recoiling {
  animation: space-scene-collision-recoil 780ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.space-scene-device-art.is-exploding {
  animation: space-scene-vape-explode var(--explode-duration, 2400ms) cubic-bezier(0.18, 0.78, 0.24, 1) both;
  filter: drop-shadow(0 0 36px rgba(255, 196, 116, 0.72)) brightness(1.42) saturate(1.24);
}

.space-scene-impact {
  position: absolute;
  width: var(--impact-size, 110px);
  aspect-ratio: 1;
  border-radius: 999px;
  translate: -50% -50%;
  pointer-events: none;
  border: 1px solid rgba(182, 237, 255, 0.75);
  box-shadow:
    0 0 28px rgba(188, 243, 255, 0.4),
    inset 0 0 18px rgba(255, 255, 255, 0.3);
  animation: space-scene-impact-burst 700ms ease-out forwards;
}

.space-scene-impact::before,
.space-scene-impact::after {
  content: "";
  position: absolute;
  inset: 50%;
  translate: -50% -50%;
  border-radius: 999px;
}

.space-scene-impact::before {
  width: 38%;
  height: 38%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(143, 225, 255, 0.2) 72%, transparent 100%);
}

.space-scene-impact::after {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.space-scene-vape-explosion {
  position: absolute;
  width: var(--explosion-size, 170px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 251, 236, 0.98) 0 12%, rgba(255, 212, 124, 0.88) 18%, rgba(255, 141, 57, 0.56) 36%, rgba(255, 108, 40, 0.24) 54%, rgba(255, 108, 40, 0) 74%),
    conic-gradient(from 0deg, rgba(255, 191, 118, 0.18), rgba(255, 124, 46, 0.58), rgba(255, 238, 214, 0.26), rgba(255, 124, 46, 0.44), rgba(255, 191, 118, 0.18));
  box-shadow:
    0 0 42px rgba(255, 176, 76, 0.42),
    0 0 92px rgba(255, 120, 44, 0.26);
  mix-blend-mode: screen;
  animation: space-scene-vape-explosion-burst 980ms ease-out forwards;
}

.space-scene-vape-explosion::before,
.space-scene-vape-explosion::after {
  content: "";
  position: absolute;
  inset: 50%;
  translate: -50% -50%;
  border-radius: 999px;
}

.space-scene-vape-explosion::before {
  width: 124%;
  height: 124%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.76), rgba(255, 224, 155, 0.16) 54%, rgba(255, 224, 155, 0) 72%);
  filter: blur(10px);
}

.space-scene-vape-explosion::after {
  width: 146%;
  height: 146%;
  background: conic-gradient(from 0deg, rgba(255, 238, 204, 0.08), rgba(255, 143, 42, 0.5), rgba(255, 238, 204, 0.08), rgba(255, 143, 42, 0.44), rgba(255, 238, 204, 0.08));
  filter: blur(2px);
}

.space-scene-shooting-star,
.space-scene-asteroid {
  position: absolute;
  pointer-events: none;
}

.space-scene-shooting-star {
  width: var(--star-length, 160px);
  height: var(--star-size, 3px);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(148, 194, 255, 0.04) 16%, rgba(174, 219, 255, 0.16) 42%, rgba(244, 249, 255, 0.82) 80%, rgba(255, 255, 255, 1));
  box-shadow:
    0 0 12px rgba(214, 241, 255, 0.66),
    0 0 30px rgba(112, 180, 255, 0.28);
  transform-origin: right center;
  mix-blend-mode: screen;
  filter: blur(0.15px);
  animation: space-scene-shooting-star-fly var(--shooting-duration, 1400ms) linear forwards;
}

.space-scene-shooting-star::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--star-haze, 28px);
  translate: 0 -50%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(130, 178, 255, 0), rgba(152, 214, 255, 0.06) 22%, rgba(204, 234, 255, 0.22) 60%, rgba(255, 255, 255, 0.5) 84%, rgba(255, 255, 255, 0.08));
  filter: blur(12px);
  opacity: 0.82;
}

.space-scene-shooting-star::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: calc(var(--star-size, 3px) * 3.2);
  height: calc(var(--star-size, 3px) * 3.2);
  translate: 0 -50%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(219, 242, 255, 0.95) 46%, rgba(168, 221, 255, 0.44) 72%, rgba(188, 242, 255, 0));
}

.space-scene-asteroid {
  width: var(--asteroid-size, 24px);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 1;
  filter: drop-shadow(0 0 30px rgba(255, 153, 64, 0.44));
  animation: space-scene-asteroid-fly var(--asteroid-duration, 11000ms) linear forwards;
}

.space-scene-asteroid.is-strike {
  z-index: 9;
  filter: drop-shadow(0 0 32px rgba(255, 164, 72, 0.52));
  animation: space-scene-asteroid-strike var(--asteroid-duration, 1600ms) cubic-bezier(0.12, 0.82, 0.22, 1) forwards;
}

.space-scene-asteroid::before,
.space-scene-asteroid::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}

.space-scene-asteroid::before {
  left: 50%;
  top: 50%;
  width: var(--asteroid-fire-length, 90px);
  height: var(--asteroid-fire-width, 20px);
  transform-origin: right center;
  translate: -100% -50%;
  rotate: var(--asteroid-tail-angle, 0deg);
  border-radius: 999px 28% 28% 999px;
  background:
    linear-gradient(90deg, rgba(255, 106, 22, 0), rgba(255, 122, 18, 0.18) 18%, rgba(255, 139, 31, 0.58) 42%, rgba(255, 188, 78, 0.98) 76%, rgba(255, 243, 212, 1) 100%);
  filter: blur(6px);
  opacity: 1;
}

.space-scene-asteroid.is-strike::before {
  filter: blur(7px);
  opacity: 1;
}

.space-scene-asteroid::after {
  left: 50%;
  top: 50%;
  width: calc(var(--asteroid-fire-length, 90px) * 0.76);
  height: calc(var(--asteroid-fire-width, 20px) * 0.44);
  transform-origin: right center;
  translate: -100% -50%;
  rotate: var(--asteroid-tail-angle, 0deg);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 182, 84, 0), rgba(255, 195, 98, 0.2) 26%, rgba(255, 225, 166, 0.84) 74%, rgba(255, 250, 236, 0.98));
  filter: blur(10px);
  opacity: 0.96;
}

.space-scene-asteroid.is-strike::after {
  opacity: 0.96;
  filter: blur(12px);
}

.space-scene-asteroid-rock {
  position: absolute;
  inset: 0;
  border-radius: 44% 52% 48% 40%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 231, 193, 0.88), rgba(196, 144, 101, 1) 32%, rgba(96, 60, 34, 1) 64%, rgba(40, 23, 12, 1) 100%),
    radial-gradient(circle at 72% 68%, rgba(27, 15, 8, 0.92), transparent 42%);
  box-shadow:
    0 0 26px rgba(255, 140, 46, 0.34),
    inset -6px -6px 10px rgba(20, 11, 5, 0.56),
    inset 4px 4px 8px rgba(255, 211, 154, 0.18);
  animation: space-scene-asteroid-spin var(--asteroid-spin-duration, 1800ms) linear infinite;
}

.space-scene-asteroid-rock::before,
.space-scene-asteroid-rock::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(50, 28, 13, 0.5);
}

.space-scene-asteroid-rock::before {
  width: 24%;
  height: 24%;
  left: 22%;
  top: 28%;
}

.space-scene-asteroid-rock::after {
  width: 18%;
  height: 18%;
  right: 18%;
  bottom: 20%;
}

.space-scene-device.device-1 {
  width: clamp(120px, 9vw, 176px);
  left: 3vw;
  top: 15vh;
  animation: space-scene-float-1 57s ease-in-out infinite;
}

.space-scene-device.device-2 {
  width: clamp(144px, 11vw, 210px);
  right: 4vw;
  top: 11vh;
  animation: space-scene-float-2 72s ease-in-out infinite;
}

.space-scene-device.device-3 {
  width: clamp(90px, 7vw, 128px);
  left: 18vw;
  top: 54vh;
  animation: space-scene-float-3 64s ease-in-out infinite;
}

.space-scene-device.device-4 {
  width: clamp(106px, 8vw, 150px);
  right: 19vw;
  top: 61vh;
  animation: space-scene-float-4 79s ease-in-out infinite;
}

.space-scene-device.device-5 {
  width: clamp(156px, 11vw, 220px);
  left: 50%;
  top: 20vh;
  animation: space-scene-float-5 88s ease-in-out infinite;
}

.space-scene-device.device-6 {
  width: clamp(82px, 6vw, 116px);
  left: 8vw;
  top: 72vh;
  animation: space-scene-float-6 53s ease-in-out infinite;
}

.space-scene-device.device-7 {
  width: clamp(92px, 7vw, 134px);
  right: 8vw;
  top: 76vh;
  animation: space-scene-float-7 69s ease-in-out infinite;
}

@keyframes space-scene-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-28deg) scale(0.72); }
  20% { transform: translate3d(8vw, -6vh, 0) rotate(-4deg) scale(0.92); }
  42% { transform: translate3d(-6vw, -16vh, 0) rotate(24deg) scale(1.16); }
  64% { transform: translate3d(12vw, -24vh, 0) rotate(44deg) scale(1.3); }
  82% { transform: translate3d(-8vw, -12vh, 0) rotate(6deg) scale(0.88); }
}

@keyframes space-scene-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg) scale(0.74); }
  18% { transform: translate3d(-7vw, -5vh, 0) rotate(38deg) scale(0.94); }
  39% { transform: translate3d(9vw, -14vh, 0) rotate(8deg) scale(1.12); }
  67% { transform: translate3d(-12vw, -22vh, 0) rotate(52deg) scale(1.28); }
  86% { transform: translate3d(6vw, -10vh, 0) rotate(20deg) scale(0.9); }
}

@keyframes space-scene-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-16deg) scale(0.7); }
  24% { transform: translate3d(6vw, -7vh, 0) rotate(10deg) scale(0.9); }
  48% { transform: translate3d(-5vw, -18vh, 0) rotate(-30deg) scale(1.1); }
  72% { transform: translate3d(10vw, -26vh, 0) rotate(18deg) scale(1.26); }
  88% { transform: translate3d(-4vw, -11vh, 0) rotate(-8deg) scale(0.86); }
}

@keyframes space-scene-float-4 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(24deg) scale(0.76); }
  22% { transform: translate3d(-8vw, -8vh, 0) rotate(2deg) scale(0.96); }
  46% { transform: translate3d(7vw, -17vh, 0) rotate(36deg) scale(1.14); }
  71% { transform: translate3d(-11vw, -28vh, 0) rotate(58deg) scale(1.32); }
  90% { transform: translate3d(5vw, -14vh, 0) rotate(16deg) scale(0.9); }
}

@keyframes space-scene-float-5 {
  0%, 100% { transform: translate3d(-50%, 0, 0) rotate(-12deg) scale(0.72); }
  18% { transform: translate3d(calc(-50% + 7vw), -6vh, 0) rotate(16deg) scale(0.94); }
  41% { transform: translate3d(calc(-50% - 8vw), -18vh, 0) rotate(-26deg) scale(1.12); }
  66% { transform: translate3d(calc(-50% + 11vw), -29vh, 0) rotate(34deg) scale(1.34); }
  85% { transform: translate3d(calc(-50% - 6vw), -12vh, 0) rotate(-8deg) scale(0.88); }
}

@keyframes space-scene-float-6 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-34deg) scale(0.68); }
  25% { transform: translate3d(7vw, -8vh, 0) rotate(-8deg) scale(0.92); }
  52% { transform: translate3d(-6vw, -20vh, 0) rotate(-42deg) scale(1.1); }
  78% { transform: translate3d(9vw, -30vh, 0) rotate(12deg) scale(1.24); }
  92% { transform: translate3d(-3vw, -12vh, 0) rotate(-20deg) scale(0.84); }
}

@keyframes space-scene-float-7 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(30deg) scale(0.74); }
  23% { transform: translate3d(-7vw, -6vh, 0) rotate(6deg) scale(0.94); }
  49% { transform: translate3d(8vw, -18vh, 0) rotate(42deg) scale(1.16); }
  74% { transform: translate3d(-10vw, -27vh, 0) rotate(62deg) scale(1.3); }
  89% { transform: translate3d(4vw, -13vh, 0) rotate(18deg) scale(0.88); }
}

@keyframes space-scene-float-8 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-22deg) scale(0.7); }
  17% { transform: translate3d(8vw, -5vh, 0) rotate(-2deg) scale(0.92); }
  43% { transform: translate3d(-9vw, -17vh, 0) rotate(-34deg) scale(1.12); }
  69% { transform: translate3d(11vw, -26vh, 0) rotate(10deg) scale(1.28); }
  87% { transform: translate3d(-5vw, -10vh, 0) rotate(-18deg) scale(0.86); }
}

@keyframes space-scene-float-9 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(12deg) scale(0.72); }
  19% { transform: translate3d(-8vw, -7vh, 0) rotate(32deg) scale(0.94); }
  44% { transform: translate3d(10vw, -19vh, 0) rotate(-6deg) scale(1.14); }
  70% { transform: translate3d(-11vw, -28vh, 0) rotate(40deg) scale(1.3); }
  90% { transform: translate3d(5vw, -13vh, 0) rotate(14deg) scale(0.88); }
}

@keyframes space-scene-float-10 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(34deg) scale(0.74); }
  16% { transform: translate3d(7vw, -4vh, 0) rotate(10deg) scale(0.92); }
  38% { transform: translate3d(-8vw, -16vh, 0) rotate(46deg) scale(1.1); }
  63% { transform: translate3d(12vw, -25vh, 0) rotate(68deg) scale(1.3); }
  84% { transform: translate3d(-6vw, -11vh, 0) rotate(22deg) scale(0.86); }
}

@keyframes space-scene-collision-launch {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  10% {
    transform: translate3d(calc(var(--collision-x, 16px) * 0.14), calc(var(--collision-y, -12px) * 0.12), 0) rotate(calc(var(--collision-rotate, 80deg) * 0.72)) scale(1.04);
  }
  32% {
    transform: translate3d(var(--collision-x, 16px), var(--collision-y, -12px), 0) rotate(var(--collision-spin, 960deg)) scale(var(--collision-scale, 1.18));
  }
  56% {
    transform: translate3d(calc(var(--collision-x, 16px) * 0.78), calc(var(--collision-y, -12px) * 0.78), 0) rotate(calc(var(--collision-spin, 960deg) * 1.26)) scale(var(--collision-squash, 0.72));
  }
  78% {
    transform: translate3d(calc(var(--collision-x, 16px) * 0.18), calc(var(--collision-y, -12px) * 0.18), 0) rotate(calc(var(--collision-rotate, 80deg) * -0.54)) scale(var(--collision-rebound, 0.92));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes space-scene-collision-recoil {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  24% {
    transform: translate3d(calc(var(--collision-x, 16px) * 0.3), calc(var(--collision-y, -12px) * 0.32), 0) rotate(var(--collision-rotate, 60deg)) scale(var(--collision-scale, 1.08));
  }
  54% {
    transform: translate3d(calc(var(--collision-x, 16px) * -0.14), calc(var(--collision-y, -12px) * -0.08), 0) rotate(calc(var(--collision-spin, 280deg) * -0.18)) scale(var(--collision-squash, 0.9));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes space-scene-vape-explode {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  14% {
    opacity: 1;
    transform: translate3d(calc(var(--explode-x, 0px) * 0.16), calc(var(--explode-y, 0px) * 0.18), 0) rotate(calc(var(--explode-rotate, 240deg) * 0.22)) scale(var(--explode-scale, 1.2));
  }
  28% {
    opacity: 0.12;
    transform: translate3d(var(--explode-x, 0px), var(--explode-y, 0px), 0) rotate(var(--explode-rotate, 240deg)) scale(calc(var(--explode-scale, 1.2) * 0.82));
  }
  58% {
    opacity: 0;
    transform: translate3d(calc(var(--explode-x, 0px) * 1.16), calc(var(--explode-y, 0px) * 1.12), 0) rotate(calc(var(--explode-rotate, 240deg) * 1.28)) scale(0.22);
  }
  76% {
    opacity: 0.18;
    transform: translate3d(calc(var(--explode-x, 0px) * -0.08), calc(var(--explode-y, 0px) * -0.08), 0) rotate(calc(var(--explode-rotate, 240deg) * -0.16)) scale(0.54);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes space-scene-orbit-break {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.18, 0.84, 0.22, 1);
  }
  8% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 0.08), calc(var(--orbit-y, 0px) * 0.08), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.06)) scale(1.01);
  }
  18% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 0.34), calc(var(--orbit-y, 0px) * 0.34), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.22)) scale(calc((1 + var(--orbit-scale, 0.88)) / 2));
  }
  30% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 0.82), calc(var(--orbit-y, 0px) * 0.82), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.62)) scale(calc((var(--orbit-scale, 0.88) + 1) / 2));
  }
  40% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 1.08), calc(var(--orbit-y, 0px) * 1.08), 0) rotate(calc(var(--orbit-rotate, 240deg) * 1.04)) scale(calc(var(--orbit-scale, 0.88) * 0.94));
    animation-timing-function: linear;
  }
  58% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 1.04), calc(var(--orbit-y, 0px) * 1.04), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.98)) scale(calc(var(--orbit-scale, 0.88) * 0.97));
  }
  72% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 1.02), calc(var(--orbit-y, 0px) * 1.02), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.96)) scale(calc(var(--orbit-scale, 0.88) * 0.98));
    animation-timing-function: cubic-bezier(0.08, 0.7, 0.14, 1);
  }
  84% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 0.78), calc(var(--orbit-y, 0px) * 0.78), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.58)) scale(calc((var(--orbit-scale, 0.88) + var(--orbit-return-scale, 1.02)) / 2));
  }
  92% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 0.54), calc(var(--orbit-y, 0px) * 0.54), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.36)) scale(var(--orbit-return-scale, 1.01));
  }
  97% {
    transform: translate3d(calc(var(--orbit-x, 0px) * 0.28), calc(var(--orbit-y, 0px) * 0.28), 0) rotate(calc(var(--orbit-rotate, 240deg) * 0.16)) scale(1.006);
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
  }
  99% {
    transform: translate3d(var(--orbit-overshoot-x, 0px), var(--orbit-overshoot-y, 0px), 0) rotate(calc(var(--orbit-rotate, 240deg) * -0.06)) scale(var(--orbit-return-scale, 1.04));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes space-scene-vape-explosion-burst {
  0% {
    opacity: 0;
    transform: scale(0.18);
  }
  16% {
    opacity: 1;
    transform: scale(0.74);
  }
  100% {
    opacity: 0;
    transform: scale(1.34);
  }
}

@keyframes space-scene-impact-burst {
  0% {
    opacity: 0;
    transform: scale(0.22);
  }
  20% {
    opacity: 1;
    transform: scale(0.74);
  }
  100% {
    opacity: 0;
    transform: scale(1.46);
  }
}

@keyframes space-scene-shooting-star-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--star-angle, 24deg)) scaleX(0.22);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--shooting-x, 90vw), var(--shooting-y, 36vh), 0) rotate(var(--star-angle, 24deg)) scaleX(1.06);
  }
}

@keyframes space-scene-asteroid-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.72);
  }
  10% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(var(--asteroid-x, 120vw), var(--asteroid-y, 0vh), 0) scale(var(--asteroid-scale, 1.18));
  }
}

@keyframes space-scene-asteroid-strike {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.74);
  }
  8% {
    opacity: 0.96;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(var(--asteroid-x, 0px), var(--asteroid-y, 0px), 0) scale(0.9);
  }
}

@keyframes space-scene-asteroid-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(var(--asteroid-spin, 360deg));
  }
}

body.space-scene-page .catalog-shell {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.space-scene-page .catalog-space-scene {
  position: absolute;
  inset: -14vh -22vw -20vh;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

body.space-scene-page .catalog-space-scene .space-scene-device {
  left: var(--scene-left, 0%);
  top: var(--scene-top, 0%);
  width: var(--scene-size, 120px);
  translate: -50% -50%;
  opacity: 1;
  animation: var(--scene-animation, space-scene-float-3) var(--scene-duration, 24s) ease-in-out infinite;
  animation-delay: var(--scene-delay, 0s);
}

body.space-scene-page .catalog-space-scene .scatter-1 {
  --scene-left: 2%;
  --scene-top: 4%;
  --scene-size: clamp(96px, 9vw, 168px);
  --scene-opacity: 0.24;
  --scene-duration: 54s;
  --scene-delay: -17s;
  --scene-animation: space-scene-float-8;
}

body.space-scene-page .catalog-space-scene .scatter-2 {
  --scene-left: 18%;
  --scene-top: 1%;
  --scene-size: clamp(132px, 11vw, 210px);
  --scene-opacity: 0.2;
  --scene-duration: 72s;
  --scene-delay: -29s;
  --scene-animation: space-scene-float-2;
}

body.space-scene-page .catalog-space-scene .scatter-3 {
  --scene-left: 44%;
  --scene-top: 7%;
  --scene-size: clamp(88px, 7vw, 130px);
  --scene-opacity: 0.18;
  --scene-duration: 49s;
  --scene-delay: -14s;
  --scene-animation: space-scene-float-9;
}

body.space-scene-page .catalog-space-scene .scatter-4 {
  --scene-left: 71%;
  --scene-top: 3%;
  --scene-size: clamp(118px, 9vw, 172px);
  --scene-opacity: 0.23;
  --scene-duration: 83s;
  --scene-delay: -31s;
  --scene-animation: space-scene-float-5;
}

body.space-scene-page .catalog-space-scene .scatter-5 {
  --scene-left: 88%;
  --scene-top: 10%;
  --scene-size: clamp(92px, 7vw, 134px);
  --scene-opacity: 0.19;
  --scene-duration: 58s;
  --scene-delay: -9s;
  --scene-animation: space-scene-float-1;
}

body.space-scene-page .catalog-space-scene .scatter-6 {
  --scene-left: 5%;
  --scene-top: 30%;
  --scene-size: clamp(146px, 11vw, 216px);
  --scene-opacity: 0.18;
  --scene-duration: 90s;
  --scene-delay: -38s;
  --scene-animation: space-scene-float-4;
}

body.space-scene-page .catalog-space-scene .scatter-7 {
  --scene-left: 31%;
  --scene-top: 36%;
  --scene-size: clamp(104px, 8vw, 154px);
  --scene-opacity: 0.21;
  --scene-duration: 63s;
  --scene-delay: -24s;
  --scene-animation: space-scene-float-10;
}

body.space-scene-page .catalog-space-scene .scatter-8 {
  --scene-left: 57%;
  --scene-top: 31%;
  --scene-size: clamp(80px, 6vw, 118px);
  --scene-opacity: 0.16;
  --scene-duration: 46s;
  --scene-delay: -15s;
  --scene-animation: space-scene-float-6;
}

body.space-scene-page .catalog-space-scene .scatter-9 {
  --scene-left: 79%;
  --scene-top: 40%;
  --scene-size: clamp(124px, 10vw, 186px);
  --scene-opacity: 0.22;
  --scene-duration: 77s;
  --scene-delay: -34s;
  --scene-animation: space-scene-float-7;
}

body.space-scene-page .catalog-space-scene .scatter-10 {
  --scene-left: 3%;
  --scene-top: 62%;
  --scene-size: clamp(94px, 8vw, 146px);
  --scene-opacity: 0.18;
  --scene-duration: 68s;
  --scene-delay: -21s;
  --scene-animation: space-scene-float-9;
}

body.space-scene-page .catalog-space-scene .scatter-11 {
  --scene-left: 23%;
  --scene-top: 70%;
  --scene-size: clamp(138px, 11vw, 208px);
  --scene-opacity: 0.17;
  --scene-duration: 96s;
  --scene-delay: -43s;
  --scene-animation: space-scene-float-5;
}

body.space-scene-page .catalog-space-scene .scatter-12 {
  --scene-left: 54%;
  --scene-top: 68%;
  --scene-size: clamp(100px, 8vw, 156px);
  --scene-opacity: 0.2;
  --scene-duration: 61s;
  --scene-delay: -19s;
  --scene-animation: space-scene-float-8;
}

body.space-scene-page .catalog-space-scene .scatter-13 {
  --scene-left: 76%;
  --scene-top: 73%;
  --scene-size: clamp(86px, 7vw, 128px);
  --scene-opacity: 0.16;
  --scene-duration: 52s;
  --scene-delay: -16s;
  --scene-animation: space-scene-float-10;
}

body.space-scene-page .catalog-space-scene .scatter-14 {
  --scene-left: 94%;
  --scene-top: 82%;
  --scene-size: clamp(112px, 9vw, 170px);
  --scene-opacity: 0.2;
  --scene-duration: 74s;
  --scene-delay: -27s;
  --scene-animation: space-scene-float-2;
}

body.space-scene-page .product-grid {
  position: relative;
  z-index: 1;
  gap: 18px;
}

body.space-scene-page .product-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

body.space-scene-page .product-card-media {
  background: transparent;
}

body.space-scene-page .product-card-media::after {
  display: none;
}

body.space-scene-page .product-card-title,
body.space-scene-page .product-card-price,
body.space-scene-page .product-card-meta,
body.space-scene-page .product-card-meta strong,
body.space-scene-page #cloud-note {
  text-shadow: 0 2px 14px rgba(4, 5, 14, 0.72);
}

body.space-scene-page #cloud-note {
  position: relative;
  z-index: 1;
}

body.space-scene-page .product-flavors {
  border-top-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 720px) {
  body.space-scene-page .catalog-space-scene {
    inset: -8vh -22vw -14vh;
  }

  body.space-scene-page .catalog-space-scene .space-scene-device {
    opacity: 1;
  }

  body.space-scene-page .catalog-space-scene .scatter-2,
  body.space-scene-page .catalog-space-scene .scatter-4,
  body.space-scene-page .catalog-space-scene .scatter-6,
  body.space-scene-page .catalog-space-scene .scatter-9,
  body.space-scene-page .catalog-space-scene .scatter-11,
  body.space-scene-page .catalog-space-scene .scatter-14 {
    display: none;
  }

  body.space-scene-page .catalog-space-scene .scatter-1 {
    --scene-left: 4%;
    --scene-top: 3%;
    --scene-size: 92px;
  }

  body.space-scene-page .catalog-space-scene .scatter-3 {
    --scene-left: 36%;
    --scene-top: 7%;
    --scene-size: 82px;
  }

  body.space-scene-page .catalog-space-scene .scatter-5 {
    --scene-left: 88%;
    --scene-top: 14%;
    --scene-size: 86px;
  }

  body.space-scene-page .catalog-space-scene .scatter-7 {
    --scene-left: 18%;
    --scene-top: 34%;
    --scene-size: 96px;
  }

  body.space-scene-page .catalog-space-scene .scatter-8 {
    --scene-left: 70%;
    --scene-top: 40%;
    --scene-size: 70px;
  }

  body.space-scene-page .catalog-space-scene .scatter-10 {
    --scene-left: 4%;
    --scene-top: 63%;
    --scene-size: 84px;
  }

  body.space-scene-page .catalog-space-scene .scatter-12 {
    --scene-left: 40%;
    --scene-top: 70%;
    --scene-size: 90px;
  }

  body.space-scene-page .catalog-space-scene .scatter-13 {
    --scene-left: 84%;
    --scene-top: 78%;
    --scene-size: 74px;
  }

  .space-scene-device {
    opacity: 1;
  }

  .space-scene-device.device-1 {
    width: 90px;
    left: -8px;
    top: 18vh;
  }

  .space-scene-device.device-2 {
    width: 108px;
    right: -10px;
    top: 14vh;
  }

  .space-scene-device.device-3 {
    width: 72px;
    left: 10vw;
    top: 60vh;
  }

  .space-scene-device.device-4 {
    width: 82px;
    right: 10vw;
    top: 67vh;
  }

  .space-scene-device.device-5 {
    width: 116px;
    top: 24vh;
  }

  .space-scene-device.device-6,
  .space-scene-device.device-7 {
    display: none;
  }

  body.space-scene-page .product-grid {
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-scene-device {
    animation: none;
  }

  .space-scene-device-art.is-colliding,
  .space-scene-device-art.is-exploding,
  .space-scene-device-drift.is-orbit-disturbed,
  .space-scene-impact,
  .space-scene-vape-explosion,
  .space-scene-shooting-star,
  .space-scene-asteroid,
  .space-scene-asteroid-rock {
    animation: none;
  }
}