/* Attention-grabbing HIRE ME button styles */
.hire-me-btn {
  position: relative;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  animation: pulse-glow 2s infinite;
  box-shadow: 0 0 15px rgba(255, 174, 0, 0.5);
  border: 2px solid var(--ztc-bg-btn-bg1);
  background: linear-gradient(45deg, var(--ztc-bg-btn-bg1), #ffbe3d);
  z-index: 10;
}

/* Pulsating glow effect */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 15px rgba(255, 174, 0, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 174, 0, 0.8);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 174, 0, 0.5);
    transform: scale(1);
  }
}

/* Shine effect */
.hire-me-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Hover effect */
.hire-me-btn:hover {
  transform: scale(1.1) translateY(-3px);
  background: linear-gradient(45deg, #ffbe3d, var(--ztc-bg-btn-bg1));
  box-shadow: 0 10px 25px rgba(255, 174, 0, 0.6);
}

/* Add attention indicator */
.hire-me-btn::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: #f45151;
  border-radius: 50%;
  border: 2px solid white;
  animation: attention-pulse 1.5s infinite;
}

@keyframes attention-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Ensure the text remains clear */
.hire-me-btn span {
  position: relative;
  z-index: 2;
}

/* Light mode adjustments */
.light-mode .hire-me-btn {
  box-shadow: 0 0 15px rgba(255, 174, 0, 0.3);
}

.light-mode .hire-me-btn:hover {
  box-shadow: 0 10px 25px rgba(255, 174, 0, 0.4);
}

/* Add special styling to the mail icon */
.hire-me-btn img {
  animation: bounce 1s infinite alternate;
  position: relative;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4px);
  }
}



/* Enhanced Hire Me Button Styles */
.hire-me-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: linear-gradient(45deg, var(--ztc-bg-btn-bg1), #ffc235);
  border: 2px solid var(--ztc-bg-btn-bg1);
  box-shadow: 0 5px 15px rgba(255, 174, 0, 0.4);
  transform-style: preserve-3d;
  z-index: 10;
  animation: none; /* We'll add animation with JS control */
}

/* Active state with pulsating effect */
.hire-me-btn.pulsating {
  animation: pulse-glow 2s infinite;
}

/* Pulsating glow effect */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 15px rgba(255, 174, 0, 0.5);
    transform: scale(1) translateY(0);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 174, 0, 0.8);
    transform: scale(1.05) translateY(-3px);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 174, 0, 0.5);
    transform: scale(1) translateY(0);
  }
}

/* Shine effect */
.hire-me-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  z-index: 1;
  transform: skewX(-25deg);
  animation: shine 3s infinite;
  animation-delay: 0.5s;
}

@keyframes shine {
  0% {
    left: -100%;
    opacity: 0.8;
  }
  20% {
    left: 100%;
    opacity: 0.8;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Hover effect */
.hire-me-btn:hover {
  transform: scale(1.08) translateY(-5px) rotate(0.5deg);
  background: linear-gradient(45deg, #ffb52e, var(--ztc-bg-btn-bg1));
  box-shadow: 0 10px 25px rgba(255, 174, 0, 0.6);
}

/* Add attention indicator dot */
.hire-me-btn::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background-color: #f45151;
  border-radius: 50%;
  border: 2px solid white;
  animation: attention-pulse 1.5s infinite;
  z-index: 2;
}

@keyframes attention-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Ensure the text remains clear */
.hire-me-btn span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

/* Add special styling to the mail icon */
.hire-me-btn img {
  animation: bounce 1s infinite alternate;
  position: relative;
  transform-origin: center;
  margin-left: 8px;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4px);
  }
}

/* 3D effect on hover */
.hire-me-btn:active {
  transform: scale(0.95) translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .hire-me-btn {
    padding: 14px 18px;
    font-size: 16px;
  }

  .hire-me-btn::after {
    width: 12px;
    height: 12px;
    top: -5px;
    right: -5px;
  }
}

@media (max-width: 767px) {
  .hire-me-btn {
    padding: 12px 16px;
    font-size: 14px;
  }

  .hire-me-btn img {
    height: 16px;
    width: auto;
  }
}

/* Light mode adjustments */
.light-mode .hire-me-btn {
  background: linear-gradient(45deg, var(--ztc-bg-btn-bg1), #ffc235);
  box-shadow: 0 5px 15px rgba(255, 174, 0, 0.3);
}

.light-mode .hire-me-btn:hover {
  box-shadow: 0 10px 25px rgba(255, 174, 0, 0.4);
}

/* Add text shadow for better visibility */
.hire-me-btn {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Use GPU acceleration for smoother animations */
.hire-me-btn {
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}



/* Additional enhancements for the Hire Me button */

/* Add a subtle gradient animation background for extra appeal */
.hire-me-btn {
  background-size: 200% 200%;
  background-image: linear-gradient(
    45deg,
    var(--ztc-bg-btn-bg1) 0%,
    #ffc235 25%,
    #ffcd5c 50%,
    #ffc235 75%,
    var(--ztc-bg-btn-bg1) 100%
  );
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Add a more visible, animated border */
.hire-me-btn {
  border: 2px solid var(--ztc-bg-btn-bg1);
  box-shadow:
    0 5px 15px rgba(255, 174, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* Add an animated background shine effect */
.hire-me-btn::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background-color: #f45151;
  border-radius: 50%;
  border: 2px solid white;
  animation: attention-pulse 1.5s infinite;
  z-index: 2;
  box-shadow: 0 0 10px #f45151;
}

/* Add a subtle particle effect around the button on hover */
.hire-me-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  z-index: 1;
  transform: skewX(-25deg);
  animation: shine 3s infinite;
  animation-delay: 0.5s;
}

/* Enhanced hover state */
.hire-me-btn:hover {
  letter-spacing: 0.5px;
  color: var(--ztc-text-btn-text1);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hire-me-btn:hover img {
  transform: scale(1.2) translateY(-4px);
}

/* Make button text more visible */
.hire-me-btn {
  font-weight: var(--ztc-weight-bold) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Specific responsive fixes */
@media (max-width: 991px) {
  .hire-me-btn {
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-width: 120px;
  }
}

@media (max-width: 767px) {
  .hire-me-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 18px !important;
    min-width: 100px;
    margin-right: 10px !important;
  }

  .hire-me-btn span {
    margin-left: 6px;
  }

  .hire-me-btn img {
    height: 16px;
    width: auto;
  }

  /* Handle very small screens */
  @media (max-width: 380px) {
    .hire-me-btn {
      font-size: 13px !important;
      padding: 10px 14px !important;
    }

    .hamburger_menu {
      margin-left: 5px !important;
    }

    .hire-me-btn span img {
      height: 14px;
      width: auto;
    }

    .theme-toggle-container {
      padding-right: 10px !important;
    }
  }
}

/* Accessibility improvements */
.hire-me-btn:focus {
  outline: none;
  box-shadow:
    0 5px 15px rgba(255, 174, 0, 0.4),
    0 0 0 3px rgba(255, 174, 0, 0.5);
}

/* Fix for Firefox quirks */
@-moz-document url-prefix() {
  .hire-me-btn {
    background-image: linear-gradient(
      45deg,
      var(--ztc-bg-btn-bg1) 0%,
      #ffc235 50%,
      var(--ztc-bg-btn-bg1) 100%
    );
  }
}

/* Mobile-specific fixes for the Hire Me button */
@media (max-width: 767px) {
  .hire-me-btn {
    /* Ensure proper sizing */
    padding: 8px 14px !important;
    font-size: 14px !important;

    /* Fix positioning */
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    /* Maintain visibility */
    background: var(--ztc-bg-btn-bg1);
    border: 1px solid var(--ztc-bg-btn-bg1);

    /* Control space around the button */
    margin-right: 8px !important;
    margin-left: 0 !important;

    /* Ensure text and icon fit properly */
    min-width: unset;
    width: auto !important;
    max-width: 100px;
  }

  /* Adjust icon spacing */
  .hire-me-btn span {
    margin-left: 5px;
  }

  /* Make icon smaller on very small screens */
  .hire-me-btn img {
    height: 14px;
    width: auto;
  }

  /* Ensure the header area has enough space */
  .header-elements {
    padding: 5px 0;
    gap: 5px;
  }

  /* Fix positioning in the mobile header */
  .btn-area {
    display: flex !important;
    align-items: center;
    gap: 5px;
  }

  /* Extra small devices */
  @media (max-width: 360px) {
    .hire-me-btn {
      font-size: 13px !important;
      padding: 6px 10px !important;
    }

    /* Hide button text on extremely small screens, show only icon */
    .hire-me-btn .button-text {
      display: none;
    }

    .hire-me-btn span {
      margin: 0;
    }

    /* Adjust spacing between elements */
    .theme-toggle-container {
      padding-right: 5px !important;
    }

    .hamburger_menu {
      margin-left: 2px !important;
    }
  }
}