:root{
  --cubo-top-1:#d8ffff;
  --cubo-top-2:#39ddff;
  --cubo-side-right-1:#70ecff;
  --cubo-side-right-2:#6a78ff;
  --cubo-front-1:#f5eeff;
  --cubo-front-2:#b55cff;
}

.launch-cube{
  --cubo-size:var(--launch-size, 68px);
  --cubo-half:calc(var(--cubo-size) / 2);
  transform-style:preserve-3d;
  perspective:1000px;
  overflow:visible;
}

.launch-cube-core{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(-28deg) rotateY(-45deg);
}

.launch-cube-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--cubo-size) * 2.35);
  height:calc(var(--cubo-size) * 2.35);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.34) 0 12%, rgba(160,245,255,.28) 22%, rgba(92,223,255,.22) 40%, rgba(191,136,255,.2) 56%, transparent 76%);
  filter:blur(calc(var(--cubo-size) * .18));
  transform:translate(-50%, -50%) translateY(calc(var(--cubo-size) * .1));
}

.launch-cube-glow::before,
.launch-cube-glow::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}

.launch-cube-glow::before{
  background:radial-gradient(circle, rgba(182,249,255,.34) 0 12%, rgba(122,230,255,.22) 32%, rgba(122,230,255,0) 66%);
  filter:blur(calc(var(--cubo-size) * .2));
  transform:translateY(calc(var(--cubo-size) * -.2)) scale(1.05, 1.12);
  opacity:.78;
}

.launch-cube-glow::after{
  background:radial-gradient(circle, rgba(212,160,255,.26) 0 16%, rgba(183,122,255,.16) 38%, rgba(183,122,255,0) 72%);
  filter:blur(calc(var(--cubo-size) * .18));
  transform:translateY(calc(var(--cubo-size) * .34)) scale(1.04, .9);
  opacity:.72;
}

.launch-cube-beam{
  position:absolute;
  width:calc(var(--cubo-size) * .17);
  height:calc(var(--cubo-size) * 1.45);
  top:calc(var(--cubo-size) * -.2);
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.2) 35%, rgba(255,255,255,.1) 70%, transparent);
  filter:blur(calc(var(--cubo-size) * .018));
  opacity:.7;
  pointer-events:none;
}

.launch-cube-highlight{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.launch-cube-highlight::before{
  content:"";
  position:absolute;
  width:calc(var(--cubo-size) * .41);
  height:calc(var(--cubo-size) * .41);
  top:calc(var(--cubo-size) * .06);
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.48), transparent 72%);
  filter:blur(calc(var(--cubo-size) * .045));
}

.launch-cube-highlight::after{
  content:"";
  position:absolute;
  inset:calc(var(--cubo-size) * -.16);
  background:
    radial-gradient(circle at 50% 22%, rgba(214,247,255,.26), rgba(214,247,255,0) 36%),
    radial-gradient(circle at 52% 82%, rgba(198,138,255,.18), rgba(198,138,255,0) 40%);
  filter:blur(calc(var(--cubo-size) * .13));
  pointer-events:none;
}

.launch-cube-face{
  position:absolute;
  width:var(--cubo-size);
  height:var(--cubo-size);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
  overflow:hidden;
}

.launch-cube-face::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.05)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 calc(var(--cubo-size) * .1), rgba(255,255,255,.08) calc(var(--cubo-size) * .1) calc(var(--cubo-size) * .2)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 calc(var(--cubo-size) * .109), rgba(255,255,255,.07) calc(var(--cubo-size) * .109) calc(var(--cubo-size) * .218));
  mix-blend-mode:screen;
  opacity:.8;
  pointer-events:none;
}

.launch-cube-face::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.3), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 35%);
  pointer-events:none;
}

.launch-cube-face--top{
  background:
    linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, var(--cubo-top-1) 0%, var(--cubo-top-2) 100%);
  transform:rotateX(90deg) translateZ(var(--cubo-half));
  box-shadow:
    0 0 calc(var(--cubo-size) * .3) rgba(74,231,255,.28),
    inset 0 0 calc(var(--cubo-size) * .34) rgba(255,255,255,.34);
}

.launch-cube-face--front{
  background:
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.1) 24%, rgba(214,188,255,.34) 58%, rgba(203,98,255,.64) 100%),
    linear-gradient(180deg, var(--cubo-front-1) 0%, var(--cubo-front-2) 100%);
  transform:translateZ(var(--cubo-half));
  box-shadow:
    inset 0 0 calc(var(--cubo-size) * .27) rgba(255,255,255,.2),
    0 0 calc(var(--cubo-size) * .24) rgba(204,102,255,.2);
}

.launch-cube-face--right{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 28%, rgba(120,220,255,.24) 60%, rgba(94,106,255,.42) 100%),
    linear-gradient(180deg, var(--cubo-side-right-1) 0%, var(--cubo-side-right-2) 100%);
  transform:rotateY(90deg) translateZ(var(--cubo-half));
  box-shadow:
    inset 0 0 calc(var(--cubo-size) * .24) rgba(255,255,255,.14),
    0 0 calc(var(--cubo-size) * .2) rgba(78,224,255,.16);
}

.launch-cube-sparkles{
  position:absolute;
  inset:calc(var(--cubo-size) * -.58);
  pointer-events:none;
}

.launch-cube-sparkles span{
  position:absolute;
  width:calc(var(--cubo-size) * .045);
  height:calc(var(--cubo-size) * .045);
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(186,244,255,.98) 26%, rgba(145,233,255,.95) 46%, transparent 76%);
  border-radius:50%;
  filter:blur(.4px);
  box-shadow:
    0 0 calc(var(--cubo-size) * .064) rgba(255,255,255,.92),
    0 0 calc(var(--cubo-size) * .14) rgba(147,238,255,.34);
  animation:cuboTwinkle 2.8s ease-in-out infinite;
}

.launch-cube-sparkles span::before,
.launch-cube-sparkles span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(255,255,255,.95);
  transform:translate(-50%, -50%);
  border-radius:2px;
}

.launch-cube-sparkles span::before{
  width:2px;
  height:calc(var(--cubo-size) * .082);
}

.launch-cube-sparkles span::after{
  width:calc(var(--cubo-size) * .082);
  height:2px;
}

.launch-cube-sparkles span:nth-child(1){ top:24%; left:56%; animation-delay:.1s; transform:scale(.55); }
.launch-cube-sparkles span:nth-child(2){ top:18%; left:78%; animation-delay:.6s; transform:scale(.78); }
.launch-cube-sparkles span:nth-child(3){ top:30%; left:92%; animation-delay:1.1s; transform:scale(.92); }
.launch-cube-sparkles span:nth-child(4){ top:46%; left:88%; animation-delay:1.7s; transform:scale(.68); }
.launch-cube-sparkles span:nth-child(5){ top:64%; left:82%; animation-delay:.35s; transform:scale(.86); }
.launch-cube-sparkles span:nth-child(6){ top:86%; left:70%; animation-delay:1.9s; transform:scale(1.18); }
.launch-cube-sparkles span:nth-child(7){ top:96%; left:44%; animation-delay:1.25s; transform:scale(.74); }
.launch-cube-sparkles span:nth-child(8){ top:74%; left:18%; animation-delay:.9s; transform:scale(.82); }
.launch-cube-sparkles span:nth-child(9){ top:48%; left:4%; animation-delay:1.45s; transform:scale(.62); }
.launch-cube-sparkles span:nth-child(10){ top:26%; left:10%; animation-delay:.5s; transform:scale(.58); }
.launch-cube-sparkles span:nth-child(11){ top:8%; left:66%; animation-delay:2.05s; transform:scale(.72); }
.launch-cube-sparkles span:nth-child(12){ top:54%; left:98%; animation-delay:1.55s; transform:scale(.8); }
.launch-cube-sparkles span:nth-child(13){ top:-6%; left:80%; animation-delay:.25s; transform:scale(.7); }
.launch-cube-sparkles span:nth-child(14){ top:4%; left:106%; animation-delay:1.3s; transform:scale(.64); }
.launch-cube-sparkles span:nth-child(15){ top:96%; left:88%; animation-delay:.75s; transform:scale(.9); }
.launch-cube-sparkles span:nth-child(16){ top:112%; left:36%; animation-delay:1.85s; transform:scale(1.05); }
.launch-cube-sparkles span:nth-child(17){ top:82%; left:-10%; animation-delay:1.05s; transform:scale(.76); }

@keyframes cuboTwinkle{
  0%,100%{ opacity:.4; }
  50%{ opacity:1; }
}