/* TDB Product Showcase (2026-06-10) — motion layer for the product long description.
   Scoped to #ts-wrapper; transforms/opacity only; reduced-motion gated. */

/* staggered reveal (classes added by JS — no-JS users see everything) */
#ts-wrapper .tsx-pre { opacity: 0; transform: translateY(16px); }
#ts-wrapper .tsx-vis { opacity: 1; transform: none;
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }

/* card hover: lift + accent border + sheen sweep */
#ts-wrapper .ts-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; overflow: hidden; }
#ts-wrapper .ts-card:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.45);
  box-shadow: 0 16px 36px -20px rgba(0,0,0,.65); }
body.light-mode #ts-wrapper .ts-card:hover { box-shadow: 0 14px 30px -18px rgba(15,23,42,.25); }

@media (prefers-reduced-motion: no-preference) {
  #ts-wrapper .ts-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(148,197,255,.07) 50%, transparent 65%);
    transform: translateX(-130%); transition: transform .9s ease; }
  #ts-wrapper .ts-card:hover::after { transform: translateX(130%); }

  /* kicker dash grows when its section is hovered */
  #ts-wrapper .ts-kicker .ts-dash { transition: width .35s ease; }
  #ts-wrapper .ts-section:hover .ts-kicker .ts-dash { width: 32px; }

  /* gentle hover on the other block types */
  #ts-wrapper .ts-feat, #ts-wrapper .ts-tool, #ts-wrapper .ts-step, #ts-wrapper .ts-stat {
    transition: transform .22s ease, border-color .22s ease; }
  #ts-wrapper .ts-feat:hover, #ts-wrapper .ts-tool:hover { transform: translateY(-2px); }
  #ts-wrapper .ts-stat:hover { transform: scale(1.03); }

  /* stat glow when the count-up lands */
  #ts-wrapper .tsx-glow { animation: tsx-glow 1.1s ease-out 1; }
}
@keyframes tsx-glow {
  0%   { text-shadow: 0 0 0 rgba(96,165,250,0); }
  35%  { text-shadow: 0 0 20px rgba(96,165,250,.6); }
  100% { text-shadow: 0 0 0 rgba(96,165,250,0); }
}
@media (prefers-reduced-motion: reduce) {
  #ts-wrapper .tsx-pre { opacity: 1; transform: none; }
}

/* === tsx-band: live hero stat band (gradient + motion) === */
.tsx-band { position: relative; overflow: hidden; margin: 22px 0 4px; padding: 18px 20px 14px;
  border-radius: 12px; border: 1px solid rgba(37,99,235,.30);
  background: linear-gradient(120deg, #0b1428 0%, #101e3e 35%, #0b1f33 65%, #0b1428 100%);
  background-size: 220% 220%; }
.tsx-band-live { display: inline-flex; align-items: center; gap: 7px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #34d399; margin-bottom: 12px; }
.tsx-band-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.tsx-band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tsx-bs { text-align: center; padding: 6px 4px; }
.tsx-bs b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: #9bb8ef; font-variant-numeric: tabular-nums; }
.tsx-bs span { display: block; margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.tsx-band-modes { margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed rgba(148,163,184,.22);
  font-size: 12px; color: #94a3b8; text-align: center; }
.tsx-band-modes b { color: #e2e8f0; }
@media (prefers-reduced-motion: no-preference) {
  .tsx-band { animation: tsx-bandshift 16s ease-in-out infinite alternate; }
  .tsx-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 110px; left: -140px;
    background: linear-gradient(105deg, transparent, rgba(148,197,255,.08), transparent);
    animation: tsx-bandsheen 7.5s ease-in-out infinite 1.5s; pointer-events: none; }
  .tsx-band-live i { animation: tsp-pulse 2.2s ease-out infinite; }
}
@keyframes tsx-bandshift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes tsx-bandsheen { 0% { left: -140px; } 55% { left: 110%; } 100% { left: 110%; } }
@keyframes tsp-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
body.light-mode .tsx-band { background: linear-gradient(120deg, #eef3fc 0%, #e3ecfb 50%, #eef3fc 100%); background-size: 220% 220%; border-color: rgba(37,99,235,.25); }
body.light-mode .tsx-bs b { color: #1d4ed8; }
body.light-mode .tsx-bs span, body.light-mode .tsx-band-modes { color: #475569; }
body.light-mode .tsx-band-modes b { color: #0f172a; }

/* === tsx-term: hero terminal (typewriter pipeline simulation) === */
.tsx-term { margin: 22px 0 4px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(37,99,235,.35); background: #060b16;
  box-shadow: 0 18px 48px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(37,99,235,.08); }
.tsx-term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: rgba(15,23,42,.85); border-bottom: 1px solid rgba(148,163,184,.14); }
.tsx-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.tsx-dot-r { background: #f87171; } .tsx-dot-y { background: #fbbf24; } .tsx-dot-g { background: #34d399; }
.tsx-term-title { margin-left: 8px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .04em; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsx-term-chip { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: #9bb8ef;
  background: rgba(37,99,235,.14); border: 1px solid rgba(37,99,235,.35);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.tsx-chip-in { animation: tsx-chipin .45s cubic-bezier(.22,1,.36,1); }
@keyframes tsx-chipin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tsx-term-body { padding: 14px 16px 12px; min-height: 168px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.85;
  transition: opacity .4s ease; }
.tsx-fade { opacity: 0; }
.tsx-tl { white-space: nowrap; overflow: hidden; }
.tsx-c { color: #e2e8f0; font-weight: 600; }
.tsx-k { color: #64748b; }
.tsx-v { color: #9bb8ef; }
.tsx-f { color: #fcd34d; }
.tsx-g { color: #34d399; font-weight: 600; }
.tsx-cursor { display: inline-block; width: 7px; height: 14px; margin-left: 1px;
  background: #9bb8ef; vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .tsx-cursor { animation: tsx-blink 1s steps(1) infinite; }
  .tsx-term { animation: tsx-termglow 6s ease-in-out infinite alternate; }
}
@keyframes tsx-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tsx-termglow {
  from { box-shadow: 0 18px 48px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(37,99,235,.08); }
  to   { box-shadow: 0 18px 48px -22px rgba(0,0,0,.7), 0 0 24px -4px rgba(37,99,235,.28), 0 0 0 1px rgba(37,99,235,.2); }
}
.tsx-term-foot { padding: 9px 14px; border-top: 1px dashed rgba(148,163,184,.16);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: #64748b; text-align: center; }
/* terminal stays dark in light mode by design */
@media (max-width: 640px) {
  .tsx-term-body { font-size: 10.5px; padding: 12px 10px 10px; min-height: 150px; }
  .tsx-term-title { display: none; }
  .tsx-term-chip { margin-left: auto; }
}

/* === tabbed demo window: tabs + panels === */
.tsx-tabs { display: flex; gap: 4px; padding: 8px 10px 0; background: rgba(15,23,42,.85);
  border-bottom: 1px solid rgba(148,163,184,.14); overflow-x: auto; scrollbar-width: none; }
.tsx-tabs::-webkit-scrollbar { display: none; }
.tsx-tab { appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #64748b;
  padding: 7px 11px 9px; border-radius: 7px 7px 0 0; position: relative; white-space: nowrap;
  transition: color .18s ease, background .18s ease; }
.tsx-tab:hover { color: #cbd5e1; }
.tsx-tab.is-on { color: #9bb8ef; background: #060b16; }
.tsx-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; top: 0;
  height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.tsx-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.tsx-term-stage { position: relative; min-height: 196px; }
.tsx-panel { display: none; padding: 14px 16px 12px; min-height: 196px; }
.tsx-panel.is-on { display: block; animation: tsx-panelin .35s ease; }
@keyframes tsx-panelin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tsx-panel .tsx-term-body { padding: 0; min-height: 0; }
.tsx-mt-head { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  letter-spacing: .06em; color: #94a3b8; margin-bottom: 12px; }
.tsx-mt-foot { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px;
  letter-spacing: .04em; color: #64748b; margin-top: 12px; }

/* AI match gates */
.tsx-gates { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.tsx-gate { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 9.5px;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 8px 2px;
  border-radius: 6px; color: #64748b; background: rgba(148,163,184,.07);
  border: 1px solid rgba(148,163,184,.14);
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.tsx-gate.is-ok { color: #052e1d; background: #34d399; border-color: #34d399; font-weight: 700;
  box-shadow: 0 0 10px -2px rgba(52,211,153,.55); }
.tsx-mt-res { margin-top: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  color: #cbd5e1; opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease; }
.tsx-mt-res.is-in { opacity: 1; transform: none; }
.tsx-mt-res b { color: #052e1d; background: #34d399; border-radius: 4px; padding: 2px 8px; margin-right: 8px; }

/* dyno curves */
.tsx-dy-svg { display: block; width: 100%; height: 96px; }
.tsx-dy-stock, .tsx-dy-tuned { fill: none; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 520; stroke-dashoffset: 520; }
.tsx-dy-stock { stroke: #475569; }
.tsx-dy-tuned { stroke: #60a5fa; filter: drop-shadow(0 0 6px rgba(96,165,250,.45)); }
.tsx-dy-svg.is-drawn .tsx-dy-stock { transition: stroke-dashoffset 1.3s ease; stroke-dashoffset: 0; }
.tsx-dy-svg.is-drawn .tsx-dy-tuned { transition: stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1) .25s; stroke-dashoffset: 0; }
.tsx-dy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.tsx-dy-pow { font-size: 11.5px; color: #cbd5e1; }
.tsx-dy-badge { font-size: 11px; font-weight: 700; color: #052e1d; background: #34d399;
  border-radius: 999px; padding: 3px 10px; opacity: 0; transform: scale(.6);
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.tsx-dy-badge.is-in { opacity: 1; transform: scale(1); }
.tsx-dy-stamp { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: #9bb8ef;
  border: 1.5px solid rgba(96,165,250,.6); border-radius: 4px; padding: 3px 8px;
  opacity: 0; transform: rotate(-14deg) scale(1.6);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.tsx-dy-stamp.is-in { opacity: 1; transform: rotate(-6deg) scale(1); }

/* billing ledger */
.tsx-bl-row { display: flex; justify-content: space-between; gap: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 2.1;
  border-bottom: 1px dashed rgba(148,163,184,.12);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.tsx-bl-row.is-in { opacity: 1; transform: none; }
.tsx-bl-l { color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsx-bl-r { color: #9bb8ef; font-weight: 700; white-space: nowrap; }
.tsx-bl-paid { display: inline-block; margin-top: 10px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #34d399;
  border: 1.5px solid rgba(52,211,153,.6); border-radius: 4px; padding: 3px 10px;
  opacity: 0; transform: rotate(8deg) scale(1.7);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.tsx-bl-paid.is-in { opacity: 1; transform: rotate(-4deg) scale(1); }

/* alert bubbles */
.tsx-al { max-width: 86%; margin-bottom: 8px; padding: 7px 12px; border-radius: 10px;
  background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.16);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.64,1); }
.tsx-al.is-in { opacity: 1; transform: none; }
.tsx-al-src { display: block; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #64748b; margin-bottom: 2px; }
.tsx-al-msg { font-size: 12px; color: #e2e8f0; line-height: 1.45; }
.tsx-al-tg   { border-left: 3px solid #38bdf8; }
.tsx-al-wa   { border-left: 3px solid #34d399; margin-left: 14%; }
.tsx-al-push { border-left: 3px solid #9bb8ef; }
.tsx-al-mail { border-left: 3px solid #fbbf24; margin-left: 14%; }

@media (max-width: 640px) {
  .tsx-gates { grid-template-columns: repeat(4, 1fr); }
  .tsx-panel { padding: 12px 10px 10px; min-height: 210px; }
  .tsx-term-stage { min-height: 210px; }
  .tsx-bl-row { font-size: 10px; }
  .tsx-tab { font-size: 9.5px; padding: 6px 8px 8px; }
}

/* === ambient background v3: canvas mesh-gradient (Stripe-style) over a
       grid base on <html>; CSS radials remain as static fallback and are
       switched off when the canvas engine starts (html.tsx-canvas-on). === */
html:has(body.single-product) {
  background-color: #07090f;
  background-image:
    repeating-linear-gradient(0deg,  rgba(122, 162, 232, .07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(122, 162, 232, .07) 0 1px, transparent 1px 64px),
    radial-gradient(1200px 800px at 12% 4%,  rgba(37, 99, 235, .20),  transparent 60%),
    radial-gradient(1400px 900px at 42% 80%, rgba(37, 99, 235, .14),  transparent 60%);
  background-size: 64px 64px, 64px 64px, 170% 170%, 170% 170%;
  background-attachment: fixed;
}
html.tsx-canvas-on:has(body.single-product) {
  background-image:
    repeating-linear-gradient(0deg,  rgba(122, 162, 232, .07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(122, 162, 232, .07) 0 1px, transparent 1px 64px);
  background-size: 64px 64px, 64px 64px;
}
html:has(body.light-mode.single-product) {
  background-color: #f6f8fc;
  background-image:
    repeating-linear-gradient(0deg,  rgba(37, 99, 235, .055) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(37, 99, 235, .055) 0 1px, transparent 1px 64px),
    radial-gradient(1200px 800px at 12% 4%,  rgba(37, 99, 235, .10), transparent 60%),
    radial-gradient(1400px 900px at 42% 80%, rgba(37, 99, 235, .07), transparent 60%);
  background-size: 64px 64px, 64px 64px, 170% 170%, 170% 170%;
  background-attachment: fixed;
}
html.tsx-canvas-on:has(body.light-mode.single-product) {
  background-image:
    repeating-linear-gradient(0deg,  rgba(37, 99, 235, .055) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(37, 99, 235, .055) 0 1px, transparent 1px 64px);
  background-size: 64px 64px, 64px 64px;
}
body.single-product, body.light-mode.single-product { background: transparent !important; }
#tsx-bgcanvas { position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: -1; pointer-events: none; }
/* description surface goes translucent so the mesh glows through it */
#ts-wrapper#ts-wrapper { background: rgba(7, 9, 15, .80); }
body.light-mode #ts-wrapper#ts-wrapper { background: rgba(255, 255, 255, .88); }
/* film grain overlay */
body.single-product::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background-image: url('../img/tsx-noise.png');
  background-size: 140px 140px;
  opacity: .06; mix-blend-mode: overlay;
}
body.light-mode.single-product::after { opacity: .04; }

/* === corner & surface polish: kill the 2px radii, soften dashed boxes === */
.tdb-hero__price-card { border-radius: 14px !important; border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(15,23,42,.42) !important; backdrop-filter: blur(8px); }
.tdb-hero__ecu-card { border-radius: 14px !important; border: 1px solid rgba(148,163,184,.15) !important;
  background: rgba(15,23,42,.34) !important; }
.tdb-espec { border-radius: 14px !important; border: 1px solid rgba(148,163,184,.15) !important; }
body.light-mode .tdb-hero__price-card { background: rgba(255,255,255,.75) !important; border-color: rgba(15,23,42,.12) !important; }
body.light-mode .tdb-hero__ecu-card, body.light-mode .tdb-espec { background: rgba(255,255,255,.6) !important; border-color: rgba(15,23,42,.10) !important; }

/* === feature marquee under the demo window === */
.tsx-mq { overflow: hidden; margin: 14px 0 4px; padding: 11px 0;
  border: 1px solid rgba(37,99,235,.18); border-radius: 12px;
  background: rgba(15,23,42,.35);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tsx-mq-track { display: flex; width: max-content; }
.tsx-mq-set { display: flex; align-items: center; flex: none; }
.tsx-mq-i { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: #9bb8ef; white-space: nowrap; padding: 0 14px; }
.tsx-mq-d { color: rgba(37,99,235,.55); font-size: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .tsx-mq-track { animation: tsx-mq-roll 36s linear infinite; }
  .tsx-mq:hover .tsx-mq-track { animation-play-state: paused; }
}
@keyframes tsx-mq-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tsx-mq-track { flex-wrap: wrap; }
  .tsx-mq-set[aria-hidden] { display: none; }
}
body.light-mode .tsx-mq { background: rgba(255,255,255,.6); border-color: rgba(37,99,235,.2); }
body.light-mode .tsx-mq-i { color: #1d4ed8; }

/* === mobile guard: marquee must not inflate the hero grid (intrinsic width 0) === */
.tsx-mq { width: 0; min-width: 100%; }
.tdb-hero__main, .tdb-hero__aside { min-width: 0; max-width: 100%; }
.tdb-hero__grid > * { min-width: 0; }