/* === Цветовые переменные для совместимости с Tailwind config === */
:root {
  --color-background: #F8F8F8;          /* background */
  --color-primary-blue: #0050AA;        /* primaryBlue */
  --color-primary-orange: #E65028;      /* primaryOrange */
  --color-primary-lightblue: #DEF0FA;   /* primaryLightBlue */
  --color-text-base: #030712;           /* textBase */
  --color-accent: #5AB4E6;              /* accent */
}

/* === Базовые стили === */
body {
  background-color: var(--color-background);
  color: var(--color-text-base);
  font-family: 'Montserrat', sans-serif;
}


html, body {
scrollbar-gutter: stable;
}

.bg-video-gradient {
  background: radial-gradient(circle, #5AB4E6 33.8%, #60C6FF 34.3%, #5AB4E6 52.6%);
  background-size: 400% 400%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.25;
  transition: background-size 0.3s ease;
  
}

.bg-video-gradient:hover {
  background: radial-gradient(circle, #5AB4E6 26%, #60C6FF 26.2%, #5AB4E6 52.6%);
  background-size: 200% 200%;
  opacity: 0.5;
  background-position: center;
}



.bg-accent-gradient {
  background: radial-gradient(circle, #5AB4E6 33.8%, #60C6FF 34.3%, #5AB4E6 52.6%);
  background-size: 300% 300%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.bg-accent-gradient:hover {
  background: radial-gradient(circle, #5AB4E6 26%, #60C6FF 26.2%, #5AB4E6 52.6%);
  background-size: 150% 150%;
  background-position: center;
}

.bg-orange-gradient {
  background: radial-gradient(circle, #E65028 33.8%, #FF7B4D 34.3%, #E65028 52.6%);
  background-size: 300% 300%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.bg-orange-gradient:hover {
  background: radial-gradient(circle, #E65028 26%, #FF7B4D 26.2%, #E65028 52.6%);
  background-size: 150% 150%;
  background-position: center;
}

.bg-accent-glow {
  background: radial-gradient(circle at 70% 70%, var(--color-accent) 0%, rgba(90, 180, 230, 0) 50%);
}

.bg-white-glow {
  background: radial-gradient(circle at 60% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
}

.bg-lightblue-glow {
  background: radial-gradient(circle at 70% 70%, var(--color-primary-lightblue) 0%, rgba(90, 180, 230, 0) 50%);
}

.bg-orange-hover-gradient {
  background: transparent;
  background-size: 300% 300%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background 0.3s ease, background-size 0.3s ease;
}

.bg-orange-hover-gradient:hover {
  background: radial-gradient(circle, #E65028 26%, #FF7B4D 26.2%, #E65028 52.6%);
  background-size: 200% 200%;
  background-position: center;
  border: none;
}

.bg-cta-fade-right {
  background: linear-gradient(to left,
    rgba(0, 80, 170, 1) 0%,
    rgba(0, 80, 170, 0.6) 20%,
    rgba(0, 80, 170, 0) 60%);
}

.bg-card-hover-gradient {
  background: transparent;
  background-size: 300% 300%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background 0.4s ease, background-size 0.4s ease;
}

.bg-card-hover-gradient:hover {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1) 25%,
    rgba(90, 180, 230, 0.3) 50%,
    rgba(90, 180, 230, 0) 85%
  );
  background-size: 180% 180%;
  background-position: center;
}


.bg-booklet-hover-gradient {
  background: #DEF0FA; /* primaryLightBlue */
  background-size: 300% 300%;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background 0.4s ease, background-size 0.4s ease;
}

.bg-booklet-hover-gradient:hover {
  background: radial-gradient(
    circle at left bottom,
    rgba(90, 180, 230, 0.6) 10%,   /* accent — яркий центр */
    rgba(90, 180, 230, 0.3) 25%,   /* мягкое свечение */
    rgba(90, 180, 230, 0) 60%      /* плавное затухание */
  ), #DEF0FA;
  background-size: 250% 250%;
  background-position: left bottom;
}

@keyframes bubble-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-bubble {
  opacity: 0;
  animation: bubble-in 0.6s ease forwards;
}

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .shimmer-glow {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 60%
    );
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
  }
  
/* .no-scrollbar::-webkit-scrollbar {
display: none;
-ms-overflow-style: none;
scrollbar-width: none;
} */