/* ============================================
   Студия «Олимпия» — кастомные стили
   Дополняют Tailwind: меандр-декор, типографика,
   кнопки, карточки, lightbox.
   ============================================ */

:root {
  --olympia-dark:   #0f2419;
  --olympia-green:  #1a3a2e;
  --olympia-olive:  #3a5a44;
  --olympia-gold:   #c9a961;
  --olympia-gold-l: #d4b97a;
  --olympia-cream:  #f0e6d2;
  --olympia-beige:  #e8dcc4;
}

html { scroll-behavior: smooth; }
/* Защита от горизонтальной прокрутки на мобильных (фоновые слои/лого
   не должны «расталкивать» страницу за край вьюпорта). */
html, body { overflow-x: hidden; max-width: 100%; }
body { font-feature-settings: "kern", "liga"; }

/* === Меандр-разделитель ===
   Сделан inline SVG из data-uri — повторяющийся греческий орнамент.
   Используется между секциями и под заголовками. */
.meander-divider {
  width: 220px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22' fill='none' stroke='%23c9a961' stroke-width='1.5'%3E%3Cpath d='M0 1 L0 21 L20 21 L20 5 L10 5 L10 13 L14 13 L14 9 L24 9 L24 17 L4 17 L4 1 Z M24 1 L24 17 L44 17 L44 1 Z M28 5 L40 5 L40 13 L32 13 L32 9 L36 9'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 44px 22px;
  opacity: 0.85;
}

/* === Кнопки === */
.btn-gold {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--olympia-gold) 0%, var(--olympia-gold-l) 100%);
  color: var(--olympia-dark);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  box-shadow: 0 4px 20px -6px rgba(201, 169, 97, 0.5);
  text-align: center;
  white-space: normal;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -6px rgba(201, 169, 97, 0.7);
  filter: brightness(1.05);
}

.btn-outline {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--olympia-gold);
  color: var(--olympia-cream);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}
.btn-outline:hover {
  background: var(--olympia-gold);
  color: var(--olympia-dark);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

/* === Заголовки групп направлений === */
.program-group {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--olympia-gold);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  position: relative;
}
.program-group::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--olympia-gold);
  margin: 0.75rem auto 0;
  opacity: 0.5;
}

/* === Карточки направлений === */
.program-card {
  background: rgba(15, 36, 25, 0.6);
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.program-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
}
.program-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.program-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.program-card-body h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--olympia-gold-l);
  margin-bottom: 0.6rem;
  line-height: 1.2;
}
.program-card-body p {
  color: rgba(240, 230, 210, 0.8);
  font-size: 0.95rem;
  line-height: 1.55;
  flex: 1;
}

/* === Прайс-таблицы === */
.price-table {
  background: rgba(15, 36, 25, 0.5);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 16px;
  padding: 2rem;
}
.price-table table { border-collapse: collapse; }
.price-table tbody tr { border-bottom: 1px solid rgba(201, 169, 97, 0.12); }
.price-table tbody tr:last-child { border-bottom: none; }

/* === Галерея === */
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(201, 169, 97, 0.15);
  aspect-ratio: 1 / 1;
  background: var(--olympia-green);
  cursor: pointer;
  padding: 0;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s, filter 0.3s;
}
.gallery-item:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

/* === Lightbox === */
#lightbox.active { display: flex; }
#lightbox img { animation: lightbox-in 0.25s ease-out; }
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* === Адаптация === */
@media (max-width: 640px) {
  .meander-divider { width: 180px; }
  .program-card img { height: 180px; }
  .price-table { padding: 1.25rem; }
  .price-table th, .price-table td { font-size: 0.9rem; }

  /* На телефоне призрачный лого крупнее по доле экрана и чуть заметнее,
     чтобы он действительно «виднелся в увеличенном виде». */
  .hero-ghost-logo { width: 135vw; opacity: 0.16; }

  /* Заголовок hero на узких экранах был великоват и упирался в края —
     уменьшаем кегль и страхуемся переносом, чтобы текст не вылезал за вьюпорт. */
  #hero h1 { font-size: 2rem; line-height: 1.15; }
  #hero { overflow-x: hidden; }
  #hero h1, #hero p { overflow-wrap: anywhere; }
}

/* === Корректировка прокрутки по якорю под фиксированную шапку === */
section[id] { scroll-margin-top: 70px; }

/* === Лого «Олимпия» ===
   Используется PNG с прозрачным фоном (olympia-transparent.png) — белый фон
   исходника убран заранее, поэтому никаких blend-трюков не нужно. Лого
   корректно выглядит на любом фоне и на любом устройстве, включая мобильные. */

/* === HERO: насыщенный фон ===
   Раньше фото было перекрыто почти сплошным тёмным градиентом и выглядело блёкло.
   Теперь градиент мягче и с зелёным подтоном — фон стал глубже и насыщеннее,
   но текст по-прежнему читается. */
.hero-overlay {
  background:
    radial-gradient(120% 90% at 50% 35%,
      rgba(15, 36, 25, 0.42) 0%,
      rgba(15, 36, 25, 0.66) 55%,
      rgba(15, 36, 25, 0.92) 100%),
    linear-gradient(to bottom,
      rgba(26, 58, 46, 0.30) 0%,
      rgba(15, 36, 25, 0.52) 60%,
      var(--olympia-dark) 100%);
}

/* === HERO: призрачный увеличенный логотип позади контента ===
   Полупрозрачный «водяной знак» — крупная версия лого по центру секции.
   PNG уже прозрачный, поэтому просто гасим непрозрачность. */
.hero-ghost-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(135vw, 1100px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  /* Статичный водяной знак — без «дыхания», чтобы hero не мельтешил. */
}

/* === HERO: основной логотип со свечением === */
.hero-logo {
  display: block;
  filter: drop-shadow(0 0 26px rgba(201, 169, 97, 0.30));
}

/* ============================================
   АНИМАЦИИ
   ============================================ */

/* Hero — плавное появление при загрузке страницы */
#hero > .relative.z-10 > * {
  opacity: 0;
  animation: hero-fade-up 1s ease-out forwards;
}
#hero > .relative.z-10 > *:nth-child(1) { animation-delay: 0.1s; }
#hero > .relative.z-10 > *:nth-child(2) { animation-delay: 0.3s; }
#hero > .relative.z-10 > *:nth-child(3) { animation-delay: 0.5s; }
#hero > .relative.z-10 > *:nth-child(4) { animation-delay: 0.7s; }
#hero > .relative.z-10 > *:nth-child(5) { animation-delay: 0.9s; }
#hero > .relative.z-10 > *:nth-child(6) { animation-delay: 1.1s; }
#hero > .relative.z-10 > *:nth-child(7) { animation-delay: 1.3s; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Меандр — статичное золото без мерцания, чтобы hero был спокойнее */
.meander-divider {
  opacity: 0.9;
}

/* Fade-in при появлении в зоне видимости (через IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Каскадная задержка для карточек в одной сетке */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(n+6) { transition-delay: 0.55s; }
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Лёгкий parallax на фоновых картинках секций — JS добавит translateY */
.parallax-bg {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Pulse-эффект на главных кнопках золотых, чтобы привлекали внимание */
.btn-gold.btn-lg {
  position: relative;
}
.btn-gold.btn-lg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.4);
  animation: pulse-gold 4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(201, 169, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
}

/* Логотип в hero статичен — без парения, чтобы не добавлять лишнего движения. */

/* Уважение к prefers-reduced-motion — критично для женщин 35+ с укачиванием */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}