.button-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  border: 0.25rem var(--icon-2-dark);
}

.dual-button {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 0.25rem solid var(--icon-4);
  border-radius: 1.5rem;
  cursor: pointer;
  transform: scale(1);
  transition: border 0.4s ease,
              box-shadow 0.4s ease,
              transform 0.3s ease,
              border-radius 0.3s ease;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
  background: var(--gr4);

  /*background: transparent;          <— remove default button fill */
  backdrop-filter: blur(4px);      /* <— glassy/translucent effect */
  -webkit-backdrop-filter: blur(4px);
  will-change: box-shadow, transform, border;
}


.dual-button:hover {
  box-shadow:
    var(--icon-2-trans) 0px 0px 2px,
    var(--icon-2-trans) 0px 0px 4px,
    var(--icon-2-trans) 0px 0px 8px,
    var(--icon-2-trans) 0px 0px 16px,
    var(--icon-2-trans) 0px 0px 32px,
    var(--icon-2-trans) 0px 0px 64px;
    mix-blend-mode: var(--glow-blend2);
    
}
.dual-button.hover-right .dual-button{

  box-shadow:
    var(--icon-2-trans) 0px 0px 2px,
    var(--icon-2-trans) 0px 0px 4px,
    var(--icon-2-trans) 0px 0px 8px,
    var(--icon-2-trans) 0px 0px 16px,
    var(--icon-2-trans) 0px 0px 32px,
    var(--icon-2-trans) 0px 0px 64px;
    mix-blend-mode: var(--glow-blend2);
}

.dual-button .half {
  --font-size: 2.1rem;
  position: relative;
  flex: 1;
  padding: 1rem 2rem;
  font-size: var(--font-size);
  font-weight: 400;
  text-align: center;
  background: var(--bggr);
  transition: all 0.4s ease;
  border-radius: none;
  white-space: nowrap;      /* prevents wrapping */
  overflow: hidden;         /* hides overflow text */
  text-overflow: initial;
  will-change: flex, background, font-weight;
}

/*-------------------------------------span---------------------------------*/

.dual-button .half span {
  position: relative;
  background: var(--gr1);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  z-index: 5;
}
.dual-button .half.left:hover span {
  background: var(--icon-4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.dual-button .half.right:hover span {
  background: var(--fg);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* glow behind */
.dual-button .half span::before {
  content: attr(data-text);  /* copy the text */
  position: absolute;
  inset: 0;
  font: inherit;
  color: var(--icon-1);
  filter: blur(1rem);
  opacity: 0.8;
  pointer-events: none;
  mix-blend-mode: var(--glow-blend2);
  z-index: -1;  /* puts glow behind the gradient text */
}

/* Glow pseudo-element for each half */
.dual-button .half::after {
  content: "";
  position: absolute;
  top: 50%;  /* center vertically in its own half */
  left: 50%; /* center horizontally in its own half */
  width: 400%;  /* expand beyond half */
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 45%), 
              radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 27%),
              radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 14%),
              radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 9%),
              radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 5%),
              radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 2%);
  transform: translate(-50%, -50%) scale(0); /* hidden initially */
  mix-blend-mode: var(--glow-blend2);  /* additive glow */
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.4s ease;
  opacity: 0;
  z-index: -2; /* above background but behind text */
  will-change: transform, opacity; /* optimize for animations */
  
}

/* Show glow on hover for the corresponding half */
.dual-button.hover-left .half.left::after,
.dual-button.hover-right .half.right::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}


.dual-button .half.left {
  border-right: 0.5rem var(--icon-2);
  font-weight: 400;
  flex: 0.55;
  will-change: font-weight, text-shadow;
}

.dual-button .half.right {
  border-left: 0.5rem var(--icon-2);
  font-weight: 600;
  flex: 0.45;
  will-change: font-weight, text-shadow;
}

/* Hover enlarge the entire button */
.dual-button.hovered {
  transform: scale(1.05);
}

/* Hovered side styling */
.dual-button.hover-left .half.left {
  flex: 0.7;
  font-weight: 500;
  font-size: calc(var(--font-size) * 1.3);
  background: var(--alt-glow-border);
  background-blend-mode: add;
  box-shadow: 0rem 0rem 0.5rem var(--icon-1),
              0rem 0rem 1rem var(--icon-2),
              0rem 0rem 5rem var(--icon-2);
  /*text-shadow:var(--icon-1) 0px 0px 2px,
              var(--icon-1) 0px 0px 4px,
              var(--icon-2-trans) 0px 0px 8px,
              var(--icon-2-trans) 0px 0px 16px,
              var(--icon-2-trans) 0px 0px 32px,
              var(--icon-2-trans) 0px 0px 64px;*/
  z-index: -10;
}

.dual-button.hover-left .half.right {
  flex: 0.3;
  background: var(--gr3);
}

.dual-button.hover-left .dual-button {
  border: 0.45rem solid var(--icon-3);
  border-radius: 3rem;

}

.dual-button.hover-right .half.right {
  flex: 0.8;
  font-size: calc(var(--font-size) * 1.3);
  background: var(--glow-border);
  background-blend-mode: darken;
  box-shadow: 0rem 0rem 0.5rem var(--icon-1),
              0rem 0rem 1rem var(--icon-2),
              0rem 0rem 5rem var(--icon-2);
  text-shadow: 0rem 0rem .5rem var(--icon-1),
               0rem 0rem 2rem var(--icon-1);
               mix-blend-mode: add;
}

.dual-button.hover-right .half.left {
  flex: 0.2;
  background: var(--mainbg);
  color: transparent;
  text-align: center;
}

.dual-button.hover-right .dual-button {
  
  border: 0.2rem solid var(--icon-2);
  border-radius: 1rem;

}