/* ==================================================================
   ELI · 2026-10-08 — "תפתחו מצערת." (שלד ThrillBrands)
   template-parts/section-thr-2026.php · assets/js/eli-thr-2026.js
   דיו מלא. לשוניות מותגים, הכלי יוצא משלושת הקווים של הלוגו,
   "FULL THROTTLE" בקו מתאר כתום מאחור, המתח בקו מתאר כהה,
   ופאנל "צג" עם מצערת שאפשר ללחוץ ולהחזיק.
   ================================================================== */

.kbz{
  --bh:clamp(30px, 4.4vw, 64px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#0A0A0A;
  color:#FFFFFF;
  font-family:var(--font);
}

/* ---------- לשוניות המותגים ---------- */

.kbz__tabs{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:clamp(28px, 4.4vw, 64px);
  padding-inline:var(--gutter, 20px);
  border-block-end:1px solid #2B2522;
  overflow-x:auto;
  scrollbar-width:none;
}
.kbz__tabs::-webkit-scrollbar{ display:none; }

.kbz__tab{
  position:relative;
  flex:none;
  block-size:clamp(56px, 6.6vw, 96px);
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:#8F857E;
  font-family:var(--font);
  font-size:clamp(15px, 1.5vw, 22px);
  font-weight:800;
  letter-spacing:.14em;
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s ease;
}
.kbz__tab::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:-1px;
  block-size:4px;
  border-radius:2px;
  background:#F14B1C;
  transform:scaleX(0);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.kbz__tab[aria-selected="true"]{ color:#FFFFFF; }
.kbz__tab[aria-selected="true"]::after{ transform:scaleX(1); }
.kbz__tab:focus-visible{ outline:2px solid #F14B1C; outline-offset:-6px; border-radius:6px; }
@media (hover:hover){ .kbz__tab:hover{ color:#FFFFFF; } }

/* ---------- הבמה ---------- */

.kbz__stage{ position:relative; }

.kbz__en{
  position:absolute;
  z-index:0;
  inset-inline:0;
  inset-block-start:clamp(18px, 3vw, 40px);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(5.5rem, 1.6rem + 14vw, 16.5rem);
  line-height:.8;
  letter-spacing:.02em;
  text-align:center;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:2px #F14B1C;
  opacity:.35;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.kbz__volt{
  position:absolute;
  z-index:0;
  left:30px;
  bottom:-.17em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(12rem, 30vw, 29rem);
  line-height:.8;
  letter-spacing:-.01em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:2px #2B2522;
  pointer-events:none;
}

.kbz__vis{ position:absolute; z-index:1; inset-block:0; left:0; inline-size:calc(100% - min(620px, 44%)); pointer-events:none; }

.kbz__bars{
  position:absolute;
  left:0;
  inset-block-start:50%;
  inline-size:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  direction:ltr; /* הקווים יוצאים מהקצה השמאלי של המסך */
  gap:calc(var(--bh) * .53);
  transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.kbz__bars i{
  display:block;
  inline-size:34%;
  block-size:var(--bh);
  border-radius:0 999px 999px 0;
  background:#F14B1C;
  transform-origin:left center;
}
.kbz__bars i:nth-child(2){ inline-size:54%; }

.kbz__bike{
  position:absolute;
  left:6%;
  bottom:5%;
  inline-size:min(80%, 640px);
  block-size:min(72%, 700px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.kbz__rv{ position:absolute; inset:0; }
.kbz__img{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  object-fit:contain;
  object-position:center bottom;
  opacity:0;
  filter:drop-shadow(0 30px 40px rgba(241,75,28,.22));
}
.kbz__img.is-on{ opacity:1; }

/* ---------- העמודה עם הצג ---------- */

.kbz__wrap{ position:relative; z-index:2; display:flex; }
.kbz__col{ inline-size:min(100%, 540px); display:flex; flex-direction:column; gap:18px; }

.kbz__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3.75rem, 2rem + 3.6vw, 5.75rem);
  line-height:.86;
  letter-spacing:0;
  white-space:nowrap;
}

.kbz__panel{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:24px 28px 26px;
  background:#15100F;
  border:1px solid #2B2522;
  border-radius:32px 6px 32px 6px;
}

.kbz__name{ margin:0; display:flex; flex-direction:column; gap:4px; }
.kbz__name strong{ font-size:21px; font-weight:800; text-align:right; }
.kbz__name span{ font-size:14px; color:#B3ACA4; }

.kbz__dash{ display:grid; grid-template-columns:196px minmax(0, 1fr); gap:28px; align-items:center; }

.kbz__gauge{ position:relative; inline-size:196px; block-size:196px; }
.kbz__gauge svg{ position:absolute; inset:0; inline-size:100%; block-size:100%; transform:rotate(135deg); }
.kbz__gauge circle{ fill:none; stroke-width:12; stroke-linecap:round; }
.kbz__arc-bg{ stroke:#2B2B2B; stroke-dasharray:414.7 552.9; }
.kbz__arc{ stroke:#F14B1C; stroke-dasharray:0 552.9; }

.kbz__read{
  position:absolute;
  inset:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.kbz__num{ font-family:var(--font-display); font-weight:700; font-size:104px; line-height:.8; font-variant-numeric:tabular-nums; }
.kbz__unit{ font-size:13px; font-weight:700; color:#B3ACA4; }

.kbz__meta{ display:flex; flex-direction:column; gap:20px; min-inline-size:0; }
.kbz__bat{ display:flex; flex-direction:column; gap:8px; }
.kbz__bat-row{ margin:0; display:flex; justify-content:space-between; gap:8px; font-size:13px; color:#B3ACA4; }
.kbz__bat-row span:last-child{ color:#FFFFFF; font-weight:700; }
.kbz__segs{ display:flex; gap:4px; }
.kbz__segs i{ flex:1 1 0; block-size:16px; border-radius:4px 2px 4px 2px; background:#2B2B2B; transition:background-color .15s ease; }
.kbz__segs i.on{ background:#FFFFFF; }

.kbz__stats{ display:flex; gap:24px; }
.kbz__stats p{ margin:0; display:flex; flex-direction:column; gap:2px; font-size:13px; color:#B3ACA4; }
.kbz__stats strong{ font-family:var(--font-display); font-weight:700; font-size:44px; line-height:.86; color:#FFFFFF; text-align:right; }

/* המצערת */
.kbz__thr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  inline-size:100%;
  block-size:100px;
  margin:0;
  padding:0 20px 0 10px;
  border:1px solid #2B2522;
  border-radius:16px 4px 16px 4px;
  background:#0A0A0A;
  color:#FFFFFF;
  font-family:var(--font);
  text-align:right;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
  transition:border-color .15s ease;
}
.kbz__thr-txt{ display:flex; flex-direction:column; gap:4px; min-inline-size:0; }
.kbz__thr-txt strong{ font-size:17px; font-weight:800; }
.kbz__thr-txt span{ font-size:13px; color:#B3ACA4; }
.kbz__grip{ flex:none; inline-size:300px; block-size:84px; overflow:visible; }
.kbz__lever{ transform-box:view-box; transform-origin:188px 30px; }
.kbz__thr[aria-pressed="true"]{ border-color:#F14B1C; cursor:grabbing; }
.kbz__thr[aria-pressed="true"] .kbz__thr-txt strong{ color:#F14B1C; }
.kbz__thr:focus-visible{ outline:3px solid #F14B1C; outline-offset:2px; }
@media (hover:hover){ .kbz__thr:hover{ border-color:#4A403C; } }

.kbz__lab{
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #2B2522;
  border-radius:12px 3px 12px 3px;
  background:#0A0A0A;
  font-size:14px;
  line-height:1.4;
  color:#D9D2CA;
}
.kbz__lab svg{ flex:none; }
.kbz__lab strong{ color:#FFFFFF; }

.kbz__price{ margin:0; display:flex; align-items:baseline; gap:12px; }
.kbz__price strong{ font-size:32px; font-weight:800; }
.kbz__price del{ font-size:16px; color:#8F857E; }

.kbz__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.kbz__cta,
.kbz__ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  block-size:60px;
  padding:0 26px;
  border-radius:8px;
  font-size:16px;
  font-weight:800;
  text-decoration:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.kbz__cta{ background:#F14B1C; color:#0A0A0A; padding-inline:30px; font-size:17px; }
.kbz__ghost{ border:1.5px solid #4A403C; color:#FFFFFF; font-weight:700; }
.kbz__cta:focus-visible, .kbz__ghost:focus-visible{ outline:3px solid #FFFFFF; outline-offset:2px; }
@media (hover:hover){
  .kbz__cta:hover{ background:#FFFFFF; color:#0A0A0A; }
  .kbz__ghost:hover{ border-color:#FFFFFF; color:#FFFFFF; }
}

/* ---------- תנועה ---------- */

/* כניסה (וכל החלפת מותג): הקווים נמתחים, הכלי יוצא מהקו האמצעי, הצג עולה */
.kbz--js:not(.kbz--go) .kbz__bars i{ transform:scaleX(0); }
.kbz--js:not(.kbz--go) .kbz__img.is-on{ opacity:0; }
.kbz--js:not(.kbz--go) .kbz__en{ opacity:0; }

.kbz--go .kbz__bars i{ animation:kbzBar .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:var(--d); }
.kbz--go .kbz__img.is-on{ animation:kbzOut 1s cubic-bezier(.15,.85,.25,1) .25s backwards; }
.kbz--go .kbz__en{ animation:kbzEn .7s cubic-bezier(.15,.85,.25,1) backwards; }
.kbz--go .kbz__panel,
.kbz--go .kbz__actions{ animation:kbzUp .6s ease-out backwards; }

@keyframes kbzBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes kbzOut{
  from{ transform:translateX(-46%) scale(.86); opacity:0; filter:blur(6px) drop-shadow(0 30px 40px rgba(241,75,28,.22)); }
  60%{ filter:blur(0) drop-shadow(0 30px 40px rgba(241,75,28,.22)); }
  to{ transform:none; opacity:1; filter:drop-shadow(0 30px 40px rgba(241,75,28,.22)); }
}
@keyframes kbzEn{ from{ opacity:0; transform:translateX(-120px) skewX(-10deg); } to{ opacity:.35; transform:none; } }
@keyframes kbzUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* מצערת לחוצה: הקווים נמתחים, הכלי זז קדימה ורועד */
.kbz--rev .kbz__bars{ transform:scaleX(1.18); }
.kbz--rev .kbz__bike{ transform:translateX(36px); }
.kbz--rev .kbz__rv{ animation:kbzShake .09s linear infinite; }
.kbz--rev .kbz__en{ transform:translateX(40px) skewX(-8deg); }
@keyframes kbzShake{
  0%, 100%{ transform:translate(0, 0); }
  25%{ transform:translate(1.5px, -1px); }
  50%{ transform:translate(-1px, 1px); }
  75%{ transform:translate(1px, 1px); }
}

/* ---------- מחשב ---------- */

@media (min-width:1001px){
  .kbz__stage{ min-block-size:900px; padding-block:clamp(170px, 19vw, 280px) 56px; }
}

/* ---------- טאבלט ומובייל ---------- */

@media (max-width:1000px){
  .kbz__tabs{ justify-content:flex-start; }
  .kbz__stage{ display:flex; flex-direction:column; padding-block-end:32px; }
  .kbz__en{ font-size:clamp(5rem, 31vw, 12rem); line-height:.84; }
  .kbz__en span{ display:block; }
  .kbz__volt{ display:none; }
  .kbz__vis{ position:relative; inset:auto; inline-size:100%; block-size:clamp(340px, 104vw, 600px); }
  .kbz__bars{ inset-block-start:58%; }
  .kbz__bars i{ inline-size:34%; }
  .kbz__bars i:nth-child(2){ inline-size:52%; }
  .kbz__bike{ left:auto; right:4%; bottom:2%; inline-size:78%; block-size:74%; }
  .kbz__col{ inline-size:100%; max-inline-size:640px; }
}

@media (max-width:700px){
  .kbz{ --bh:30px; }
  .kbz__tab{ letter-spacing:.1em; }
  .kbz__title{ font-size:clamp(3rem, 15vw, 3.75rem); }
  .kbz__panel{ gap:14px; padding:16px; border-radius:24px 4px 24px 4px; }
  .kbz__name strong{ font-size:15px; }
  .kbz__name span{ font-size:12px; }
  .kbz__dash{ grid-template-columns:120px minmax(0, 1fr); gap:16px; }
  .kbz__gauge{ inline-size:120px; block-size:120px; }
  .kbz__gauge circle{ stroke-width:14; }
  .kbz__num{ font-size:62px; }
  .kbz__unit{ font-size:11px; }
  .kbz__meta{ gap:12px; }
  .kbz__bat-row{ font-size:12px; }
  .kbz__segs{ gap:3px; }
  .kbz__stats{ gap:16px; }
  .kbz__stats p{ font-size:12px; }
  .kbz__stats strong{ font-size:30px; }
  .kbz__thr{ block-size:78px; padding:0 12px 0 2px; gap:8px; }
  .kbz__thr-txt strong{ font-size:14px; }
  .kbz__thr-txt span{ font-size:11px; }
  .kbz__grip{ inline-size:min(198px, 46vw); block-size:auto; }
  .kbz__lab{ gap:10px; padding:10px 12px; font-size:13px; }
  .kbz__price strong{ font-size:24px; }
  .kbz__price del{ font-size:14px; }
  .kbz__actions{ flex-direction:column; }
  .kbz__cta, .kbz__ghost{ inline-size:100%; block-size:54px; }
}

@media (prefers-reduced-motion:reduce){
  .kbz--go .kbz__bars i,
  .kbz--go .kbz__img.is-on,
  .kbz--go .kbz__en,
  .kbz--go .kbz__panel,
  .kbz--go .kbz__actions,
  .kbz--rev .kbz__rv{ animation:none; }
  .kbz--js:not(.kbz--go) .kbz__bars i{ transform:none; }
  .kbz--js:not(.kbz--go) .kbz__img.is-on{ opacity:1; }
  .kbz--js:not(.kbz--go) .kbz__en{ opacity:.35; }
  .kbz__tab::after, .kbz__bars, .kbz__bike, .kbz__en, .kbz__segs i{ transition:none; }
}


/* ELI 2026-10-13 — לשוניות המותגים הוסרו (הכלי מתחלף לבד, eli-thr-2026.js) */
.kbz .kbz__tabs{ display:none; }