[x-cloak]{
  display: none !important;
}

:root{
  --fx-ease: cubic-bezier(.16,1,.3,1);
  --fx-duration: .7s;
  --fx-distance: 28px;
  --fx-distance-lg: 44px;
  --fx-blur: 10px;
}

/* optional */
@media (prefers-reduced-motion: reduce){
  .fx{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

.fx{
  opacity: 0;
  will-change: transform, opacity, filter;
  transition:
    opacity var(--fx-duration) var(--fx-ease),
    transform var(--fx-duration) var(--fx-ease),
    filter var(--fx-duration) var(--fx-ease);
}

.fx.in-view{
  opacity: 1;
  transform: none !important;
  filter: blur(0) !important;
}

.fx-up{
  transform: translateY(var(--fx-distance));
  filter: blur(var(--fx-blur));
}

.fx-down{
  transform: translateY(calc(var(--fx-distance) * -1));
  filter: blur(var(--fx-blur));
}

.fx-left{
  transform: translateX(calc(var(--fx-distance-lg) * -1));
  filter: blur(var(--fx-blur));
}

.fx-right{
  transform: translateX(var(--fx-distance-lg));
  filter: blur(var(--fx-blur));
}

.fx-scale{
  transform: scale(.96);
  filter: blur(8px);
}

/* delays */
.d1{ transition-delay: .08s; }
.d2{ transition-delay: .16s; }
.d3{ transition-delay: .24s; }
.d4{ transition-delay: .32s; }
.d5{ transition-delay: .40s; }

/* optional hover helpers */
.hover-lift{
  transition: transform .28s var(--fx-ease), box-shadow .28s var(--fx-ease);
}

.hover-lift:hover{
  transform: translateY(-4px);
}

.btn-anim{
  transition:
    transform .22s var(--fx-ease),
    box-shadow .22s var(--fx-ease),
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.btn-anim:hover{
  transform: translateY(-2px);
}

.btn-anim:active{
  transform: scale(.98);
}

/* ========================================= */
/* TYPEWRITER BRAND */
/* ========================================= */

.brand-type{
  position: relative;
  display: inline-block;
  color: var(--text);
  letter-spacing: .04em;
}

/* cursor */
.brand-type::after{
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 2px;
  height: 1.1em;
  background: var(--accent);
  transform: translateY(-50%);
  animation: blink .9s infinite;
}

@keyframes blink{
  0%, 50%, 100%{ opacity: 1; }
  25%, 75%{ opacity: 0; }
}

/* typing glow */
.brand-type.typing{
  text-shadow:
    0 0 8px #9900ff,
    0 0 20px rgba(238, 0, 255, 0.35);
}

/* finished state */
.brand-type.done::after{
  animation: none;
  opacity: .4;
}

/* subtle glitch flicker */
.brand-type.done{
  animation: glitchFlicker 2.5s infinite;
}

@keyframes glitchFlicker{
  0%{ opacity: 1; }
  2%{ opacity: .85; }
  4%{ opacity: 1; }
  8%{ opacity: .9; }
  10%{ opacity: 1; }
  100%{ opacity: 1; }
}

/* ========================================= */
/* THEME SCROLLBAR */
/* ========================================= */

html{
  scroll-behavior: smooth;
  scrollbar-color: #9900ff rgba(255,255,255,.04);
  scrollbar-width: thin;
}

body::-webkit-scrollbar,
*::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track{
  background: rgba(255,255,255,.03);
}

body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      #9900ff,
      rgba(230, 0, 255, 0.35)
    );
  border-radius: 999px;
  border: 2px solid rgba(8,10,11,.75);
  box-shadow:
    0 0 0 1px rgba(145,255,0,.06),
    0 0 18px rgba(145,255,0,.14);
}

body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      #9900ff,
      rgba(234, 0, 255, 0.5)
    );
}

body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner{
  background: transparent;
}