/* heat-flow.css — анимация теплового потока по трубкам на картинках слайдера.
   Подключать после slider.css. Картинка не обрезается и не меняется:
   слой .tk-heat ложится точно поверх видимой картинки (размер и положение
   ставит slider.js через --tk-x/--tk-y/--tk-w/--tk-h), а светится только там,
   где в маске трубки. Направление — атрибут data-flow (поле «Направление» в админке). */

.tk-stage { position: relative; }   /* обёртка картинки и слоя (см. slider.css) */

.tk-heat {
  --tk-heat-core: 255, 214, 170;                 /* светлое ядро импульса */
  --tk-heat-tail: var(--accent-rgb, 227, 6, 19);  /* хвост в фирменном красном */
  position: absolute;
  left: var(--tk-x, 0);
  top: var(--tk-y, 0);
  width: var(--tk-w, 100%);
  height: var(--tk-h, 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms;

  -webkit-mask: var(--tk-mask) center / 100% 100% no-repeat;
          mask: var(--tk-mask) center / 100% 100% no-repeat;

  background: linear-gradient(var(--tk-flow),
      transparent 0%, transparent 40%,
      rgba(var(--tk-heat-core), 0) 43%,
      rgba(var(--tk-heat-core), .95) 49%,
      rgba(var(--tk-heat-tail), .85) 52%,
      rgba(var(--tk-heat-tail), 0) 58%,
      transparent 62%, transparent 100%);
  background-size: 300% 300%;
  --tk-flow: 90deg; --tk-from: 100% 50%; --tk-to: 0% 50%;   /* по умолчанию → вправо */
  mix-blend-mode: screen;
  animation: tk-heat-flow 2.8s cubic-bezier(.45, .05, .55, .95) infinite;
}
.tk-heat.is-ready { opacity: 1; }

/* направление: угол полосы и откуда/куда она едет (фон сдвигается в обратную сторону) */
.tk-heat[data-flow="right"]      { --tk-flow: 90deg;  --tk-from: 100% 50%;  --tk-to: 0% 50%; }
.tk-heat[data-flow="left"]       { --tk-flow: 270deg; --tk-from: 0% 50%;    --tk-to: 100% 50%; }
.tk-heat[data-flow="down"]       { --tk-flow: 180deg; --tk-from: 50% 100%;  --tk-to: 50% 0%; }
.tk-heat[data-flow="up"]         { --tk-flow: 0deg;   --tk-from: 50% 0%;    --tk-to: 50% 100%; }
.tk-heat[data-flow="up_right"]   { --tk-flow: 45deg;  --tk-from: 100% 0%;   --tk-to: 0% 100%; }
.tk-heat[data-flow="down_right"] { --tk-flow: 135deg; --tk-from: 100% 100%; --tk-to: 0% 0%; }

/* мягкое свечение вокруг импульса */
.tk-heat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(6px);
  opacity: .6;
}

/* голубые трубки и «блик» — холодный, спокойный импульс */
.tk-heat[data-kind="blue"]  { --tk-heat-core: 220, 236, 255; --tk-heat-tail: var(--cool-rgb, 0, 102, 255); }
.tk-heat[data-kind="sheen"] { --tk-heat-core: 255, 255, 255; --tk-heat-tail: 200, 210, 230;
                              animation-duration: 4.5s; }
.tk-heat[data-kind="sheen"].is-ready { opacity: .45; }

/* пока пользователь держит курсор на слайде, поток идёт быстрее */
.tk-slide:hover .tk-heat:not([data-kind="sheen"]) { animation-duration: 1.8s; }

@keyframes tk-heat-flow {
  from { background-position: var(--tk-from); }
  to   { background-position: var(--tk-to); }
}

@media (prefers-reduced-motion: reduce) {
  .tk-heat { display: none; }
}