/* ==========================================================================
   Homepage screen 2 - "Most of the market is noise"
   A printed seismograph: a week of market noise, three buying signals,
   each dropping into the lead it becomes. JS (signal-scope.js) animates the
   noise + sweep; without JS the figure renders fully lit and static.
   ========================================================================== */

.scope-section {
  --scope-ink: var(--color-text-heading);
  --scope-green: var(--color-accent-green);
  --scope-rule: color-mix(in srgb, var(--color-text-heading) 14%, transparent);
  --scope-plot-h: 360px;
  padding: var(--space-4xl) 0 var(--space-3xl);
}

/* ---- Heading ---- */
.scope-head__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.4rem + 3.3vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-text-heading);
  text-wrap: balance;
  margin-bottom: var(--space-2xl);
}

.scope-head__dim {
  color: var(--color-text-muted);
}

.scope-head__gain {
  font-style: italic;
  color: var(--color-text-heading);
}

/* ---- The instrument ---- */
.scope {
  margin: 0;
}

.scope__plot {
  position: relative;
  height: var(--scope-plot-h);
  border-bottom: 1px solid color-mix(in srgb, var(--scope-ink) 55%, transparent);
  /* faint horizontal gridlines, like chart paper */
  background-image: repeating-linear-gradient(
    to top,
    var(--scope-rule) 0 1px,
    transparent 1px calc(var(--scope-plot-h) / 5)
  );
  background-size: 100% 100%;
}

.scope__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Without JS: a static CSS noise floor so the plot never reads empty */
.scope:not(.is-ready) .scope__plot::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--scope-ink) 26%, transparent) 0 1.5px,
    transparent 1.5px 6px
  );
  -webkit-mask: linear-gradient(to top, #000 40%, transparent);
  mask: linear-gradient(to top, #000 40%, transparent);
}

.scope__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--scope-ink);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--sweep-x, 0px));
  will-change: transform;
}

.scope__sweep::before {
  /* soft trailing wash behind the read head */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 120px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--scope-green) 9%, transparent));
}

.scope.is-sweeping .scope__sweep {
  opacity: 0.55;
}

/* Spikes share the lead grid, so each one sits above its lead */
.scope__spikes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  pointer-events: none;
}

.scope__spike {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.scope__tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  border: 1px solid color-mix(in srgb, var(--scope-green) 45%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--scope-green);
  white-space: nowrap;
  transition: background-color 300ms var(--ease-out-expo), color 300ms var(--ease-out-expo), border-color 300ms;
}

.scope__tag-short {
  display: none;
}

.scope__leader {
  flex: 1;
  width: 1px;
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--scope-green) 55%, transparent) 50%, transparent 50%);
  background-size: 1px 5px;
}

.scope__bar {
  position: relative;
  flex: 0 0 var(--h);
  width: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, var(--scope-green), color-mix(in srgb, var(--scope-green) 70%, #fff));
  transform-origin: bottom;
  transition: transform 700ms var(--ease-out-expo);
}

.scope__dot {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--scope-green);
  box-shadow: 0 0 0 4px var(--color-bg-primary);
}

.scope__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--scope-green);
  opacity: 0;
}

/* JS-driven states: spikes stay low until the sweep reaches them */
.scope.is-sweeping .scope__spike:not(.is-hit) .scope__bar {
  transform: scaleY(0.08);
}

.scope.is-sweeping .scope__spike:not(.is-hit) .scope__tag {
  color: var(--color-text-muted);
  border-color: var(--scope-rule);
}

.scope.is-sweeping .scope__spike:not(.is-hit) .scope__leader {
  opacity: 0.25;
}

.scope__spike.is-live .scope__tag {
  background: var(--scope-green);
  border-color: var(--scope-green);
  color: var(--color-bg-primary);
}

.scope__spike.is-live .scope__dot::after {
  animation: scope-ping 1.4s var(--ease-out-expo) forwards;
}

@keyframes scope-ping {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(4.2); opacity: 0; }
}

/* ---- Axis + legend ---- */
.scope__axis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.scope__axis span {
  position: relative;
  padding-left: 0.5rem;
}

.scope__axis span::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.6rem;
  width: 1px;
  height: 6px;
  background: color-mix(in srgb, var(--scope-ink) 55%, transparent);
}

.scope__cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.scope__cap {
  margin-bottom: var(--space-md);
}

.scope__cap-we {
  color: var(--color-text-heading);
  font-weight: 500;
}


/* ---- Revenue curve over the market ---- */
.scope__curve {
  --reveal: calc(100% + 24px);
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--scope-green);
  pointer-events: none;
  clip-path: inset(-20px calc(100% - var(--reveal)) 0 -20px);
}

.scope__curve svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scope__curve-line {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--scope-green) 55%, transparent));
}

.scope__curve-dot {
  position: absolute;
  right: 0;
  top: 8%;
  width: 16px;
  height: 16px;
  margin: -8px -8px 0 0;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px var(--color-bg-primary);
}

/* the drawing head that rides the curve during a pass */
.scope__curve-head {
  position: absolute;
  z-index: 2;
  left: 0;
  color: var(--scope-green);
  pointer-events: none;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--scope-green) 22%, transparent), 0 0 18px 2px color-mix(in srgb, var(--scope-green) 60%, transparent);
  opacity: 0;
  transition: opacity 200ms;
}

.scope__curve.is-drawing ~ .scope__curve-head {
  opacity: 1;
}

.scope__curve.is-drawing .scope__curve-dot {
  opacity: 0;
}

.scope__rev {
  position: absolute;
  z-index: 2;
  right: 28px;
  top: 5%;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--scope-green);
  white-space: nowrap;
  transform: translateY(-50%);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}

.scope.is-sweeping .scope__rev:not(.is-on) {
  opacity: 0;
  transform: translate(8px, -50%);
}

/* when the curve lands, its end point rings once */
.scope__curve-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
}

.scope.rev-done .scope__curve-dot::after {
  animation: rev-ring 1100ms var(--ease-out-expo) 1;
}

@keyframes rev-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
}

@media (max-width: 860px) {
  .scope__tag-long { display: none; }
  .scope__tag-short { display: inline; }
}

@media (max-width: 768px) {
  .scope-section {
    --scope-plot-h: 250px;
    padding: var(--space-4xl) 0 var(--space-3xl);
  }

  .scope-head__title {
    margin-bottom: var(--space-xl);
  }

  .scope__spikes {
    gap: var(--space-sm);
  }

  .scope__tag {
    font-size: 0.6875rem;
    padding: 0.3rem 0.55rem;
  }

  .scope__axis span {
    font-size: 0;
  }

  .scope__rev {
    right: 2px;
    top: 47%;
    font-size: 1rem;
    transform: none;
  }

  .scope.is-sweeping .scope__rev:not(.is-on) {
    transform: translateX(6px);
  }

  .scope__curve-line {
    stroke-width: 3;
  }

  .scope__axis span::after {
    content: attr(data-short);
    font-size: 0.6875rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .scope__sweep, .scope__curve-head { display: none; }
  .scope.rev-done .scope__curve-dot::after { animation: none; }
  .scope__bar, .scope__tag { transition: none; }
  .scope__spike.is-live .scope__dot::after { animation: none; }
}