/* ==========================================================================
   Движение: появление при скролле, таймлайн, параллакс, ховеры.
   Класс .motion_ready вешает motion.js — только если анимации не отключены
   в системе (prefers-reduced-motion) и браузер умеет IntersectionObserver.
   ========================================================================== */
:root {
  --ease_out: cubic-bezier(.32, .72, 0, 1);
  --ease_spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 4. Появление при скролле ---------- */
.motion_ready .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .9s var(--ease_out) var(--reveal_delay, 0ms),
    transform 1s var(--ease_out) var(--reveal_delay, 0ms);
}
.motion_ready .reveal.is_in {
  opacity: 1;
  transform: none;
}

/* ---------- 5. Живой таймлайн программы ---------- */
/* Красная заливка линии до активной точки */
.program_timeline::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 14px;
  bottom: 40px;
  width: 1.5px;
  background: var(--color_red_light);
  box-shadow: 0 0 12px rgba(232, 69, 60, .6);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.1s var(--ease_out);
}
.motion_ready .program_timeline::after { transform: scaleY(var(--timeline_fill, 0)); }

.motion_ready .point_marker { transition: transform .6s var(--ease_spring); }
.motion_ready .point_marker::before { animation: none; }
.motion_ready .program_point.is_active .point_marker { transform: scale(1.2); }
.motion_ready .program_point.is_active .point_marker::before { animation: pulse_ring 2.2s var(--ease_out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .point_marker::before { animation: none !important; }
}

/* ---------- 6. Параллакс (CSS scroll-driven, без JS) ---------- */
@keyframes parallax_grid    { to { transform: translateY(160px); } }
@keyframes parallax_stripes { to { transform: translateY(80px); } }
@keyframes parallax_photo {
  from { transform: scale(1.14) translateY(-4%); }
  to   { transform: scale(1.14) translateY(4%); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Запас сверху, чтобы при сдвиге вниз не открывался край слоя */
    .hero_bg_grid    { top: -160px; animation: parallax_grid linear both;    animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero_bg_stripes { top: -80px;  animation: parallax_stripes linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .venue_photo_img { animation: parallax_photo linear both; animation-timeline: view(); animation-range: cover; }
  }
}

/* ---------- 7. Кнопки ---------- */
.btn_pill,
.reg_form_submit,
.map_route_btn {
  transition:
    background-color .35s var(--ease_out),
    box-shadow .5s var(--ease_out),
    scale .35s var(--ease_out);
}
.btn_pill_icon { transition: background-color .35s var(--ease_out); }
.btn_pill_icon svg { transition: transform .55s var(--ease_spring); }
@media (hover: hover) {
  .btn_pill:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 24px 52px rgba(213, 35, 43, .45); }
  .btn_pill:hover .btn_pill_icon { background: rgba(255, 255, 255, .28); }
  .btn_pill:hover .btn_pill_icon svg { transform: translate(3px, -3px); }
  .reg_form_submit:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 36px rgba(213, 35, 43, .38); }
}
.btn_pill:active,
.reg_form_submit:active,
.map_route_btn:active { scale: .98; }

/* ---------- 8. Карточки спикеров ---------- */
.speaker_photo {
  transition:
    translate .6s var(--ease_out),
    box-shadow .6s var(--ease_out);
}
.speaker_photo_img { transition: transform .9s var(--ease_out); }
@media (hover: hover) {
  .speaker_card:hover .speaker_photo {
    translate: 0 -4px;
    box-shadow: 0 24px 48px rgba(11, 26, 60, .14);
  }
  .speaker_card:hover .speaker_photo_img { transform: scale(1.04); }
}

/* ---------- 9. Логотипы клиентов ---------- */
@media (hover: hover) {
  .client_logo_img {
    filter: grayscale(1);
    opacity: .6;
    transition:
      filter .5s var(--ease_out),
      opacity .5s var(--ease_out);
  }
  .client_logo:hover .client_logo_img {
    filter: none;
    opacity: 1;
  }
}

/* ---------- 10. Поля формы: красная линия при фокусе ---------- */
.reg_form_input {
  background-image: linear-gradient(var(--color_red), var(--color_red));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size .6s var(--ease_out);
}
.reg_form_input:focus { background-size: 100% 2px; }

/* ---------- 11. Таймер: цифра приезжает снизу ---------- */
@keyframes countdown_tick {
  from { transform: translateY(55%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.countdown_cell { overflow: hidden; }
.countdown_value { display: block; }
.countdown_value.is_tick { animation: countdown_tick .5s var(--ease_out); }

/* ---------- 12. Бургер → крестик и меню ---------- */
.burger_line {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition:
    transform .5s var(--ease_out),
    opacity .3s var(--ease_out);
}
.burger_btn[aria-expanded="true"] .burger_line_top    { transform: rotate(45deg) translateY(5px); }
.burger_btn[aria-expanded="true"] .burger_line_middle { transform: scaleX(0); opacity: 0; }
.burger_btn[aria-expanded="true"] .burger_line_bottom { transform: rotate(-45deg) translateY(-5px); }

@keyframes nav_panel_in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nav_link_in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav_mobile:not([hidden]) { animation: nav_panel_in .4s var(--ease_out); }
  .nav_mobile:not([hidden]) .nav_mobile_link { animation: nav_link_in .6s var(--ease_out) both; }
  .nav_mobile:not([hidden]) .nav_mobile_link:nth-child(2) { animation-delay: 60ms; }
  .nav_mobile:not([hidden]) .nav_mobile_link:nth-child(3) { animation-delay: 120ms; }
}

/* ---------- 13. Наклон карточки маршрута за курсором ---------- */
.route_card.is_tilting {
  transform: perspective(1100px) rotate(1.5deg) rotateX(var(--tilt_x, 0deg)) rotateY(var(--tilt_y, 0deg));
  transition: transform .8s var(--ease_out);
}
.route_card.is_tilting .route_card_shine {
  background: radial-gradient(420px circle at var(--shine_x, 0%) var(--shine_y, 0%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
}

/* Системная настройка «уменьшить движение» — гасим всё переходное */
@media (prefers-reduced-motion: reduce) {
  .btn_pill_icon svg,
  .speaker_photo,
  .speaker_photo_img,
  .burger_line { transition: none; }
  .countdown_value.is_tick { animation: none; }
}