/* Hero Section Animation - 5 Step Sequence */

.hero-animation-container {
  width: 400px;
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Square Elements */
.animated-square {
  position: absolute;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #8A43FF 0%, #6B2DD8 100%);
  border-radius: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Step 1: Main square - ease-in, scale up and bounce */
.square-main {
  animation: step1-bounce 2s ease-in-out 0s 1 forwards,
             sequence-loop 16s linear 2s infinite;
}

@keyframes step1-bounce {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  65% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  80% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Step 2: Generate 4 squares like a plotted chart */
.square-1, .square-2, .square-3, .square-4 {
  width: 70px;
  height: 70px;
  opacity: 0;
}

/* Square 1 appears first - far left, middle height */
.square-1 {
  animation: square1-appear 0.6s ease-out 2s 1 forwards,
             square-loop-1 16s linear 3.8s infinite;
  transform-origin: center;
}

/* Square 2 appears second - center left, lowest */
.square-2 {
  animation: square2-appear 0.6s ease-out 2.5s 1 forwards,
             square-loop-2 16s linear 4.3s infinite;
  transform-origin: center;
}

/* Square 3 appears third - center right, mid height */
.square-3 {
  animation: square3-appear 0.6s ease-out 3s 1 forwards,
             square-loop-3 16s linear 4.8s infinite;
  transform-origin: center;
}

/* Square 4 appears fourth - far right, highest */
.square-4 {
  animation: square4-appear 0.6s ease-out 3.5s 1 forwards,
             square-loop-4 16s linear 5.3s infinite;
  transform-origin: center;
}

/* Square 1 - Left side, middle height */
@keyframes square1-appear {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(calc(-50% - 120px), calc(-50% + 20px)) scale(1);
    opacity: 1;
  }
}

/* Square 2 - Center, lowest position */
@keyframes square2-appear {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(calc(-50% - 20px), calc(-50% + 80px)) scale(1);
    opacity: 1;
  }
}

/* Square 3 - Right center, mid height */
@keyframes square3-appear {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(calc(-50% + 70px), calc(-50% + 10px)) scale(1);
    opacity: 1;
  }
}

/* Square 4 - Far right, highest position */
@keyframes square4-appear {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(calc(-50% + 160px), calc(-50% - 50px)) scale(1);
    opacity: 1;
  }
}

/* Connecting Lines */
.connecting-line {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, #8A43FF 0%, #6B2DD8 100%);
  transform-origin: left center;
  opacity: 0;
  z-index: 1;
}

/* Line 1: Connects square 1 to square 2 (slopes down-right) */
.line-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(-60px, 20px) rotate(30deg);
  transform-origin: left center;
  animation: line1-draw 0.4s ease-out 2.5s 1 forwards,
             line-loop-1 16s linear 4.3s infinite;
}

/* Line 2: Connects square 2 to square 3 (slopes up-right) */
.line-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(-20px, 50px) rotate(-35deg);
  transform-origin: left center;
  animation: line2-draw 0.4s ease-out 3s 1 forwards,
             line-loop-2 16s linear 4.8s infinite;
}

/* Line 3: Connects square 3 to square 4 (slopes up-right steeply) */
.line-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(70px, 10px) rotate(-30deg);
  transform-origin: left center;
  animation: line3-draw 0.4s ease-out 3.5s 1 forwards,
             line-loop-3 16s linear 5.3s infinite;
}

@keyframes line1-draw {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100px;
    opacity: 1;
  }
}

@keyframes line2-draw {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100px;
    opacity: 1;
  }
}

@keyframes line3-draw {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100px;
    opacity: 1;
  }
}

/* Step 3: Purple square with black border that rotates */
.square-featured {
  width: 120px;
  height: 120px;
  opacity: 0;
  border: 8px solid #000000;
  animation: featured-square-rotate 2s ease-out 4.5s 1 forwards,
             featured-loop 16s linear 6.5s infinite;
}

@keyframes featured-square-rotate {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(15deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(25deg);
    opacity: 1;
  }
}

/* Step 4: Transform to purple circle, then to black circle */
.circle-square {
  width: 120px;
  height: 120px;
  opacity: 0;
  border: none;
  animation: circle-purple-appear 2s ease-in 6.5s 1 forwards,
             circle-loop 16s linear 8.5s infinite;
}

.inner-circle {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #000000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: circle-black-appear 1.5s ease-out 8.5s 1 forwards,
             inner-circle-loop 16s linear 10s infinite;
}

@keyframes circle-purple-appear {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    border-radius: 8px;
  }
  40% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
    border-radius: 8px;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    border-radius: 50%;
  }
}

@keyframes circle-black-appear {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Step 5: Ease out and prepare for repeat */
@keyframes fadeout-reset {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Looping animations for continuous sequence */
@keyframes sequence-loop {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  12.5% { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  18.75% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  93.75% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes square-loop-1 {
  0% { opacity: 1; transform: translate(calc(-50% - 120px), calc(-50% + 20px)) scale(1); }
  25% { opacity: 1; transform: translate(calc(-50% - 120px), calc(-50% + 20px)) scale(1); }
  31.25% { opacity: 0; }
  93.75% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 1; transform: translate(calc(-50% - 120px), calc(-50% + 20px)) scale(1); }
}

@keyframes square-loop-2 {
  0% { opacity: 1; transform: translate(calc(-50% - 20px), calc(-50% + 80px)) scale(1); }
  25% { opacity: 1; transform: translate(calc(-50% - 20px), calc(-50% + 80px)) scale(1); }
  31.25% { opacity: 0; }
  93.75% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 1; transform: translate(calc(-50% - 20px), calc(-50% + 80px)) scale(1); }
}

@keyframes square-loop-3 {
  0% { opacity: 1; transform: translate(calc(-50% + 70px), calc(-50% + 10px)) scale(1); }
  25% { opacity: 1; transform: translate(calc(-50% + 70px), calc(-50% + 10px)) scale(1); }
  31.25% { opacity: 0; }
  93.75% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 1; transform: translate(calc(-50% + 70px), calc(-50% + 10px)) scale(1); }
}

@keyframes square-loop-4 {
  0% { opacity: 1; transform: translate(calc(-50% + 160px), calc(-50% - 50px)) scale(1); }
  25% { opacity: 1; transform: translate(calc(-50% + 160px), calc(-50% - 50px)) scale(1); }
  31.25% { opacity: 0; }
  93.75% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 1; transform: translate(calc(-50% + 160px), calc(-50% - 50px)) scale(1); }
}

@keyframes line-loop-1 {
  0% { opacity: 1; width: 100px; }
  25% { opacity: 0; }
  93.75% { opacity: 0; width: 0; }
  100% { opacity: 1; width: 100px; }
}

@keyframes line-loop-2 {
  0% { opacity: 1; width: 100px; }
  25% { opacity: 0; }
  93.75% { opacity: 0; width: 0; }
  100% { opacity: 1; width: 100px; }
}

@keyframes line-loop-3 {
  0% { opacity: 1; width: 100px; }
  25% { opacity: 0; }
  93.75% { opacity: 0; width: 0; }
  100% { opacity: 1; width: 100px; }
}

@keyframes featured-loop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(25deg);
  }
  18.75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(25deg);
  }
  25% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  93.75% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(25deg);
  }
}

@keyframes circle-loop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
  }
  31.25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
  }
  43.75% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 8px;
  }
  93.75% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 8px;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
  }
}

@keyframes inner-circle-loop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  37.5% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  93.75% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-animation-container {
    width: 300px;
    height: 300px;
  }

  .animated-square {
    width: 70px;
    height: 70px;
  }

  .square-1, .square-2, .square-3 {
    width: 45px;
    height: 45px;
  }

  .square-featured {
    width: 60px;
    height: 60px;
  }

  .circle-square {
    width: 70px;
    height: 70px;
  }

  .inner-circle {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .hero-animation-container {
    width: 250px;
    height: 250px;
  }

  .animated-square {
    width: 60px;
    height: 60px;
  }

  .square-1, .square-2, .square-3 {
    width: 35px;
    height: 35px;
  }

  .square-featured {
    width: 50px;
    height: 50px;
  }

  .circle-square {
    width: 60px;
    height: 60px;
  }

  .inner-circle {
    width: 25px;
    height: 25px;
  }
}

/* ========================================
   Signature Animation Styles
   ======================================== */

.signature-animation-wrapper {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 20px;
}

#hero-signature-svg {
  width: 100%;
  max-width: 350px;
  height: auto;
}

/* The signature path */
.hero-signature-path {
  fill: none !important;
  stroke: #8A43FF;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

/* Responsive adjustments for signature */
@media (max-width: 768px) {
  .signature-animation-wrapper {
    max-width: 300px;
  }

  #hero-signature-svg {
    max-width: 280px;
  }

  .hero-signature-path {
    stroke-width: 12;
  }
}

@media (max-width: 480px) {
  .signature-animation-wrapper {
    max-width: 250px;
    padding: 15px;
  }

  #hero-signature-svg {
    max-width: 220px;
  }

  .hero-signature-path {
    stroke-width: 10;
  }
}