/* ГородНК — анимации и интерактивные детали */

/* Появление блоков при прокрутке */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
}
.stagger > * { opacity: 0; transform: translateY(16px); }
.stagger.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}
.stagger.is-visible > *:nth-child(1) { transition-delay: .02s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .07s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .12s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .17s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: .22s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: .27s; }
.stagger.is-visible > *:nth-child(7) { transition-delay: .32s; }
.stagger.is-visible > *:nth-child(8) { transition-delay: .37s; }

/* Карточки */
.card { position: relative; }
.card__img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.card:hover .card__img { transform: scale(1.045); }
.card:hover { box-shadow: 0 18px 40px -24px rgba(22, 18, 58, .45); }
.card__title a {
  background-image: linear-gradient(var(--coral), var(--coral));
  background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s;
}
.card:hover .card__title a { background-size: 100% 2px; }
.card--person .card__img { filter: grayscale(.25); transition: filter .4s, transform .5s cubic-bezier(.2, .7, .3, 1); }
.card--person:hover .card__img { filter: none; }

/* Плитки главной */
.bento__tile { transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s; }
.bento__tile:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(22, 18, 58, .6); }
.bento__tile::before {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 45%);
}
.bento__tile:hover::before { opacity: 1; }
.bento__tile--accent { background-size: 200% 200%; animation: gradientShift 9s ease infinite; }
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Кнопки */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .22);
  transform: translateX(-100%) skewX(-18deg); transition: transform .55s;
}
.btn:hover::after { transform: translateX(100%) skewX(-18deg); }
.btn--glass {
  background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .28);
}
.btn--glass:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* Кнопка «Предложить» */
.btn-offer {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border: 0; cursor: pointer;
  border-radius: var(--r-btn); font: inherit; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(120deg, var(--brand), var(--coral) 55%, var(--brand));
  background-size: 220% 100%; animation: offerFlow 6s ease infinite;
  box-shadow: 0 8px 22px -10px rgba(255, 90, 60, .8);
  transition: transform .2s, box-shadow .3s;
}
.btn-offer:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(255, 90, 60, .95); color: #fff; }
.btn-offer:active { transform: translateY(0); }
.btn-offer .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none;
  animation: pulseDot 2.2s infinite;
}
@keyframes offerFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); }
  70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Модальное окно */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.is-open { display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__back { position: absolute; inset: 0; background: rgba(16, 12, 40, .55); backdrop-filter: blur(4px); animation: fadeIn .25s ease; }
.modal__win {
  position: relative; margin: 0; width: min(580px, calc(100vw - 28px)); background: var(--card);
  border-radius: 26px; padding: 34px; animation: popIn .32s cubic-bezier(.2, .9, .3, 1.2);
  max-height: 86vh; overflow: auto;
}
.modal__close {
  position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 17px; color: var(--muted);
}
.modal__close:hover { background: var(--bg); color: var(--ink); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.offer-choice { display: grid; gap: 12px; margin-top: 24px; }
.offer-choice button {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--card);
  font: inherit; color: var(--ink); transition: .2s;
}
.offer-choice button:hover { border-color: var(--brand); transform: translateX(4px); background: var(--brand-soft); }
.offer-choice .ico { font-size: 24px; line-height: 1; }
.offer-choice b { display: block; font-size: 16.5px; }
.offer-choice small { color: var(--muted); font-size: 13.5px; }

/* Промо-блок */
.promo {
  position: relative; overflow: hidden; border-radius: var(--r-card); padding: 42px 46px;
  background: var(--indigo-950); color: #fff;
}
.promo h2 { color: #fff; position: relative; z-index: 2; }
.promo p { color: rgba(255, 255, 255, .78); max-width: 680px; margin: 0; position: relative; z-index: 2; }
.promo .row { position: relative; z-index: 2; }
.promo__glow {
  position: absolute; width: 460px; height: 460px; right: -120px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 60, .5), transparent 62%); filter: blur(16px);
  animation: floatGlow 11s ease-in-out infinite;
}
@keyframes floatGlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 40px) scale(1.12); }
}

/* Мелочи */
.nav__drop { transition: opacity .18s, transform .18s, visibility .18s; }
.chip { transition: transform .18s, border-color .18s, background .18s, color .18s; }
.chip:hover { transform: translateY(-2px); }
.section__more::after { content: ' →'; transition: margin-left .2s; display: inline-block; }
.section__more:hover::after { margin-left: 5px; }
.logo__mark { transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.event-date { transition: transform .25s; }
.event-row:hover .event-date { transform: scale(1.06); }
.gallery img { transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.gallery a:hover img { transform: scale(1.04); }
.item__img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.item:hover .item__img { transform: scale(1.03); }
.item { overflow: hidden; }

/* Полоса прогресса чтения */
.readbar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 100; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--coral)); transition: width .12s linear;
}

/* Кнопка «наверх» */
.totop {
  position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer;
  display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .3s, transform .3s; z-index: 90;
}
.totop.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.totop:hover { border-color: var(--ink); }

/* Формы предложений */
.offer-form { margin-top: 22px; }
.offer-form .field label { font-size: 14px; }
.offer-back {
  background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 14px;
  padding: 0; margin-bottom: 14px;
}
.offer-back:hover { color: var(--brand); }

@media (max-width: 900px) {
  .btn-offer { padding: 10px 16px; font-size: 14px; }
  .btn-offer .label-long { display: none; }
  .promo { padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .06s !important; }
}