/* Custom CSS for project (alpha/custom.css) */

/* Show and animate the decorative square SVG on card hover */
.custom-box-shadow-1 {
  position: relative;
  overflow: visible;
}
.custom-box-shadow-1 .custom-square-1 {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 80px;
  height: 80px;
  opacity: 0;
  transform: translateY(10px) scale(0.92) rotate(-6deg);
  transition:
    opacity 0.35s ease,
    transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.custom-box-shadow-1:hover .custom-square-1 {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
  z-index: 3;
}

/* Stroke-draw effect for the rect */
.custom-square-1 rect {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.custom-box-shadow-1:hover .custom-square-1 rect {
  stroke-dashoffset: 0;
}

/* Small pop/overshoot animation */
@keyframes customSquarePop {
  0% {
    transform: translateY(12px) scale(0.92) rotate(-8deg);
  }
  60% {
    transform: translateY(-6px) scale(1.06) rotate(6deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0);
  }
}
.custom-box-shadow-1:hover .custom-square-1 {
  animation: customSquarePop 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* Smooth in-page scrolling for anchor links */
html {
  scroll-behavior: smooth;
}