/* Custom animations and utilities beyond Tailwind */

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}


.marquee-wrapper {
  display: flex;
  width: max-content;
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Smooth scrolling behavior for the whole page */
html {
  scroll-behavior: smooth;
}

/* Custom selection color fallback */
::selection {
    background-color: #D43B30;
    color: #ffffff;
}

/* Base image styling */
img {
    -webkit-user-drag: none;
}


@keyframes swing {
  0% { transform: rotate(-4deg); }
  100% { transform: rotate(4deg); }
}
.animate-swing {
  animation-name: swing;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Realistic Rope and Peg */
.realistic-rope {
  height: 4px;
  background-image: repeating-linear-gradient(
    -45deg,
    #e8dcc4,
    #e8dcc4 3px,
    #c4a885 3px,
    #c4a885 6px
  );
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

.realistic-peg {
  background: linear-gradient(to right, #d0ab7a, #e6c89c, #d0ab7a);
  box-shadow: 
    -2px 2px 4px rgba(0,0,0,0.3),
    inset 1px 0 2px rgba(255,255,255,0.4),
    inset -1px 0 2px rgba(0,0,0,0.2);
  border: 1px solid #a88556;
}

.realistic-peg::after {
  content: '';
  position: absolute;
  top: 40%;
  left: -1px;
  right: -1px;
  height: 4px;
  background: linear-gradient(to bottom, #777, #ccc, #555);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}