/* Animation for Releases stage 1 */

.runningBorderStage1 {
  width: 7.5vw;
  height: 24vw;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.1vw;
  background: #ffea820c;
  margin-top: 1.5%;
}

.runningBorderStage1::before {
  content: "";
  background-image: conic-gradient(#fdcb0a 20deg, transparent 120deg);
  width: 350%;
  height: 350%;
  position: absolute;
  animation: rotate 8s linear infinite;
  border-radius: 2.2vw;
}

.runningBorderStage1::after {
  content: "";
  width: 7.3vw;
  height: 23.8vw;
  background: #101010;
  position: absolute;
  border-radius: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff0052;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Animation for section 6 Releases is now Online button */

.runningBorderRelease {
  width: 15.2vw;
  height: 3.1vw;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #121212;
  margin-top: 1.5%;
  margin-left: 39%;
  white-space: nowrap;
  border-radius: 1.5vw;
}

.runningBorderRelease::before {
  content: "";
  background-image: conic-gradient(#fdcb0a 80deg, transparent 120deg);
  width: 500%;
  height: 500%;
  position: absolute;
  animation: rotate 8s linear infinite;
  border-radius: 2.2vw;
}

.runningBorderRelease::after {
  content: "";
  width: 15.1vw;
  height: 2.85vw;
  background: #121212;
  position: absolute;
  border-radius: 1.4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff0052;
}

/* Box Stage Number Animation */

.runningBorderBox {
  width: 3.4vw;
  height: 3.3vw;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #121212;
  white-space: nowrap;
  border-radius: 0.6vw;
  z-index: 50;
}

.runningBorderBox::before {
  content: "";
  background-image: conic-gradient(#fdcb0a 80deg, transparent 120deg);
  width: 500%;
  height: 500%;
  position: absolute;
  animation: rotate 8s linear infinite;
}

.runningBorderBox::after {
  content: "";
  width: 3.15vw;
  height: 3.1vw;
  background: black;
  position: absolute;
  border-radius: 0.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff0052;
}

.pulse-box {
  width: 90%;
  height: 9.5%;
  margin: 0 auto;
  background-color: #fdcb0a;
  box-shadow: 0px 0px 25.9483px #fdcb0a;
  border-radius: 0.4vw;
  animation: pulseOpacity 3s infinite ease-in-out;
}

@keyframes pulseOpacity {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.6;
  }

  75% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.1;
  }
}

/* Mobile View */
/* Expandable Cards Div */
/* Base styles */
#expandableCardsDivMobile {
  transition: height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Smooth easing function */
  will-change: height;
  /* Hint to browser for better performance */
  overflow: hidden;
  /* Keep this to contain the expanding content */
}

/* Content styles with optimized reveal animation */
#contentMobile {
  opacity: 0;
  transform: translateY(10px);
  /* Slight initial offset */
  transition: opacity 1s ease-out 0s,
    /* Delay opacity to sync with height */ transform 1s ease-out 0s;
  /* Add subtle movement */
  pointer-events: none;
  /* Prevent interaction while hidden */
}

/* Expanded state styles */
#expandableCardsDivMobile.expandedMobile {
  height: calc(418.5vw + 142vw) !important;
  /* Important to override inline style */
}

#expandableCardsDivMobile.expandedMobile #contentMobile {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Re-enable interaction when visible */
}

.custom-gradient-text {
  background: linear-gradient(360deg, #fdcb0a 0%, #ffffff 30%, #fdcb0a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.custom-gradient-text1 {
  background: linear-gradient(90deg, #fdcb0a 0%, #ffffff 40%, #fdcb0a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}