/* -------------------------------------------------------------
   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: #f8fafc; /* М'який майже білий для основних фонів */
}
.bg-gray-900\/95 {
  background-color: rgba(
    248,
    250,
    252,
    0.95
  ); /* М'який майже білий з 95% прозорістю */
}
.bg-gray-900\/40 {
  background-color: rgba(
    248,
    250,
    252,
    0.4
  ); /* М'який майже білий з 40% прозорістю */
}
.bg-gray-800\/50 {
  background-color: rgba(
    226,
    232,
    240,
    0.5
  ); /* Світло-блакитний з 50% прозорістю */
}
.bg-gray-800\/60 {
  background-color: rgba(
    226,
    232,
    240,
    0.6
  ); /* Світло-блакитний з 60% прозорістю */
}
.bg-gray-800\/30 {
  background-color: rgba(
    226,
    232,
    240,
    0.3
  ); /* Світло-блакитний з 30% прозорістю */
}
.bg-purple-900\/20 {
  background-color: rgba(96, 165, 250, 0.2); /* Блакитний з 20% прозорістю */
}
.bg-purple-900\/40 {
  background-color: rgba(96, 165, 250, 0.4); /* Блакитний з 40% прозорістю */
}
.bg-purple-600 {
  background-color: #3b82f6; /* Блакитний для кнопок */
}
.bg-purple-700 {
  background-color: #2563eb; /* Темніший блакитний для hover */
}
.text-purple-400 {
  color: #2563eb; /* Темніший блакитний для тексту */
}
.text-gray-300 {
  color: #475569; /* Темно-сірий для контрасту на майже білому */
}
.text-gray-400 {
  color: #64748b; /* Трохи світліший сірий для другорядного тексту */
}
.border-gray-800 {
  border-color: #e2e8f0; /* Світло-блакитний для меж */
}
.border-gray-700 {
  border-color: #cbd5e1; /* Трохи темніший блакитний для меж */
}

/* -------------------------------------------------------------
   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(59, 130, 246, 0.1); /* Блакитна тінь */
}
.shadow-purple-500\/30 {
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3); /* Блакитна тінь */
}
.ring-purple-500 {
  box-shadow: 0 0 0 2px #3b82f6; /* Блакитне кільце */
}

/* -------------------------------------------------------------
   Button & logo utilities
------------------------------------------------------------- */
.logo-text {
  font-size: 1.25rem;
  font-weight: bold;
  color: #475569; /* Темно-сірий для тексту логотипу на майже білому */
}
.logo-highlight {
  color: #2563eb; /* Темніший блакитний для акцентів логотипу */
}

/* -------------------------------------------------------------
   Gradient helpers
------------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(
    to right,
    #2563eb,
    #bfdbfe,
    #3b82f6
  ); /* Темний блакитний, світлий блакитний, блакитний */
}

.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,
    #2563eb,
    #3b82f6
  ); /* Темний блакитний, світлий блакитний, блакитний */
}
.from-purple-900 {
  --tw-gradient-from: #3b82f6; /* Блакитний */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(59, 130, 246, 0));
}
.to-black {
  --tw-gradient-to: #000;
}
.via-gray-900\/70 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(226, 232, 240, 0.7),
    var(--tw-gradient-to, rgba(226, 232, 240, 0)); /* Світло-блакитний */
}
.to-gray-900\/30 {
  --tw-gradient-to: rgba(226, 232, 240, 0.3); /* Світло-блакитний */
}
.from-purple-600 {
  --tw-gradient-from: #3b82f6; /* Блакитний */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(59, 130, 246, 0));
}
.to-purple-800 {
  --tw-gradient-to: #bfdbfe; /* Світлий блакитний */
}
.from-purple-900\/40 {
  --tw-gradient-from: rgba(59, 130, 246, 0.4); /* Блакитний з прозорістю */
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, transparent);
}
.via-gray-900\/40 {
  --tw-gradient-to: rgba(
    226,
    232,
    240,
    0.4
  ); /* Світло-блакитний з прозорістю */
  --tw-gradient-stops: var(--tw-gradient-from), rgba(226, 232, 240, 0.4),
    var(--tw-gradient-to);
}
.to-purple-900\/40 {
  --tw-gradient-to: rgba(59, 130, 246, 0.4); /* Блакитний з прозорістю */
}
.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;
}