/* Шапка страницы переводов /translations (03.10.2026)
   Витрина перевода справа, слева — новинка, заголовок, «почему наш перевод», два способа купить и «Смотреть все переводы».
   Движение — только transform/opacity. Кнопка «Смотреть все переводы» берёт стили «Смотреть сборки» с главной
   (.kenny-hero-packs в kenny-fx.css) — здесь только поправки. */

.tr-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px 32px 96px;
  overflow: hidden;
  background: #0d0d0d;
}
/* Фон подсвечивается обложкой сборки, которая сейчас в витрине */
.tr-hero-glow {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  filter: blur(56px) saturate(1.35);
  opacity: 0.24;
  pointer-events: none;
  animation: tr-glow 1.1s var(--kfx-ease) both;
}
.tr-hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13, 13, 13, 0.9) 0%, rgba(13, 13, 13, 0.55) 55%, rgba(13, 13, 13, 0.4) 100%),
    linear-gradient(0deg, #0E0E0E 0%, rgba(14, 14, 14, 0) 28%);
}
.tr-hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  grid-template-areas: 'head spot' 'sell spot';
  column-gap: 64px;
  row-gap: 26px;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.tr-head { grid-area: head; align-self: end; min-width: 0; }
.tr-sell { grid-area: sell; align-self: start; min-width: 0; }
.tr-spot { grid-area: spot; }

/* Новинка над заголовком */
.tr-new {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 5px 14px 5px 5px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font: 400 13px/1.3 var(--font-sans);
  background: rgba(14, 14, 14, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 0.2s var(--kfx-ease);
}
a.tr-new:hover { transform: translateY(-2px); }
.tr-new b { flex: 0 0 auto; padding: 5px 8px; font: 400 11px/1 var(--font-pixel); color: #0E0E0E; background: #6CE07E; box-shadow: inset 0 -2px 0 #2E8A3E; }
.tr-new span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-new em { font-style: normal; color: #fff; }

.tr-h1 { margin: 0 0 14px; font: 400 clamp(44px, min(4.6vw, 7.2vh), 68px)/1.05 MinecraftFont, var(--font-heading); color: #fff; }
.tr-h1 span { color: #FE5E10; font-family: inherit; }
.tr-lead { max-width: 540px; margin: 0; font: 400 16px/1.65 var(--font-sans); color: rgba(255, 255, 255, 0.72); }

/* Почему наш перевод */
.tr-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; max-width: 580px; margin: 0 0 18px; padding: 0; list-style: none; }
.tr-perks li { display: flex; align-items: flex-start; gap: 10px; font: 400 14px/1.4 var(--font-sans); color: rgba(255, 255, 255, 0.84); }
.tr-perks li .kfx-pix { margin-top: 1px; }

/* Два способа купить */
.tr-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 580px; margin-bottom: 14px; }
.tr-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px 16px 16px;
  color: #fff;
  text-align: left;
  font: inherit;
  border: 0;
  background: rgba(14, 14, 14, 0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -4px 0 rgba(0, 0, 0, 0.5);
}
.tr-offer small { font: 400 12px/1 var(--font-pixel); color: rgba(255, 255, 255, 0.55); }
.tr-offer b { font: 400 26px/1.1 var(--font-pixel); color: #fff; }
.tr-offer b em { font-size: 14px; font-style: normal; color: rgba(255, 255, 255, 0.6); }
.tr-offer span { font: 400 12.5px/1.4 var(--font-sans); color: rgba(255, 255, 255, 0.6); }
.tr-offer.gold { cursor: pointer; transition: transform 0.2s var(--kfx-ease); }
/* золотая рамка при наведении — отдельным слоем через opacity */
.tr-offer.gold::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.45);
  transition: opacity 0.2s var(--kfx-ease);
}
.tr-offer.gold::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 210, 63, 0.08);
  box-shadow: inset 0 0 0 2px #FFD23F;
  opacity: 0;
  transition: opacity 0.2s var(--kfx-ease);
}
.tr-offer.gold:hover { transform: translateY(-2px); }
.tr-offer.gold:hover::after, .tr-offer.gold:focus-visible::after { opacity: 1; }
.tr-offer.gold:focus-visible { outline: none; }
.tr-offer.gold img { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; image-rendering: pixelated; }
.tr-offer.gold i { margin-top: 4px; font: 400 12px/1 var(--font-pixel); font-style: normal; color: #FFD23F; }

/* «Смотреть все переводы» — как «Смотреть сборки» на главной, обложки 16:9 */
.tr-sell .kenny-hero-packs-wrap { max-width: 580px; }
.tr-all .khp-logo { width: 50px; height: 30px; }
.tr-all .khp-logo + .khp-logo { margin-left: -14px; }
.tr-all .khp-arrow { transition: transform 0.2s var(--kfx-ease); }
.kenny-hero-packs.tr-all:hover .khp-arrow { transform: translateY(3px); }

/* Витрина */
.tr-spot { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tr-spot-card { overflow: hidden; background: rgba(14, 14, 14, 0.92); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.55); }
.tr-spot-skel { aspect-ratio: 540 / 560; background: rgba(255, 255, 255, 0.04); }
.tr-spot-media { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; background: #0a0a0a; }
.tr-spot-media img { display: block; width: 100%; height: 100%; object-fit: cover; animation: tr-fade 0.6s var(--kfx-ease) both; transition: transform 0.6s var(--kfx-ease); }
.tr-spot-media:hover img { transform: scale(1.04); }
.tr-spot-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.tr-spot-badges b { padding: 5px 9px; font: 400 11px/1 var(--font-pixel); color: #fff; background: #FE5E10; box-shadow: inset 0 -2px 0 #9B430E; }
.tr-spot-badges b.new { color: #0E0E0E; background: #6CE07E; box-shadow: inset 0 -2px 0 #2E8A3E; }
.tr-spot-badges b.age { font: 700 12px/1 var(--font-sans); background: rgba(0,0,0,0.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); }
.tr-spot-ver { position: absolute; right: 12px; bottom: 12px; padding: 5px 8px; font: 400 11px/1 var(--font-pixel); color: #fff; background: rgba(0, 0, 0, 0.62); }
.tr-spot-body { padding: 16px 20px 18px; animation: tr-fade 0.5s var(--kfx-ease) both; }
.tr-spot-body h3 { margin: 0 0 8px; font: 400 21px/1.15 var(--font-pixel); color: #fff; }
.tr-spot-body h3 a { color: inherit; text-decoration: none; transition: color 0.15s; }
.tr-spot-body h3 a:hover { color: #FE5E10; }
.tr-spot-desc { display: -webkit-box; margin: 0 0 12px; overflow: hidden; font: 400 13.5px/1.55 var(--font-sans); color: rgba(255, 255, 255, 0.62); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tr-cov { display: grid; gap: 6px; margin-bottom: 14px; }
.tr-cov-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) 38px; align-items: center; gap: 10px; font: 400 12.5px/1.2 var(--font-sans); color: rgba(255, 255, 255, 0.7); }
.tr-cov-row i { display: block; height: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.tr-cov-row em { display: block; height: 100%; background: #6CE07E; transform-origin: 0 50%; transform: scaleX(var(--v, 1)); animation: tr-grow 0.9s var(--kfx-ease) 0.15s both; }
.tr-cov-row b { font: 400 12px/1 var(--font-pixel); color: #8DEB9B; text-align: right; }
.tr-spot-buy { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tr-spot-price { display: flex; flex-direction: column; gap: 5px; margin-right: auto; }
.tr-spot-price b { font: 400 24px/1 var(--font-pixel); color: #fff; }
.tr-spot-price span { font: 400 12px/1.2 var(--font-sans); color: rgba(255, 255, 255, 0.55); }
/* Одна главная кнопка витрины — «Подробнее» (страница перевода, там уже покупка) */
.tr-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px 4px;
  white-space: nowrap;
  font: 400 15px/1 var(--font-pixel);
  color: #fff;
  text-decoration: none;
  background: #FE5E10;
  box-shadow: inset 0 -4px 0 #9B430E;
  transition: transform 0.15s var(--kfx-ease);
}
.tr-btn-main svg { transition: transform 0.2s var(--kfx-ease); }
.tr-btn-main:hover { transform: translateY(-2px); }
.tr-btn-main:hover svg { transform: translateX(3px); }
.tr-btn-main:active { transform: translateY(1px); }

/* Переключатель популярных переводов */
.tr-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tr-thumb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: 400 11.5px/1.25 var(--font-sans);
  color: rgba(255, 255, 255, 0.6);
  background: none;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s var(--kfx-ease);
}
.tr-thumb img, .tr-thumb-ph { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1a1a1a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.tr-thumb > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-thumb:hover { opacity: 0.9; transform: translateY(-2px); }
.tr-thumb.on { opacity: 1; color: #fff; }
.tr-thumb.on img { box-shadow: 0 0 0 2px #FE5E10; }
.tr-thumb-bar { display: block; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.tr-thumb-bar em { display: block; height: 100%; background: #FE5E10; transform-origin: 0 50%; animation: tr-prog 7s linear both; }
.tr-spot:hover .tr-thumb-bar em { animation-play-state: paused; }

.tr-suggest { display: inline-flex; align-items: center; align-self: center; gap: 8px; font: 400 13px/1.3 var(--font-sans); color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.tr-suggest u { text-decoration: none; color: #4FB6EC; }
.tr-suggest:hover u { text-decoration: underline; }

@keyframes tr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-glow { from { opacity: 0; } to { opacity: 0.24; } }
@keyframes tr-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tr-grow { from { transform: scaleX(0); } to { transform: scaleX(var(--v, 1)); } }

/* невысокие экраны ноутбуков: всё главное — на первом экране */
@media (min-width: 1181px) and (max-height: 820px) {
  .tr-hero { padding-top: 88px; padding-bottom: 72px; }
  .tr-new { margin-bottom: 14px; }
  .tr-lead { font-size: 15px; line-height: 1.6; }
  .tr-hero-in { row-gap: 20px; }
  .tr-offer { padding: 12px 14px 13px; }
  .tr-offer b { font-size: 23px; }
  .tr-spot-media { aspect-ratio: 21 / 9; }
  .tr-hero .hero-scroll { display: none; }
}
@media (max-width: 1180px) {
  .tr-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'spot' 'sell'; row-gap: 32px; max-width: 640px; }
  .tr-head { align-self: auto; }
  .tr-hero .hero-scroll { display: none; }
  .tr-hero { padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .tr-hero { padding: 92px 16px 56px; }
  .tr-perks, .tr-offers { grid-template-columns: 1fr; }
  .tr-cov-row { grid-template-columns: minmax(0, 1fr) 64px 34px; }
  .tr-cov-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tr-spot-body { padding: 16px; }
  .tr-spot-buy { flex-wrap: wrap; }
  .tr-spot-price { width: 100%; margin-right: 0; }
  .tr-btn-main { flex: 1 1 auto; }
  .tr-thumb > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-thumb-bar em { animation: none; transform: scaleX(0); }
  .tr-spot-media img, .tr-spot-body, .tr-hero-glow, .tr-cov-row em { animation: none; }
}