/* Container for the animated Markoon */
.markoon-container {
  position: absolute;
  /* bottom: 21px; */ /* Sits exactly on top of the 21px footer stripes */
  left: 0;
  width: 100%;
  height: 0; /* No height to avoid affecting layout */
  pointer-events: none; /* Doesn't interfere with clicks */
  overflow: visible;
  z-index: 10; /* Above footer content, below main nav */
}

/* The animated image itself */
.markoon-runner {
  position: absolute;
  bottom: 0;
  width: clamp(120px, 25vw, 150px); /* Responsive sizing */
  height: auto;
  will-change: transform;
  animation: markoon-journey 4s linear 1;
  border: none;
  margin-bottom: 21px;
  opacity: 0;
}

/* Journey animation: right to left, flip, left to right */
@keyframes markoon-journey {
  0% {
    left: 100%;
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
  
  45.9% {
    opacity: 1; /* Still visible */
  }
  
  46% {  
    left: -30vw;
    transform: translateX(0) scaleX(1);
    opacity: 0; /* Instant invisible */
  }
  
  46.1% {
    left: -30vw;
    transform: translateX(0) scaleX(-1);
    opacity: 0; /* Stay invisible during flip */
  }
  
  69% {  
    left: -30vw;
    transform: translateX(0) scaleX(-1);
    opacity: 0; /* Still invisible */
  }
  
  69.1% {
    opacity: 1; /* Instant visible for return trip */
  }
  
  85% {  
    left: 50%;
    transform: translateX(-50%) scaleX(-1);
    opacity: 1;
  }
  
  100% {  
    left: 100%;
    transform: translateX(0) scaleX(-1);
    opacity: 1;
  }
}

/* Button spin animation - triggered by Markoon's hand */
.main-nav-btn.spin-on-bump {
  animation: button-spin-mobile 4.267s ease-in-out 1;
  transform-origin: center center;
}

/* Mobile: flat spin (rotateZ) */
@keyframes button-spin-mobile {
  0%, 81% {
    transform: rotate(0deg);
  }
  
  83% {
    transform: rotate(0deg); /* Moment of contact */
  }
  
  90% {
    transform: rotate(1800deg); /* 3 full spins (360deg × 5) */
  }
  
  100% {
    transform: rotate(1080deg); /* Hold */
  }
}

@media screen and (min-width: 576px) {
  .markoon-runner {
    margin-bottom: 44px;
  }
}

@media screen and (min-width: 768px) {
    .markoon-runner {
    animation: markoon-journey 4.25s linear 1;
    }
  
    /* Journey animation: right to left, flip, left to right*/ 
    @keyframes markoon-journey {
      0% {
        left: 100%;
        transform: translateX(0) scaleX(1);
        opacity: 1;
      }
      
      46% {  
        left: -30vw; /* Fully off-screen left*/ 
        transform: translateX(0) scaleX(1);
      }
      
      46.1% {
        left: -30vw;
        transform: translateX(0) scaleX(-1); /* Flip instantly*/ 
      }
      
      69% {  
        left: -30vw; /* Stay paused*/ 
        transform: translateX(0) scaleX(-1);
      }
      
      85% {  
        left: 50%;
        transform: translateX(-50%) scaleX(-1);
      }
      
      100% {  
        left: 100%;
        transform: translateX(0) scaleX(-1);
        opacity: 1;
      }
    }
    
    /* Button spin animation - triggered by Markoon's hand*/ 
    .main-nav-btn.spin-on-bump {
      animation: button-spin-mobile 4.53s ease-in-out 1;
    }
    
    /* Mobile: flat spin (rotateZ)*/ 
    @keyframes button-spin-mobile {
      0%, 81% {
        transform: rotate(0deg);
      }
      
      83% {
        transform: rotate(0deg); /* Moment of contact*/ 
      }
      
      90% {
        transform: rotate(1800deg); /* 5 full spins (360deg × 5)*/ 
      }
      
      100% {
        transform: rotate(1080deg); /* Hold*/ 
      }
    }
}

@media screen and (min-width: 992px) {

    .markoon-runner {
    animation: markoon-journey 4.5s linear 1;
    }
    /* Journey animation: right to left, flip, left to right */
    @keyframes markoon-journey {
      0% {
        left: 100%;
        transform: translateX(0) scaleX(1);
        opacity: 1;
      }
      
      46% {  
        left: -30vw; /* Fully off-screen left */
        transform: translateX(0) scaleX(1);
      }
      
      46.1% {
        left: -30vw;
        transform: translateX(0) scaleX(-1); /* Flip instantly */
      }
      
      69% {  
        left: -30vw; /* Stay paused */
        transform: translateX(0) scaleX(-1);
      }
      
      85% {  
        left: 50%;
        transform: translateX(-50%) scaleX(-1);
      }
      
      100% {  
        left: 100%;
        transform: translateX(0) scaleX(-1);
        opacity: 1;
      }
    }
    
    /* Button spin animation - triggered by Markoon's hand */
    .main-nav-btn.spin-on-bump {
      animation: button-spin-mobile 4.793s ease-in-out 1;
    }
    
    /* Mobile: flat spin (rotateZ) */
    @keyframes button-spin-mobile {
      0%, 81% {
        transform: rotate(0deg);
      }
      
      83% {
        transform: rotate(0deg); /* Moment of contact */
      }
      
      90% {
        transform: rotate(1800deg); /* 3 full spins (360deg × 5) */
      }
      
      100% {
        transform: rotate(1080deg); /* Hold */
      }
    }
}

@media screen and (min-width: 1200px) {

    .markoon-runner {
    animation: markoon-journey 5s linear 1;
    }
    /* Journey animation: right to left, flip, left to right */
    @keyframes markoon-journey {
      0% {
        left: 100%;
        transform: translateX(0) scaleX(1);
        opacity: 1;
      }
      
      46% {  
        left: -30vw; /* Fully off-screen left */
        transform: translateX(0) scaleX(1);
      }
      
      46.1% {
        left: -30vw;
        transform: translateX(0) scaleX(-1); /* Flip instantly */
      }
      
      69% {  
        left: -30vw; /* Stay paused */
        transform: translateX(0) scaleX(-1);
      }
      
      85% {  
        left: 50%;
        transform: translateX(-50%) scaleX(-1);
      }
      
      100% {  
        left: 100%;
        transform: translateX(0) scaleX(-1);
        opacity: 1;
      }
    }
    
    /* Button spin animation - triggered by Markoon's hand */
    .main-nav-btn.spin-on-bump {
      animation: button-spin-mobile 5.53s ease-in-out 1;
    }
    
    /* Mobile: flat spin (rotateZ) */
    @keyframes button-spin-mobile {
      0%, 81% {
        transform: rotate(0deg);
      }
      
      83% {
        transform: rotate(0deg); /* Moment of contact */
      }
      
      90% {
        transform: rotate(1800deg); /* 3 full spins (360deg × 5) */
      }
      
      100% {
        transform: rotate(1080deg); /* Hold */
      }
    }
}