@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [Ai top Master](//aitopmaster.ru)
 * @summary Стили для главной страницы портала
 * @created 2025-12
 * @modified 2025-12
 *
 * @file D:/controls-psr/aitopmaster.ru/cdn.aitopmaster.ru/css/index.css
 * @link https://cdn.aitopmaster.ru/css/index.css
 *
 * @remarks
 * - Стили перенесены из main.css для оптимизации
 * =============================================================================
 */

/* НОВЫЕ СТИЛИ ДЛЯ ПРИВЕТСТВЕННОЙ СЕКЦИИ */

.hero-section
{
  position: relative;
  
  padding: 8rem 0;
  overflow: hidden;
  border-bottom: 5px solid var(--primary-dark);
  
  color: rgb(255, 255, 255);

  background-image: linear-gradient(-45deg, rgb(238, 119, 82), rgb(60, 63, 231), rgb(35, 166, 213), rgb(35, 213, 171));
  background-size: 400% 400%;
  
  animation: gradient-animation 15s ease infinite;
}

@keyframes gradient-animation
{
  0%
  {
    background-position: 0 50%;
  }
  50%
  {
    background-position: 100% 50%;
  }
  100%
  {
    background-position: 0 50%;
  }
}

.hero-content
{
  position: relative;
  z-index: 1;
  
  animation: fade-in-up 1s ease-out forwards;
}

.bg-hero-gradient
{
  background-image: radial-gradient(circle at 102% -2%, rgb(248, 227, 245) 7%, transparent 40.8424350929%), radial-gradient(circle at 7% 81%, rgba(176, 209, 248, 0.43) 16%, transparent 53%), radial-gradient(circle at 39% 52%, rgba(206, 247, 239, 0.5) 6%, transparent 68%), radial-gradient(circle at 11% 29%, rgb(255, 255, 255) 8%, transparent 74%), radial-gradient(circle at 90% 50%, rgb(242, 243, 221) 2%, transparent 85%);
}

@keyframes fade-in-up
{
  from
  {
    opacity: 0;
    transform: scale(0.95);
  }
  to
  {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-icon
{
  color: rgb(252, 211, 77);
  text-shadow: 0 0 20px rgba(252, 211, 77, 0.8), 0 0 30px rgba(252, 211, 77, 0.5);
  
  animation: float-glow 4s ease-in-out infinite;
}

@keyframes float-glow
{
  0%, 100%
  {
    opacity: 1;
    transform: scale(1);
  }
  50%
  {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

.hero-title,
.hero-subtitle
{
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-delay: 0.2s;
}

@keyframes text-focus-in
{
  0%
  {
    filter: blur(12px);
    opacity: 0;
  }
  100%
  {
    filter: blur(0px);
    opacity: 1;
  }
}

.hero-buttons .btn
{
  animation: fade-in-up 0.8s ease-out backwards;
}

.hero-buttons .btn:nth-child(1)
{
  animation-delay: 0.4s;
}

.hero-buttons .btn:nth-child(2)
{
  animation-delay: 0.6s;
}

/* Фоновые анимированные фигуры */
.hero-section::before
{
  content: '';
  
  position: absolute;
  top: -50px;
  left: -50px;
  z-index: 0;
  
  width: 200px;
  height: 200px;
  
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  
  animation: float-shape 15s infinite linear;
}

.hero-section::after
{
  content: '';
  
  position: absolute;
  right: -50px;
  bottom: -50px;
  z-index: 0;
  
  width: 300px;
  height: 300px;
  
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  
  animation: float-shape 20s infinite linear reverse;
}

@keyframes float-shape
{
  0%
  {
    transform: rotate(0deg);
  }
  25%
  {
    transform: rotate(90deg);
  }
  50%
  {
    transform: rotate(180deg);
  }
  75%
  {
    transform: rotate(270deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}