/* Dark theme tuning: align navbar with black background */
#menu {
  color: #fff;
}

#menu-toggle .line {
  background: #ffffff;
}

#menu-toggle-label .word {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 12px rgba(255,255,255,0.08);
}

/* Restore "sun" radial gradient using theme variables for dark bg */
#menu-gradient {
  background: radial-gradient(
    var(--background-light) 12%,
    var(--gradient-color-1) 13%,
    var(--gradient-color-2) 15%,
    var(--gradient-color-3) 60%,
    var(--gradient-color-4) 90%
  );
}

#menu-gradient-blur {
  backdrop-filter: blur(8px);
}

#menu-arcs .menu-arc {
  stroke: rgba(255,255,255,0.45);
}

#menu-links .link {
  color: #fff;
}

#menu-links .link .index {
  color: rgba(255,255,255,0.65);
}

#menu-links .link .label {
  color: rgba(255,255,255,0.95);
}

#menu-links .link .anchor {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 20px rgba(255,255,255,0.25);
}

#menu-links .link:hover .label,
#menu-links .link:focus .label {
  text-shadow: 0 0 20px rgba(255,255,255,0.35);
}

:root {
  /* Monochrome palette with brighter core to feel like a sun */
  --background-light: rgba(255, 255, 255, 0.52);
  --background-dark: #000;
  /* Decrease mid-section intensity for a smoother falloff */
  --gradient-color-1: rgba(255, 255, 255, 0.24);
  --gradient-color-2: rgba(255, 255, 255, 0.14);
  /* Darken outer corona while keeping core bright */
  --gradient-color-3: rgba(255, 255, 255, 0.08);
  --gradient-color-4: rgba(255, 255, 255, 0.035);
}

/* Remove hover dimming to keep the sun consistent */
#menu:hover #menu-gradient {
  background: radial-gradient(
    var(--background-light) 10%,
    var(--gradient-color-1) 13%,
    var(--gradient-color-2) 20%,
    var(--gradient-color-3) 58%,
    var(--gradient-color-4) 92%
  );
}
/* moved and updated above */

@keyframes arc-rotation {
  from {
    transform: translate3d(-50%, -50%, 0px) rotate(0deg);
  }
  
  to {
    transform: translate3d(-50%, -50%, 0px) rotate(360deg);
  }
}

/* Enforce dark background to avoid reversion when cursor leaves window */
html, body {
  background-color: #000 !important;
  margin: 0px;
  padding: 0px;
  transition: background-color 0ms;
}

body.menu-toggled {
  background-color: var(--background-dark);
  overflow: hidden; /* lock scroll only when menu is open */
}

body.menu-toggled > #menu {
  pointer-events: all; 
}

body.menu-toggled > #menu > #menu-toggle > span:first-of-type {
  transform: translate3d(0px, 8px, 0px) rotate(45deg);
}

body.menu-toggled > #menu > #menu-toggle > span:nth-of-type(2) {
  opacity: 0;
  transform: translate3d(-5px, 0px, 0px);
}

body.menu-toggled > #menu > #menu-toggle > span:nth-of-type(3) {
  transform: translate3d(0px, -8px, 0px) rotate(-45deg);
}

body.menu-toggled > #menu > #menu-toggle > #menu-toggle-label > .word {
  opacity: 0;
  transform: translate3d(-30%, 0px, 0px) skew(20deg) scaleX(1.2);  
  transition: opacity 250ms cubic-bezier(.71, .19, .87, .33), 
    transform 250ms cubic-bezier(.71, .19, .87, .33);
}

body.menu-toggled > #menu > #menu-toggle > #menu-toggle-label > .word:nth-of-type(2) {
  transition-delay: 100ms;
}

body.menu-toggled > #menu > #menu-gradient {
  height: 200vmax;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0px);
  transition: height 600ms cubic-bezier(.58, .2, .62, .93), 
    width 600ms cubic-bezier(.58, .2, .62, .93), 
    transform 600ms cubic-bezier(.58, .2, .62, .93), 
    opacity 400ms;
  width: 200vmax;
}

body.menu-toggled > #menu > #menu-gradient-blur {
  opacity: 1; 
}

body.menu-toggled > #menu > #menu-arcs-wrapper {
  opacity: 1;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(.16, .68, .25, .83), 
    opacity 600ms cubic-bezier(.87, .12, .92, .39); 
}

body.menu-toggled > #menu > #menu-links > .link {  
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease-in;  
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(2) {
  transition-delay: 100ms;
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(3) {
  transition-delay: 150ms;
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(4) {
  transition-delay: 200ms;
}

#menu {
  height: 100vh;
  left: 0px;
  overflow: hidden;
  pointer-events: none; 
  position: fixed;
  top: 0px;
  width: 100vw;
  z-index: 100;
}

#menu > #menu-toggle {
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 50px;
  justify-content: center;
  left: 30px;
  padding: 0px;
  pointer-events: all;
  position: absolute;
  top: 30px;
  width: 50px;
  z-index: 5;
}

#menu > #menu-toggle:hover > span:nth-of-type(2),
#menu > #menu-toggle:hover > span:nth-of-type(3){
  transform: translate3d(0px, 0px, 0px);
}

#menu > #menu-toggle > span {
  background-color: #ffffff;
  display: block;
  height: 3px;
  transition: transform 250ms;
  width: 24px;
}

#menu > #menu-toggle > span:nth-of-type(2) {
  transform: translate3d(5px, 0px, 0px);
}

#menu > #menu-toggle > span:nth-of-type(3) {
  transform: translate3d(-2px, 0px, 0px);
}

#menu > #menu-toggle > #menu-toggle-label {
  align-items: center;
  display: flex;
  height: 50px;
  gap: 5px;
  position: absolute;
  right: -20px;
  top: 0px;
  transform: translate3d(100%, 0px, 0px);
  white-space: nowrap;
}

/* Align menu label font with site-wide system font */
#menu > #menu-toggle > #menu-toggle-label > .word {
  font-family: system-ui, sans-serif;
  font-size: 1.2em;
  letter-spacing: .02em;
  transition: opacity 250ms, transform 250ms;
}

#menu > #menu-gradient {
  background: radial-gradient(
    var(--background-light) 11%,
    var(--gradient-color-1) 14%,
    var(--gradient-color-2) 22%,
    var(--gradient-color-3) 58%,
    var(--gradient-color-4) 93%
  );
  height: 300vmax;
  left: 0px;  
  opacity: 0;
  position: absolute;
  transform: translate3d(-50%, -50%, 0px) scale(4);
  transition: height 600ms cubic-bezier(.75, .1, .89, .36),
    width 600ms cubic-bezier(.75, .1, .89, .36),
    transform 600ms cubic-bezier(.75, .1, .89, .36),
    opacity 700ms cubic-bezier(.9, .02, .97, .28);
  top: 0px;
  width: 300vmax;
  z-index: 1;
}

#menu > #menu-gradient-blur {
  backdrop-filter: blur(1vmax);
  inset: 0px;
  opacity: 0;
  position: absolute;
  transition: opacity 600ms cubic-bezier(.87, .12, .92, .39);
  z-index: 2;
}

#menu > #menu-arcs-wrapper {
  height: clamp(600px, 200vmax, 6000px);
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transform: scale(1.15) translate3d(20%, 20%, 0px);
  transition: transform 600ms cubic-bezier(.87, .12, .92, .39), 
    opacity 600ms cubic-bezier(.87, .12, .92, .39);  
  width: clamp(600px, 200vmax, 6000px);
  z-index: 3;
}

#menu > #menu-arcs-wrapper > #menu-arcs {
  animation: arc-rotation 100s linear infinite;
  height: 100%;
  left: 0px;  
  position: absolute;
  top: 0px;
  width: 100%;
  will-change: transform;
}

#menu > #menu-arcs-wrapper > #menu-arcs > .menu-arc {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-dasharray: 2,10;
  stroke-width: 1;
}

#menu > #menu-links {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  inset: 0px;
  justify-content: center;
  position: absolute;
  z-index: 4;
}

#menu > #menu-links > .link {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: "Rubik", sans-serif;
  gap: 10px;
  opacity: 0;
  position: relative;
  text-decoration: none;
  transition: opacity 250ms ease-in;
  width: 200px;
}

#menu > #menu-links > .link:hover > .label {
  transform: translate3d(6%, 0px, 0px);
}

#menu > #menu-links > .link:hover > .index {
  transform: translate3d(20%, 0px, 0px);
}

#menu > #menu-links > .link:hover > .anchor:before {
  opacity: 0.15;
  transform: translate3d(-50%, -50%, 0px) scale(1.5);
}

#menu > #menu-links > .link:hover > .anchor:after {
  border-color: rgba(255,255,255,0.6);
  transform: translate3d(-50%, -50%, 0px) scale(1.1);
}

#menu > #menu-links > .link > .anchor {
  background-color: white;
  height: clamp(4px, 0.4vmax, 12px);
  left: 0px;
  position: absolute;
  top: 50%;
  transform: translate3d(-500%, -100%, 0px) rotate(45deg);
  transition: transform 250ms;
  width: clamp(4px, 0.4vmax, 12px);
}

#menu > #menu-links > .link > .anchor:before,
#menu > #menu-links > .link > .anchor:after {
  content: "";
  height: 300%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0px);
  transition: transform 250ms, border-color 250ms;
  width: 300%;
}

#menu > #menu-links > .link > .anchor:before {
  border: 1px solid rgba(255,255,255,0.25);
  opacity: 0;
}

#menu > #menu-links > .link > .anchor:after {
  border: 1px solid rgba(255, 255, 255, 0.6);
}

#menu > #menu-links > .link > .index {
  color: rgb(255, 255, 255, 0.25);
  font-size: 0.8em;
  transition: transform 250ms;
}

#menu > #menu-links > .link > .label {
  color: white;
  font-size: 2em;
  transition: transform 250ms;
}

#content {
  align-items: center;
  display: flex;
  gap: 2em;
  height: 100vh;
  justify-content: center;
}

#content > i {
  color: rgb(30, 30, 30);
  font-size: clamp(4em, 8vmax, 8em);
}

#content > .fa-plus {
  font-size: clamp(2em, 4vmax, 4em);
}

@media (min-width: 1000px) and (max-width: 2699px) {  
  body.menu-toggled > #menu > #menu-links > .link {
    transition: transform 400ms cubic-bezier(.16, .68, .25, .83), 
      opacity 500ms cubic-bezier(.87, .12, .92, .39);  
  }
  
  #menu > #menu-gradient {
    transform: translate3d(-50%, -50%, 0px) scale(8);
  }
  
  #menu > #menu-links > .link {
    position: absolute;
    transform: translate3d(300%, 800%, 0px) scale(1.25);
    transition: transform 500ms cubic-bezier(.62, .16, .86, .45), 
      opacity 400ms cubic-bezier(.16, .68, .25, .83);
  }
  
  #menu > #menu-links > .link > .anchor {
    top: 0%;
    transform: translate3d(-350%, -100%, 0px) rotate(45deg);
  }
  
  #menu > #menu-links > .link:first-of-type {
    left: 29.8vmax;
    top: 22vmax;
  }
}

@media (min-width: 1000px) and (max-width: 2099px) {
  #menu > #menu-links > .link:nth-of-type(2) {
    left: 59.2vmax;
    top: 16vmax;
  }

  #menu > #menu-links > .link:nth-of-type(3) {
    left: 44.5vmax;
    top: 42vmax;
  }

  #menu > #menu-links > .link:nth-of-type(4) {
    left: 75.8vmax;
    top: 39vmax;
  }
}

@media (min-width: 2100px) and (max-width: 2699px) {
  #menu > #menu-links > .link:nth-of-type(2) {
    left: 59.6vmax;
    top: 14vmax;
  }

  #menu > #menu-links > .link:nth-of-type(3) {
    left: 51vmax;
    top: 34vmax;
  }

  #menu > #menu-links > .link:nth-of-type(4) {
    left: 80.5vmax;
    top: 28vmax;
  }
}

/* -- YouTube Link Styles -- */

body.menu-toggled > .meta-link {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.menu-toggled > .meta-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.menu-toggled > .meta-link > span {
  color: white;
}

#source-link {
  bottom: 10px;
}

#source-link > i {
  color: rgba(255, 255, 255, 0.9);
}

#yt-link > i {
  color: rgba(255, 255, 255, 0.9);
}

.meta-link {
  align-items: center;
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;  
  display: inline-flex;
  gap: 5px;
  left: 10px;
  padding: 10px 20px;
  position: fixed;
  text-decoration: none;
  transition: background-color 300ms, border-color 300ms, color 300ms;
  z-index: 10000;
}

.meta-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.meta-link > i, .meta-link > span {
  height: 20px;
  line-height: 20px;
}

.meta-link > span {
  color: rgba(255, 255, 255, 0.92);
  font-family: "Rubik", sans-serif;
  transition: color 300ms;
}