/* Glow Circles Container Widget - Optimized */

.animation-circle-container {
  background: #423f3f;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /*min-height: calc(100dvh - 75px);*/
  min-height: 100vh!important;

  --lime-rgb: 201, 221, 71;
  --glow-size: min(clamp(280px, 32vw, 680px), clamp(280px, 48vh, 680px));
  --glow-size-hover: min(clamp(420px, 48vw, 960px), clamp(420px, 72vh, 960px));
  --glow-blur: clamp(48px, 7vw, 140px);
  --glow-blur-hover: clamp(80px, 10vw, 180px);
  --glow-opacity: 0.68;
  --glow-opacity-hover: 0.95;
  --overlay-opacity-hover: 0.22;
  --dur: 0.9s;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  
  /* Hardware acceleration hint */
  will-change: auto;
}

.animation-circle-container::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(100% 100% at 50% 50%,
              rgba(0, 0, 0, 0.10) 0%,
              rgba(0, 0, 0, 0.28) 80%,
              rgba(0, 0, 0, 0.40) 100%);
  transition: opacity var(--dur) var(--easing);
  opacity: 0.55;
}

.animation-circle-container:hover::after,
.animation-circle-container.force-hover::after {
  opacity: var(--overlay-opacity-hover);
}

/* Glow Circles */
.animation-circle-container .glow {
  position: absolute;
  width: var(--glow-size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 46%,
      rgba(var(--lime-rgb), 1) 0%,
      rgba(var(--lime-rgb), 0.85) 18%,
      rgba(var(--lime-rgb), 0.50) 38%,
      rgba(var(--lime-rgb), 0.15) 58%,
      rgba(var(--lime-rgb), 0) 72%),
    radial-gradient(circle at 60% 34%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 32%,
      rgba(255, 255, 255, 0) 55%);
  filter: blur(var(--glow-blur));
  opacity: var(--glow-opacity);
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  transition:
    transform var(--dur) var(--easing),
    width var(--dur) var(--easing),
    filter var(--dur) var(--easing),
    opacity var(--dur) var(--easing);
}

.animation-circle-container .glow::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(255, 255, 255, 0.40) 0%,
              rgba(255, 255, 255, 0.18) 30%,
              rgba(255, 255, 255, 0) 60%);
  filter: blur(calc(var(--glow-blur) * 0.18));
  opacity: 0.80;
}

/* Initial positions */
.animation-circle-container .g-tl { 
  top: -18%; 
  left: -12%;
  transform: translate3d(0, 0, 0);
}
.animation-circle-container .g-tr { 
  top: -18%; 
  right: -12%;
  transform: translate3d(0, 0, 0);
}
.animation-circle-container .g-br { 
  bottom: -18%; 
  right: -12%;
  transform: translate3d(0, 0, 0);
}
.animation-circle-container .g-bl { 
  bottom: -18%; 
  left: -12%;
  transform: translate3d(0, 0, 0);
}

/* Hover - Desktop & Mobile */
.animation-circle-container:hover .glow,
.animation-circle-container.force-hover .glow {
  width: var(--glow-size-hover);
  filter: blur(var(--glow-blur-hover));
  opacity: var(--glow-opacity-hover);
}

.animation-circle-container:hover .g-tl,
.animation-circle-container.force-hover .g-tl {
  top: clamp(-50%, calc(-20vh + 2%), 5%);
  left: clamp(0%, calc(2vw - 2%), 10%);
}

.animation-circle-container:hover .g-tr,
.animation-circle-container.force-hover .g-tr {
  top: clamp(-50%, calc(-20vh + 2%), 5%);
  right: clamp(0%, calc(2vw - 2%), 10%);
}

.animation-circle-container:hover .g-br,
.animation-circle-container.force-hover .g-br {
  bottom: clamp(-50%, calc(-20vh + 2%), 5%);
  right: clamp(0%, calc(2vw - 2%), 10%);
}

.animation-circle-container:hover .g-bl,
.animation-circle-container.force-hover .g-bl {
  bottom: clamp(-50%, calc(-20vh + 2%), 5%);
  left: clamp(0%, calc(2vw - 2%), 10%);
}

/* Central Bloom */
.animation-circle-container .bloom {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--easing), filter var(--dur) var(--easing);
  background:
    radial-gradient(58% 58% at 55% 58%,
      rgba(var(--lime-rgb), 0.60) 0%,
      rgba(var(--lime-rgb), 0.28) 38%,
      rgba(var(--lime-rgb), 0.12) 68%,
      rgba(var(--lime-rgb), 0) 100%),
    radial-gradient(20% 16% at 62% 24%,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.08) 60%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(115% 115% at 50% 50%,
      rgba(var(--lime-rgb), 0.10) 0%,
      rgba(var(--lime-rgb), 0) 68%);
  filter: blur(clamp(30px, 5vw, 70px));
}

.animation-circle-container:hover .bloom,
.animation-circle-container.force-hover .bloom {
  opacity: 1;
  filter: blur(clamp(42px, 6.5vw, 100px));
}

/* Content wrapper */
.animation-circle-content {
  position: relative;
  z-index: 1;
}

/* Responsive - Wide Screens */
@media (min-aspect-ratio: 16/9) {
  .animation-circle-container:hover .g-tl,
  .animation-circle-container.force-hover .g-tl { top: -42%; left: 2%; }
  
  .animation-circle-container:hover .g-tr,
  .animation-circle-container.force-hover .g-tr { top: -42%; right: 2%; }
  
  .animation-circle-container:hover .g-br,
  .animation-circle-container.force-hover .g-br { bottom: -42%; right: 2%; }
  
  .animation-circle-container:hover .g-bl,
  .animation-circle-container.force-hover .g-bl { bottom: -42%; left: 2%; }
}

/* Responsive - Tall Screens */
@media (max-aspect-ratio: 4/3) {
  .animation-circle-container {
    --glow-size: clamp(220px, 32vw, 520px);
    --glow-size-hover: clamp(360px, 48vw, 780px);
  }
  
  .animation-circle-container:hover .g-tl,
  .animation-circle-container.force-hover .g-tl { top: -18%; left: 4%; }
  
  .animation-circle-container:hover .g-tr,
  .animation-circle-container.force-hover .g-tr { top: -18%; right: 4%; }
  
  .animation-circle-container:hover .g-br,
  .animation-circle-container.force-hover .g-br { bottom: -18%; right: 4%; }
  
  .animation-circle-container:hover .g-bl,
  .animation-circle-container.force-hover .g-bl { bottom: -18%; left: 4%; }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .animation-circle-container {
    --glow-size: clamp(220px, 50vmin, 450px);
    --glow-size-hover: clamp(330px, 68vmin, 650px);
    --glow-blur: clamp(30px, 6vmin, 75px);
    --glow-blur-hover: clamp(48px, 9vmin, 110px);
    --glow-opacity: 0.72;
    --glow-opacity-hover: 0.85;
    --dur: 0.4s;
  }
  
  /* Ultra-simplified gradient για performance */
  .animation-circle-container .glow {
    background:
      radial-gradient(circle at 50% 46%,
        rgba(var(--lime-rgb), 0.95) 0%,
        rgba(var(--lime-rgb), 0.60) 30%,
        rgba(var(--lime-rgb), 0.25) 55%,
        rgba(var(--lime-rgb), 0) 80%);
    width: var(--glow-size);
    filter: blur(var(--glow-blur));
    opacity: 0.45;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  /* CRITICAL: Remove ::after completely */
  .animation-circle-container .glow::after {
    content: none !important;
    display: none !important;
  }
  
  .animation-circle-container .g-tl { top: -50%; left: -50%; }
  .animation-circle-container .g-tr { top: -50%; right: -50%; }
  .animation-circle-container .g-br { bottom: -50%; right: -50%; }
  .animation-circle-container .g-bl { bottom: -50%; left: -50%; }
  
  .animation-circle-container.force-hover .g-tl { 
    top: -45%; 
    left: -8%;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  .animation-circle-container.force-hover .g-tr { 
    top: -45%; 
    right: -8%;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  .animation-circle-container.force-hover .g-br { 
    bottom: -45%; 
    right: -8%;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  .animation-circle-container.force-hover .g-bl { 
    bottom: -45%; 
    left: -8%;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  
  .animation-circle-container.force-hover .glow {
    width: var(--glow-size-hover);
    filter: blur(var(--glow-blur-hover));
    opacity: var(--glow-opacity-hover);
  }
  
  .animation-circle-container.force-hover .bloom {
    opacity: 0.75;
    filter: blur(clamp(28px, 4.5vw, 65px));
  }
  
  /* Ultra-simplified bloom */
  .animation-circle-container .bloom {
    background:
      radial-gradient(65% 65% at 55% 58%,
        rgba(var(--lime-rgb), 0.45) 0%,
        rgba(var(--lime-rgb), 0.20) 50%,
        rgba(var(--lime-rgb), 0) 100%);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
}

/* Tall Mobile */
@media (max-width: 768px) and (min-aspect-ratio: 9/20) {
  .animation-circle-container.force-hover .g-tl { top: -38%; left: -5%; }
  .animation-circle-container.force-hover .g-tr { top: -38%; right: -5%; }
  .animation-circle-container.force-hover .g-br { bottom: -38%; right: -5%; }
  .animation-circle-container.force-hover .g-bl { bottom: -38%; left: -5%; }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .animation-circle-container {
    --glow-size: clamp(220px, 36vh, 480px);
    --glow-size-hover: clamp(340px, 58vh, 720px);
  }
  
  .animation-circle-container .g-tl { top: -50%; left: -50%; }
  .animation-circle-container .g-tr { top: -50%; right: -50%; }
  .animation-circle-container .g-br { bottom: -50%; right: -50%; }
  .animation-circle-container .g-bl { bottom: -50%; left: -50%; }
  
  .animation-circle-container.force-hover .g-tl { top: -48%; left: -5%; }
  .animation-circle-container.force-hover .g-tr { top: -48%; right: -5%; }
  .animation-circle-container.force-hover .g-br { bottom: -48%; right: -5%; }
  .animation-circle-container.force-hover .g-bl { bottom: -48%; left: -5%; }
}

/* Safari-specific optimizations */
@supports (-webkit-backdrop-filter: blur(1px)) {
  @media (max-width: 768px) {
    .animation-circle-container {
      --glow-blur: clamp(22px, 4.5vmin, 60px);
      --glow-blur-hover: clamp(38px, 7vmin, 85px);
    }
    
    .animation-circle-container .bloom {
      filter: blur(clamp(20px, 3.5vw, 45px));
    }
    
    .animation-circle-container.force-hover .bloom {
      filter: blur(clamp(24px, 4.5vw, 55px));
    }
    
    /* Reduce gradient complexity για Safari */
    .animation-circle-container .glow {
      background:
        radial-gradient(circle at 50% 50%,
          rgba(var(--lime-rgb), 0.90) 0%,
          rgba(var(--lime-rgb), 0.50) 35%,
          rgba(var(--lime-rgb), 0) 75%);
    }
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .animation-circle-container .glow,
  .animation-circle-container .bloom,
  .animation-circle-container::after {
    transition: none !important;
    animation: none !important;
  }
  
  .animation-circle-container .glow {
    filter: none;
  }
}