/* =====================================================================
   AlgoPro shared animation styles (algopro-anim.css)
   One file, loaded once. Each demo's styles are already scoped under its
   own component class, so there are no collisions.
   ===================================================================== */

/* ===== chart (algopro-tv-visual) ===== */
/* =====================================================================
   AlgoPro — animated product visual
   17 real, pixel-aligned AlgoPro screenshots (820x707, pure-black bg)
   revealed progressively so it reads as ONE chart developing, not a
   slideshow. Everything scoped under .algopro-tv-visual so it is safe
   to drop beside your own Elementor content.
   ===================================================================== */

.algopro-tv-visual {
  --atv-radius: 30px;
  --atv-bg: #030404;             /* essentially black — matches the frames */
  --atv-green: 0, 230, 118;
  --atv-red: 255, 74, 74;

  display: block;
  width: 100%;
  max-width: 640px;              /* desktop target */
  margin: 0 auto;
}
.algopro-tv-visual *,
.algopro-tv-visual *::before,
.algopro-tv-visual *::after { box-sizing: border-box; }

/* ---- The true square: a single clipping shell for the whole animation ---- */
.algopro-tv-visual .atv-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--atv-bg);
  border-radius: var(--atv-radius);
  overflow: hidden;
  isolation: isolate;
  /* barely-there depth — no visible frame, no gray border */
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.8),
    0 8px 24px -12px rgba(0, 0, 0, 0.6);
  transform: translateZ(0);      /* force the radius to clip transformed children */
}

/* ---- Camera: full-square transform target (subtle motion) ---- */
.algopro-tv-visual .atv-camera {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

/* ---- Band: the frames' native-aspect area, centered vertically ----
   The frames are 820x707. We place them full-width and let the black areas
   above/below blend into the black shell — the chart "lives" in the square. */
.algopro-tv-visual .atv-band {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 820 / 707;
  transform: translateY(-50%);
}

/* ---- Stacked, pixel-aligned frames ---- */
.algopro-tv-visual .atv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;              /* camera already matches native aspect → no distortion */
  opacity: 0;
  will-change: opacity, clip-path;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ---- Restrained emphasis glows (soft radials over the REAL markers) ---- */
.algopro-tv-visual .atv-buy-pulse,
.algopro-tv-visual .atv-tp {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* over the real BUY entry marker (the green signal dot on the candle) */
.algopro-tv-visual .atv-buy-pulse {
  left: 29%;
  top: 65%;
  width: 16%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.9);
  background: radial-gradient(circle,
    rgba(var(--atv-green), 0.42) 0%,
    rgba(var(--atv-green), 0.12) 42%,
    rgba(var(--atv-green), 0) 72%);
}
/* tiny emphasis on a real take-profit checkmark */
.algopro-tv-visual .atv-tp {
  width: 8.5%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.85);
  background: radial-gradient(circle,
    rgba(var(--atv-green), 0.46) 0%,
    rgba(var(--atv-green), 0.14) 44%,
    rgba(var(--atv-green), 0) 72%);
}
.algopro-tv-visual .atv-tp--1 { left: 59.5%; top: 28.3%; }  /* ✓ at the first green high (peak, frame 13) */
.algopro-tv-visual .atv-tp--2 { left: 88.3%; top: 6.0%;  }  /* ✓ at the top of the final rally (frame 17) */

/* ---- Depth + ambience (kept extremely restrained) ---- */
.algopro-tv-visual .atv-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(135% 130% at 50% 48%,
    rgba(0, 0, 0, 0) 68%,
    rgba(0, 0, 0, 0.35) 100%);
}
.algopro-tv-visual .atv-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(70% 45% at 42% 92%,
    rgba(var(--atv-green), 0.08) 0%,
    rgba(var(--atv-green), 0) 62%);
}

/* ---- Reset / preload veil ---- */
.algopro-tv-visual .atv-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--atv-bg);
  opacity: 1;                    /* starts opaque; JS fades it once ready */
}

/* ===== strategy-lab (algopro-stratlab-demo) ===== */
/* =====================================================================
   AlgoPro — animated Strategy Lab product visual
   A square "camera" that looks around real AlgoPro / TradingView
   screenshots, driven by a GSAP timeline. Everything scoped under
   .algopro-stratlab-demo so it is safe beside your own Elementor content.
   ===================================================================== */

.algopro-stratlab-demo {
  --asd-radius: 26px;
  --asd-bg: #030404;
  display: block;
  width: 100%;
  max-width: 760px;              /* landscape 4:3 product visual */
  margin: 0 auto;
}
.algopro-stratlab-demo *,
.algopro-stratlab-demo *::before,
.algopro-stratlab-demo *::after { box-sizing: border-box; }

/* ---- The landscape viewport (the camera window) ---- */
.algopro-stratlab-demo .asd-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--asd-bg);
  border-radius: var(--asd-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.8),
    0 8px 24px -12px rgba(0, 0, 0, 0.55);
  transform: translateZ(0);
}

/* ---- Responsive fit: a fixed 1000x1000 world scaled to the square ----
   All camera + cursor math lives in 1000px units; JS sets --asd-fit. */
.algopro-stratlab-demo .asd-fit {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 750px;                 /* 1000 / (4:3) = 750 world units tall */
  transform-origin: top left;
  transform: scale(var(--asd-fit, 0.76));
  will-change: transform;
}
.algopro-stratlab-demo .asd-world {
  position: absolute;
  inset: 0;
  width: 1000px;
  height: 750px;
}

/* ---- Scenes: each holds one screenshot, clipped to the viewport ---- */
.algopro-stratlab-demo .asd-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 750px;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}
.algopro-stratlab-demo .asd-scene img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;      /* height auto → natural ratio; camera math assumes this */
  height: auto;
  transform-origin: 0 0;
  will-change: transform;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  backface-visibility: hidden;
}

/* ---- Cursor (real desktop pointer, small + clean) ---- */
.algopro-stratlab-demo .asd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
  transform: translate(500px, 620px) scale(1);
  transform-origin: 4px 3px;      /* the pointer tip */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  will-change: transform, opacity;
  z-index: 6;
}
.algopro-stratlab-demo .asd-cursor svg { display: block; width: 100%; height: 100%; }

/* faint click ring (only shown briefly on click) — animated by JS */
.algopro-stratlab-demo .asd-ring {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  opacity: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* ---- Restrained depth ---- */
.algopro-stratlab-demo .asd-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(130% 130% at 50% 46%,
    rgba(0, 0, 0, 0) 66%,
    rgba(0, 0, 0, 0.30) 100%);
}
/* transition veil / loop dip (never fully black in the loop) */
.algopro-stratlab-demo .asd-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: var(--asd-bg);
  opacity: 1;   /* starts opaque; JS fades in once loaded */
}

/* ===== autopilot (algopro-autopilot-demo) ===== */
/* =====================================================================
   AlgoPro — animated Strategy Lab product visual
   A square "camera" that looks around real AlgoPro / TradingView
   screenshots, driven by a GSAP timeline. Everything scoped under
   .algopro-autopilot-demo so it is safe beside your own Elementor content.
   ===================================================================== */

.algopro-autopilot-demo {
  --asd-radius: 26px;
  --asd-bg: #030404;
  display: block;
  width: 100%;
  max-width: 760px;              /* landscape 4:3 product visual */
  margin: 0 auto;
}
.algopro-autopilot-demo *,
.algopro-autopilot-demo *::before,
.algopro-autopilot-demo *::after { box-sizing: border-box; }

/* ---- The landscape viewport (the camera window) ---- */
.algopro-autopilot-demo .asd-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--asd-bg);
  border-radius: var(--asd-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.8),
    0 8px 24px -12px rgba(0, 0, 0, 0.55);
  transform: translateZ(0);
}

/* ---- Responsive fit: a fixed 1000x1000 world scaled to the square ----
   All camera + cursor math lives in 1000px units; JS sets --asd-fit. */
.algopro-autopilot-demo .asd-fit {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 750px;                 /* 1000 / (4:3) = 750 world units tall */
  transform-origin: top left;
  transform: scale(var(--asd-fit, 0.76));
  will-change: transform;
}
.algopro-autopilot-demo .asd-world {
  position: absolute;
  inset: 0;
  width: 1000px;
  height: 750px;
}

/* ---- Scenes: each holds one screenshot, clipped to the viewport ---- */
.algopro-autopilot-demo .asd-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 750px;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}
.algopro-autopilot-demo .asd-scene img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;      /* height auto → natural ratio; camera math assumes this */
  height: auto;
  transform-origin: 0 0;
  will-change: transform;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  backface-visibility: hidden;
}

/* ---- Cursor (real desktop pointer, small + clean) ---- */
.algopro-autopilot-demo .asd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
  transform: translate(500px, 620px) scale(1);
  transform-origin: 4px 3px;      /* the pointer tip */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  will-change: transform, opacity;
  z-index: 6;
}
.algopro-autopilot-demo .asd-cursor svg { display: block; width: 100%; height: 100%; }

/* faint click ring (only shown briefly on click) — animated by JS */
.algopro-autopilot-demo .asd-ring {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  opacity: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* ---- Restrained depth ---- */
.algopro-autopilot-demo .asd-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(130% 130% at 50% 46%,
    rgba(0, 0, 0, 0) 66%,
    rgba(0, 0, 0, 0.30) 100%);
}
/* transition veil / loop dip (never fully black in the loop) */
.algopro-autopilot-demo .asd-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: var(--asd-bg);
  opacity: 1;   /* starts opaque; JS fades in once loaded */
}

/* ===== ai-assistant (algopro-ai-assistant-demo) ===== */
/* =====================================================================
   AlgoPro — Live Strategy Lab AI Assistant — animated product visual
   Real chrome (header + input) comes from the 01 screenshot shell; the
   conversation between them is live DOM (typing + AI streaming) styled
   to match the real interface. Fixed 587x670 panel scaled into a square.
   Scoped under .algopro-ai-assistant-demo.
   ===================================================================== */

.algopro-ai-assistant-demo {
  --aia-radius: 30px;
  --aia-bg: #030404;
  --aia-panel-bg: #071413;
  --aia-green: 14, 241, 185;
  --aia-text: #dfeae6;
  --aia-text-strong: #f3f9f7;
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
.algopro-ai-assistant-demo *,
.algopro-ai-assistant-demo *::before,
.algopro-ai-assistant-demo *::after { box-sizing: border-box; }

/* ---- Square viewport ---- */
.algopro-ai-assistant-demo .aia-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--aia-bg);
  border-radius: var(--aia-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), 0 8px 24px -12px rgba(0,0,0,0.55);
  transform: translateZ(0);
}

/* ---- Fit: native 587x670 panel scaled to the square width (JS sets --aia-fit) ---- */
.algopro-ai-assistant-demo .aia-fit {
  position: absolute;
  top: 0; left: 0;
  width: 587px; height: 670px;
  transform-origin: top left;
  transform: scale(var(--aia-fit, 1.06));
  will-change: transform;
}
.algopro-ai-assistant-demo .aia-panel {
  position: absolute;
  top: 0; left: 0;
  width: 587px; height: 670px;
  transform-origin: 50% 42%;
  will-change: transform;
}
.algopro-ai-assistant-demo .aia-shell {
  position: absolute; inset: 0;
  width: 587px; height: 670px; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* ---- Live conversation, clipped inside the real conversation box ---- */
.algopro-ai-assistant-demo .aia-conv {
  position: absolute;
  left: 24px; top: 89px;
  width: 538px; height: 430px;
  overflow: hidden;
  background: var(--aia-panel-bg);
  border-radius: 14px;
}
.algopro-ai-assistant-demo .aia-conv-inner {
  position: absolute;
  left: 0; top: 0; width: 100%;
  padding: 18px 18px 24px;
  will-change: transform;
}

.algopro-ai-assistant-demo .aia-msg { margin-bottom: 16px; }
.algopro-ai-assistant-demo .aia-msg--you { text-align: right; }
.algopro-ai-assistant-demo .aia-label {
  font: 700 10px/1.2 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 1.2px; color: #7f9a93; text-transform: uppercase; margin-bottom: 7px;
}
.algopro-ai-assistant-demo .aia-label--you { color: rgb(var(--aia-green)); }

.algopro-ai-assistant-demo .aia-bubble {
  display: inline-block; text-align: left; max-width: 90%;
  padding: 12px 14px; border-radius: 12px;
  font: 400 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--aia-text);
}
.algopro-ai-assistant-demo .aia-bubble--ai {
  background: #08110f; border: 1px solid rgba(255,255,255,0.055);
}
.algopro-ai-assistant-demo .aia-bubble--you {
  background: #064838; border: 1px solid rgba(var(--aia-green), 0.28);
  color: #eafff8; max-width: 84%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
}
.algopro-ai-assistant-demo .aia-bubble--ai b { color: var(--aia-text-strong); font-weight: 700; }

/* response blocks */
.algopro-ai-assistant-demo .aia-response { display: none; }
.algopro-ai-assistant-demo .aia-response p { margin: 0 0 11px; }
.algopro-ai-assistant-demo .aia-response .aia-li { margin: 0 0 9px; padding-left: 14px; text-indent: -14px; }
.algopro-ai-assistant-demo .aia-response > *:last-child { margin-bottom: 0; }

/* streaming caret */
.algopro-ai-assistant-demo .aia-caret {
  display: inline-block; width: 2px; height: 1em; vertical-align: -2px;
  margin-left: 1px; background: rgba(var(--aia-green), 0.9);
  animation: aia-blink 1s steps(1) infinite;
}
.algopro-ai-assistant-demo .aia-thinking .aia-dots { animation: aia-dots 1.4s steps(1) infinite; }
@keyframes aia-blink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }
@keyframes aia-dots { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } }

/* ---- Typed question overlay (masks the placeholder while typing) ---- */
.algopro-ai-assistant-demo .aia-input {
  position: absolute;
  left: 30px; top: 543px; width: 455px; height: 86px;
  padding: 13px 15px; opacity: 0;
  background: var(--aia-panel-bg);
  font: 400 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #eef4f2;
}
.algopro-ai-assistant-demo .aia-input-caret {
  display: inline-block; width: 1.5px; height: 15px; vertical-align: -3px;
  background: #b9cdc7; margin-left: 1px;
  animation: aia-blink 1s steps(1) infinite;
}

/* ---- Cursor ---- */
.algopro-ai-assistant-demo .aia-cursor {
  position: absolute; top: 0; left: 0; width: 24px; height: 24px;
  opacity: 0; pointer-events: none; transform: translate(280px, 470px);
  transform-origin: 4px 3px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)); will-change: transform, opacity; z-index: 6;
}
.algopro-ai-assistant-demo .aia-cursor svg { display: block; }

/* ---- depth ---- */
.algopro-ai-assistant-demo .aia-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 7;
  background: radial-gradient(130% 130% at 50% 46%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.28) 100%);
}
.algopro-ai-assistant-demo .aia-veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background: var(--aia-bg); opacity: 1;
}

/* ===== tv-extension (algopro-extension-demo) ===== */
/* =====================================================================
   AlgoPro TV Assistant — product film (v3, layered compositing)
   TradingView is a PERSISTENT base layer. The AlgoPro extension panel,
   the parameter modal, and the live-optimization data band are real
   screenshot regions revealed ON TOP of it (clip-path), so TradingView
   never wipes or slides — only the extension UI changes state.
   Scoped under .algopro-extension-demo. 4:3, 1000x750 world.
   ===================================================================== */
.algopro-extension-demo {
  --asd-radius: 26px;
  --asd-bg: #030404;
  display: block;
  width: 100%;
  max-width: 760px;              /* landscape 4:3 product visual */
  margin: 0 auto;
}
.algopro-extension-demo *,
.algopro-extension-demo *::before,
.algopro-extension-demo *::after { box-sizing: border-box; }

.algopro-extension-demo .asd-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--asd-bg);
  border-radius: var(--asd-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.8),
    0 8px 24px -12px rgba(0, 0, 0, 0.55);
  transform: translateZ(0);
}

/* fixed 1000x750 world scaled to the viewport; JS sets --asd-fit */
.algopro-extension-demo .asd-fit {
  position: absolute; top: 0; left: 0;
  width: 1000px; height: 750px;
  transform-origin: top left;
  transform: scale(var(--asd-fit, 0.76));
  will-change: transform;
}
.algopro-extension-demo .asd-world { position: absolute; inset: 0; width: 1000px; height: 750px; }

/* every layer is a full screenshot, width-locked to the world; the camera
   (JS) positions/scales it. Overlays add a clip-path to reveal only a region. */
.algopro-extension-demo .asd-l {
  position: absolute; top: 0; left: 0;
  width: 1000px; height: auto;      /* natural ratio; camera math assumes width=1000 */
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity;
  image-rendering: auto;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
  backface-visibility: hidden;
}

/* --- region masks (image-fraction insets, measured from the real assets) --- */
/* AlgoPro TV Assistant panel (screens 02/03/04) */
.algopro-extension-demo .asd-clip-panel { clip-path: inset(0% 12% 40.5% 19.5%); }
/* Strategy Parameters modal (screen 05) — near full-frame with thin TV margins */
.algopro-extension-demo .asd-clip-modal { clip-path: inset(1.5% 3.5% 0% 3.5%); }
/* live-optimization changing data band (screens 06-10) */
.algopro-extension-demo .asd-clip-band  { clip-path: inset(29% 16% 34% 16.5%); }

/* darken layer behind the parameter modal (frozen TradingView dims slightly) */
.algopro-extension-demo .asd-darken {
  position: absolute; inset: 0; pointer-events: none;
  background: #000; opacity: 0;
}

/* real desktop cursor — no click ring */
.algopro-extension-demo .asd-cursor {
  position: absolute; top: 0; left: 0;
  width: 26px; height: 26px; opacity: 0;
  pointer-events: none;
  transform: translate(500px, 620px) scale(1);
  transform-origin: 4px 3px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  will-change: transform, opacity;
  z-index: 6;
}
.algopro-extension-demo .asd-cursor svg { display: block; width: 100%; height: 100%; }

/* transition veil / loop dip (never fully black in the loop) */
.algopro-extension-demo .asd-veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background: var(--asd-bg); opacity: 1;   /* starts opaque; JS fades in once loaded */
}

/* ===== tools (algopro-tools-showcase) ===== */
/* =====================================================================
   AlgoPro — TradingView toolkit showcase
   ONE shared BTCUSDT 1h chart shown full-frame at its native landscape
   size (1368x710) with rounded corners. The chart never moves — the
   AlgoPro tool layers simply cross-fade in and out. Scoped under
   .algopro-tools-showcase.
   ===================================================================== */
.algopro-tools-showcase {
  --ats-radius: 30px;
  --ats-bg: #030404;
  display: block;
  width: 100%;
  max-width: 1100px;          /* native is 1368x710; scales down responsively */
  margin: 0 auto;
}
.algopro-tools-showcase *,
.algopro-tools-showcase *::before,
.algopro-tools-showcase *::after { box-sizing: border-box; }

.algopro-tools-showcase .ats-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1368 / 710;   /* the original image shape */
  background: var(--ats-bg);
  border-radius: var(--ats-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), 0 8px 24px -12px rgba(0,0,0,0.5);
  transform: translateZ(0);
}

/* every tool layer fills the frame exactly (all share the same dimensions) */
.algopro-tools-showcase .ats-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
  image-rendering: auto; backface-visibility: hidden;
}

.algopro-tools-showcase .ats-veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: var(--ats-bg); opacity: 1;
}

/* preview-only backdrop (NOT part of the component) */