/*** Logo Section ***/
:root {
  --shine-opacity-mid: 0.8; /* Opacity of the mid-point shine */
  --shine-blur: 4px; /* Amount of blur for the shine effect */
  --shine-brightness: 1.4; /* Brightness level for the shine */
  --shine-duration: 2.5s; /* Duration of the shine animation */
  --shine-gradient-angle: 45deg; /* Angle of the gradient for the shine */
  --shine-start-color: rgba(255, 255, 255, 0); /* Start color of the gradient */
  --shine-mid-color: rgba(
    255,
    255,
    255,
    var(--shine-opacity-mid)
  ); /* Middle color of the gradient */
  --shine-end-color: rgba(255, 255, 255, 0); /* End color of the gradient */
}
/* Container for the logo */
.logo-container {
  position: relative;
  display: inline-block;
  width: 180px; /* Match the width of your logo */
  height: 35px; /* Match the height of your logo */
  overflow: hidden; /* Ensure the shine effect stays within the container */
  filter: drop-shadow(0 0 10px var(--shine-color-mid));
  transition: filter 0.3s ease;
  border: 1px solid transparent;
  border-radius: 5px;
}

/* Logo image styling */
.face-2.front-2 > .logo-container > img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 20px var(--shine-color-mid));
}

/* Shine effect with theme-controlled gradient */
.logo-container::before {
  content: '';
  position: absolute;
  top: -50%; /* Start slightly above the logo */
  left: -50%; /* Start slightly to the left of the logo */
  width: 200%; /* Large enough to cover the entire logo diagonally */
  height: 50%;
  background: linear-gradient(
    45deg,
    var(--shine-color-start, rgba(255, 215, 0, 0)) 0%,
    var(--shine-color-mid, rgba(255, 215, 0, 0.8)) 50%,
    var(--shine-color-end, rgba(255, 215, 0, 0)) 100%
  );
  transform: rotate(0deg);
  animation: shine-effect 3s linear infinite;
  pointer-events: none;
  z-index: 999999;
  opacity: 0.7;
}

/* Keyframes for the animation */
@keyframes shine-effect {
  0% {
    transform: translateX(-100%) translateY(100%) rotate(-45deg);
  }
  100% {
    transform: translateX(100%) translateY(-100%) rotate(-45deg);
  }
}

/* Optional: Hover effect for added interaction */
.logo-container:hover {
  animation: border-fill-hover 1.5s linear infinite; /* Faster animation on hover */
}

@keyframes border-fill-hover {
  0% {
    background: linear-gradient(90deg, transparent, transparent) padding-box,
      linear-gradient(
          90deg,
          var(--shine-color-end),
          var(--shine-color-mid),
          var(--shine-color-start)
        )
        border-box;
  }
  100% {
    background: linear-gradient(360deg, transparent, transparent) padding-box,
      linear-gradient(
          360deg,
          var(--shine-color-end),
          var(--shine-color-mid),
          var(--shine-color-start)
        )
        border-box;
  }
}

/* Keyframes for border-fill effect */
@keyframes border-fill {
  0% {
    border-image: linear-gradient(
        0deg,
        var(--border-color) 0%,
        var(--border-color) 10%,
        transparent 10%,
        transparent 100%
      )
      1;
  }
  25% {
    border-image: linear-gradient(
        90deg,
        var(--border-color) 0%,
        var(--border-color) 10%,
        transparent 10%,
        transparent 100%
      )
      1;
  }
  50% {
    border-image: linear-gradient(
        180deg,
        var(--border-color) 0%,
        var(--border-color) 10%,
        transparent 10%,
        transparent 100%
      )
      1;
  }
  75% {
    border-image: linear-gradient(
        270deg,
        var(--border-color) 0%,
        var(--border-color) 10%,
        transparent 10%,
        transparent 100%
      )
      1;
  }
  100% {
    border-image: linear-gradient(
        360deg,
        var(--border-color) 0%,
        var(--border-color) 10%,
        transparent 10%,
        transparent 100%
      )
      1;
  }
}

/* Logo section layout */
.logo-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
  /* padding: 8px 0 8px 0; */
}

/* Container for the rotating logo box */
.box {
  position: relative;
  width: 186px; /* Adjust to your logo's width */
  height: 39px; /* Adjust to your logo's height */
  perspective: 1000px; /* Enable 3D perspective */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border: 1px solid red; /* Initial border for reference */
  border-radius: 10px; /* Optional rounded corners */
  border-image: linear-gradient(
      0deg,
      var(--border-color) 0%,
      var(--border-color) 10%,
      transparent 10%,
      transparent 100%
    )
    1;
  animation: border-fill 8s linear infinite;
  /* animation: ani 3s linear infinite; */
}

/* Inner container to hold the front and back faces */
.inner-logo-box {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Enable 3D transformations */
  animation: half-rotate-with-pause 11s ease-in-out infinite; /* 3s pause + 3s rotation + 3s pause */
}

/* Front face of the logo */
.face-2.front-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hide the back when not facing front */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Back face of the logo */
.face-2.back-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hide the front when not facing back */
  transform: rotateY(180deg); /* Rotate back face 180 degrees */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-background);
  color: var(--foreground); /* Use the theme's text color */
  font-family: 'Arial', sans-serif;
  font-size: 7px;
  font-weight: bold;
  flex-direction: row;
  gap: 0.9rem;
  border: 2px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate; /* Isolate blending for the pseudo-element */
}

/* Enhanced shine effect */
.face-2.back-2::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 250%; /* Increased to ensure full coverage of larger containers */
  height: 100%; /* Adjusted height for better diagonal shine */
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    /* Increased mid-point opacity for a stronger shine */ rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen; /* Simulates light blending with the background */
  filter: blur(4px) brightness(1.4); /* Enhanced blur and brightness for stronger effect */
  transform: rotate(0deg);
  animation: enhanced-shine-effect 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; /* Smooth easing for animation */
  pointer-events: none;
  z-index: 1;
  transition: filter 0.3s ease; /* Added smooth transition for interactive effects if needed */
}

/* Ensure the content inside stays above the shine */
.face-2.back-2 > * {
  position: relative;
  z-index: 2;
}

/* Enhanced shine animation */
@keyframes enhanced-shine-effect {
  0% {
    transform: translateX(-150%) translateY(150%) rotate(-45deg);
  }
  100% {
    transform: translateX(150%) translateY(-150%) rotate(-45deg);
  }
}

/* Keyframes for half-circle rotation with pauses */
@keyframes half-rotate-with-pause {
  0% {
    transform: rotateY(0deg); /* Start at the front */
  }
  20% {
    transform: rotateY(0deg); /* Hold at the front for 5 seconds */
  }
  50% {
    transform: rotateY(180deg); /* Rotate to the back */
  }
  80% {
    transform: rotateY(180deg); /* Hold at the back for 5 seconds */
  }
  100% {
    transform: rotateY(0deg); /* Return to the front */
  }
}

.pulse-animation {
  margin-right: 5px;
  /* animation: pulse 1.5s infinite ease-in-out; */
}

/* Text on the back face without glow */
.face-2.back-2 h1 {
  color: var(--foreground); /* Use the theme's text color */
  font-size: 12px; /* Adjust as needed */
  font-weight: bold;
  text-align: center;
  /* animation: pulse 3s infinite alternate;  */
}

.verified-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* Verified icon with pulse effect */
.verified-icon svg {
  width: 24px; /* Adjust size */
  height: 24px; /* Adjust size */
  stroke: var(--foreground); /* Match the theme's foreground color */
  animation: pulse-icon 1s infinite alternate;
}

/* Pulse animation for the icon */
@keyframes pulse-icon {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2); /* Slight scaling for effect */
  }
}