/* ============================================================
   Akdeniz — трос-глубиномер: сквозной элемент по правому краю.
   Кабель и шкала — один предмет: размеченный трос лебёдки.
   ============================================================ */

:root{ --rail-x:44px; }

.rail{
  position:fixed; top:0; bottom:0; right:0; z-index:40;
  width:calc(var(--rail-x) + 30px);
  pointer-events:none;
}
.js .rail{ opacity:0; transition:opacity .6s var(--ease-out); }
.js .rail.awake{ opacity:1; }

/* ---------- трос ---------- */
.cable{ position:absolute; top:0; left:24px; width:40px; height:100%; fill:none; }
.cable__wire{ stroke:rgba(143,178,198,.45); stroke-width:2.5; }
.cable__ticks{                       /* метры */
  stroke:rgba(143,178,198,.6); stroke-width:7; stroke-linecap:butt;
  stroke-dasharray:1.5 58.5;
}
.cable__ticks--big{                  /* десятки */
  stroke:rgba(53,224,200,.5); stroke-width:13; stroke-dasharray:2 298;
}
.cable__pulse{
  stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(53,224,200,.9));
  opacity:0;
}
.cable__pulse.fire{ animation:rail-pulse 1s var(--ease-out); }
@keyframes rail-pulse{
  0%   { opacity:1; stroke-dasharray:0 60 110 4000; stroke-dashoffset:0; }
  100% { opacity:1; stroke-dasharray:0 60 110 4000; stroke-dashoffset:calc(-1 * var(--len,1200)); }
}

/* ---------- разъёмы секций ---------- */
.plug{
  position:absolute; width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; border:1.5px solid rgba(143,178,198,.45);
  background:var(--deep);
  transition:.35s var(--ease-out);
}
.plug.on{
  border-color:var(--accent); background:var(--accent);
  box-shadow:0 0 14px rgba(53,224,200,.9);
}

/* ---------- каретка глубины ---------- */
.depth__cursor{
  position:absolute; left:0; top:0;
  transform:translate(-100%,-50%); margin-left:-14px;
  display:flex; align-items:baseline;
  padding:5px 11px; border-radius:100px;
  background:var(--accent); color:#03202b;
  font-size:13px; font-weight:700; letter-spacing:-.02em; white-space:nowrap;
  box-shadow:0 6px 20px -6px rgba(53,224,200,.7);
}
.depth__cursor > span{ font-size:10px; font-weight:600; opacity:.7; margin-left:3px; }
.depth__zone{
  order:-1; margin-right:8px; padding-right:9px;
  border-right:1px solid rgba(3,32,43,.28);
  font-size:11.5px; font-style:normal; font-weight:600;
  letter-spacing:-.01em; opacity:.8;
}

/* ---------- секция ждёт питания ---------- */
.section{ transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.section.dim{ opacity:.2; transform:translateY(12px); }

/* глубина затемняет фон — чем ниже, тем темнее вода */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, #01070d 100%);
  opacity:calc(var(--p,0) * .55);
}

/* контент уступает место тросу справа и держится выше затемнения */
.section,.foot{ padding-right:calc(var(--rail-x) + 56px); }
.hero,.section,.foot{ position:relative; z-index:5; }

/* ---------- Мобильные ---------- */
@media (max-width:900px){
  :root{ --rail-x:22px; }
  /* трос рисуется от 24 px и шириной 40 – контейнер должен вмещать его целиком,
     иначе документ становится шире экрана и появляется горизонтальный скролл */
  .rail{ width:calc(var(--rail-x) + 42px); }
  .depth__cursor{ font-size:11px; padding:4px 9px; }
  .depth__zone{ display:none; }
  .section,.foot{ padding-right:calc(var(--rail-x) + 26px); }
}

/* ---------- Уважаем настройки движения ---------- */
@media (prefers-reduced-motion:reduce){
  .section.dim{ opacity:1; transform:none; }
  .js .rail{ opacity:1; }

}