/* Google Fonts: Manrope (заголовки), Nunito Sans (основной текст) */

@layer base {
  body {
    font-family: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  }
}

/* Утилиты для Tailwind (если понадобится явно задать шрифт в разметке) */
.font-body {
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
}
.font-heading {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

/* Плавное появление блоков при скролле */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scroll-reveal-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Плавные анимации для слайдера работ */
#post-gallery-main {
  position: relative;
}

#post-gallery-main .gallery-main-image,
#post-gallery-main video.gallery-main-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(12px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#post-gallery-main .gallery-main-image-active {
  opacity: 1;
  transform: translateX(0);
}

/* Мобильная подсказка «прокрутка вниз» в hero: двойной шеврон */
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-hint__chev {
    animation: hero-scroll-hint-pulse 1.45s ease-in-out infinite;
  }

  .hero-scroll-hint__chev--2 {
    animation-delay: 0.18s;
  }
}

@keyframes hero-scroll-hint-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(-2px);
  }
  45% {
    opacity: 1;
    transform: translateY(4px);
  }
}

/* Мобильное меню шапки: плавное раскрытие (desktop без ограничений) */
@media (max-width: 767.98px) {
  #nav-menu.nav-mobile-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-top-color: transparent;
    box-shadow: none;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
      max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.28s ease,
      transform 0.36s cubic-bezier(0.4, 0, 0.2, 1),
      padding-top 0.35s ease,
      padding-bottom 0.35s ease,
      margin-top 0.3s ease,
      border-color 0.2s ease,
      box-shadow 0.28s ease;
  }

  #nav-menu.nav-mobile-panel.nav-menu-open {
    max-height: min(90vh, 36rem);
    opacity: 1;
    overflow: visible;
    margin-top: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-top-width: 1px;
    border-top-color: rgb(226 232 240);
    box-shadow:
      0 10px 15px -3px rgb(15 23 42 / 0.07),
      0 4px 6px -4px rgb(15 23 42 / 0.06);
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  #nav-menu.nav-mobile-panel {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav-menu.nav-mobile-panel {
    transition-duration: 0.01ms !important;
  }
}