@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400..900&display=swap');

@font-face {
  font-family: 'LemonMilk';
  src: url('../fonts/LEMONMILK-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Steelfish';
  src: url('../fonts/Steelfish Rg.otf') format('opentype');
}

@font-face {
  font-family: 'Ubin Sans';
  src: url('../fonts/Ubin Sans.ttf') format('truetype'), url('../fonts/Ubin Sans.otf') format('opentype');
}

@keyframes slideDownHero {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeInUpText {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatBarrel {
  0%, 100% { transform: rotate(10deg) translateY(0); }
  50% { transform: rotate(12deg) translateY(-15px); }
}

@keyframes swayTopLeft {
  0%, 100% { transform: rotate(35deg) translateX(0); }
  50% { transform: rotate(35deg) translateX(10px); }
}

@keyframes swayTopRight {
  0%, 100% { transform: scaleX(-1) rotate(35deg) translateX(0); }
  50% { transform: scaleX(-1) rotate(35deg) translateX(10px); }
}

@keyframes swayNormal {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

@keyframes swayMirror {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50% { transform: scaleX(-1) translateX(10px); }
}

/* Анимация для золотого перелива текста */
@keyframes goldTextShimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* Анимация для зеленого перелива иконок */
@keyframes greenTextShimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* Анимация пульсации для логотипа (имитация блеска) */
@keyframes goldPulse {
  0% {
    filter: drop-shadow(0 0 0px rgba(212, 175, 55, 0));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 223, 0, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 0px rgba(212, 175, 55, 0));
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Включаем плавную прокрутку для всего сайта */
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #FFFFFF;
  color: #333;
  min-height: 100vh;
  position: relative;
}

/* --- Декоративные элементы (Колоски и Бочки) --- */

/* 1. ВЕРХ - Колоски (4.png) */
.decor-top-left {
  position: fixed;
  top: 0;
  left: -70px; /* Возвращаем немного ближе */
  width: 260px;
  height: 28vh; /* Уменьшаем еще немного */
  background-image: url('../img/4.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  opacity: 0.8;
  pointer-events: none;
  transition: transform 0.8s ease-out;
  transform: rotate(35deg); /* Наклон к центру */
  animation: swayTopLeft 6s ease-in-out infinite;
}

.decor-top-right {
  position: fixed;
  top: 0;
  right: -70px;
  width: 260px;
  height: 28vh;
  background-image: url('../img/4.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  transform: scaleX(-1) rotate(35deg); /* Зеркальное отражение и наклон к центру */
  z-index: 0;
  opacity: 0.8;
  pointer-events: none;
  transition: transform 0.8s ease-out;
}

/* 2. СЕРЕДИНА - Бочки (5.png) */
.decor-middle-left {
  position: fixed;
  top: 25vh; /* Опускаем немного ниже */
  left: -100px; /* Сдвигаем из центра */
  width: 280px;
  height: 40vh; /* Увеличиваем в высоту */
  background-image: url('../img/5.jpg');
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  transform: none; /* Ставим ровно */
  z-index: 0;
  opacity: 0.8;
  pointer-events: none;
  transition: transform 0.8s ease-out;
  animation: swayNormal 6s ease-in-out infinite;
}

.decor-middle-right {
  position: fixed;
  top: 25vh;
  right: -100px; /* Сдвигаем из центра */
  width: 280px;
  height: 40vh; /* Увеличиваем в высоту */
  background-image: url('../img/5.jpg');
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  transform: scaleX(-1); /* Ставим ровно (только зеркало) */
  z-index: 0;
  opacity: 0.8;
  pointer-events: none;
  transition: transform 0.8s ease-out;
  animation: swayMirror 6s ease-in-out infinite;
}

/* 3. НИЗ - Чан (6.png) */
.decor-bottom-left {
  position: fixed;
  bottom: -10vh; /* Опускаем ниже, чтобы не наезжала на верхнюю */
  left: -80px;   /* Сдвигаем от центра */
  width: 280px;  /* Как у картинки 5 */
  height: 40vh;  /* Как у картинки 5 */
  background-image: url('../img/6.png');
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0; /* Убираем под контент */
  opacity: 1;
  pointer-events: none; /* Отключаем взаимодействие */
  transition: bottom 0.4s ease-out, transform 0.4s ease-out;
  transform: none; /* Убираем наклон */
  animation: swayNormal 6s ease-in-out infinite;
}

/* Когда шапка видна, верхние и средние картинки уходят */
body.header-visible .decor-top-left {
  transform: translateX(-500px) rotate(35deg);
  animation: none;
}

body.header-visible .decor-top-right {
  transform: scaleX(-1) translateX(-500px) rotate(35deg);
  animation: none;
}

body.header-visible .decor-middle-left {
  transform: translateX(-500px);
  animation: none;
}

body.header-visible .decor-middle-right {
  transform: scaleX(-1) translateX(-500px);
  animation: none;
}

/* Скрываем нижнюю картинку, если видна шапка */
body.header-visible .decor-bottom-left {
  transform: translateX(-500px);
  animation: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubin Sans', sans-serif;
  /* Золотой градиентный текст с переливом */
  background: linear-gradient(110deg, #8a6e2f 10%, #e6c86e 30%, #fffae6 45%, #e6c86e 60%, #8a6e2f 90%);
  background-size: 200% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: goldTextShimmer 4s linear infinite;
  font-weight: normal;
}

.hero {
  position: relative;
  height: 100vh;
  /* Обратите внимание: изображение подгружается по ссылке. 
     Если захотите локальное фото, положите его в static/img и поменяйте путь здесь */
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.75)),
              url('https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&q=85') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  animation: slideDownHero 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.navbar {
  padding: 25px 5% 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  position: relative; /* Важно для наложения маски */
  display: inline-block;
}

.logo img {
  height: 80px; /* Увеличили до 80px */
  width: auto;
  display: block; /* Убираем лишние отступы */
  opacity: 0; /* Скрываем саму картинку, но оставляем её размеры */
}

/* Создаем золотой слой по форме логотипа */
.logo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  /* Маска вырезает градиент по форме вашего логотипа */
  -webkit-mask-image: url('../img/logo.png');
  mask-image: url('../img/logo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  /* Золотой градиент и анимация всегда */
  background: linear-gradient(110deg, #8a6e2f 10%, #e6c86e 30%, #fffae6 45%, #e6c86e 60%, #8a6e2f 90%);
  background-size: 200% 100%;
  animation: goldTextShimmer 3s linear infinite;
}

.nav-links {
  display: flex;
  gap: 45px;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  background-color: #2A4233;
  padding: 10px 25px;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
}

.nav-links a:hover {
  background-color: #365441;
}

/* Применяем золотой эффект ТОЛЬКО к тексту внутри кнопок шапки */
.nav-links a:hover span {
  background-image: linear-gradient(110deg, #8a6e2f 0%, #e6c86e 40%, #fffae6 50%, #e6c86e 60%, #8a6e2f 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldTextShimmer 2s linear infinite;
}

.main-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
  max-width: 1100px;
}

.main-title h1 {
  font-family: 'Steelfish', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: normal;
  letter-spacing: 0.15em;
  line-height: 1.4;
  color: white;
  text-shadow: 0 4px 20px rgba(0,0,0,0.9);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInUpText 1s ease-out 0.8s forwards;
}

.main-title h2 {
  font-family: 'Steelfish', sans-serif;
  font-weight: 400;
  font-size: clamp(0.8rem, 1.5vw, 1.2rem);
  letter-spacing: 0.25em;
  color: white;
  margin-top: 20px;
  opacity: 0;
  animation: fadeInUpText 1s ease-out 1.2s forwards;
}

.footer-note {
  padding: 20px 5% 35px;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  background: rgba(0,0,0,0.4);
}

/* Контейнер контента должен быть выше декораций */
.content-container {
  position: relative;
  z-index: 1;
}

/* --- Новые стили для блоков с рамкой и фото --- */
.split-container {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.text-block-framed {
  border: 3px solid rgba(42, 66, 51, 0.1); /* Еле заметная рамка */
  border-radius: 30px;       /* Закругленные углы */
  padding: 25px;
  background-color: #F5F5F3; /* Цвет айвори для блоков */
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.text-block-framed:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(42, 66, 51, 0.15);
  border-color: #2A4233;
}

.photo-block {
  width: 100%; /* На всю ширину колонки */
  border-radius: 30px;       /* Закругленные углы для фото */
  overflow: hidden;
  height: 350px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.photo-block:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.photo-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.text-block-framed h3 {
  font-family: 'Ubin Sans', sans-serif;
  font-size: 2.2em;
  font-weight: normal;
  color: #2A4233;
  color: #1A2920;
  margin-bottom: 25px;
}

.text-block-framed h4 {
  font-family: 'Ubin Sans', sans-serif;
  font-size: 1.4em;
  font-weight: normal;
  color: #2A4233;
  color: #1A2920;
  margin-bottom: 10px;
}

#services h3 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 40px;
  font-family: 'Ubin Sans', sans-serif;
  color: #2A4233;
  color: #1A2920;
}

/* Стили для иконок в заголовках */
h3 i, h4 i, .shimmer-icon {
  /* Зеленый градиент: от темного к светлому блику и обратно */
  background: linear-gradient(110deg, #1A2920 10%, #2A4233 30%, #5C8065 45%, #2A4233 60%, #1A2920 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 12px;
  /* Плавная анимация: 6 секунд (медленнее, чем у текста) */
  animation: greenTextShimmer 6s linear infinite;
}

@media (max-width: 768px) {
  .nav-links {
    gap: 25px;
    font-size: 0.95rem;
  }
  .logo {
    font-size: 1.7rem;
  }
  
  .split-container {
    flex-direction: column;
  }
  .photo-block {
    min-height: 300px;
  }
}

/* Анимация появления при прокрутке */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Кнопка призыва к действию */
.cta-button {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  background-color: #2A4233;
  padding: 15px 40px;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.cta-button:hover {
  background-color: #365441;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(42, 66, 51, 0.2);
}

/* Применяем золотой эффект ТОЛЬКО к тексту внутри кнопки */
.cta-button:hover span {
  background-image: linear-gradient(110deg, #8a6e2f 0%, #e6c86e 40%, #fffae6 50%, #e6c86e 60%, #8a6e2f 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldTextShimmer 2s linear infinite;
}

/* Форма обратной связи */
.contact-form {
  margin-top: 30px;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #2A4233;
  box-shadow: 0 0 5px rgba(42, 66, 51, 0.2);
}

/* Кнопка "Наверх" */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  display: none; /* Скрыта по умолчанию */
  padding: 12px 15px; /* Компактный размер */
}