/* Python algo trading service page: the "algo_software" layout (/algo).
 *
 * Built on services.css (hero, rotating words, points, editor, form) and
 * blockchain.css (pillars, cards, chips, steps, FAQ); this file adds the
 * market scene of the hero and the grouped broker/exchange lists:
 *
 * 1. Order-flow bars that rise and fall behind the copy (scaleY only).
 * 2. A ticker tape of Indian and crypto symbols sliding past (the row is
 *    rendered twice and moved by half its width, so the loop never jumps).
 *    Direction arrows only, never prices.
 * 3. BUY/SELL signals floating in the gutters beside the copy, shown only
 *    where the gutters are wide enough (from 1200px), like the /ea coins.
 *
 * Only transform and opacity are animated, everything loops only under
 * prefers-reduced-motion: no-preference and pauses while the hero is off
 * screen (service-page.js). Without motion the scene is shown still.
 */

.algo-body {
  --algo-up: var(--auth-success);
  --algo-down: var(--auth-error);
}

/* ================================================================== Hero */

.algo-hero {
  padding-bottom: clamp(9.5rem, 7.5rem + 5vw, 13rem);
}

.algo-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Order-flow bars, faded towards the top. */
.algo-bars {
  position: absolute;
  right: 0;
  bottom: clamp(6.5rem, 5rem + 3vw, 9rem);
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 0.6vw, 12px);
  height: 42%;
  padding-inline: 3%;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent);
  mask-image: linear-gradient(0deg, #000 30%, transparent);
  opacity: 0.22;
}

.algo-bar {
  flex: 1 1 0;
  height: var(--algo-bar-h, 50%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(0deg, transparent, var(--algo-up));
  transform-origin: bottom;
}

.algo-bar--down {
  background: linear-gradient(0deg, transparent, var(--algo-down));
}

/* Varied bar heights, so the row reads as live order flow. */
.algo-bar:nth-child(4n + 1) { --algo-bar-h: 38%; }
.algo-bar:nth-child(4n + 2) { --algo-bar-h: 72%; }
.algo-bar:nth-child(4n + 3) { --algo-bar-h: 54%; }
.algo-bar:nth-child(4n) { --algo-bar-h: 88%; }
.algo-bar:nth-child(5n) { --algo-bar-h: 64%; }
.algo-bar:nth-child(7n) { --algo-bar-h: 96%; }

/* Phones: fewer, wider bars. */
@media (max-width: 639.98px) {
  .algo-bar:nth-child(n + 13) {
    display: none;
  }
}

/* The ticker tape along the bottom of the hero, faded out at both edges. */
.algo-ticker {
  position: absolute;
  right: 0;
  bottom: clamp(3.5rem, 2.5rem + 2.5vw, 5.5rem);
  left: 0;
  overflow: hidden;
  border-block: 1px solid var(--auth-line);
  background-color: rgba(7, 8, 11, 0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.algo-ticker__track {
  display: flex;
  width: max-content;
}

.algo-tick {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
  border-inline-end: 1px solid var(--auth-line);
  color: var(--auth-text);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.66rem + 0.2vw, 0.85rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.algo-tick__arrow {
  font-size: 0.75em;
}

.algo-tick--up .algo-tick__arrow { color: var(--algo-up); }
.algo-tick--down .algo-tick__arrow { color: var(--algo-down); }

/* A floating signal pill (BUY, SELL, ...). Hidden until the gutters are wide enough. */
.algo-signal {
  --algo-signal-color: var(--algo-up);
  position: absolute;
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45em 0.95em;
  border: 1px solid color-mix(in srgb, var(--algo-signal-color) 55%, transparent);
  border-radius: var(--radius-pill);
  background-color: rgba(10, 12, 16, 0.85);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--algo-signal-color) 60%, transparent);
  color: var(--algo-signal-color);
  font-family: var(--font-mono);
  font-size: calc(var(--svc-decor) * 0.3 * var(--k, 1));
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.algo-signal--sell {
  --algo-signal-color: var(--algo-down);
}

.algo-signal__dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background-color: currentColor;
}

/* In the gutters beside the copy, at a fraction (--x) of the gutter from the
   outer edge; --w is the pill's approximate width, used to centre it. */
@media (min-width: 1200px) {
  .algo-signal {
    --w: calc(var(--svc-decor) * 1.9 * var(--k, 1));
    display: inline-flex;
  }

  .algo-signal:nth-of-type(odd) {
    left: calc((100% - var(--svc-copy)) / 2 * var(--x) - var(--w) / 2);
  }

  .algo-signal:nth-of-type(even) {
    right: calc((100% - var(--svc-copy)) / 2 * var(--x) - var(--w) / 2);
  }

  .algo-signal:nth-of-type(1) { --k: 1.1; --x: 0.45; top: 12%; }
  .algo-signal:nth-of-type(2) { --k: 1; --x: 0.5; top: 18%; }
  .algo-signal:nth-of-type(3) { --k: 0.85; --x: 0.3; top: 46%; }
  .algo-signal:nth-of-type(4) { --k: 0.95; --x: 0.35; top: 50%; }
  .algo-signal:nth-of-type(5) { --k: 0.8; --x: 0.8; top: 30%; }
  .algo-signal:nth-of-type(6) { --k: 0.8; --x: 0.8; top: 34%; }
}

@media (prefers-reduced-motion: no-preference) {
  .algo-bar {
    animation: algo-flow 2.8s ease-in-out infinite alternate;
  }

  .algo-bar:nth-child(2n) { animation-duration: 3.6s; animation-delay: -1.2s; }
  .algo-bar:nth-child(3n) { animation-duration: 2.2s; animation-delay: -0.6s; }
  .algo-bar:nth-child(5n) { animation-duration: 4.2s; animation-delay: -2s; }

  .algo-ticker__track {
    animation: algo-ticker 38s linear infinite;
  }

  .algo-signal {
    animation: algo-signal-float 7s ease-in-out infinite alternate;
  }

  .algo-signal:nth-of-type(2) { animation-duration: 8s; animation-delay: -3s; }
  .algo-signal:nth-of-type(3) { animation-duration: 6s; animation-delay: -1.5s; }
  .algo-signal:nth-of-type(4) { animation-duration: 9s; animation-delay: -5s; }
  .algo-signal:nth-of-type(5) { animation-duration: 6.5s; animation-delay: -2s; }
  .algo-signal:nth-of-type(6) { animation-duration: 7.5s; animation-delay: -4s; }

  .algo-signal__dot {
    animation: svc-pulse 1.8s ease-in-out infinite;
  }

  .svc-hero.is-offscreen .algo-scene * {
    animation-play-state: paused;
  }
}

@keyframes algo-flow {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

/* Half the track is one full copy of the symbols: sliding by -50% loops seamlessly. */
@keyframes algo-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes algo-signal-float {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

/* ======================================================= Integration groups */

.algo-group + .algo-group {
  margin-top: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
}

.algo-group__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  color: var(--auth-gold);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* A thin rule after the group title. */
.algo-group__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--auth-line-strong), transparent);
}

/* ========================================================= Short screens */

@media (max-height: 560px) and (orientation: landscape) {
  .algo-hero {
    padding-bottom: 7.5rem;
  }

  .algo-ticker {
    bottom: 2.75rem;
  }

  .algo-bars {
    bottom: 5.5rem;
  }
}