/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 10 2026 | 17:26:40 */
/* =========================================================
   LOGO
========================================================= */

#logo {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  border-radius: 999px;

  isolation: isolate;
  transform: translateZ(0);

  animation: logoFloat 7s ease-in-out infinite;

  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

/* animated rainbow glow */
#logo::before {
  content: "";

  position: absolute;
  inset: -8px;

  border-radius: inherit;

  background:
    conic-gradient(
      from var(--logo-angle, 0deg),
      #00c7ff,
      #2f6bff,
      #af52de,
      #ff2d55,
      #ff8c28,
      #00c7ff
    );

  filter: blur(14px);

  opacity: 0;

  z-index: -2;

  transition:
    opacity 0.45s ease,
    filter 0.45s ease;

  animation:
    logoGlowSpin 8s linear infinite,
    logoGlowPulse 4s ease-in-out infinite;
}

/* soft ambient bloom */
#logo::after {
  content: "";

  position: absolute;
  inset: -4px;

  border-radius: inherit;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.16),
      transparent 70%
    );

  filter: blur(18px);

  opacity: 0;

  z-index: -1;

  transition: opacity 0.4s ease;
}

/* glow activates only on hover */
#logo:hover::before {
  opacity: 0.95;
}

#logo:hover::after {
  opacity: 1;
}

/* actual logo image */
#logo img {
  position: relative;
  z-index: 2;

  width: 48px;
  height: 48px;

  border-radius: 999px;

  background: transparent;
  box-shadow: none;
}


/* =========================================================
   NAVBAR
========================================================= */

#nectar-nav header#top {
  position: relative;

  isolation: isolate;
  overflow: visible;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(8,8,8,0.72);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 40px rgba(0,0,0,0.35);

  transition:
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    background 0.45s ease;
}

/* animated moving border */
#nectar-nav header#top::after {
  content: "";

  position: absolute;
  inset: -1px;

  border-radius: inherit;

  padding: 1px;

  background:
    conic-gradient(
      from var(--border-angle, 0deg),
      transparent 0deg,
      transparent 90deg,
      rgba(0,199,255,0.95) 120deg,
      rgba(175,82,222,0.95) 160deg,
      rgba(255,45,85,0.92) 200deg,
      rgba(255,140,40,0.95) 240deg,
      transparent 290deg,
      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;

  pointer-events: none;

  z-index: 3;

  transition:
    opacity 0.35s ease,
    filter 0.35s ease;

  filter: blur(0px);
}

/* glow spread from logo area */
#nectar-nav header#top::before {
  content: "";

  position: absolute;

  left: -40px;
  top: 50%;

  width: 240px;
  height: 140px;

  transform: translateY(-50%);

  border-radius: 999px;

  background:
    radial-gradient(
      circle,
      rgba(0,199,255,0.24),
      rgba(175,82,222,0.18) 35%,
      rgba(255,120,40,0.12) 55%,
      transparent 75%
    );

  filter: blur(24px);

  opacity: 0;

  pointer-events: none;

  z-index: -1;

  transition: opacity 0.45s ease;
}

/* navbar reacts to logo hover */
#nectar-nav:has(#logo:hover) header#top {
  border-color: rgba(255,255,255,0.16);

  background: rgba(12,12,12,0.82);

  box-shadow:
    0 0 24px rgba(0,199,255,0.12),
    0 0 56px rgba(175,82,222,0.08),
    0 0 80px rgba(255,120,40,0.06),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

#nectar-nav:has(#logo:hover) header#top::before {
  opacity: 1;
}

#nectar-nav:has(#logo:hover) header#top::after {
  opacity: 1;

  filter: blur(0.4px);

  animation: navBorderRun 3.2s linear infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --logo-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes navBorderRun {
  from {
    --border-angle: 0deg;
  }

  to {
    --border-angle: 360deg;
  }
}

@keyframes logoGlowSpin {
  from {
    --logo-angle: 0deg;
  }

  to {
    --logo-angle: 360deg;
  }
}

@keyframes logoGlowPulse {
  0%,100% {
    filter: blur(12px);
  }

  50% {
    filter: blur(18px);
  }
}

@keyframes logoFloat {
  0%,100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-1px);
  }
}