/* ============================================================
   SALMON FX — вау-слой: вода, marquee, курсор, шкала, spotlight
   Всё гаснет при prefers-reduced-motion.
   ============================================================ */

/* ---------- погружение: свет угасает с глубиной ----------
   Плавные стыки секций (вода мутнеет) и постепенное
   потемнение светлых «горизонтов». */
.surface {
  background: linear-gradient(180deg, #F6FAFB 0%, var(--ice) 60%, #E6EEF1 100%);
}
/* светлые «горизонты» темнеют с глубиной — но стыки чистые */
#sales { background: #EAF1F3; }
#team { background: #D9E4E7; }

/* изобаты: отметки глубины у кромки каждой главы, как на карте */
.chapter { position: relative; }
.chapter::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  height: 26px;
  pointer-events: none;
  background: linear-gradient(180deg,
    currentColor 0 1px, transparent 1px 7px,
    currentColor 7px 8px, transparent 8px 16px,
    currentColor 16px 17px, transparent 17px);
  opacity: .12;
}
.chapter-deep::before, .chapter-bed::before { opacity: .16; }

/* ---------- морской снег: взвесь, мимо которой тонешь ---------- */
#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
}

/* ---------- вход: всплытие ---------- */
.plunge {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bed);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  transition: transform .75s cubic-bezier(.75, 0, .2, 1);
}
.plunge-num {
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 500;
  color: var(--paper);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.plunge-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--trout);
}
.plunge.up { transform: translateY(-101%); }
html.no-plunge .plunge { display: none; }
@media (prefers-reduced-motion: reduce) { .plunge { display: none; } }

/* ---------- окно под воду: раскрытие по скроллу ---------- */
.dive--js .dive-img { transition: none; will-change: transform; }

/* ---------- лучи света сквозь толщу воды ---------- */
/* Обёртка .rays только качается и дышит — композиторные transform/opacity на одном
   слое. Рисунок лучей и вертикальное затухание — в статичном ::before: растрируется
   один раз вместе со слоем, маска не накладывается композитором каждый кадр.
   mix-blend-mode: screen убран: для светлого источника s с альфой α screen даёт
   b + α·s·(1−b), а обычное наложение белого с альфой α·s — ровно то же число.
   Цвета пересчитаны: rgba(233,241,243,.14) → белый @.132 (расхождение ≤ 1/255),
   rgba(143,208,216,.10) → rgb(168,245,254) @.085 (≤ 2/255 на тёмной сцене).
   Композитору больше не нужна внеэкранная копия всей сцены с видео. */
.rays {
  position: absolute;
  top: -6%;
  bottom: 0;
  left: -18%;
  width: 136%;
  pointer-events: none;
  animation:
    rays-sway 21s ease-in-out infinite alternate,
    rays-breathe 8s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.rays::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(78deg,
      transparent 0 110px,
      rgba(255, 255, 255, .132) 150px,
      transparent 190px),
    repeating-linear-gradient(84deg,
      transparent 0 170px,
      rgba(168, 245, 254, .085) 235px,
      transparent 300px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0, rgba(0,0,0,.4) 45%, transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0, rgba(0,0,0,.4) 45%, transparent 78%);
}
@keyframes rays-sway {
  from { transform: translateX(-2.4%) skewX(-1deg); }
  to   { transform: translateX(2.4%) skewX(1.2deg); }
}
@keyframes rays-breathe {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* ---------- живая вода в hero ---------- */
.surface { position: relative; isolation: isolate; }
.surface > * { position: relative; z-index: 1; }

.water {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .9;
}

/* ---------- marquee контурным шрифтом ---------- */
.marquee {
  background: var(--depth);
  overflow: hidden;
  padding-block: clamp(1.4rem, 3.5vh, 2.6rem);
  border-top: 1px solid color-mix(in srgb, var(--silver) 14%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marq 30s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 5.5vw, 4rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--silver) 30%, transparent);
}
@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- глубиномер-линейка ---------- */
.gauge-ruler {
  position: fixed;
  right: calc(var(--pad) + .35rem);
  top: 50%;
  transform: translateY(-50%);
  height: 34vh;
  width: 9px;
  z-index: 99;
  mix-blend-mode: difference;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .55) 0 1px,
    transparent 1px 12px
  );
  pointer-events: none;
}
#gauge-marker {
  position: absolute;
  left: -4px;
  top: 0;
  width: 17px;
  height: 2px;
  background: #fff;
  will-change: transform;
}
.gauge { right: calc(var(--pad) + 1.8rem); bottom: auto; top: calc(50% + 17vh + 1rem); }

@media (max-width: 900px) {
  .gauge-ruler { display: none; }
  .gauge { top: auto; bottom: .9rem; right: var(--pad); }
}

/* ---------- кастомный курсор ---------- */
.fx-cursor { display: none; }

/* нативный курсор прячем только когда JS включил эффект */
html.has-cursor-fx,
html.has-cursor-fx a,
html.has-cursor-fx button,
html.has-cursor-fx [role="button"],
html.has-cursor-fx label { cursor: none; }

@media (pointer: fine) {
  .fx-cursor {
    display: block;
    position: fixed;
    /* обёртка — точка в углу, а не весь экран: поверхность difference-бленда
       равна визуальному размеру детей (точка + кольцо), а не 2880×1626 */
    left: 0; top: 0;
    width: 0; height: 0;
    overflow: visible;
    z-index: 150;
    pointer-events: none;
    mix-blend-mode: difference;
  }
  .fx-dot {
    position: absolute;
    left: 0; top: 0;
    width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    will-change: transform;
  }
  .fx-ring {
    position: absolute;
    left: 0; top: 0;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    opacity: 0;
    transition: width .25s var(--ease), height .25s var(--ease),
                margin .25s var(--ease), opacity .3s;
    will-change: transform;
  }
  .fx-cursor.is-on .fx-dot { opacity: 1; }
  .fx-cursor.is-on .fx-ring { opacity: .9; }
  .fx-cursor.is-link .fx-ring {
    width: 58px; height: 58px; margin: -29px 0 0 -29px;
  }
  /* над полями ввода не мешаем I-beam */
  .fx-cursor.is-text .fx-ring { opacity: .25; }
  .fx-cursor.is-text .fx-dot { opacity: 0; }
}

/* ---------- spotlight на строках ---------- */
@media (pointer: fine) {
  .step { position: relative; }
  .step::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    background: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(233, 241, 243, .07), transparent 70%
    );
  }
  .step:hover::after { opacity: 1; }

  .route { position: relative; }
  .route::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    background: radial-gradient(
      280px circle at var(--mx, 50%) var(--my, 50%),
      rgba(12, 43, 51, .05), transparent 70%
    );
  }
  .route:hover::after { opacity: 1; }
}

/* ---------- магнитные кнопки ---------- */
.dive-cta, .submit { will-change: transform; }

/* ---------- скос от скорости скролла: постоянный слой, без пересборки слоёв ---------- */
.poster, .chapter-index { will-change: transform; }

/* ---------- параллакс ---------- */
[data-parallax] { will-change: transform; }

/* ---------- 01: «путь рыбы» вдоль шагов цикла ---------- */
@media (min-width: 900px) {
  .steps { position: relative; }
  .steps::before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--lateral);
    transform: scaleY(var(--path, 0));
    transform-origin: top;
    will-change: transform;
  }
  .steps::after {
    content: "";
    position: absolute;
    left: calc(-3rem - 4px);
    top: calc(var(--path, 0) * 100% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--trout);
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--trout) 55%, transparent);
    opacity: min(calc(var(--path, 0) * 8), 1);
  }
}

/* ---------- 02: шкала расстояний с бегущей точкой ---------- */
.km-scale {
  position: relative;
  max-width: 68rem;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0 auto;
  height: 3rem;
}
.km-scale::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--silver) 55%, transparent);
}
.km-tick {
  position: absolute;
  top: 16px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.km-tick:first-of-type { transform: none; }
.km-tick:last-of-type { transform: translateX(-100%); }
.km-dot {
  position: absolute;
  top: 8px;
  left: 0;
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--trout-deep);
  transition: left .7s var(--ease);
}
.km-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--trout-deep) 40%, transparent);
}

/* ---------- 02: радужное число на hover ---------- */
@media (pointer: fine) {
  .route:hover .route-km span {
    background: var(--lateral-ink);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: iri 8s linear infinite;
  }
}

/* ---------- 03: наклон карточек и блик за курсором ---------- */
@media (pointer: fine) {
  .gcard-media {
    transition: transform .4s var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
  }
  .gcard-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s;
    background: radial-gradient(
      320px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(233, 241, 243, .16), transparent 65%
    );
  }
  .gcard:hover .gcard-media::before { opacity: 1; }
}

/* ---------- 04: команда — spotlight и радужные имена ---------- */
@media (pointer: fine) {
  .people li { position: relative; transition: none; }
  .people li::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    background: radial-gradient(
      280px circle at var(--mx, 50%) var(--my, 50%),
      rgba(12, 43, 51, .05), transparent 70%
    );
  }
  .people li:hover::after { opacity: 1; }
  .people li:hover .person-name {
    background: var(--lateral-ink);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: iri 8s linear infinite;
  }
}

/* ---------- 05: волнистое подчёркивание контактов ---------- */
.big-link { position: relative; }
.big-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'%3E%3Cpath d='M0 3.5 Q6 .5 12 3.5 T24 3.5' stroke='%23EF7F63' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 7px;
  opacity: 0;
  transition: opacity .3s;
  animation: wave-underline 1.8s linear infinite paused;
}
@keyframes wave-underline {
  from { background-position: 0 0; }
  to   { background-position: -24px 0; }
}
.big-link:hover { border-bottom-color: transparent; }
.big-link:hover::after { opacity: 1; animation-play-state: running; }

/* ---------- reduced motion: всё выключить ---------- */
@media (prefers-reduced-motion: reduce) {
  .water { display: none; }
  #snow { display: none; }
  .rays { animation: none; opacity: .7; }
  .steps::before, .steps::after { display: none; }
  .km-dot { transition: none; }
  .route:hover .route-km span, .people li:hover .person-name { animation: none; }
  .gcard-media { transition: none; transform: none !important; }
  .big-link::after { animation: none; }
  .dive-ghost { filter: none !important; }
  .marquee-track { animation: none; }
  .fx-cursor { display: none !important; }
  .step::after, .route::after { display: none; }
  [data-parallax] { transform: none !important; }
}

/* ---------- курсор в top layer (поверх <dialog>) ---------- */
.fx-cursor[popover] {
  inset: auto;
  left: 0; top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
/* фолбэк без Popover API: внутри модалки возвращаем нативный курсор */
@supports not selector(:popover-open) {
  html.has-cursor-fx .pmodal { cursor: auto; }
  html.has-cursor-fx .pmodal a,
  html.has-cursor-fx .pmodal button { cursor: pointer; }
}

/* в top layer бленд не работает — на тёмной модалке курсор просто белый */
.fx-cursor:popover-open { mix-blend-mode: normal; }