/* OUR SERVICE — 案B: magnetic attraction between the two pillar cards */
.tp-cycle-magnet{ position: relative; --engage: 0; }
.tp-cycle-magnet .tp-pillar{ will-change: transform; transition: box-shadow .4s ease, border-color .4s ease; }
.tp-cycle-magnet:hover .tp-pillar{ border-color: rgba(217,81,44,.30); }

.tp-link{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; --link: 0; }
.tp-link-line{ position: relative; display: block; width: 100%; height: 1px; background: rgba(181,175,163,.22); overflow: visible; }

/* SVG warping flow path (案3+1) — line hidden per request, keep filters */
.tp-link-svg{ width: 100%; height: 120px; overflow: visible; display: block; }
.tp-flow-guide{ display: none; }
.tp-flow-path{
  display: none;
  fill: none;
  stroke: var(--vermillion);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  opacity: calc(.45 + var(--link) * .55);
  animation: tp-flow-dash 1.4s linear infinite;
}
@keyframes tp-flow-dash{ to { stroke-dashoffset: -48; } }

/* The two pillar cards ripple on cursor proximity (Distilling-like wave) */
.tp-cycle-magnet .tp-pillar{ transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
/* Hovered (open) card: wave stops, brightens, vermillion frame */
.tp-cycle-magnet .tp-pillar.is-rippling{
  background: var(--ink) !important;
  border-color: var(--vermillion) !important;
  box-shadow: 0 0 0 1px var(--vermillion), 0 0 28px rgba(217,81,44,.22);
  z-index: 2;
}
/* The non-hovered card: subtle vermillion emphasis */
.tp-cycle-magnet .tp-pillar.is-highlight{
  border-color: rgba(217,81,44,.30) !important;
}
.tp-link-line::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--vermillion) 50%, transparent 100%);
  transform: scaleX(calc(.2 + var(--link) * .8)); transform-origin: center;
  opacity: calc(.35 + var(--link) * .65);
  box-shadow: 0 0 calc(var(--link) * 12px) rgba(217,81,44,.6);
}
.tp-link-pulse{
  position: absolute; top: 50%; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vermillion); box-shadow: 0 0 10px rgba(217,81,44,.8);
  transform: translate(-50%, -50%);
  animation: tp-pulse-travel 2.6s linear infinite;
  opacity: calc(.4 + var(--link) * .6);
}
@keyframes tp-pulse-travel{ 0%{ left: 6%; } 50%{ left: 94%; } 100%{ left: 6%; } }
.tp-link-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .45em;
  text-transform: uppercase; color: var(--vermillion);
  opacity: calc(.5 + var(--link) * .5);
}
@media (max-width: 720px){
  .tp-cycle-magnet .tp-pillar{ transform: none !important; }
  .tp-link-line{ width: 1px; height: 40px; }
  .tp-link-line::after{ transform: scaleY(calc(.2 + var(--link) * .8)); }
  .tp-link-svg{ height: 60px; }
  .tp-link-pulse{ animation: none; top: 50%; left: 50%; }
}