/* Hero window chart — left-edge fade only. Everything else about the chart
   (size, transitions, the loop-reset fade) lives in css/style.css; this
   file exists so it can ship without touching that file while another
   change is in flight there.

   The oldest visible history (the left edge of the plot, since the live
   tip is pinned near the middle — see js/hero-scene.js / js/live-chart.js's
   `tipFraction`) fades to transparent instead of ending abruptly: without
   this the line "hangs" at a hard-cut left edge with nothing before it,
   which reads as a rendering glitch rather than "there's more history off
   to the left". mask-image covers the canvas AND the time-axis labels
   drawn on it, since both live inside this one element. */
/* Left-edge fade drawn as a static overlay in the chart's own background
   colour instead of a CSS mask: a mask over a canvas that repaints every
   frame forces an extra compositing pass per frame (visible lag in Safari). */
.hw-chart::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9%;z-index:2;pointer-events:none;
  background:linear-gradient(to right, rgba(5,6,7,.85) 0%, rgba(5,6,7,0) 100%);
}

/* Order strip must stay fully visible: no bottom fade on the hero window. */
.hero-window{-webkit-mask-image:none;mask-image:none;}
.hw-basket-value.is-idle{color:var(--text-dim);}

/* Wraps the chart canvas (js/hero-scene.js) so the close-cue ring/toast can
   be positioned over it without becoming children of the React-managed
   canvas container itself (see that file's comment on why). Hugs the
   canvas box exactly — no size/spacing of its own — and shares its rounding
   so the ring never bleeds past the card's rounded corner. */
.hw-fx-wrap{
  position:relative;border-radius:12px;overflow:hidden;
  opacity:1;filter:blur(0);transform:scale(1);
  transition-property:opacity,filter,transform;transition-timing-function:ease;
}
/* Same loop-restart fade as .hw-chart/.hw-orders (css/style.css) — applied
   to the wrapper instead so the ring/toast overlays fade out with the
   canvas as one group, since they're siblings of it, not children. */
.hw-fx-wrap.is-resetting{opacity:0;filter:blur(3px);transform:scale(.98);}
@media(prefers-reduced-motion:reduce){.hw-fx-wrap{transition:none !important;}}

/* Ring pulse at the moment a basket's Take line is hit: a thin green ring
   that expands and fades over CLOSE_RING_DUR. hero-scene.js sets left/top
   once per close (its best estimate of the live tip's pixel position) and
   opacity/transform every frame after that — never a CSS transition, which
   would fight those per-frame writes. */
.hw-fx-ring{
  position:absolute;left:0;top:0;width:14px;height:14px;
  border-radius:50%;border:2px solid var(--green);
  pointer-events:none;z-index:3;opacity:0;display:none;
}

/* "+$X.XX · basket closed" pop-up — rises and fades over CLOSE_TOAST_DUR,
   same opacity/transform-only, JS-driven-every-frame rule as the ring.
   Under prefers-reduced-motion, hero-scene.js pins opacity to 1 and skips
   the rise entirely, so it reads as a static plaque instead of a toast. */
.hw-fx-toast{
  position:absolute;top:14px;left:50%;z-index:4;pointer-events:none;
  opacity:0;display:none;white-space:nowrap;
  background:rgba(10,12,16,.88);border:1px solid rgba(79,197,134,.5);
  color:var(--green);font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;
}

/* "Closed today: N baskets · +$Y" — sits where the stage chips used to,
   on the same row as BASKET (its own flex-direction:column mobile rule
   already stacks the two under 420px, see css/style.css). */
.hw-basket-today{
  font-size:11px;line-height:1.4;color:var(--text-faint);text-align:right;
  align-self:flex-end;
}
.hw-basket-today #heroTodayCount{color:var(--text-dim);font-weight:600;}
#heroTodaySum.is-pos{color:var(--green);}
#heroTodaySum.is-neg{color:var(--red);}
@media(max-width:420px){
  .hw-basket-today{text-align:left;align-self:flex-start;margin-top:2px;}
}

/* Final CTA card: large translucent lion head in the background */
.cta-band{position:relative;overflow:hidden;isolation:isolate;}
.cta-band::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-40px;top:50%;width:420px;height:420px;transform:translateY(-50%);
  background:url("../assets/logo.png") center/contain no-repeat;
  opacity:.10;filter:saturate(.9);
}
.cta-band::before{ /* same lion, faint, mirrored on the left for balance on wide screens */
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-60px;top:50%;width:300px;height:300px;transform:translateY(-50%) scaleX(-1);
  background:url("../assets/logo.png") center/contain no-repeat;
  opacity:.04;
}
@media(max-width:720px){
  .cta-band::after{width:300px;height:300px;right:-80px;opacity:.08;}
  .cta-band::before{display:none;}
}