/*
 * Интерактивная схема «Стратегия развития до 2029 года» — общие стили для
 * /embed/strategy/{ru,kk,en}/. Тексты — в <lang>/data.js, логика — scheme.js.
 *
 * Схему встраивают iframe на главной и на /strategy. Шрифт — Inter, как у
 * сайта. Ширина содержимого как у .container сайта (1200px, поля 24px).
 * Анимации медленные и мягкие; при prefers-reduced-motion — статично.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  background: #0084FF !important;
  -webkit-font-smoothing: antialiased;
}

/* Отдельно открытая страница схемы — на весь экран; во фрейме высоту задаёт содержимое. */
html:not(.in-frame) body{ min-height: 100vh; }

/* ========== Фоновый слой ========== */
.background-layer{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bg-bottom-gradient{
  position:absolute;
  width:100%;
  height:156%;
  left:0;
  top:-31%;
  background: linear-gradient(180deg, rgba(0,122,255,0) 45.79%, rgba(0,122,255,0.8) 100%);
  opacity:0.3;
}

.bg-side-blur{
  position:absolute;
  width:20%;
  height:200%;
  left:-5%;
  top:65%;
  background: rgba(0,114,248,0.3);
  filter: blur(250px);
  border-radius: 900px;
  transform: rotate(90deg);
}

.bg-grid{
  position:absolute;
  width:95%;
  height:85%;
  left:3%;
  top:8%;
  filter: blur(2px);
  opacity:0.5;
}

.grid-row{
  display:flex;
  justify-content:space-between;
  height:25%;
  align-items:flex-start;
}

.grid-cross{ position:relative; width:37px; height:37px; }
.grid-cross::before, .grid-cross::after{
  content:'';
  position:absolute;
  background: rgba(255,255,255,0.12);
  border-radius: 20px;
}
.grid-cross::before{ width:16px; height:2px; left:50%; top:50%; transform: translate(-50%,-50%); }
.grid-cross::after{ width:2px; height:16px; left:50%; top:50%; transform: translate(-50%,-50%); }

/* ========== Фоны для линий ========== */
.bg-default{ opacity:1; transition: opacity 1s ease; }
.bg-line-1, .bg-line-2, .bg-line-3, .bg-line-4{ opacity:0; transition: opacity 1s ease; }

body.line-1-active .bg-default{ opacity:0; } body.line-1-active .bg-line-1{ opacity:1; }
body.line-2-active .bg-default{ opacity:0; } body.line-2-active .bg-line-2{ opacity:1; }
body.line-3-active .bg-default{ opacity:0; } body.line-3-active .bg-line-3{ opacity:1; }
body.line-4-active .bg-default{ opacity:0; } body.line-4-active .bg-line-4{ opacity:1; }

.line1-color{ background:#FF6B00 !important; }
.line1-glow{ background:#FFB366 !important; opacity:0.8; }
.line1-bottom{ background: linear-gradient(180deg, rgba(255,150,45,0) 45.79%, rgba(255,150,45,0.6) 100%) !important; }
.line1-side{ background: rgba(255,150,45,0.3) !important; }

.line2-color{ background:#007BAF !important; }
.line2-glow{ background:#BEE7F9 !important; opacity:0.8; }
.line2-bottom{ background: linear-gradient(180deg, rgba(0,122,255,0) 45.79%, rgba(0,122,255,0.8) 100%) !important; }
.line2-side{ background: rgba(0,114,248,0.3) !important; }

.line3-color{ background:#7B00AF !important; }
.line3-glow{ background:#E7BEF9 !important; opacity:0.8; }
.line3-bottom{ background: linear-gradient(180deg, rgba(185,64,255,0) 45.79%, rgba(185,64,255,0.8) 100%) !important; }
.line3-side{ background: rgba(185,64,255,0.3) !important; }

.line4-color{ background:#7BAF00 !important; }
.line4-glow{ background:#E7F9BE !important; opacity:0.8; }
.line4-bottom{ background: linear-gradient(180deg, rgba(195,244,103,0) 45.79%, rgba(195,244,103,0.8) 100%) !important; }
.line4-side{ background: rgba(195,244,103,0.3) !important; }


/* ========== Layout ========== */
.main-header,
.info-row,
.content-container{
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.main-header{ padding-top: 40px; padding-bottom: 12px; }
.main-header h1,
.main-header h2{
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 60rem;
  text-wrap: balance;
}

.info-row{ display:flex; flex-wrap: wrap; gap: 8px 48px; padding-bottom: 28px; }
.info-block{ font-size: 0.875rem; color: rgba(255,255,255,0.78); line-height: 1.5; max-width: 420px; }

.content-container{ padding-bottom: 48px; }

/* ========== Переключатели направлений ========== */
.dir-tabs{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.dir-tab{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.dir-tab:hover{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); }

.dir-tab:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

.dir-tab[aria-selected="true"]{
  background: #fff;
  border-color: #fff;
  color: #0a3f7a;
  box-shadow: 0 10px 30px rgba(0, 40, 110, 0.25);
}

.dir-tab__num{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--line-color);
  color: #102033;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dir-tab__title{ padding-top: 4px; }

/* Полоска автопереключения: сколько осталось до следующего направления. */
.dir-tab__progress{
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--line-color);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

.dir-tabs.is-auto .dir-tab[aria-selected="true"] .dir-tab__progress{
  opacity: 1;
  animation: tabProgress var(--auto-ms, 9000ms) linear forwards;
}

.dir-tabs.is-paused .dir-tab__progress{ animation-play-state: paused !important; }

@keyframes tabProgress{ from { transform: scaleX(0); } to { transform: scaleX(1); } }

.dir-tab[data-line="1"]{ --line-color:#FF962D; }
.dir-tab[data-line="2"]{ --line-color:#2BAEFF; }
.dir-tab[data-line="3"]{ --line-color:#B940FF; }
.dir-tab[data-line="4"]{ --line-color:#C3F467; }

/* ========== Выбранное направление ========== */
.strategy-number{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.strategy-number .number{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
  border-radius:8px;
  font-size:1.05rem; font-weight:800;
}
.strategy-number .label{
  font-size:0.75rem;
  font-weight:600;
  color: rgba(255,255,255,0.85);
  line-height:1.3;
  text-transform: uppercase;
  letter-spacing:0.06em;
}

.strategy-title{
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
  margin-bottom:24px;
  color:#fff;
}

/* Мягкая смена направления: заголовок и задачи гаснут и проявляются. */
.swap{ transition: opacity .45s ease, transform .45s ease; }
.swap.is-leaving{ opacity: 0; transform: translateY(6px); }

/* ========== График ========== */
.chart-container{
  position:relative;
  margin-bottom:30px;
  padding:20px 0;
  height:420px;
  overflow-x: clip;
  overflow-y: visible;
}

@supports not (overflow: clip){
  .chart-container{ overflow-x:hidden; }
}

.line-buttons{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:10px; gap:22px;
  position:absolute; left:0; top:50%;
  transform: translateY(-50%);
  z-index:10;
}

.line-btn{
  width:29px; height:8px;
  border:none;
  border-radius:20px;
  cursor:pointer;
  opacity: .8;
  transition: opacity .4s ease, transform .4s ease, box-shadow .4s ease;
}
.line-btn:hover{ transform: scaleX(1.1); opacity: 1; }
.line-btn.active{ opacity: 1; }

.line-btn[data-line="1"]{ background:#FF962D; }
.line-btn[data-line="2"]{ background:#2BAEFF; }
.line-btn[data-line="3"]{ background:#B940FF; }
.line-btn[data-line="4"]{ background:#C3F467; }

.line-btn[data-line="1"].active{ box-shadow: 0 0 10px rgba(255,150,45,0.9); }
.line-btn[data-line="2"].active{ box-shadow: 0 0 10px rgba(43,174,255,0.9); }
.line-btn[data-line="3"].active{ box-shadow: 0 0 10px rgba(185,64,255,0.9); }
.line-btn[data-line="4"].active{ box-shadow: 0 0 10px rgba(195,244,103,0.9); }

.chart-svg{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; }

/* Линии: выбранная — в цвет направления, остальные приглушены. */
.chart-path{
  stroke:#FFFFFF !important;
  stroke-width:6;
  opacity:.45;
  cursor:pointer;
  pointer-events: stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .8s ease, opacity .8s ease, filter .8s ease;
}

.chart-path.hovered{ opacity:.8; }
.chart-path.active{ opacity:1; }

.chart-path[data-path="1"].active{ stroke:#FF962D !important; filter: drop-shadow(0 0 8px rgba(255,150,45,0.8)); }
.chart-path[data-path="2"].active{ stroke:#2BAEFF !important; filter: drop-shadow(0 0 8px rgba(43,174,255,0.8)); }
.chart-path[data-path="3"].active{ stroke:#B940FF !important; filter: drop-shadow(0 0 8px rgba(185,64,255,0.8)); }
.chart-path[data-path="4"].active{ stroke:#C3F467 !important; filter: drop-shadow(0 0 8px rgba(195,244,103,0.8)); }

.path-points{ pointer-events: none; transition: opacity .8s ease; opacity:.5; }
.path-points.active{ opacity:1; }

/* ========== Круг «Өрлеу» в конце линий ========== */
.end-circle-container{
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
  width:418px;
  height:418px;
  max-width:100%;
  z-index:2;
  pointer-events:none;
  isolation:isolate;
}

.end-circle-container img{
  position:relative;
  z-index:6;
  display:block;
  width:100%;
  height:100%;
  filter:
    drop-shadow(0 0 14px rgba(140, 210, 255, 0.55))
    drop-shadow(0 0 34px rgba(100, 170, 255, 0.30));
  animation: orleuCircleBreath 6s ease-in-out infinite;
}

.end-circle-container > span{
  position:absolute;
  inset:-26px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;
  mix-blend-mode: screen;
}

.halo-ambient{
  inset:-58px;
  background: radial-gradient(
    closest-side,
    rgba(140,210,255,.22) 0%,
    rgba(90,160,255,.14) 35%,
    rgba(90,160,255,.06) 55%,
    rgba(0,0,0,0) 75%
  );
  filter: blur(16px);
  opacity:.85;
  animation: haloBreath 7s ease-in-out infinite;
  z-index:1;
}

.impact-burst{
  inset:-78px;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--impact-color) 45%, transparent) 0%,
      color-mix(in srgb, var(--impact-color) 28%, transparent) 25%,
      color-mix(in srgb, var(--impact-color) 14%, transparent) 40%,
      rgba(0,0,0,0) 70%
    );
  filter: blur(12px);
  opacity:0;
  transform: scale(.92);
  z-index:3;
}

.spark-field{
  inset:-95px;
  background:
    radial-gradient(circle at 22% 35%, rgba(255,255,255,.18) 0 2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 66% 22%, rgba(170,230,255,.16) 0 2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 78% 62%, rgba(140,210,255,.14) 0 2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 35% 78%, rgba(190,240,255,.12) 0 2px, rgba(255,255,255,0) 3px);
  filter: blur(.2px);
  opacity:.55;
  animation: sparkDrift 12s ease-in-out infinite;
  z-index:2;
}

/* Мягкая вспышка, когда точка доходит до круга. */
.end-circle-container.pulse .impact-burst{ animation: impactPop 1.1s ease-out 1; }
.end-circle-container.pulse .halo-ambient{ animation: haloHit 1.1s ease-out 1; }

@keyframes haloBreath{
  0%,100% { transform: scale(.98); opacity:.75; }
  50%     { transform: scale(1.03); opacity:.95; }
}

@keyframes haloHit{
  0%   { transform: scale(.98); opacity:.85; }
  60%  { transform: scale(1.05); opacity:1; }
  100% { transform: scale(1.02); opacity:.9; }
}

@keyframes impactPop{
  0%   { opacity:0;   transform: scale(.94); }
  35%  { opacity:.8;  transform: scale(1.02); }
  100% { opacity:0;   transform: scale(1.1); }
}

@keyframes sparkDrift{
  0%,100% { transform: translate3d(0,0,0); opacity:.45; }
  50%     { transform: translate3d(4px,-3px,0); opacity:.6; }
}

@keyframes orleuCircleBreath{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.01); }
}

/* ========== Годы ========== */
.years-row{
  position:absolute;
  bottom:-10px;
  left:60px;
  right:420px;
  display:flex;
  justify-content:space-between;
  padding:0 10px;
}
.year{ font-size:1.75rem; font-weight:800; letter-spacing:-0.01em; color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; }

/* ========== Задачи направления ========== */
.tasks-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  margin-top:28px;
  position:relative;
  z-index:5;
  align-content: start;
}
.tasks-grid .task-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color:#fff;
  font-weight:700;
  font-size:12.5px;
  letter-spacing: .02em;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:10px;
  white-space:nowrap;
}
.tasks-grid .task-title{
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  margin:0 0 10px 0;
}
.tasks-grid .task-text{
  color:rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.5;
}
.tasks-grid .task-text ul{ margin:0; padding-left:18px; }
.tasks-grid .task-text li{ margin:0 0 6px 0; }

/* ========== Адаптив ========== */
@media (max-width:1100px){
  .dir-tabs,
  .tasks-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Уже 760px линии не помещаются: график скрыт, остаются переключатели и задачи. */
@media (max-width:759px){
  .chart-container{ display:none; }
  .main-header{ padding-top: 28px; }
  .content-container{ padding-bottom: 32px; }
  .dir-tabs{ grid-template-columns: 1fr; gap: 8px; margin-bottom: 24px; }
  .dir-tab{ min-height: 0; padding: 12px 14px; align-items: center; }
  .dir-tab__title{ padding-top: 0; }
  .tasks-grid{ grid-template-columns:1fr; gap: 20px; margin-top: 0; }
}

@media (max-width:480px){
  .main-header,
  .info-row,
  .content-container{ padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .end-circle-container img,
  .end-circle-container > span{ animation:none !important; }
  .swap,
  .chart-path,
  .path-points,
  .dir-tab,
  .bg-default, .bg-line-1, .bg-line-2, .bg-line-3, .bg-line-4{ transition:none !important; }
  .dir-tab__progress{ display:none; }
}