/* =====================================================================
   Тема «Глубокая вода»: правки под тёмный фон + анимации.
   Цвета (переменные) — в :root файла custom.css.
   ===================================================================== */

body,
h1, h2, h3, h4, h5, p,
li { color: var(--text-primary); }
.text-muted,
.subtitle { color: var(--text-secondary) !important; }
#header .nav-link,
#header .btn-sm,
footer a,
footer { color: var(--text-primary) !important; }
#header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
/* Крестик закрытия Bootstrap — светлый на тёмном */
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Надпись логотипа остаётся алой — это бренд «Алых Парусов» */
.brand__name {
  background: linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

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

/* ---------- Блики воды на hero ---------- */
.hero__water {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 60% 45% at 64% 88%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 45% at 64% 88%, #000 40%, transparent 100%);
}
.hero__water::before,
.hero__water::after {
  content: "";
  position: absolute;
  top: -420px; left: -420px; right: 0; bottom: 0;
  background: url('/assets/img/caustics.svg') repeat;
  background-size: 420px 420px;
  will-change: transform;
  animation: causticsA 70s linear infinite;
}
.hero__water::after { display: none;
  background-size: 300px 300px;
  top: -300px; left: -300px;
  opacity: .7;
  transform: scaleY(.6);
  animation: causticsB 19s linear infinite;
}
@keyframes causticsA { to { transform: translate3d(420px, 420px, 0); } }
@keyframes causticsB {
  from { transform: translate3d(300px, 0, 0) scaleY(.6); }
  to   { transform: translate3d(0, 300px, 0) scaleY(.6); }
}

/* ---------- Волны между секциями ---------- */
:root {
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C40 0 80 0 120 12 S200 24 240 12 V24 H0Z'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='24' viewBox='0 0 380 24' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C60 4 130 4 190 16 S320 26 380 16 V24 H0Z'/%3E%3C/svg%3E");
}
.hero::after,
main > .section-darker::before,
main > .section-darker::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  pointer-events: none;
  -webkit-mask-image: var(--wave-a), var(--wave-b);
  mask-image: var(--wave-a), var(--wave-b);
  -webkit-mask-size: 240px 22px, 380px 22px;
  mask-size: 240px 22px, 380px 22px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  animation: waveDrift 14s linear infinite;
}
.hero::after {
  bottom: -1px;
  z-index: 3;
  background: var(--bg-primary);
}
main > .section-darker { position: relative; }
main > .section-darker::before {
  top: -21px;
  background: var(--bg-secondary);
  z-index: 2;
}
main > .section-darker::after {
  bottom: -21px;
  background: var(--bg-secondary);
  transform: scaleY(-1);
  z-index: 2;
  animation-direction: reverse;
}
@keyframes waveDrift {
  from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  to   { -webkit-mask-position: 240px 0, -380px 0; mask-position: 240px 0, -380px 0; }
}

/* ---------- Пузырьки в финальном блоке ---------- */
.final-cta { position: relative; overflow: hidden; }
.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.final-cta > *:not(.bubbles):not(.spot) { position: relative; z-index: 1; }
.bubbles i {
  position: absolute;
  bottom: -24px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), .45);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9) 0 2px, rgba(var(--accent-rgb), .08) 3px);
  animation: bubbleUp 9s ease-in infinite;
  opacity: 0;
}
.bubbles i:nth-child(1) { left: 6%;  animation-delay: 0s;   transform: scale(.7); }
.bubbles i:nth-child(2) { left: 14%; animation-delay: 2.4s; animation-duration: 11s; }
.bubbles i:nth-child(3) { left: 24%; animation-delay: 5s;   width: 9px; height: 9px; }
.bubbles i:nth-child(4) { left: 72%; animation-delay: 1.2s; width: 18px; height: 18px; animation-duration: 12s; }
.bubbles i:nth-child(5) { left: 82%; animation-delay: 3.8s; width: 10px; height: 10px; }
.bubbles i:nth-child(6) { left: 91%; animation-delay: 6.5s; animation-duration: 10s; }
.bubbles i:nth-child(7) { left: 48%; animation-delay: 7.7s; width: 8px; height: 8px; }
@keyframes bubbleUp {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(10px, -120px); }
  90%  { opacity: .9; }
  100% { transform: translate(-6px, -260px); opacity: 0; }
}

/* ---------- Анимации, привязанные к прокрутке (чистый CSS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Фото залов — лёгкий параллакс (фото не выходит за свою колонку) */
    .room-card__media { overflow: hidden; }
    .room-card__photo {
      scale: 1.12;
      animation: photoParallax linear both;
      animation-timeline: view();
    }
    @keyframes photoParallax {
      from { translate: 0 -5%; }
      to   { translate: 0 5%; }
    }

    /* Карточки событий — фото раскрывается «шторкой» */
    .event-card img {
      animation: curtainReveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 40%;
    }
    @keyframes curtainReveal {
      from { clip-path: inset(0 0 100% 0); scale: 1.18; }
      to   { clip-path: inset(0 0 0 0);    scale: 1; }
    }

    /* Черта под заголовком «вырастает» при появлении */
    .section-header h2::after {
      animation: underlineGrow linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 35%;
    }
    @keyframes underlineGrow {
      from { scale: 0 1; }
      to   { scale: 1 1; }
    }
  }
}

/* ---------- Нижняя панель на телефоне ---------- */
.mobile-bar { display: none; }
@media (max-width: 767.98px) {
  .mobile-bar {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1070;
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(var(--bs-body-bg-rgb), 0.88);
    backdrop-filter: saturate(1.3) blur(10px);
    -webkit-backdrop-filter: saturate(1.3) blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
    transform: translateY(140%);
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.show-mobile-bar .mobile-bar { transform: none; }
  .mobile-bar a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    border-radius: 13px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-bar__book {
    flex: 1.6 !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--cta) 0%, var(--cta-dark) 100%);
    box-shadow: 0 6px 16px rgba(var(--cta-rgb), .4);
  }
  .mobile-bar__call {
    color: var(--text-primary) !important;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
  }
  .mobile-bar svg { width: 16px; height: 16px; }
  footer { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__water::before, .hero__water::after,
  .hero::after, main > .section-darker::before, main > .section-darker::after,
  .bubbles i { animation: none !important; }
  .bubbles { display: none; }
}

/* Нижняя волна последней секции не должна вылезать за main */
main > .section-darker:last-child::after { display: none; }

/* =====================================================================
   АНИМАЦИИ ЭЛЕМЕНТОВ (motion.js добавляет классы/переменные)
   ===================================================================== */

/* ---------- Полоса прогресса прокрутки ---------- */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      display: block;
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      z-index: 1040;
      pointer-events: none;
      background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold-light) 70%, var(--cta) 100%);
      transform-origin: 0 50%;
      animation: scrollProgress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes scrollProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Заголовок hero появляется по словам ---------- */
  .anim .hero__title.is-split { opacity: 1 !important; transform: none !important; }
  .hero__title.is-split .w {
    display: inline-block;
    animation: wordUp .9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(120ms + var(--i) * 75ms);
  }
  @keyframes wordUp {
    from { opacity: 0; transform: translateY(0.55em); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }

  /* ---------- Главная кнопка «дышит» ---------- */
  .btn-hero-primary,
  .mobile-bar__book {
    animation: ctaPulse 2.8s ease-out 1.6s infinite;
  }
  .btn-hero-primary:hover,
  .mobile-bar__book:hover { animation: none; }
  @keyframes ctaPulse {
    0%        { box-shadow: 0 6px 18px rgba(var(--cta-rgb), .45), 0 0 0 0 rgba(var(--cta-rgb), .55); }
    70%, 100% { box-shadow: 0 6px 18px rgba(var(--cta-rgb), .45), 0 0 0 14px rgba(var(--cta-rgb), 0); }
  }

  /* ---------- Иконки «выпрыгивают» при появлении карточки ---------- */
  .anim .is-visible .feature-strip__icon,
  .anim .is-visible .promo-card__icon,
  .anim .is-visible .trust-card__icon,
  .anim .is-visible .event-feature__icon,
  .anim .is-visible .event-step__num {
    animation: iconPop .7s cubic-bezier(0.34, 1.56, 0.64, 1) .25s both;
  }
  @keyframes iconPop {
    from { transform: scale(.3) rotate(-25deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  /* при наведении — лёгкий поворот (отдельные свойства, не мешают iconPop) */
  .feature-strip__icon, .promo-card__icon, .trust-card__icon, .event-feature__icon {
    transition: rotate .35s cubic-bezier(0.34, 1.56, 0.64, 1), scale .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .feature-strip__item:hover .feature-strip__icon,
  .promo-card:hover .promo-card__icon,
  .trust-card:hover .trust-card__icon,
  .event-feature:hover .event-feature__icon { rotate: -10deg; scale: 1.12; }

  /* ---------- Удобства в карточке зала появляются по очереди ---------- */
  .anim .room-card .room-card__features > * { opacity: 0; }
  .anim .room-card.is-visible .room-card__features > * {
    animation: chipIn .5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(.3s + var(--n, 0) * 70ms);
  }
  @keyframes chipIn {
    from { opacity: 0; transform: translateY(8px) scale(.94); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Плашка награды: блик по кубку ---------- */
  .award-banner__photo--trophy { position: relative; }
  .award-banner__photos { position: relative; }
  .award-banner__photos::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%;
    background-position: 120% 0;
    animation: trophyShine 6s ease-in-out 2s infinite;
  }
  @keyframes trophyShine {
    0%, 70% { background-position: 120% 0; }
    100%    { background-position: -120% 0; }
  }
}

/* ---------- Подсветка карточки за курсором ---------- */
.spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .13), transparent 65%);
  mix-blend-mode: screen;
}
.has-spot:hover > .spot { opacity: 1; }
.has-spot { position: relative; }

/* ---------- Модальные окна поверх шапки и нижней панели ---------- */
.modal { --bs-modal-zindex: 1085; }
.modal-backdrop { --bs-backdrop-zindex: 1082; --bs-backdrop-bg: rgba(3, 10, 16, 0.6); }
.modal-open .mobile-bar { display: none; }