/*//////////////////////////////////////////////////////////////////////////////////////*/
/*   _  _ ____ _  _ ___  ____                                                           */
/*   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         */
/*   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     */
/*                                                                                      */
/*//////////////////////////////////////////////////////////////////////////////////////*/

/* SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de> */
/* SPDX-FileCopyrightText: 2025 Rena and LCG */
/* SPDX-License-Identifier: CC0-1.0 */

/* === 🎨 Neon Lights Enhanced Color Theme - Optimized v3.0 === */
/* === 📊 Configuration Options: 31 → 21 options (32% reduction) === */

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes neon-pulse {
  0%, 100% { opacity: 0.6; filter: brightness(1) saturate(1); }
  50% { opacity: 1; filter: brightness(1.3) saturate(1.5); }
}

@keyframes neon-hover-pulse {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.0); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.menu-node {
  --child-distance: 100px;
  --grandchild-distance: 16px;
  --grandchild-size: 15px;
  --center-size: 100px;
  --child-size: 50px;
  --connector-width: 5px;
  --menu-transition: all 250ms cubic-bezier(0.775, 1.325, 0.535, 1);
  --opacity-transition: opacity 250ms ease;

  transition: var(--menu-transition);

  /* Positioning ---------------------------------------------------------------------- */
  &.child {
    transform: translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)),
        calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y)));
  }

  &.active:has(>.hovered)>.child {
    transform: scale(calc(1.5 - pow(var(--angle-diff) / 180, 0.25) * 0.5)) translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)),
        calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y)));

    &.hovered {
      transform: scale(1.5) translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)),
          calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y)));
    }

    &.grandchild {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate(calc(var(--grandchild-distance) * var(--dir-x)),
          calc(var(--grandchild-distance) * var(--dir-y)));
    }
  }

  /* === 🎯 Icon System === */
  .icon-container {
    opacity: 0;
    transition: var(--opacity-transition);
    color: var(--icon-color) !important;
    filter: drop-shadow(0 0 8px var(--icon-glow));
  }

  &.active>.icon-layer>.icon-container { 
    opacity: 0 !important;
  }
  
  &.parent>.icon-layer>.icon-container, 
  &.child>.icon-layer>.icon-container { 
    opacity: 1 !important;
    color: var(--icon-color) !important;
    filter: drop-shadow(0 0 8px var(--icon-glow)) !important;
    animation: none !important;
  }

  &.child.hovered>.icon-layer>.icon-container,
  &.parent.hovered>.icon-layer>.icon-container {
    color: var(--icon-hover) !important;
    filter: 
      drop-shadow(0 0 12px var(--icon-hover-glow))
      drop-shadow(0 0 20px var(--icon-hover-glow))
      drop-shadow(0 0 30px var(--icon-hover-glow)) !important;
    animation: neon-pulse 2s ease-in-out infinite !important;
  }

  .icon-glow-layer {
    position: absolute;
    transition: var(--menu-transition);
    opacity: 0;
    z-index: 1;
    
    .icon-container {
      color: var(--icon-glow) !important;
      filter: blur(15px) brightness(2);
      opacity: 1;
    }
  }

  /* === 🌈 Neon Glow Ring System === */
  .outer-glow-ring {
    position: absolute;
    opacity: 0;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    transition: var(--menu-transition);
    
    &::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: calc(100% + 16px);
      height: calc(100% + 16px);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 3px solid var(--primary-glow);
      box-shadow: 
        0 0 15px var(--primary-glow),
        0 0 25px var(--primary-glow),
        inset 0 0 10px var(--primary-glow);
      animation: neon-pulse 3s ease-in-out infinite;
    }
  }

  .inner-glow-ring {
    position: absolute;
    opacity: 0;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 3;
    transition: var(--menu-transition);
    
    &::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: calc(100% + 8px);
      height: calc(100% + 8px);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 2px solid var(--secondary-glow);
      box-shadow: 
        0 0 12px var(--secondary-glow),
        0 0 20px var(--secondary-glow),
        inset 0 0 8px var(--secondary-glow);
      animation: neon-pulse 2.5s ease-in-out infinite;
    }
  }

  /* Layer positioning */
  .arrow-layer, .outer-glow-ring, .inner-glow-ring, .ring-slow-layer, .ring-slow-layer::before,
  .ring-fast-layer, .ring-fast-layer::before, .icon-glow-layer, .icon-layer {
    position: absolute;
    transition: var(--menu-transition);
  }

  /* Active menu item sizing */
  &.active>.arrow-layer, &.active>.outer-glow-ring, &.active>.inner-glow-ring,
  &.active>.ring-slow-layer, &.active>.ring-fast-layer, &.active>.icon-glow-layer,
  &.active>.icon-layer {
    top: calc(-1 * var(--center-size) / 2);
    left: calc(-1 * var(--center-size) / 2);
    width: var(--center-size);
    height: var(--center-size);
  }

  &.active>.ring-slow-layer::before, &.active>.ring-fast-layer::before {
    top: 0; left: 0;
    width: var(--center-size);
    height: var(--center-size);
  }

  /* === 🎯 Icon Layer === */
  .icon-layer {
    border-radius: 50%;
    background: transparent !important;
    border: none !important;
    opacity: 1;
    z-index: 10;
  }

  .arrow-layer {
    background: url(assets/arrow.svg) no-repeat center;
    transform: scale(1.0) rotate(var(--hovered-child-angle));
    opacity: 0;
    filter: 
      drop-shadow(0 0 10px var(--accent-glow))
      drop-shadow(0 0 20px var(--accent-glow));
  }

  &:has(.dragged)>.arrow-layer {
    transform: scale(1.6) rotate(var(--pointer-angle));
    transition: none;
    filter: 
      drop-shadow(0 0 15px var(--active-glow))
      drop-shadow(0 0 25px var(--active-glow));
  }

  /* === 🌟 Rotating Ring System === */
  .ring-slow-layer {
    animation: rotate 10s linear infinite;
    opacity: 0;
    border-radius: 50%;
    overflow: hidden;
    clip-path: circle(75% at 50% 50%);
    
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      mask-image: url(assets/ring-mask.svg);
      -webkit-mask-image: url(assets/ring-mask.svg);
      mask-size: 100% 100%;
      -webkit-mask-size: 100% 100%;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-position: center;
      -webkit-mask-position: center;
      background-image: radial-gradient(circle,
          transparent 20%,
          color-mix(in srgb, var(--ring-slow) 10%, transparent) 27%,
          color-mix(in srgb, var(--ring-slow) 20%, transparent) 30%,
          color-mix(in srgb, var(--ring-slow) 60%, transparent) 33%,
          var(--ring-slow) 34%,
          var(--ring-slow) 36%,
          color-mix(in srgb, var(--ring-slow) 60%, transparent) 37%,
          color-mix(in srgb, var(--ring-slow) 20%, transparent) 40%,
          color-mix(in srgb, var(--ring-slow) 10%, transparent) 47%,
          transparent 60%);
      filter: drop-shadow(0 0 10px var(--ring-slow));
    }
  }

  .ring-fast-layer {
    animation: rotate 2s linear infinite;
    opacity: 0;
    border-radius: 50%;
    overflow: hidden;
    clip-path: circle(75% at 50% 50%);
    background-image: radial-gradient(circle, var(--backdrop-shadow) 60%, transparent 70%);
    
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      mask-image: url(assets/ring-mask.svg);
      -webkit-mask-image: url(assets/ring-mask.svg);
      mask-size: 100% 100%;
      -webkit-mask-size: 100% 100%;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-position: center;
      -webkit-mask-position: center;
      background-image: radial-gradient(circle,
          transparent 20%,
          color-mix(in srgb, var(--ring-fast) 10%, transparent) 27%,
          color-mix(in srgb, var(--ring-fast) 20%, transparent) 30%,
          color-mix(in srgb, var(--ring-fast) 60%, transparent) 33%,
          var(--ring-inner) 34%,
          var(--ring-inner) 36%,
          color-mix(in srgb, var(--ring-fast) 60%, transparent) 37%,
          color-mix(in srgb, var(--ring-fast) 20%, transparent) 40%,
          color-mix(in srgb, var(--ring-fast) 10%, transparent) 47%,
          transparent 60%);
      filter: 
        drop-shadow(0 0 15px var(--ring-fast))
        drop-shadow(0 0 25px var(--ring-fast));
    }
  }

  /* === ✨ Glow Ring Display Logic === */
  &.active>.outer-glow-ring, &.active>.inner-glow-ring,
  &.child.hovered>.outer-glow-ring, &.child.hovered>.inner-glow-ring,
  &.parent.hovered>.outer-glow-ring, &.parent.hovered>.inner-glow-ring {
    opacity: 1;
  }

  &.child>.icon-glow-layer, &.parent>.icon-glow-layer { opacity: 0.6; }
  &.child.hovered>.icon-glow-layer, &.parent.hovered>.icon-glow-layer { opacity: 1; }

  /* === ✨ Special State Effects === */
  &.active:has(>.hovered)>.ring-fast-layer {
    opacity: 1;
    animation: rotate 1s linear infinite, neon-pulse 3s ease-in-out infinite;
    
    &::before {
      transform: scale(2.0);
      filter: 
        drop-shadow(0 0 20px var(--hover-glow))
        drop-shadow(0 0 30px var(--hover-glow));
    }
  }

  &.parent>.active:not(:has(.hovered))>.ring-slow-layer,
  &.active.hovered>.ring-slow-layer {
    opacity: 1;
    &::before {
      transform: scale(1.0);
      filter: 
        drop-shadow(0 0 12px var(--primary-glow))
        drop-shadow(0 0 20px var(--primary-glow));
    }
  }

  &.active:has(.hovered)>.arrow-layer {
    opacity: 1;
    transform: scale(1.6) rotate(var(--hovered-child-angle));
    filter: 
      drop-shadow(0 0 15px var(--accent-glow))
      drop-shadow(0 0 25px var(--accent-glow));
  }

  &.active:has(.hovered.dragged)>.arrow-layer {
    transform: scale(1.6) rotate(var(--pointer-angle));
    filter: 
      drop-shadow(0 0 20px var(--active-glow))
      drop-shadow(0 0 30px var(--active-glow))
      drop-shadow(0 0 40px var(--active-glow));
  }

  /* === 🎭 Enhanced Hover Effects === */
  &.child.hovered>.icon-layer, &.parent.hovered>.icon-layer {
    transform: scale(1.5) !important;
    z-index: 15 !important;
    background: transparent !important;
    border: none !important;
  }

  &.active.hovered>.icon-layer {
    transform: scale(1.1) !important;
    background: transparent !important;
    border: none !important;
  }

  &.child.hovered>.outer-glow-ring::before, &.parent.hovered>.outer-glow-ring::before {
    border-width: 4px !important;
    width: calc(150% + 24px) !important;
    height: calc(150% + 24px) !important;
    animation: neon-hover-pulse 1.5s ease-in-out infinite !important;
    box-shadow: 
      0 0 20px var(--hover-glow),
      0 0 30px var(--hover-glow),
      inset 0 0 15px var(--hover-glow) !important;
  }

  &.child.hovered>.inner-glow-ring::before, &.parent.hovered>.inner-glow-ring::before {
    border-width: 3px !important;
    width: calc(150% + 12px) !important;
    height: calc(150% + 12px) !important;
    animation: neon-hover-pulse 1.3s ease-in-out infinite !important;
    box-shadow: 
      0 0 15px var(--secondary-glow),
      0 0 25px var(--secondary-glow),
      inset 0 0 12px var(--secondary-glow) !important;
  }

  &.parent.hovered.clicked>.icon-layer, &.child.hovered.clicked>.icon-layer {
    transform: scale(0.8);
  }

  &.parent>.icon-layer, &.parent>.icon-glow-layer, &.parent>.outer-glow-ring, &.parent>.inner-glow-ring,
  &.child>.icon-layer, &.child>.icon-glow-layer, &.child>.outer-glow-ring, &.child>.inner-glow-ring {
    top: calc(-1 * var(--child-size) / 2);
    left: calc(-1 * var(--child-size) / 2);
    width: var(--child-size);
    height: var(--child-size);
  }

  &.grandchild>.icon-layer {
    top: calc(-1 * var(--grandchild-size) / 2);
    left: calc(-1 * var(--grandchild-size) / 2);
    width: var(--grandchild-size);
    height: var(--grandchild-size);
    opacity: 0;
  }

  &.dragged { transition: none; }

  /* === ⚡ Connector System === */
  .connector {
    transition: var(--menu-transition);
    height: var(--connector-width);
    top: calc(-1 * var(--connector-width) / 2);
    filter: 
      drop-shadow(0 0 8px var(--connector-glow))
      drop-shadow(0 0 15px var(--connector-glow));
  }

  &:has(.dragged)>.connector, &:has(.clicked)>.connector {
    transition: none;
    filter: 
      drop-shadow(0 0 12px var(--active-glow))
      drop-shadow(0 0 20px var(--active-glow))
      drop-shadow(0 0 30px var(--active-glow));
  }

  &:has(.hovered)>.connector {
    filter: 
      drop-shadow(0 0 10px var(--connector-hover-glow))
      drop-shadow(0 0 18px var(--connector-hover-glow));
    animation: neon-pulse 2s ease-in-out infinite;
  }

  .connector {
    background: linear-gradient(to right, 
      var(--connector-edge) 80px, 
      var(--connector-center) 50%,
      var(--connector-edge) calc(100% - 80px));
    
    &::before {
      content: '';
      position: absolute;
      top: -1px; left: 0; right: 0;
      height: calc(var(--connector-width) + 2px);
      background: linear-gradient(to right, 
        transparent 70px, 
        var(--connector-color) 45%, 
        var(--connector-color) 55%, 
        transparent calc(100% - 70px));
      filter: blur(2px);
      z-index: -1;
    }
  }
}

/* === 🔤 Center Text Neon Effects === */
.center-text {
  font-size: 22px !important;
  line-height: 26px !important;
  font-family: 'Arial', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  max-width: 160px !important;
  min-width: 120px !important;
  max-height: 60px !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  white-space: normal !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 8px !important;
  will-change: color, text-shadow !important;
  backface-visibility: hidden !important;
  z-index: 20;
  color: var(--text-color) !important;
  transition: var(--opacity-transition);
  text-shadow: 
    0 0 5px var(--text-glow),
    0 0 10px var(--text-glow),
    0 0 15px var(--text-glow),
    0 0 20px var(--text-glow);
  filter: drop-shadow(0 0 8px var(--text-glow));
}

/* === 🌃 Background Canvas Effects === */
#kando-menu {
  background-color: var(--canvas-color) !important;
  backdrop-filter: blur(20px);
  
  &::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
      radial-gradient(circle at 20% 30%, var(--primary-glow) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, var(--secondary-glow) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.03;
    mix-blend-mode: screen;
    animation: neon-pulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }
}
