@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

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

body{
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  background: #0084FF !important;
}

/* ========== Фоновый слой ========== */
.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{ padding: 30px 40px 20px; position: relative; z-index: 10; }
.main-header h1{ font-size: 2.2rem; font-weight: 700; color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }

.info-row{ display:flex; gap:60px; padding: 0 40px 20px; position:relative; z-index:10; }
.info-block{ font-size:0.75rem; color: rgba(255,255,255,0.7); line-height:1.5; max-width:250px; }

.content-container{ padding:20px 40px 40px; position:relative; z-index:10; }

.strategy-number{ display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.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:6px;
  font-size:1.1rem; font-weight:700;
}
.strategy-number .label{
  font-size:0.7rem;
  color: rgba(255,255,255,0.8);
  line-height:1.3;
  text-transform: uppercase;
  letter-spacing:0.5px;
}

.strategy-title{ font-size:1.8rem; font-weight:600; margin-bottom:30px; color:#fff; }

.chart-container{
  position:relative;
  margin-bottom:30px;
  padding:20px 0;
  height:420px;
  /* КРИТИЧНО: чтобы эффекты круга не обрезались */
  overflow: visible;
}

.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;
  transition: all .3s ease;
}
.line-btn:hover{ transform: scaleX(1.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:7;
  opacity:0.82;
  cursor:pointer;
  pointer-events: stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .6s ease, stroke-width .6s ease, opacity .6s ease, filter .6s ease;
}

.chart-path.hovered{ stroke-width:6; opacity:1; }

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

.path-points{ transition: opacity .6s ease; opacity:0.9; }
.path-points.hovered{ opacity:1; }

/* =========================
   END CIRCLE — эффекты (постоянные + импакт при pulse)
   ========================= */
.end-circle-container{
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
  width:418px;
  height:418px;
  z-index:2;
  pointer-events:none;
  isolation:isolate;
}

/* Ваш svg над эффектами */
.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 2.8s ease-in-out infinite;
}

/* Спаны эффектов (важно: absolute + inset, иначе "не видно") */
.end-circle-container > span{
  position:absolute;
  inset:-26px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;
  mix-blend-mode: screen;
}

/* 1) Кольцо-сканер (у вас это работает) */
.ring-sweep{
  inset:-10px;
  background:
    conic-gradient(from 90deg,
      rgba(255,255,255,0) 0%,
      rgba(180,230,255,0) 20%,
      rgba(190,240,255,0.55) 32%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); /* кольцо */
          mask: radial-gradient(closest-side, transparent 72%, #000 74%);
  filter: blur(0.6px);
  opacity: .75;
  animation: ringSweep 2.6s linear infinite;
}
.ring-wrap{
  position: relative;
  width: 320px;          /* или 100% */
  height: 320px;         /* или aspect-ratio */
  overflow: hidden;
  border-radius: 50%;    /* если круг */
}

.ring-sweep{
  position:absolute;
  inset:0;               /* было -10px */
  border-radius:50%;
}
.ring-wrap{ overflow:hidden; border-radius:50%; }
.parent-of-ring {
  position: relative;
}

/* 2) Мягкий окружающий halo (всегда) */
.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 3.4s ease-in-out infinite;
  z-index:1;
}

/* 3) Импакт-вспышка (только когда прилёт) */
.impact-burst{
  inset:-78px;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--impact-color) 55%, transparent) 0%,
      color-mix(in srgb, var(--impact-color) 35%, transparent) 25%,
      color-mix(in srgb, var(--impact-color) 18%, transparent) 40%,
      rgba(0,0,0,0) 70%
    );
  filter: blur(10px);
  opacity:0;
  transform: scale(.92);
  z-index:3;}

/* 4) Поле искр (всегда, очень мягко) */
.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 6s ease-in-out infinite;
  z-index:2;
}

/* pulse — включаем импакт и усиливаем halo */
.end-circle-container.pulse .impact-burst{
  animation: impactPop .34s ease-out 1;
}

.end-circle-container.pulse .halo-ambient{
  animation: haloHit .34s ease-out 1;
}

/* чуть сильнее "дыхание" картинки во время pulse */
.end-circle-container.pulse img{
  animation: orleuCircleHit .34s ease-out 1;
}

@keyframes ringSweep{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@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.08); opacity:1; }
  100% { transform: scale(1.03); opacity:.92; }
}

@keyframes impactPop{
  0%   { opacity:0;   transform: scale(.90); }
  30%  { opacity:1;   transform: scale(1.05); }
  100% { opacity:0;   transform: scale(1.18); }
}

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

@keyframes orleuCircleBreath{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.012); }
}
@keyframes orleuCircleHit{
  0%   { transform: scale(1); }
  60%  { transform: scale(1.028); }
  100% { transform: scale(1.010); }
}

@media (prefers-reduced-motion: reduce){
  .end-circle-container img,
  .end-circle-container > span{ animation:none !important; }
}

/* ========== Годы ========== */
.years-row{
  position:absolute;
  bottom:-10px;
  left:60px;
  right:420px;
  display:flex;
  justify-content:space-between;
  padding:0 10px;
}
.year{ font-size:1.8rem; font-weight:700; color: rgba(255,255,255,0.9); }


.end-circle-container,
.end-circle-container > span,
.end-circle-container img{
  will-change: transform;
}


.chart-container{
  overflow-x: clip;
  overflow-y: visible;
}

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

.end-circle-container{
  right: 0;
  max-width: 100%;
}