/* Tech Titan — live code scene (tt-codefx). Shared file, identical on techtitan.com.eg and clients.techtitan.com.eg.
   Decorative layer only: no pointer events, hidden from assistive technology by the markup (aria-hidden).
   The code itself is always left-to-right, so its gutter is on the physical left in both page directions: the scene
   places the editor on the left, the tool badges on the line-end side (right) and in the top margin, and the terminal
   below the last code row, so nothing covers the code. The far plane stays in the scene's own column.
   Palette: blood red (#8c162b -> #34121b and lighter reds graded with it), the price gold, near-black and greys. */
.tt-codefx{
  --cfx-ember:#8c162b; --cfx-wine:#34121b; --cfx-gold:#dca745; --cfx-gold-hi:#f3d794;
  --cfx-line:rgba(228,186,104,.34); --cfx-line-soft:rgba(228,186,104,.16);
  --cfx-mono:ui-monospace,"Cascadia Code","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --cfx-font:13.5px; --cfx-lh:1.72; --cfx-tilt:-8deg;
  position:relative; pointer-events:none; user-select:none; -webkit-user-select:none;
  contain:layout style; container:cfx / size; isolation:isolate; text-align:left;
  font-variant-ligatures:none; font-feature-settings:"liga" 0,"calt" 0;
}
[dir=rtl] .tt-codefx{--cfx-tilt:8deg}
.tt-codefx *{box-sizing:border-box;pointer-events:none}
/* no JavaScript: a still picture of the same scene */
.tt-codefx:not(.cfx-on){background:url(tt-codefx-poster.svg) center/contain no-repeat}
.tt-codefx-footer:not(.cfx-on){background:none}

.cfx-stage{position:absolute;inset:0;perspective:1400px}
.cfx-glow{position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(140,22,43,.55),rgba(52,18,27,.28) 55%,transparent);filter:blur(28px);z-index:0}

/* far plane: a large, faint page of code inside the scene's own column. The clip box reaches 10% past the scene's
   outer edge (inline-end: the side away from the text) and fades out toward the text; it never leaves the scene's
   height, so it never reaches the copy above or below a stacked scene. The code itself stays left-to-right. */
.tt-codefx .cfx-far{position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:-10%;overflow:hidden;z-index:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 30%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 30%,#000 86%,transparent)}
[dir=rtl] .tt-codefx .cfx-far{-webkit-mask-image:linear-gradient(to left,transparent,#000 30%,#000 86%,transparent);mask-image:linear-gradient(to left,transparent,#000 30%,#000 86%,transparent)}
.tt-codefx .cfx-ghost{position:absolute;top:-6%;bottom:-6%;left:-4%;right:-4%;margin:0;padding:0;border:0;background:none;
  font:500 15px/1.9 var(--cfx-mono);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;color:#f3e6d0;
  white-space:pre;overflow:hidden;opacity:.065;direction:ltr;text-align:left;transform:rotate(-4deg);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}

/* windows */
.cfx-win{position:absolute;z-index:2;border-radius:14px;border:1px solid var(--cfx-line);overflow:hidden;
  background:linear-gradient(160deg,rgba(28,18,21,.97),rgba(10,8,9,.98) 62%);
  box-shadow:0 34px 70px rgba(0,0,0,.62),0 0 0 1px rgba(140,22,43,.22),0 0 70px rgba(140,22,43,.24)}
.cfx-bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-bottom:1px solid var(--cfx-line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);direction:ltr}
.cfx-dots{flex:none;width:46px;height:10px;background:
  radial-gradient(circle at 5px 5px,#c02541 4.2px,transparent 4.9px),
  radial-gradient(circle at 21px 5px,#dca745 4.2px,transparent 4.9px),
  radial-gradient(circle at 37px 5px,#5c5759 4.2px,transparent 4.9px)}
.cfx-tab,.cfx-title{font:500 11.5px/1 var(--cfx-mono);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;color:#a99ea0;padding:8px 10px 9px;border-radius:7px 7px 0 0;white-space:nowrap}
.cfx-tab{flex:none;width:calc(18ch + 20px);overflow:hidden;text-overflow:ellipsis}
.cfx-tab.is-on{color:#f6ead6;background:rgba(140,22,43,.26);box-shadow:inset 0 -2px var(--cfx-gold)}
.cfx-title{color:#cbbdb9}

/* the code: a fixed window of rows; once full it scrolls (smoothly) instead of moving rows in layout */
.tt-codefx .cfx-code{direction:ltr;margin:10px 0;padding:0;font:400 var(--cfx-font)/var(--cfx-lh) var(--cfx-mono);
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;color:#e9e1dc;
  white-space:pre;tab-size:4;overflow:hidden;scroll-behavior:smooth;transition:opacity .4s ease;
  height:calc(var(--cfx-rows,14) * var(--cfx-font) * var(--cfx-lh))}
.cfx-row{display:flex;align-items:baseline;min-height:calc(var(--cfx-font) * var(--cfx-lh));padding-right:16px}
.cfx-row.is-cur{background:linear-gradient(90deg,rgba(140,22,43,.18),rgba(140,22,43,.04) 70%,transparent);box-shadow:inset 2px 0 var(--cfx-gold)}
.cfx-row i{flex:none;width:3.4em;padding-right:1.1em;text-align:right;color:#8a8082;font-style:normal}
.cfx-row.is-cur i{color:var(--cfx-gold)}
.tt-codefx code{font:inherit;color:inherit;background:none;padding:0;border:0;white-space:pre}
.cfx-swap .cfx-code{opacity:0}
/* syntax: blood red, the price gold and warm greys (every token >= 4.5:1 on the editor) */
.c-tag{color:#ff2843;font-weight:700}.c-kw{color:#ff2843}.c-var{color:#f0cd7b}.c-str{color:#dca745}.c-fn{color:#fff0af}
.c-cls{color:#f3d794}.c-num{color:#ff2843}.c-com{color:#8b7b7e;font-style:italic}.c-pun{color:#c9b9b4}
/* the caret is an empty inline drawn by its border: typing never moves a box */
.cfx-caret{display:inline;margin-left:1px;border-left:2px solid var(--cfx-gold-hi);
  box-shadow:0 0 8px rgba(243,215,148,.7);animation:cfx-caret 1.1s ease-in-out infinite}
.cfx-status{display:flex;gap:16px;justify-content:flex-end;height:24px;padding:0 12px;direction:ltr;
  font:500 11px/24px var(--cfx-mono);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;color:#a7999a;border-top:1px solid var(--cfx-line-soft);background:rgba(140,22,43,.18)}
.cfx-pos{min-width:14ch;text-align:left}

/* terminal: a fixed number of lines (--cfx-trows, set by the script), scrolled like the editor */
.cfx-term{background:linear-gradient(170deg,rgba(15,10,11,.97),rgba(6,5,6,.985));border-color:rgba(192,37,65,.5)}
.cfx-term-body{direction:ltr;margin:10px 0 12px;padding:0 14px;font:400 12px/1.75 var(--cfx-mono);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;
  color:#e7ddd8;height:calc(var(--cfx-trows,4) * 12px * 1.75);white-space:pre;overflow:hidden;scroll-behavior:smooth}
.cfx-prompt{color:var(--cfx-gold)}
.cfx-out{color:#b5a6a3}

/* tool badges: a monochrome gold glyph on a noir plate with the gold line (the social icons' family);
   they arrive one by one, then drift slowly. The name is shown only where the scene is wide enough. */
.cfx-tools{position:absolute;inset:0;z-index:3}
.cfx-badge{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:6px;border-radius:10px;
  background:linear-gradient(145deg,#24181b,#0b0a0b);border:1px solid rgba(228,186,104,.45);
  box-shadow:0 14px 28px rgba(0,0,0,.5),inset 0 1px rgba(255,240,175,.08);
  font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#f1e4cf;white-space:nowrap;unicode-bidi:isolate;
  opacity:0;animation:cfx-in .9s cubic-bezier(.22,1,.36,1) calc(var(--n) * .85s + .5s) both,cfx-float 11s ease-in-out calc(var(--n) * -1.9s) infinite}
.cfx-logo{flex:none;display:grid;place-items:center;width:24px;height:24px}
.cfx-logo svg,.cfx-logo img{display:block;width:21px;height:21px}
.cfx-name{display:none}
@container cfx (min-width:640px){
  .tt-codefx .cfx-badge{padding-inline-end:12px}
  .tt-codefx .cfx-name{display:inline}
}

/* hero and portal composition (wider than 760px) */
.tt-codefx[data-codefx=hero] .cfx-editor,.tt-codefx[data-codefx=portal] .cfx-editor{top:9%;left:3%;width:75%;transform:rotateY(var(--cfx-tilt)) rotateX(2deg);transform-origin:center}
.tt-codefx[data-codefx=hero] .cfx-term{bottom:0;inset-inline-end:0;width:58%;transform:rotateY(var(--cfx-tilt)) translateZ(24px)}
.tt-codefx[data-codefx] .cfx-badge{right:1%}
.tt-codefx[data-codefx=hero] .cfx-badge:nth-child(1){top:0;right:auto;left:36%}
.tt-codefx[data-codefx=hero] .cfx-badge:nth-child(2){top:19%;right:3%}
.tt-codefx[data-codefx=hero] .cfx-badge:nth-child(3){top:34%;right:8%}
.tt-codefx[data-codefx=hero] .cfx-badge:nth-child(4){top:49%;right:5%}
.tt-codefx[data-codefx=hero] .cfx-badge:nth-child(5){top:0}
.tt-codefx[data-codefx=hero] .cfx-badge:nth-child(6){top:64%}
/* a short hero (the stacked WordPress hero, 430px): the 13-row editor fills it, so no terminal */
@container cfx (max-height:500px){
  .tt-codefx[data-codefx=hero] .cfx-term{display:none}
}
.tt-codefx[data-codefx=portal]{--cfx-font:12.5px}
.tt-codefx[data-codefx=portal] .cfx-editor{top:0}
.tt-codefx[data-codefx=portal] .cfx-term{bottom:0;inset-inline-end:-3%;width:56%;transform:rotateY(var(--cfx-tilt)) translateZ(40px)}
.tt-codefx[data-codefx=portal] .cfx-badge:nth-child(1){top:0}
.tt-codefx[data-codefx=portal] .cfx-badge:nth-child(2){top:17%;right:6%}
.tt-codefx[data-codefx=portal] .cfx-badge:nth-child(3){top:34%}
.tt-codefx[data-codefx=portal] .cfx-badge:nth-child(4){top:51%;right:4%}
.tt-codefx[data-codefx=portal] .cfx-ghost{opacity:.05}

/* footer: the same editor as a calm, chrome-less page of code behind the links, without a current-line band */
.tt-codefx-footer{position:absolute!important;inset:0;z-index:0;overflow:hidden;opacity:.14;--cfx-font:14px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 82%,transparent)}
.tt-codefx-footer .cfx-glow,.tt-codefx-footer .cfx-bar,.tt-codefx-footer .cfx-status{display:none}
.tt-codefx-footer .cfx-editor{top:4%;inset-inline-end:4%;width:min(760px,62%);border:0;background:none;box-shadow:none;border-radius:0}
.tt-codefx-footer .cfx-row.is-cur{background:none;box-shadow:none}
.tt-codefx-footer .cfx-caret{animation-duration:1.6s}

/* tablets */
@media (max-width:1000px){
  .tt-codefx{--cfx-font:12.5px}
}
/* phones: smaller type, fewer parts, nothing wider than the screen; the badges sit in a row under the editor */
@media (max-width:760px){
  .tt-codefx{--cfx-font:11px;--cfx-tilt:0deg}
  .tt-codefx .cfx-far{display:none}
  .tt-codefx[data-codefx=hero] .cfx-editor,.tt-codefx[data-codefx=portal] .cfx-editor{top:6%;left:4%;width:92%;transform:none}
  .cfx-bar{height:30px}.cfx-tab,.cfx-title{font-size:10.5px;padding:6px 8px 7px}.cfx-tab{width:calc(18ch + 16px)}.cfx-tab+.cfx-tab{display:none}
  .cfx-status{height:20px;line-height:20px;font-size:10px}
  .tt-codefx .cfx-badge{padding:5px;gap:0}.tt-codefx .cfx-name{display:none}.cfx-logo{width:22px;height:22px}.cfx-logo svg,.cfx-logo img{width:19px;height:19px}
  .tt-codefx[data-codefx] .cfx-badge:nth-child(n){top:auto;bottom:3%;right:auto}
  .tt-codefx[data-codefx] .cfx-badge:nth-child(1){left:calc(50% - 82px)}
  .tt-codefx[data-codefx] .cfx-badge:nth-child(2){left:calc(50% - 40px)}
  .tt-codefx[data-codefx] .cfx-badge:nth-child(3){left:calc(50% + 2px)}
  .tt-codefx[data-codefx] .cfx-badge:nth-child(4){left:calc(50% + 44px)}
  .tt-codefx-footer{opacity:.1;--cfx-font:11.5px}
  .tt-codefx-footer .cfx-editor{inset-inline-end:0;width:100%}
}

/* motion states */
/* set by the script when the visitor stops motion (or under reduced motion): the badges stand in place; after resume
   they only drift (cfx-float keeps its running time, the entrance is not replayed); before the paused rule,
   whose play-state its animation shorthand would otherwise reset */
.cfx-shown .cfx-badge{opacity:1;animation:cfx-float 11s ease-in-out calc(var(--n) * -1.9s) infinite}
.cfx-paused .cfx-badge,.cfx-paused .cfx-caret{animation-play-state:paused}
.cfx-paused .cfx-code,.cfx-paused .cfx-term-body{scroll-behavior:auto}
.cfx-still .cfx-badge{animation:none;opacity:1}
.cfx-still .cfx-caret{animation:none;opacity:.85}
@media (prefers-reduced-motion:reduce){
  .tt-codefx .cfx-badge,.tt-codefx .cfx-caret{animation:none!important;opacity:1}
  .tt-codefx .cfx-code,.tt-codefx .cfx-term-body{transition:none;scroll-behavior:auto}
}
@keyframes cfx-caret{0%,45%{opacity:1}60%,100%{opacity:.18}}
@keyframes cfx-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cfx-float{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* the visitor's motion switch on pages without one of their own: the same look as the WordPress hero switch
   (button.motion in tt-rebrand/tt.css), with a 44px touch target on phones */
.tt-codefx-toggle{position:absolute;z-index:4;inset-block-end:14px;inset-inline-end:16px;padding:5px 13px;border-radius:8px;
  border:1px solid #a36d37;background:rgba(9,9,13,.91);color:#e9d4a9;font-weight:400;font-size:12px;line-height:1.8;
  cursor:pointer;pointer-events:auto}
/* !important only to beat WHMCS style.min.css `body[data-font=opensans] button{font-family:beIN-Black!important}`,
   which would otherwise give the footer switch a different face from the WordPress one; scoped to this switch */
.tt-codefx-toggle[data-codefx-toggle]{font-family:"TT Tajawal",Tahoma,Arial,sans-serif!important}
.tt-codefx-toggle:hover{border-color:#f3d794;color:#fff0af}
.tt-codefx-toggle:focus-visible{outline:3px solid #f0cd7b;outline-offset:3px}
.tt-codefx-toggle[disabled]{opacity:.75;cursor:default}
@media (max-width:760px){.tt-codefx-toggle{min-height:44px}}
@media (max-width:700px){.tt-codefx-toggle{font-size:11px}}