/* ============================================================
   Driftpedia: движение и акценты.
   Всё на нативном CSS (scroll-driven animations + view transitions):
   анимации идут на композиторе, не грузят основной поток.
   Любое движение выключается при prefers-reduced-motion.
   ============================================================ */

/* --- 4. Плавные переходы между страницами (MPA View Transitions) --- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .26s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* карточка серии «разворачивается» в страницу: общее имя у карточки и заголовка */
.dpcard { view-transition-class: card; }

/* --- 6a. Карточки: наклон под курсором + подсветка от него --- */
.dpgrid { perspective: 900px; }

.dpcard {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* блик, едущий за курсором (координаты пишет JS в --mx/--my) */
.dpcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.dpcard:hover::before { opacity: 1; }
.dpcard:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* сам наклон — на дочернем слое, чтобы блик не «плавал» */
.dpcard.tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }

/* --- 5. Числа, которые набегают --- */
.count {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* --- 9. Живая шапка раздела --- */
.dp-hero {
  position: relative;
  margin: -6px 0 18px;
  padding: 22px 24px 20px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(900px 300px at 15% -40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--frame);
}
/* дымные разводы позади заголовка — медленные, дешёвые (только transform/opacity) */
.dp-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.05), transparent 70%) 20% 40%/45% 60% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.04), transparent 70%) 70% 55%/40% 55% no-repeat;
  animation: hero-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.08); }
}
.dp-hero h1 { margin: 0 0 6px; position: relative; }
.dp-hero .lead { margin: 0; max-width: 62ch; position: relative; }

.dp-stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 16px;
}
.dp-stat { display: flex; flex-direction: column; line-height: 1.15; }
.dp-stat .count { font-size: 26px; color: var(--accent2); }
.dp-stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* --- 6b. Каскадное появление строк таблиц и карточек при скролле --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dpgrid > .dpcard,
    table.dp tbody tr,
    table.dp tr {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 26%;
    }
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- 3. След от покрышек вместо полосы прокрутки --- */
#tiretrack {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 100vh;
  z-index: 900;
  pointer-events: none;
  opacity: .65;
}
#tiretrack path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    #tiretrack path {
      animation: draw-track linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes draw-track { to { stroke-dashoffset: 0; } }
/* след рисуем только когда слева реально есть поле: на 1000 px колонка текста
   доходит почти до края и полоса ложилась поверх строк */
@media (max-width: 1180px) { #tiretrack { display: none; } }

/* --- 1. «Гонка чемпионата» (bump chart) --- */
.bump { position: relative; margin: 6px 0 18px; }
.bump svg { width: 100%; height: auto; display: block; overflow: visible; }
.bump .bp-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .55;
  transition: opacity .15s ease, stroke-width .15s ease;
}
.bump .bp-dot { transition: r .15s ease, opacity .15s ease; opacity: .75; }
.bump .bp-label { font-size: 11px; fill: var(--muted); transition: fill .15s ease; }
.bump .bp-axis { font-size: 11px; fill: var(--muted); }
.bump .bp-grid { stroke: var(--border); stroke-width: 1; }
/* подсветка: наводим на пилота — остальные гаснут */
.bump.focused .bp-g { opacity: .18; }
.bump.focused .bp-g.on { opacity: 1; }
.bump .bp-g.on .bp-line { opacity: 1; stroke-width: 4; }
.bump .bp-g.on .bp-label { fill: var(--text); font-weight: 700; }
.bump .bp-g { cursor: pointer; transition: opacity .15s ease; }
/* линии прочерчиваются при появлении блока */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bump .bp-line {
      stroke-dasharray: var(--l) var(--l);
      stroke-dashoffset: var(--l);
      animation: draw-line linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
  }
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.bump-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; }
.bump-legend b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--muted); cursor: pointer; }
.bump-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.bump-legend b:hover { color: var(--text); }
/* на телефоне 900-юнитный график ужимался до 375 px и подписи становились
   нечитаемыми — даём прокрутку и держим минимальную ширину */
@media (max-width: 700px) {
  .bump { overflow-x: auto; scrollbar-width: thin; }
  .bump svg { min-width: 700px; }
  .bump .bp-label { font-size: 13px; }
  .bump .bp-axis { font-size: 13px; }
  .bump-legend { position: sticky; left: 0; }
}

/* --- 2. Турнирная сетка Top-32 --- */
.bracket { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 12px; }
.br-round { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 190px; }
.br-round h4 {
  margin: 0 0 2px; font-size: 11px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.br-pair {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
  background: var(--panel2); font-size: 13px;
  transition: border-color .15s ease, transform .15s ease;
}
.br-pair:hover { border-color: var(--accent); transform: translateX(2px); }
.br-slot { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.br-slot.win { color: var(--text); font-weight: 700; }
.br-slot.win::after { content: "▸"; color: var(--accent); }
/* путь чемпиона подсвечивается при наведении на его имя */
.bracket.trace .br-pair { opacity: .35; }
.bracket.trace .br-pair.on { opacity: 1; border-color: var(--accent); }

/* --- 7. Как дрифт расползался по стране --- */
.spreadmap { position: relative; }
.spreadmap svg { width: 100%; height: auto; }
.sm-dot { transition: opacity .4s ease, transform .4s ease; transform-box: fill-box; transform-origin: center; }
.sm-dot.off { opacity: 0; transform: scale(.2); }
.sm-pulse { animation: sm-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sm-pulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
.sm-year { font-size: 40px; font-weight: 900; fill: color-mix(in srgb, var(--accent) 75%, transparent); }
.sm-ctrl { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; flex-wrap: wrap; }
.sm-ctrl input[type=range] { flex: 1; min-width: 180px; height: 28px; accent-color: var(--accent); }

/* --- 8. Дуэль пилотов --- */
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 16px; align-items: center; margin: 10px 0 18px; }
.duel select {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit;
}
.duel-vs { font-weight: 900; color: var(--accent); font-size: 18px; }
.duel-row { display: contents; }
.duel-bar { position: relative; height: 26px; background: var(--panel2); border-radius: 6px; overflow: hidden; }
.duel-bar i {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  width: 0; transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.duel-bar.right i { right: 0; background: color-mix(in srgb, #4da3ff 55%, transparent); }
.duel-bar span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 8px; font-size: 13px; font-weight: 700; }
.duel-bar.right span { justify-content: flex-end; }
.duel-label { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* --- общее: уважаем настройку «меньше движения» --- */
@media (prefers-reduced-motion: reduce) {
  .dp-hero::after, .sm-pulse { animation: none; }
  .dpcard, .br-pair, .duel-bar i { transition: none; }
  #tiretrack { display: none; }
}