/* -------------------------------------------------------------
   Global behaviour
------------------------------------------------------------- */
html,
body {
  scroll-behavior: smooth;
  font-family: "Montserrat", sans-serif;
}

/* -------------------------------------------------------------
   Key-frame animations
------------------------------------------------------------- */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes pulse-slow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(-50%);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateX(-50%);
  }
}

/* -------------------------------------------------------------
   Animation utilities
------------------------------------------------------------- */
.animate-float {
  animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-wiggle {
  animation: wiggle 1s infinite;
}
.animate-ping {
  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

/* -------------------------------------------------------------
   Tailwind v3 compatibility layer for v2.2.19
------------------------------------------------------------- */
.bg-gray-900 {
  background-color: #fffff0; /* Ivory for main backgrounds */
}
.bg-gray-900\/95 {
  background-color: rgba(255, 255, 240, 0.95); /* Ivory with 95% opacity */
}
.bg-gray-900\/40 {
  background-color: rgba(255, 255, 240, 0.4); /* Ivory with 40% opacity */
}
.bg-gray-800\/50 {
  background-color: rgba(229, 231, 235, 0.5); /* Light gray with 50% opacity */
}
.bg-gray-800\/60 {
  background-color: rgba(229, 231, 235, 0.6); /* Light gray with 60% opacity */
}
.bg-gray-800\/30 {
  background-color: rgba(229, 231, 235, 0.3); /* Light gray with 30% opacity */
}
.bg-purple-900\/20 {
  background-color: rgba(139, 92, 246, 0.2); /* Purple with 20% opacity */
}
.bg-purple-900\/40 {
  background-color: rgba(139, 92, 246, 0.4); /* Purple with 40% opacity */
}
.bg-purple-600 {
  background-color: #8b5cf6; /* Purple for buttons */
}
.bg-purple-700 {
  background-color: #6d28d9; /* Darker purple for hover */
}
.text-purple-400 {
  color: #6d28d9; /* Darker purple for text readability */
}
.text-gray-300 {
  color: #4b5563; /* Dark gray for contrast on ivory */
}
.text-gray-400 {
  color: #6b7280; /* Slightly lighter gray for secondary text */
}
.border-gray-800 {
  border-color: #e5e7eb; /* Light gray for borders */
}
.border-gray-700 {
  border-color: #d1d5db; /* Slightly darker gray for borders */
}

/* -------------------------------------------------------------
   Font family helpers
------------------------------------------------------------- */
.font-montserrat {
  font-family: "Montserrat", sans-serif;
}

/* -------------------------------------------------------------
   Utility classes
------------------------------------------------------------- */
.blinking-item {
  animation: blink 1.5s infinite;
}
.hover\:brightness-125:hover {
  filter: brightness(1.25);
}
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.shadow-purple-500\/10 {
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.1); /* Purple shadow */
}
.shadow-purple-500\/30 {
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3); /* Purple shadow */
}
.ring-purple-500 {
  box-shadow: 0 0 0 2px #8b5cf6; /* Purple ring */
}

/* -------------------------------------------------------------
   Button & logo utilities
------------------------------------------------------------- */
.logo-text {
  font-size: 1.25rem;
  font-weight: bold;
  color: #4b5563; /* Dark gray for logo text on ivory */
}
.logo-highlight {
  color: #6d28d9; /* Darker purple for logo highlight */
}

/* -------------------------------------------------------------
   Gradient helpers
------------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(
    to right,
    #6d28d9,
    #d8b4fe,
    #8b5cf6
  ); /* Dark purple, light lilac, purple */
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-rr {
  background-image: linear-gradient(
    to right,
    #6d28d9,
    #440588,
    #8b5cf6
  ); /* Dark purple, light lilac, purple */
}
.from-purple-900 {
  --tw-gradient-from: #8b5cf6; /* Purple */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(139, 92, 246, 0));
}
.to-black {
  --tw-gradient-to: #000;
}
.via-gray-900\/70 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(229, 231, 235, 0.7),
    var(--tw-gradient-to, rgba(229, 231, 235, 0)); /* Light gray */
}
.to-gray-900\/30 {
  --tw-gradient-to: rgba(229, 231, 235, 0.3); /* Light gray */
}
.from-purple-600 {
  --tw-gradient-from: #8b5cf6; /* Purple */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(139, 92, 246, 0));
}
.to-purple-800 {
  --tw-gradient-to: #d8b4fe; /* Light lilac */
}
.from-purple-900\/40 {
  --tw-gradient-from: rgba(139, 92, 246, 0.4); /* Purple with opacity */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, transparent);
}
.via-gray-900\/40 {
  --tw-gradient-to: rgba(229, 231, 235, 0.4); /* Light gray with opacity */
  --tw-gradient-stops: var(--tw-gradient-from), rgba(229, 231, 235, 0.4),
    var(--tw-gradient-to);
}
.to-purple-900\/40 {
  --tw-gradient-to: rgba(139, 92, 246, 0.4); /* Purple with opacity */
}
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}
.text-transparent {
  color: transparent;
}
/* -------------------------------------------------------------
   Hero background image class (optional, in case image fails)
------------------------------------------------------------- */
.hero-bg {
  background-image: url("media/bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 13.2;
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* Modal fade helpers */
.animate-fadeOut {
  animation: fadeOut 0.3s ease-in-out forwards;
}
iframe {
  border: none;
  width: 100%;
  height: 80vh;
}