/* Fullscreen Hero Section */
.fullscreen-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Фоновое изображение hero-1.jpg */
  background-image: url('/images/hero-1.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  transition: background-position 0.1s ease-out;
}

/* Palm logo background in hero section - скрыт, так как используется фоновое изображение */
.fullscreen-hero-palm-logo {
  position: absolute;
  top: 50%;
  left: -10%;
  width: auto;
  height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center left;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: rainbow-palm-hero 30s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 200, 0, 0.2)) drop-shadow(0 0 40px rgba(255, 150, 0, 0.15)) drop-shadow(0 0 60px rgba(255, 100, 0, 0.1));
  transform: translateY(-50%);
  transform-origin: center left;
  display: none; /* Скрываем, так как теперь используется фоновое изображение */
}

@keyframes rainbow-palm-hero {
  0% {
    filter: sepia(0.8) hue-rotate(0deg) saturate(1.3) brightness(0.8) drop-shadow(0 0 20px rgba(255, 200, 0, 0.2)) drop-shadow(0 0 40px rgba(255, 150, 0, 0.15)) drop-shadow(0 0 60px rgba(255, 100, 0, 0.1));
  }
  20% {
    filter: sepia(0.2) hue-rotate(0deg) saturate(0.9) brightness(0.85) drop-shadow(0 0 20px rgba(255, 180, 50, 0.2)) drop-shadow(0 0 40px rgba(255, 130, 30, 0.15)) drop-shadow(0 0 60px rgba(255, 80, 20, 0.1));
  }
  50% {
    filter: sepia(0.9) hue-rotate(220deg) saturate(1.4) brightness(0.7) drop-shadow(0 0 20px rgba(200, 150, 255, 0.2)) drop-shadow(0 0 40px rgba(150, 100, 255, 0.15)) drop-shadow(0 0 60px rgba(100, 50, 255, 0.1));
  }
  75% {
    filter: sepia(0.2) hue-rotate(0deg) saturate(0.9) brightness(0.85) drop-shadow(0 0 20px rgba(255, 180, 50, 0.2)) drop-shadow(0 0 40px rgba(255, 130, 30, 0.15)) drop-shadow(0 0 60px rgba(255, 80, 20, 0.1));
  }
  100% {
    filter: sepia(0.8) hue-rotate(0deg) saturate(1.3) brightness(0.8) drop-shadow(0 0 20px rgba(255, 200, 0, 0.2)) drop-shadow(0 0 40px rgba(255, 150, 0, 0.15)) drop-shadow(0 0 60px rgba(255, 100, 0, 0.1));
  }
}

.fullscreen-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  animation: fadeInUp 1s ease-out;
}

.fullscreen-hero-title {
  font-family: 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 400;
  color: #ffffff;
  text-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 8px 40px rgba(0, 0, 0, 0.2);
  letter-spacing: -2px;
  margin: 0;
  line-height: 1.1;
  animation: fadeInUp 1.2s ease-out 0.2s both;
}

/* Для русской версии используем TitleFont вместо Berry */
html[lang="ru"] .fullscreen-hero-title,
html[lang="ru-RU"] .fullscreen-hero-title {
  font-family: 'TitleFont', 'Berry', 'Panda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overlay для лучшей читаемости текста поверх фонового изображения */
.fullscreen-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 145, 178, 0.6) 0%,
    rgba(20, 184, 166, 0.5) 50%,
    rgba(6, 42, 51, 0.7) 100%
  );
  z-index: 1;
}

/* Animated gradient layer on scroll */
.fullscreen-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(20, 184, 166, 0.4) 0%,
    rgba(8, 145, 178, 0.2) 40%,
    transparent 70%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fullscreen-hero.scrolled::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .fullscreen-hero {
    height: 100vh;
    min-height: 100vh;
    /* На мобильных используем fixed attachment для работы offset как на десктопе */
    background-attachment: fixed;
    background-position: center center;
  }

  .fullscreen-hero-title {
    font-size: clamp(36px, 10vw, 80px);
    padding: 0 20px;
  }

  .fullscreen-hero-palm-logo {
    opacity: 0.5;
  }
  
  /* На мобильных увеличиваем overlay для лучшей читаемости */
  .fullscreen-hero::before {
    background: linear-gradient(
      135deg,
      rgba(8, 145, 178, 0.7) 0%,
      rgba(20, 184, 166, 0.6) 50%,
      rgba(6, 42, 51, 0.8) 100%
    );
  }
}