/* Additive product interactions. Existing content, data, and reveal choreography stay intact. */

.chart-card[data-tempo-product],
.term[data-tempo-terminal] {
  position: relative;
  isolation: isolate;
}

.chart-card[data-tempo-product] {
  --tempo-pointer-x: 50%;
  --tempo-pointer-y: 50%;
  overflow: hidden;
}

.chart-card[data-tempo-product]::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    190px circle at var(--tempo-pointer-x) var(--tempo-pointer-y),
    rgba(112, 91, 226, 0.11),
    transparent 72%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.chart-card[data-tempo-product]:hover::before,
.chart-card[data-tempo-product]:focus-visible::before,
.chart-card[data-tempo-product].is-tempo-chart-inspecting::before {
  opacity: 1;
}

.chart-card[data-tempo-product] > * {
  position: relative;
  z-index: 1;
}

body.home .chart-card[data-tempo-product] svg rect {
  transition-property: transform, filter, opacity, stroke-width;
  transition-duration: 700ms, 180ms, 180ms, 180ms;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1), ease, ease, ease;
}

.chart-card[data-tempo-product] svg rect.tempo-active-mark {
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 2;
  filter: drop-shadow(0 5px 7px rgba(49, 39, 110, 0.28));
}

.tempo-chart-probe {
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.tempo-chart-probe.is-visible {
  opacity: 1;
}

.tempo-chart-probe line {
  stroke: rgba(74, 58, 167, 0.28);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.tempo-chart-probe circle {
  fill: #fff;
  stroke: #4a3aa7;
  stroke-width: 2;
  filter: drop-shadow(0 3px 5px rgba(49, 39, 110, 0.3));
}

.term[data-tempo-terminal] {
  --tempo-terminal-y: 50%;
  overflow: hidden;
}

.term[data-tempo-terminal]::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(
    320px circle at 22% var(--tempo-terminal-y),
    rgba(130, 116, 224, 0.14),
    transparent 74%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.term[data-tempo-terminal]:hover::before,
.term[data-tempo-terminal]:focus-visible::before,
.term[data-tempo-terminal].is-tempo-terminal-inspecting::before {
  opacity: 1;
}

.term[data-tempo-terminal] > .tempo-terminal-scan {
  position: absolute;
  z-index: 0;
  top: -24%;
  right: 0;
  left: 0;
  height: 22%;
  background:
    linear-gradient(90deg, transparent, rgba(199, 193, 247, 0.5), transparent) top / 100% 1px no-repeat,
    linear-gradient(to bottom, transparent, rgba(133, 119, 227, 0.11), rgba(255, 212, 121, 0.035), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.term[data-tempo-terminal] > * {
  position: relative;
  z-index: 1;
}

.term[data-tempo-terminal] > div {
  border-radius: 4px;
  transition-property: opacity, transform, background-color, box-shadow;
}

.term[data-tempo-terminal] > div.is-tempo-line-active {
  background: rgba(143, 138, 184, 0.09);
  box-shadow: -9px 0 0 rgba(143, 138, 184, 0.09), 9px 0 0 rgba(143, 138, 184, 0.09);
}

@media (prefers-reduced-motion: no-preference) {
  body.ambient-motion.home section.ambient-section-active .term.in[data-tempo-terminal] > .tempo-terminal-scan {
    animation: tempo-terminal-scan 7.5s linear 1.7s infinite;
    will-change: transform, opacity;
  }

  @keyframes tempo-terminal-scan {
    0%, 12% { opacity: 0; transform: translate3d(0, 0, 0); }
    18% { opacity: 0.8; }
    48% { opacity: 0; transform: translate3d(0, 610%, 0); }
    100% { opacity: 0; transform: translate3d(0, 610%, 0); }
  }
}

@media (max-width: 640px) {
  .chart-card[data-tempo-product]::before {
    background: radial-gradient(
      150px circle at var(--tempo-pointer-x) var(--tempo-pointer-y),
      rgba(112, 91, 226, 0.1),
      transparent 74%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .tempo-chart-probe,
  .chart-card[data-tempo-product]::before,
  .term[data-tempo-terminal]::before,
  .term[data-tempo-terminal] > div {
    transition: none;
  }
}