/* Custom font-face rule for Mersad - YOU NEED TO HOST THE FONT FILE */
@font-face {
  font-family: 'Mersad';
  src: url('/fonts/Mersad-Regular.ttf') format('truetype'); /* <<< IMPORTANT: Update this path if you use this font */
  font-weight: normal;
  font-style: normal;
}

/* Define more varied float animations using vw/vh for larger movement and scale for hover effect */
@keyframes float1 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(5vw, 8vh) rotate(10deg) scale(1.05); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-5vw, -8vh) rotate(-10deg) scale(0.95); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float2 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-7vw, -5vh) rotate(-7deg) scale(1.03); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(7vw, 5vh) rotate(7deg) scale(0.97); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float3 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(6vw, -9vh) rotate(12deg) scale(1.06); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-6vw, 9vh) rotate(-12deg) scale(0.94); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float4 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-4vw, 10vh) rotate(-9deg) scale(1.04); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(4vw, -10vh) rotate(9deg) scale(0.96); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float5 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(8vw, -6vh) rotate(8deg) scale(1.07); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-8vw, 6vh) rotate(-8deg) scale(0.93); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float6 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-5vw, 7vh) rotate(-5deg) scale(1.02); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(5vw, -7vh) rotate(5deg) scale(0.98); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float7 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(7vw, -4vh) rotate(11deg) scale(1.05); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-7vw, 4vh) rotate(-11deg) scale(0.95); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float8 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-6vw, -8vh) rotate(6deg) scale(1.03); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(6vw, 8vh) rotate(-6deg) scale(0.97); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float9 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(4vw, 6vh) rotate(-6deg) scale(1.06); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-4vw, -6vh) rotate(6deg) scale(0.94); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float10 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-8vw, 3vh) rotate(9deg) scale(1.04); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(8vw, -3vh) rotate(-9deg) scale(0.96); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float11 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(3vw, -10vh) rotate(-8deg) scale(1.07); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-3vw, 10vh) rotate(8deg) scale(0.93); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float12 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(9vw, 7vh) rotate(4deg) scale(1.02); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-9vw, -7vh) rotate(-4deg) scale(0.98); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float13 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-3vw, -6vh) rotate(-10deg) scale(1.05); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(3vw, 6vh) rotate(10deg) scale(0.95); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float14 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(6vw, 9vh) rotate(7deg) scale(1.03); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-6vw, -9vh) rotate(-7deg) scale(0.97); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float15 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-9vw, -3vh) rotate(-6deg) scale(1.06); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(9vw, 3vh) rotate(6deg) scale(0.94); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float16 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(5vw, 5vh) rotate(3deg) scale(1.04); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-5vw, -5vh) rotate(-3deg) scale(0.96); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float17 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-7vw, -7vh) rotate(-4deg) scale(1.07); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(7vw, 7vh) rotate(4deg) scale(0.93); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float18 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(8vw, -2vh) rotate(10deg) scale(1.02); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-8vw, 2vh) rotate(-10deg) scale(0.98); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
        }
@keyframes float19 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-6vw, 8vh) rotate(-7deg) scale(1.05); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(6vw, -8vh) rotate(7deg) scale(0.95); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float20 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(4vw, -4vh) rotate(9deg) scale(1.03); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-4vw, 4vh) rotate(-9deg) scale(0.97); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float31 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(10vw, 15vh) rotate(15deg) scale(1.08); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-10vw, -15vh) rotate(-15deg) scale(0.92); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float35 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-12vw, -8vh) rotate(-10deg) scale(1.06); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(12vw, 8vh) rotate(10deg) scale(0.94); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float39 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(15vw, -5vh) rotate(13deg) scale(1.09); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-15vw, 5vh) rotate(-13deg) scale(0.91); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float43 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(-9vw, 12vh) rotate(-11deg) scale(1.07); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(9vw, -12vh) rotate(11deg) scale(0.93); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}
@keyframes float47 {
  0% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  25% { transform: translate(11vw, -10vh) rotate(10deg) scale(1.08); }
  50% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
  75% { transform: translate(-11vw, 10vh) rotate(-10deg) scale(0.92); }
  100% { transform: translate(0vw, 0vh) rotate(0deg) scale(1); }
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); } /* Softer pulse */
  100% { transform: scale(1); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes backgroundGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-200deg) scale(0.5); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
/* Adjusted shimmer-text to be visible on transparent background */
@keyframes shimmer-text {
  0% {
    background-position: 0% 50%;
    background: linear-gradient(90deg, #333, #888, #333); /* Darker base for shimmer */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes icon-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes traitCardEnter {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes buttonHoverPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes cardFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); } /* Increased movement */
  100% { transform: translateY(0px); }
}


/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}