/* Base styles for hover icons */
.hover-icon {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  overflow: visible !important;
}

.hover-icon svg {
  overflow: visible !important;
}

/* Utilities */
.rotate-180 {
  transform: rotate(180deg);
  display: inline-block; /* ensure transform works */
}

.origin-center {
  transform-origin: center;
}

.ml-2 {
  margin-left: 0.5rem;
}

/* ArrowBigRightDash Icon Animation */
.hover-icon-arrow-big-right-dash .arrow {
  transition: transform 0.2s ease-in-out;
}

.hover-icon-arrow-big-right-dash:hover .arrow {
  transform: translateX(4px);
  transition: transform 0.3s ease-out;
}

.hover-icon-arrow-big-right-dash .dash {
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  /* transform-origin matches the React code's inline style: style={{ transformOrigin: "4px 12px" }} */
  transform-origin: 4px 12px;
}

.hover-icon-arrow-big-right-dash:hover .dash {
  transform: scale(1.2);
  opacity: 0.7;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Utilities */
.ml-2 {
  margin-left: 0.5rem;
}

/* ArrowNarrowUpDashed Icon Animation */
@keyframes arrowUpBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

.hover-icon-arrow-narrow-up-dashed:hover .arrow-group {
  animation: arrowUpBounce 0.5s ease-in-out;
}

/* Facebook Icon Animation */
@keyframes fbScale {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(0.9);
  }
  66% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fbLikePop {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateY(-15px);
    opacity: 0;
  }
  100% {
    transform: translateY(-15px);
    opacity: 0;
  }
}

.hover-icon-facebook:hover .fb-path {
  animation: fbScale 0.5s ease-in-out;
}

/* Adjusted timing to be visible */
.hover-icon-facebook:hover .fb-like {
  animation: fbLikePop 0.8s ease-out forwards;
}

/* GitHub Icon Animation */
@keyframes githubWiggle {
  0% {
    transform: scale(1) rotate(0);
  }
  25% {
    transform: scale(1.1) rotate(-10deg);
  }
  75% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

.hover-icon-github:hover .github-icon {
  animation: githubWiggle 0.5s ease-in-out;
}

/* LinkedIn Icon Animation */
@keyframes linkedinBorderScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.hover-icon-linkedin:hover .border {
  animation: linkedinBorderScale 0.4s ease-in-out;
}

/* Simulate path drawing */
.hover-icon-linkedin .lines {
  stroke-dasharray: 10;
  stroke-dashoffset: 0;
}

.hover-icon-linkedin:hover .lines {
  animation: linkedinDraw 0.6s ease-out forwards;
}

@keyframes linkedinDraw {
  0% {
    stroke-dashoffset: 10;
    opacity: 0.5;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Gmail Icon Animation */
.hover-icon-gmail .envelope-top,
.hover-icon-gmail .envelope-flap {
  transition: opacity 0.2s, stroke 0.2s;
  opacity: 1;
}

/* Simulate path drawing or reveal */
@keyframes gmailReveal {
  0% {
    stroke-dasharray: 0 50;
    opacity: 0;
  }
  100% {
    stroke-dasharray: 50 0;
    opacity: 1;
  }
}

.hover-icon-gmail:hover .sides {
  transform: scaleY(1);
  transition: transform 0.3s ease-out;
}
.hover-icon-gmail .sides {
  transform: scaleY(0.95);
  transition: transform 0.3s ease-in;
}

.hover-icon-gmail:hover .envelope-flap {
  animation: gmailReveal 0.5s ease-out forwards;
}

/* Globe Icon Animation */
@keyframes globeRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hover-icon-globe:hover .globe-circle {
  animation: globeRotate 2s linear infinite;
  transform-origin: 23px 19px; /* matching the JS: 23px 19px */
}

/* Moon Icon Animation */
@keyframes moonSwing {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(-15deg) scale(1.1);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}

.hover-icon-moon:hover .moon {
  animation: moonSwing 0.5s ease-in-out;
}

/* Brightness Down Icon Animation */
@keyframes sunPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sunRaysFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.hover-icon-brightness-down:hover .sun-center {
  animation: sunPulse 0.4s ease-in-out;
}

.hover-icon-brightness-down:hover .sun-rays {
  animation: sunRaysFade 0.5s ease-in-out;
}