/* CALL ME KARIZMA — дизайн-система лендинга тура.
   Для Тильды: Настройки сайта → Ещё → HTML-код внутрь HEAD.
   Палитра снята с фона тур-фото (холодный сине-серый градиент афиши 2027). */

:root{
  --night:#141B23;      /* тёмный низ афиши, фон футера */
  --steel:#2E3C49;      /* тени, края градиента */
  --sky:#5D7183;        /* основной серо-синий фона */
  --sky-l:#8CA0B0;      /* светлая зона за головой */
  --ice:#F2F5F7;        /* текст, лого, кнопки */
  --mute:#93A1AE;       /* вторичный текст */
  --glass:rgba(242,245,247,.18);       /* заливка glass-панелей */
  --glass-line:rgba(242,245,247,.28);  /* обводка glass-панелей */
  --r-panel:22px;       /* скругление рамок и карточек */
  --r-btn:14px;         /* скругление кнопок */
}

/* ТИПОГРАФИКА — Golos, три роли (рукописный лого — картинкой) */
.kz-h      {font-family:'Golos Text';font-weight:900;letter-spacing:-.02em;line-height:.98;
            text-transform:uppercase;color:var(--ice)}
.kz-body   {font-family:'Golos Text';font-weight:400;line-height:1.55;color:var(--ice)}
.kz-eyebrow{font-family:'Golos Text';font-weight:600;font-size:12px;letter-spacing:.26em;
            text-transform:uppercase;color:var(--ice)}

html{scroll-behavior:smooth;
     /* параллакс двигает фото трансформом — якорение скролла с ним
        конфликтует и утаскивает страницу; отключаем */
     overflow-anchor:none}

/* КНОПКИ. Основная — ледяная плита, ховер — заливка ночью слева направо.
   Текст «Купить билет» — крупный и жирный по правке заказчика. */
.kz-btn{display:inline-block;padding:18px 40px;font-family:'Golos Text';font-weight:800;
        font-size:16px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
        position:relative;background:var(--ice);color:var(--night);
        border-radius:var(--r-btn);overflow:hidden;isolation:isolate}
/* Заливка на 1px шире кнопки (накрывает антиалиасную ледяную кромку —
   без запаса по углам оставалась светлая нить, ревизия 20.08), НО
   теперь клипается overflow'ом самой кнопки: без клипа заливка в
   МОМЕНТЕ анимации вылезала за скруглённые углы (правка промоутера
   24.08). isolation:isolate обязателен — без него старые Chrome
   игнорируют скругление при transform у ребёнка. */
.kz-btn::before{content:"";position:absolute;inset:-1px;background:var(--night);
                border-radius:calc(var(--r-btn) + 1px);
                transform:scaleX(0);transform-origin:left;
                transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.kz-btn:hover::before{transform:scaleX(1)}
.kz-btn > span{position:relative;z-index:1}
.kz-btn:hover{color:var(--ice)}
/* стеклянная — второстепенное действие поверх фото и в стекле */
.kz-btn--glass{background:var(--glass);color:var(--ice);
               box-shadow:inset 0 0 0 1px var(--glass-line);
               backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.kz-btn--glass::before{background:var(--ice)}
.kz-btn--glass:hover{color:var(--night);box-shadow:none}

/* GLASS-ПАНЕЛЬ — карточки и плашки. ПО ДЕФОЛТУ ПРОЗРАЧНАЯ (без блюра),
   матовый блюр возвращается только ховером (см. блок городов).
   overflow прячет квадратные подсветки строк под скруглением. */
.kz-glass{background:var(--glass);
          box-shadow:inset 0 0 0 1px var(--glass-line);
          border-radius:var(--r-panel);overflow:hidden}

/* СОЦКНОПКИ — стекло, значок + подпись. Порядок на странице: Telegram, ВК.
   Ховер — чёрная заливка слева направо, как у кнопки «Купить билеты». */
.kz-soc{display:inline-flex;align-items:center;justify-content:center;gap:12px;
        padding:18px 30px;background:var(--glass);
        position:relative;overflow:hidden;isolation:isolate;
        box-shadow:inset 0 0 0 1px var(--glass-line);border-radius:var(--r-btn);
        backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
        font-family:'Golos Text';font-weight:700;font-size:15px;letter-spacing:.08em;
        text-transform:uppercase;color:var(--ice);text-decoration:none}
.kz-soc::before{content:"";position:absolute;inset:-1px;background:var(--night);
                border-radius:calc(var(--r-btn) + 1px);
                transform:scaleX(0);transform-origin:left;
                transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.kz-soc:hover::before{transform:scaleX(1)}
.kz-soc > *{position:relative;z-index:1}
.kz-soc img,.kz-soc svg{width:24px;height:24px;display:block;flex:none}

/* БЕГУЩАЯ СТРОКА — лента про скидку. Дорожка задублирована в разметке,
   сдвиг на -50% даёт бесшовный цикл. */
.kz-ticker{background:var(--ice);overflow:hidden;white-space:nowrap;padding:16px 0}
.kz-ticker-track{display:inline-block;animation:kz-marquee 70s linear infinite}
/* людям с отключённой анимацией лента стоит на месте (ревизия 20.08) */
@media (prefers-reduced-motion:reduce){.kz-ticker-track{animation:none}}
.kz-ticker-track b{font-family:'Golos Text';font-weight:900;font-size:17px;
                   letter-spacing:.06em;text-transform:uppercase;color:var(--night)}
.kz-ticker-track i{font-style:normal;font-weight:900;color:var(--sky);margin:0 26px;font-size:17px}
@keyframes kz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* СТРОКА ГОРОДА в общем списке: дата — город — площадка — билеты.
   Ховер — ледяная подсветка строки (такой же на столичных карточках). */
.kz-row{display:grid;grid-template-columns:120px 1fr 240px auto;gap:20px;align-items:center;
        padding:20px 28px;transition:background .25s}
.kz-row + .kz-row{box-shadow:inset 0 1px 0 rgba(242,245,247,.14)}
@media (hover:hover){
  .kz-row:hover{background:rgba(242,245,247,.08)}
}
.kz-row-date{font-family:'Golos Text';font-weight:900;font-size:21px;letter-spacing:-.01em;
             color:var(--ice);text-transform:uppercase;
             text-shadow:0 1px 10px rgba(20,27,35,.6)}
.kz-row-city{font-family:'Golos Text';font-weight:900;font-size:23px;letter-spacing:-.01em;
             color:var(--ice);text-transform:uppercase;
             text-shadow:0 1px 10px rgba(20,27,35,.6)}
.kz-row-venue{font-family:'Golos Text';font-weight:700;font-size:13px;letter-spacing:.12em;
              text-transform:uppercase;color:#C2CCD6;text-shadow:0 1px 10px rgba(20,27,35,.6)}
.kz-row .kz-btn{padding:16px 32px;font-size:15px}
/* полная подпись даты и ряды-столицы существуют только на мобиле */
.kz-row-full{display:none}
.kz-row--stolica{display:none}

/* 16+ — служебная плашка */
.kz-age{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;
        font-family:'Golos Text';font-weight:700;font-size:12px;letter-spacing:.08em;
        color:var(--ice);box-shadow:inset 0 0 0 1px var(--glass-line);
        border-radius:10px}

@media (max-width:640px){
  .kz-btn{display:block;text-align:center}
  /* ряд города = мини-карточка, подписи как у столиц:
     полная дата, город, площадка, кнопка */
  .kz-row{grid-template-columns:1fr;grid-template-areas:"f" "c" "v" "b";
          gap:7px;padding:20px 18px;
          box-shadow:inset 0 1px 0 rgba(242,245,247,.14)}
  .kz-row-date{display:none}
  .kz-row-full{display:block;grid-area:f;color:#C2CCD6;
               text-shadow:0 1px 10px rgba(20,27,35,.6)}
  .kz-row-city{grid-area:c;font-size:22px;white-space:normal}
  .kz-row-venue{grid-area:v}
  .kz-row .kz-btn{grid-area:b;margin-top:10px;padding:14px;font-size:14px}
  /* столицы встают первыми в общий список */
  .kz-row--stolica{display:grid;order:-1}
  .kz-row--pervyi{order:-2}
  .kz-row.kz-row--pervyi{box-shadow:none}
  .kz-soc{width:100%;justify-content:center;padding:13px 18px;font-size:13px}
  .kz-soc img,.kz-soc svg{width:18px;height:18px}
  .kz-ticker-track b,.kz-ticker-track i{font-size:15px}
}