/* =========================================================
   JAKSKY SIGNATURE LOGO V31
   Calm most of the time, premium electric event every cycle.
   ========================================================= */

.brandLogo.jakLogoV31{
  position:relative !important;
  z-index:2 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  overflow:visible !important;
  isolation:isolate !important;

  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:inherit !important;

  transform-origin:50% 56% !important;

  animation:
    jakLogoEnterV31 .9s cubic-bezier(.18,.84,.24,1.12) both,
    jakLogoBreathV31 5.2s 1.2s ease-in-out infinite !important;
}

/* soft aura behind whole brand */
.brandLogo.jakLogoV31::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;

  left:50% !important;
  top:50% !important;

  width:145% !important;
  height:150% !important;

  transform:translate(-50%,-50%) scale(.82) !important;

  border-radius:999px !important;

  background:
    radial-gradient(circle at 24% 50%,rgba(162,74,239,.19),transparent 30%),
    radial-gradient(circle at 68% 50%,rgba(71,155,255,.14),transparent 35%),
    radial-gradient(circle at 84% 50%,rgba(244,77,167,.12),transparent 30%) !important;

  filter:blur(14px) !important;
  opacity:.24 !important;

  animation:jakAuraV31 5.2s 1.2s ease-in-out infinite !important;
}

/* bolt */
.brandLogo.jakLogoV31 .jakBoltV31{
  position:relative !important;
  z-index:3 !important;

  display:inline-block !important;

  line-height:1 !important;

  color:#a34aea !important;
  -webkit-text-fill-color:#a34aea !important;

  transform-origin:52% 58% !important;

  text-shadow:
    0 0 7px rgba(164,74,234,.28),
    0 0 16px rgba(73,161,255,.12) !important;

  animation:jakBoltCycleV31 5.2s 1.2s ease-in-out infinite !important;
}

/* wordmark */
.brandLogo.jakLogoV31 .jakTextV31{
  position:relative !important;
  z-index:3 !important;

  display:inline-block !important;

  font:inherit !important;
  font-weight:1000 !important;
  letter-spacing:-.038em !important;
  line-height:1.05 !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;

  background:
    linear-gradient(
      103deg,
      #a84de8 0%,
      #7f4ce7 24%,
      #458fe9 48%,
      #ee4ca7 70%,
      #a84de8 100%
    ) !important;

  background-size:250% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;

  filter:drop-shadow(0 3px 8px rgba(116,59,193,.09)) !important;

  animation:
    jakGradientV31 7.5s linear infinite,
    jakTextCycleV31 5.2s 1.2s ease-in-out infinite !important;
}

/* moving highlight, only visible briefly */
.brandLogo.jakLogoV31 .jakTextV31::after{
  content:"" !important;
  position:absolute !important;
  inset:-4px -6px !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      100deg,
      transparent 28%,
      rgba(255,255,255,.14) 43%,
      rgba(255,255,255,.62) 50%,
      rgba(255,255,255,.14) 57%,
      transparent 72%
    ) !important;

  background-size:220% 100% !important;
  background-position:160% 50% !important;

  mix-blend-mode:soft-light !important;

  opacity:0 !important;

  pointer-events:none !important;

  animation:jakShimmerV31 5.2s 1.2s ease-in-out infinite !important;
}

/* short electric arc under the brand */
.brandLogo.jakLogoV31 .jakArcV31{
  position:absolute !important;
  z-index:1 !important;

  left:17% !important;
  right:2% !important;
  bottom:-5px !important;

  height:1.5px !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(166,76,234,.78) 20%,
      rgba(70,165,255,.82) 48%,
      rgba(239,77,170,.72) 74%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 6px rgba(151,80,234,.44),
    0 0 12px rgba(70,165,255,.20) !important;

  opacity:0 !important;
  transform:scaleX(.12) !important;
  transform-origin:10% 50% !important;

  animation:jakArcV31 5.2s 1.2s ease-in-out infinite !important;
}

/* sparks */
.brandLogo.jakLogoV31 .jakSparkV31{
  position:absolute !important;
  z-index:4 !important;

  width:4px !important;
  height:4px !important;

  border-radius:50% !important;

  background:#fff !important;

  opacity:0 !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.28),
    0 0 10px rgba(166,75,234,.62),
    0 0 16px rgba(70,165,255,.26) !important;

  pointer-events:none !important;
}

.brandLogo.jakLogoV31 .jakSparkV31.s1{
  left:10% !important;
  top:-3px !important;
  animation:jakSpark1V31 5.2s 1.2s ease-in-out infinite !important;
}

.brandLogo.jakLogoV31 .jakSparkV31.s2{
  left:57% !important;
  top:-6px !important;
  width:3px !important;
  height:3px !important;
  animation:jakSpark2V31 5.2s 1.2s ease-in-out infinite !important;
}

.brandLogo.jakLogoV31 .jakSparkV31.s3{
  right:-4px !important;
  bottom:4px !important;
  width:3px !important;
  height:3px !important;
  animation:jakSpark3V31 5.2s 1.2s ease-in-out infinite !important;
}

/* entrance */
@keyframes jakLogoEnterV31{
  0%{
    opacity:0;
    transform:translateY(-12px) scale(.91);
    filter:blur(4px);
  }

  58%{
    opacity:1;
    transform:translateY(2px) scale(1.035);
    filter:blur(0);
  }

  100%{
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}

/* calm movement most of the cycle */
@keyframes jakLogoBreathV31{
  0%,100%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-1px) scale(1)}
  72%{transform:translateY(-1px) scale(1)}
  78%{transform:translateY(-2px) scale(1.012)}
  84%{transform:translateY(0) scale(1)}
}

/* aura only wakes up during electric event */
@keyframes jakAuraV31{
  0%,65%,100%{
    opacity:.18;
    transform:translate(-50%,-50%) scale(.82);
  }

  74%{
    opacity:.28;
    transform:translate(-50%,-50%) scale(.94);
  }

  79%{
    opacity:.48;
    transform:translate(-50%,-50%) scale(1.04);
  }

  86%{
    opacity:.20;
    transform:translate(-50%,-50%) scale(.86);
  }
}

@keyframes jakBoltCycleV31{
  0%,68%,100%{
    transform:rotate(0deg) scale(1);
    color:#a34aea;
    -webkit-text-fill-color:#a34aea;
    text-shadow:
      0 0 7px rgba(164,74,234,.28),
      0 0 16px rgba(73,161,255,.12);
  }

  73%{
    transform:rotate(-5deg) scale(1.08);
  }

  76%{
    transform:rotate(5deg) scale(1.13);
    color:#c85cff;
    -webkit-text-fill-color:#c85cff;
    text-shadow:
      0 0 10px rgba(200,92,255,.68),
      0 0 20px rgba(80,184,255,.42),
      0 0 29px rgba(255,255,255,.12);
  }

  79%{
    transform:rotate(-3deg) scale(1.08);
    color:#69baff;
    -webkit-text-fill-color:#69baff;
  }

  83%{
    transform:rotate(0) scale(1);
  }
}

@keyframes jakGradientV31{
  from{background-position:0% 50%}
  to{background-position:250% 50%}
}

@keyframes jakTextCycleV31{
  0%,68%,100%{
    transform:scale(1);
    filter:drop-shadow(0 3px 8px rgba(116,59,193,.09));
  }

  76%{
    transform:scale(1.014);
    filter:
      drop-shadow(0 0 7px rgba(145,74,228,.22))
      drop-shadow(0 0 13px rgba(62,150,235,.15));
  }

  84%{
    transform:scale(1);
    filter:drop-shadow(0 3px 8px rgba(116,59,193,.09));
  }
}

@keyframes jakShimmerV31{
  0%,68%,100%{
    opacity:0;
    background-position:160% 50%;
  }

  73%{
    opacity:.16;
  }

  79%{
    opacity:.55;
    background-position:-60% 50%;
  }

  84%{
    opacity:0;
    background-position:-90% 50%;
  }
}

@keyframes jakArcV31{
  0%,70%,100%{
    opacity:0;
    transform:scaleX(.12);
  }

  75%{
    opacity:.50;
    transform:scaleX(.42);
  }

  80%{
    opacity:.86;
    transform:scaleX(1);
  }

  85%{
    opacity:0;
    transform:scaleX(1);
  }
}

@keyframes jakSpark1V31{
  0%,71%,100%{
    opacity:0;
    transform:translate(0,4px) scale(.25);
  }

  76%{
    opacity:.95;
    transform:translate(-2px,-3px) scale(1);
  }

  82%{
    opacity:.18;
    transform:translate(4px,-9px) scale(.45);
  }

  85%{
    opacity:0;
    transform:translate(7px,-11px) scale(.20);
  }
}

@keyframes jakSpark2V31{
  0%,74%,100%{
    opacity:0;
    transform:translateY(4px) scale(.25);
  }

  79%{
    opacity:.85;
    transform:translateY(-4px) scale(.90);
  }

  84%{
    opacity:0;
    transform:translateY(-11px) scale(.25);
  }
}

@keyframes jakSpark3V31{
  0%,76%,100%{
    opacity:0;
    transform:translate(-4px,0) scale(.25);
  }

  81%{
    opacity:.82;
    transform:translate(1px,2px) scale(.90);
  }

  86%{
    opacity:0;
    transform:translate(7px,5px) scale(.25);
  }
}

/* dark mode */
html[data-jak-theme="dark"] .brandLogo.jakLogoV31 .jakBoltV31{
  color:#bd65ff !important;
  -webkit-text-fill-color:#bd65ff !important;
}

html[data-jak-theme="dark"] .brandLogo.jakLogoV31 .jakTextV31{
  background:
    linear-gradient(
      103deg,
      #ca72ff 0%,
      #a46bff 24%,
      #69baff 48%,
      #ff78bb 70%,
      #ca72ff 100%
    ) !important;
  background-size:250% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

@media(max-width:420px){
  .brandLogo.jakLogoV31{gap:6px !important}
  .brandLogo.jakLogoV31 .jakArcV31{bottom:-4px !important}
}

@media(prefers-reduced-motion:reduce){
  .brandLogo.jakLogoV31,
  .brandLogo.jakLogoV31 *,
  .brandLogo.jakLogoV31 *::before,
  .brandLogo.jakLogoV31 *::after{
    animation:none !important;
  }

  .brandLogo.jakLogoV31{
    transform:none !important;
  }

  .brandLogo.jakLogoV31 .jakArcV31,
  .brandLogo.jakLogoV31 .jakSparkV31{
    display:none !important;
  }
}