/* ENI loader showcase - widget styles.
   Scoped under .eni-showcase; classes .es-*, custom properties --es-*.
   Fonts come from the shared <link> in index.html - no extra request.
   Markup: index.html   Behaviour: assets/js/eni-showcase.js */
/* ============================================================
   TOKENS - scoped to the widget root
   ============================================================ */
.eni-showcase{
  --es-v:#0A0710;  --es-pn:#150E20; --es-pn2:#1B1329; --es-fd:#0F0A18;
  --es-ln:#2A1F3B; --es-ln2:#3A2B52;
  --es-vi:#7A35CE; --es-vil:#A855F7; --es-mg:#E24FD0;
  --es-tx:#F0EAF7; --es-tx2:#9C8DAF; --es-tx3:#6E6182;
  --es-ok:#3FD68C; --es-wn:#F5A524; --es-bd:#FF5470;
  --es-grad:linear-gradient(100deg,#6E2BD0 0%,#9B3BE0 46%,#DC4FD6 100%);

  position:relative; display:block; width:100%;
  font-family:Archivo,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.5; color:var(--es-tx);
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.eni-showcase *,
.eni-showcase *::before,
.eni-showcase *::after{box-sizing:border-box}
.eni-showcase p,.eni-showcase h1,.eni-showcase h2,.eni-showcase h3{margin:0}

/* ============================================================
   STAGE
   ============================================================ */
.eni-showcase .es-stage{position:relative; width:100%}

/* the violet bloom behind the window - works on light or dark sites */
.eni-showcase .es-stage::before{
  content:""; position:absolute; left:50%; top:4%; width:86%; height:74%;
  transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,
              rgba(140,60,220,.34), rgba(120,50,200,.10) 45%, transparent 72%);
  filter:blur(18px);
  animation:es-bloom 17s ease-in-out infinite;
}
.eni-showcase .es-viewport{position:relative; width:100%; z-index:1}
.eni-showcase .es-scaler{
  position:absolute; left:50%; top:0; width:1000px; height:800px;
  margin-left:-500px; transform-origin:top center;
}

/* ============================================================
   WINDOW CHROME
   ============================================================ */
.eni-showcase .es-win{
  position:absolute; background:var(--es-v); border:1px solid var(--es-ln);
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 46px 100px -28px rgba(0,0,0,.92), 0 0 0 1px rgba(168,85,247,.07);
  opacity:0; visibility:hidden;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1);
}
.eni-showcase .es-win::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(78% 46% at 50% -6%, rgba(122,53,206,.30), transparent 66%);
}
.eni-showcase .es-win > *{position:relative; z-index:1}

/* auth window - 460x680, centred inside the 1000x800 stage */
.eni-showcase .es-auth{width:460px; height:680px; left:270px; top:60px;
  transform:translateY(22px) scale(.97)}
/* loader window - fills the stage */
.eni-showcase .es-load{width:1000px; height:800px; left:0; top:0;
  transform:translateY(26px) scale(.985)}

.eni-showcase .es-win.es-on{opacity:1; visibility:visible; transform:none}
.eni-showcase .es-win.es-out{opacity:0; transform:translateY(-14px) scale(.985)}

/* titlebar */
.eni-showcase .es-tbar{
  height:38px; flex:none; display:flex; align-items:center; padding:0 6px 0 16px;
  border-bottom:1px solid var(--es-ln); background:rgba(21,14,32,.55);
}
.eni-showcase .es-tmark{font-family:"Chakra Petch",sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:.26em; color:#C9A0FF;
  text-shadow:0 0 14px rgba(168,85,247,.7)}
.eni-showcase .es-tsub{font-size:11.5px; color:var(--es-tx3); margin-left:11px}
.eni-showcase .es-tctl{margin-left:auto; display:flex; gap:0}
.eni-showcase .es-tctl i{
  width:34px; height:26px; display:grid; place-items:center; border-radius:6px;
  color:var(--es-tx3);
}
.eni-showcase .es-tctl svg{width:16px; height:16px}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.eni-showcase .es-ico{fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none;
  width:16px; height:16px}

.eni-showcase .es-mark{font-family:"Chakra Petch",sans-serif; font-weight:700;
  letter-spacing:.16em; line-height:1; background:var(--es-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(160,60,230,.55))}
.eni-showcase .es-mark.es-xl{font-size:44px}
.eni-showcase .es-mark.es-lg{font-size:26px}
.eni-showcase .es-hair{width:44px; height:2px; border-radius:2px;
  background:var(--es-grad); opacity:.85}

.eni-showcase .es-eyebrow{font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--es-tx3)}
.eni-showcase .es-h{font-family:"Chakra Petch",sans-serif; font-weight:600;
  font-size:21px}
.eni-showcase .es-sub{font-size:13px; color:var(--es-tx2); line-height:1.55}
.eni-showcase .es-tiny{font-size:11px; color:var(--es-tx3); line-height:1.5}
.eni-showcase .es-mono{font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums}

/* fields - display only, values are typed in by script */
.eni-showcase .es-field{position:relative; display:flex; align-items:center;
  height:48px; background:var(--es-fd); border:1px solid var(--es-ln);
  border-radius:10px; transition:border-color .2s, box-shadow .2s, background .2s}
.eni-showcase .es-field .es-lead{width:44px; display:grid; place-items:center;
  color:var(--es-tx3); flex:none; transition:color .2s}
.eni-showcase .es-field .es-val{flex:1; min-width:0; font-size:14px;
  color:var(--es-tx); white-space:pre; overflow:hidden}
.eni-showcase .es-field .es-ph{color:var(--es-tx3)}
.eni-showcase .es-field .es-trail{width:42px; display:grid; place-items:center;
  color:var(--es-tx3)}
.eni-showcase .es-field.es-hot{border-color:var(--es-vi);
  box-shadow:0 0 0 3px rgba(122,53,206,.20); background:#120C1D}
.eni-showcase .es-field.es-hot .es-lead{color:var(--es-vil)}
.eni-showcase .es-field.es-good{border-color:rgba(63,214,140,.55)}
.eni-showcase .es-flabel{font-size:11.5px; font-weight:500; color:var(--es-tx2);
  margin-bottom:7px}

/* caret */
.eni-showcase .es-caret{display:none; width:1.5px; height:18px; margin-left:1px;
  background:var(--es-vil); vertical-align:middle;
  animation:es-blink 1.06s steps(1) infinite}
.eni-showcase .es-field.es-hot .es-caret{display:inline-block}

/* buttons */
.eni-showcase .es-btn{
  position:relative; overflow:hidden; display:flex; align-items:center;
  justify-content:center; gap:9px; width:100%; height:48px; border:0;
  border-radius:10px; color:#fff; background:var(--es-grad); background-size:150% 100%;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:13.5px;
  letter-spacing:.10em; text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(255,255,255,.09) inset, 0 8px 26px -8px rgba(150,50,220,.7);
  transition:box-shadow .25s, filter .25s, transform .1s;
}
.eni-showcase .es-btn.es-tall{height:56px; font-size:14.5px}
.eni-showcase .es-btn.es-hero{height:62px; font-size:16px; letter-spacing:.14em;
  border-radius:12px}
.eni-showcase .es-btn.es-hover{filter:brightness(1.09); background-position:100% 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 34px -6px rgba(170,60,235,.85)}
.eni-showcase .es-btn.es-press{transform:translateY(1px) scale(.994); filter:brightness(.95)}

.eni-showcase .es-btn2{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:44px; border:1px solid var(--es-ln); border-radius:10px;
  background:var(--es-pn); color:var(--es-tx2);
  font-family:"Chakra Petch",sans-serif; font-weight:500; font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase;
}
.eni-showcase .es-link{font-size:12.5px; color:var(--es-vil)}

/* checkbox + toggle */
.eni-showcase .es-cbx{display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--es-tx2)}
.eni-showcase .es-cbx b{width:16px; height:16px; border-radius:5px; flex:none;
  display:grid; place-items:center; background:var(--es-grad);
  box-shadow:0 0 12px -2px rgba(160,60,230,.8)}
.eni-showcase .es-cbx b svg{width:11px; height:11px; stroke-width:2.6; color:#fff}
.eni-showcase .es-tgl{width:46px; height:26px; border-radius:99px; flex:none;
  position:relative; background:var(--es-ln); border:1px solid var(--es-ln2);
  transition:background .22s, box-shadow .22s, border-color .22s}
.eni-showcase .es-tgl i{position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#8E80A2;
  transition:transform .26s cubic-bezier(.34,1.4,.64,1), background .22s}
.eni-showcase .es-tgl.es-on{background:var(--es-grad); border-color:transparent;
  box-shadow:0 0 18px -3px rgba(160,60,230,.85)}
.eni-showcase .es-tgl.es-on i{background:#fff; transform:translateX(20px)}

/* pills */
.eni-showcase .es-pill{display:inline-flex; align-items:center; gap:6px; height:24px;
  padding:0 10px; border-radius:99px; font-family:"JetBrains Mono",monospace;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  transition:background .3s, border-color .3s, color .3s}
.eni-showcase .es-pill.es-vio{background:rgba(122,53,206,.16);
  border:1px solid rgba(168,85,247,.34); color:#C39BFF}
.eni-showcase .es-pill.es-ok{background:rgba(63,214,140,.12);
  border:1px solid rgba(63,214,140,.32); color:var(--es-ok)}
.eni-showcase .es-pill.es-mute{background:rgba(255,255,255,.04);
  border:1px solid var(--es-ln2); color:var(--es-tx3)}
.eni-showcase .es-dot{width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none; position:relative}
.eni-showcase .es-dot.es-live{animation:es-breathe 2s ease-in-out infinite}
.eni-showcase .es-dot.es-live::after{content:""; position:absolute; inset:0;
  border-radius:50%; background:currentColor;
  animation:es-ping 2s cubic-bezier(0,0,.2,1) infinite}

/* cards + panel */
.eni-showcase .es-card{background:var(--es-pn); border:1px solid var(--es-ln);
  border-radius:12px; padding:15px 16px}
.eni-showcase .es-chead{display:flex; align-items:center; gap:7px;
  color:var(--es-tx3); margin-bottom:10px}
.eni-showcase .es-cval{font-family:"Chakra Petch",sans-serif; font-weight:600;
  font-size:24px; line-height:1.1; transition:color .35s}
.eni-showcase .es-panel{background:var(--es-pn); border:1px solid var(--es-ln);
  border-radius:12px; overflow:hidden; position:relative}
.eni-showcase .es-phead{display:flex; align-items:center; padding:13px 16px;
  border-bottom:1px solid var(--es-ln)}

/* component rows */
.eni-showcase .es-row{display:flex; align-items:center; gap:12px; padding:0 16px;
  height:42px; border-bottom:1px solid rgba(42,31,59,.55)}
.eni-showcase .es-row:last-child{border-bottom:0}
.eni-showcase .es-cm{width:22px; height:22px; border-radius:7px; flex:none;
  display:grid; place-items:center; border:1px solid var(--es-ln2);
  background:var(--es-fd); color:var(--es-tx3);
  transition:background .3s, border-color .3s, color .3s, box-shadow .3s}
.eni-showcase .es-cm svg{width:12px; height:12px; stroke-width:2.6}
.eni-showcase .es-rname{font-size:13.5px; font-weight:500; color:var(--es-tx2);
  transition:color .3s}
.eni-showcase .es-rstate{margin-left:auto; font-family:"JetBrains Mono",monospace;
  font-size:11px; color:var(--es-tx3); letter-spacing:.04em; transition:color .3s}
.eni-showcase .es-row.es-busy .es-cm{border-color:rgba(168,85,247,.5);
  color:var(--es-vil); background:rgba(122,53,206,.14)}
.eni-showcase .es-row.es-busy .es-rname{color:var(--es-tx)}
.eni-showcase .es-row.es-busy .es-rstate{color:#C39BFF}
.eni-showcase .es-row.es-done .es-cm{background:rgba(63,214,140,.14);
  border-color:rgba(63,214,140,.4); color:var(--es-ok);
  box-shadow:0 0 14px -3px rgba(63,214,140,.55)}
.eni-showcase .es-row.es-done .es-rname{color:var(--es-tx)}
.eni-showcase .es-row.es-done .es-rstate{color:var(--es-ok)}

/* rails */
.eni-showcase .es-rail{height:4px; border-radius:99px; background:var(--es-ln);
  overflow:hidden; position:relative}
.eni-showcase .es-rail > i{position:absolute; inset:0 auto 0 0; width:0;
  border-radius:99px; background:var(--es-grad);
  box-shadow:0 0 12px rgba(170,60,235,.9);
  transition:width .4s cubic-bezier(.16,1,.3,1)}
.eni-showcase .es-rail.es-sweep > i{width:30%; transition:none;
  animation:es-sweep 1450ms cubic-bezier(.65,.02,.35,1) infinite}

/* key segments */
.eni-showcase .es-keyrow{display:flex; align-items:center; gap:8px}
/* real <input> so it can be typed into in interactive mode */
.eni-showcase .es-seg{flex:1; min-width:0; width:100%; height:52px; border-radius:9px;
  background:var(--es-fd); border:1px solid var(--es-ln); color:var(--es-tx);
  font-family:"JetBrains Mono",monospace; font-weight:500; font-size:15px;
  letter-spacing:.10em; text-align:center; padding:0; outline:0;
  transition:border-color .2s, box-shadow .2s, background .2s}
.eni-showcase .es-seg::placeholder{color:#463A57; letter-spacing:.10em}
.eni-showcase .es-seg.es-hot{border-color:var(--es-vi);
  box-shadow:0 0 0 3px rgba(122,53,206,.20); background:#120C1D}
.eni-showcase .es-seg.es-filled{border-color:rgba(168,85,247,.42);
  background:rgba(122,53,206,.09)}
.eni-showcase .es-seg.es-good{border-color:rgba(63,214,140,.6);
  background:rgba(63,214,140,.09)}
.eni-showcase .es-dash{color:var(--es-tx3); font-family:"JetBrains Mono",monospace}

/* status bar */
.eni-showcase .es-sbar{display:flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:10px; font-size:12.5px; color:var(--es-tx2);
  background:rgba(122,53,206,.07); border:1px solid rgba(122,53,206,.22);
  transition:background .4s, border-color .4s}
.eni-showcase .es-sbar.es-good{background:rgba(63,214,140,.07);
  border-color:rgba(63,214,140,.24)}
.eni-showcase .es-sbar b{color:var(--es-tx); font-weight:600}

/* spinner */
.eni-showcase .es-spin{display:inline-grid; place-items:center; flex:none;
  width:20px; height:20px}
.eni-showcase .es-spin.es-tiny{width:13px; height:13px}
.eni-showcase .es-spin svg{width:100%; height:100%; overflow:visible}
.eni-showcase .es-spin circle{fill:none; stroke-linecap:round;
  transform-origin:50% 50%}
.eni-showcase .es-t{stroke:rgba(255,255,255,.10); stroke-width:2.5}
.eni-showcase .es-a1{stroke:#E9A6FF; stroke-width:2.8; stroke-dasharray:32 82;
  animation:es-spin 900ms linear infinite}
.eni-showcase .es-a2{stroke:#A855F7; stroke-width:2.4; stroke-dasharray:16 60;
  animation:es-spinr 1500ms linear infinite}
.eni-showcase .es-core{fill:#fff; stroke:none;
  animation:es-core 1200ms ease-in-out infinite}

/* layout helpers */
.eni-showcase .es-pad{padding:30px 32px 26px; display:flex; flex-direction:column;
  flex:1; min-height:0}
.eni-showcase .es-pad.es-main{padding:20px 22px 18px; gap:14px}
.eni-showcase .es-col{display:flex; flex-direction:column}
.eni-showcase .es-r{display:flex; align-items:center}
.eni-showcase .es-spread{display:flex; align-items:center; justify-content:space-between}
.eni-showcase .es-push{margin-top:auto}
.eni-showcase .es-sep{height:1px; background:var(--es-ln); width:100%}
.eni-showcase .es-g8{gap:8px}  .eni-showcase .es-g10{gap:10px}
.eni-showcase .es-g12{gap:12px}.eni-showcase .es-g14{gap:14px}

/* auth view swapping */
.eni-showcase .es-view{display:none; flex-direction:column; flex:1; min-height:0}
.eni-showcase .es-view.es-on{display:flex; animation:es-viewin .34s cubic-bezier(.22,.9,.3,1) both}


/* ============================================================
   MOTION
   ============================================================ */
@keyframes es-spin  {to{transform:rotate(360deg)}}
@keyframes es-spinr {to{transform:rotate(-360deg)}}
@keyframes es-core  {0%,100%{r:2.6;opacity:.55} 50%{r:4.2;opacity:1}}
@keyframes es-blink {0%,49%{opacity:1} 50%,100%{opacity:0}}
@keyframes es-sweep {0%{transform:translateX(-105%)} 100%{transform:translateX(360%)}}
@keyframes es-breathe{0%,100%{opacity:.6} 50%{opacity:1}}
@keyframes es-ping  {0%{transform:scale(1);opacity:.55} 75%,100%{transform:scale(2.8);opacity:0}}
@keyframes es-bloom {
  0%,100%{opacity:.72; transform:translateX(-50%) scale(1)}
  50%    {opacity:1;   transform:translateX(-50%) scale(1.1)}
}
@keyframes es-viewin{0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:none}}
@keyframes es-checkin{0%{opacity:0;transform:translateY(7px)} 100%{opacity:1;transform:none}}
@keyframes es-pop   {0%{transform:scale(.55);opacity:0} 55%{transform:scale(1.18);opacity:1}
                     100%{transform:scale(1)}}
@keyframes es-glow  {
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.09) inset, 0 6px 22px -8px rgba(150,50,220,.55)}
  50%    {box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 10px 40px -6px rgba(180,70,240,.95)}
}
@keyframes es-shimmer{
  0%{transform:translateX(-130%) skewX(-18deg)}
  60%,100%{transform:translateX(320%) skewX(-18deg)}
}
@keyframes es-scan{
  0%{transform:translateY(-8px); opacity:0}
  12%{opacity:1} 88%{opacity:1}
  100%{transform:translateY(var(--es-to,320px)); opacity:0}
}
@keyframes es-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}

.eni-showcase .es-checkin{animation:es-checkin .4s cubic-bezier(.22,.9,.3,1) both}
.eni-showcase .es-pop{animation:es-pop .38s cubic-bezier(.34,1.56,.64,1) both}
.eni-showcase .es-btn.es-glow{animation:es-glow 2600ms ease-in-out infinite}
.eni-showcase .es-btn.es-shim::after{
  content:""; position:absolute; top:0; bottom:0; width:34%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  animation:es-shimmer 2600ms cubic-bezier(.45,0,.25,1) infinite;
}
.eni-showcase .es-scanline{
  position:absolute; left:0; right:0; height:34px; pointer-events:none; z-index:2;
  background:linear-gradient(180deg,transparent,rgba(168,85,247,.16) 70%,rgba(226,79,208,.55));
  border-bottom:1px solid rgba(226,79,208,.65);
  animation:es-scan 1500ms cubic-bezier(.4,0,.5,1) both;
}
/* The whole stage drifts, very slightly - a still product shot looks dead.
   This lives on its own wrapper, NOT on the windows: the windows own their
   transform for the enter/exit slide, and an animation would override it. */
.eni-showcase .es-drift{position:absolute; inset:0;
  animation:es-float 9s ease-in-out infinite}

/* pause everything while off screen so we don't burn a core in a background tab */
.eni-showcase.es-idle .es-scaler *,
.eni-showcase.es-idle .es-stage::before{animation-play-state:paused !important}

/* ============================================================
   CAPTION + PROGRESS
   ============================================================ */
.eni-showcase .es-caption{
  position:relative; z-index:2; display:flex; align-items:flex-start; gap:18px;
  margin:26px auto 0; max-width:660px; padding:0 16px; min-height:64px;
}
.eni-showcase .es-num{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em;
  color:#B77BFF; padding-top:5px; flex:none; width:24px;
}
.eni-showcase .es-ctext{flex:1; min-width:0}
.eni-showcase .es-ctitle{
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:20px;
  color:#F0EAF7; letter-spacing:.01em; line-height:1.25;
}
.eni-showcase .es-cbody{font-size:14px; color:#9C8DAF; margin-top:5px; line-height:1.55}
.eni-showcase .es-fade{transition:opacity .3s ease, transform .3s ease}
.eni-showcase .es-fade.es-hide{opacity:0; transform:translateY(6px)}

.eni-showcase .es-dots{
  display:flex; gap:7px; justify-content:center; margin-top:22px;
  position:relative; z-index:2;
}
.eni-showcase .es-dots span{
  width:34px; height:3px; border-radius:99px; background:rgba(168,85,247,.20);
  overflow:hidden; position:relative;
}
.eni-showcase .es-dots span i{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:99px;
  background:var(--es-grad);
}
.eni-showcase .es-dots span.es-done i{width:100%}

/* ============================================================
   RESPONSIVE
   The window is a fixed 1000x800 desktop app; on narrow screens
   it scales down as a whole, exactly like a product screenshot.
   ============================================================ */
@media (max-width:560px){
  .eni-showcase .es-caption{gap:12px; margin-top:18px; min-height:78px}
  .eni-showcase .es-ctitle{font-size:17px}
  .eni-showcase .es-cbody{font-size:13px}
  .eni-showcase .es-dots span{width:26px}
}

/* ============================================================
   REDUCED MOTION
   Show the finished, active state. No loop, no movement.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .eni-showcase .es-drift,
  .eni-showcase .es-stage::before,
  .eni-showcase .es-btn.es-glow,
  .eni-showcase .es-btn.es-shim::after,
  .eni-showcase .es-dot.es-live,
  .eni-showcase .es-dot.es-live::after,
  .eni-showcase .es-spin circle,
  .eni-showcase .es-rail.es-sweep > i{animation:none !important}
  .eni-showcase .es-caret{display:none !important}
  .eni-showcase .es-win{transition:none !important}
  .eni-showcase .es-checkin,.eni-showcase .es-pop,
  .eni-showcase .es-view.es-on{animation-duration:1ms !important}
  .eni-showcase .es-scanline{display:none !important}
}


/* ============================================================
   INTERACTIVE LAYER
   Two modes on one widget:
     demo  - autoplaying loop, window inert, click-catcher on top
     live  - visitor drives it, real inputs and buttons
   ============================================================ */

/* ---- buttons are real <button>s now: strip UA styling ---- */
.eni-showcase .es-btn,
.eni-showcase .es-btn2{border:0; margin:0; font:inherit; text-align:center;
  -webkit-appearance:none; appearance:none}
.eni-showcase .es-btn2{border:1px solid var(--es-ln)}
.eni-showcase .es-btn:disabled,
.eni-showcase .es-btn2:disabled{cursor:not-allowed}
.eni-showcase .es-btn.es-dim{filter:grayscale(.75) brightness(.62); box-shadow:none}

/* ---- demo vs live element swap ---- */
.eni-showcase .es-input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  padding:0 14px 0 0; color:var(--es-tx); font-family:Archivo,sans-serif;
  font-size:14px; letter-spacing:.01em;
}
.eni-showcase .es-input::placeholder{color:var(--es-tx3)}
.eni-showcase:not(.es-live) .es-input{display:none}
.eni-showcase.es-live .es-demoval{display:none}

/* in live mode the browser draws the caret; the fake one is demo-only */
.eni-showcase.es-live .es-caret{display:none !important}

/* ---- demo mode: window is inert, one big click target ---- */
.eni-showcase:not(.es-live) .es-drift{pointer-events:none}
.eni-showcase .es-catch{
  position:absolute; inset:0; z-index:6; cursor:pointer;
  background:transparent; border:0; padding:0; display:block;
}
.eni-showcase.es-live .es-catch{display:none}
.eni-showcase .es-catch:focus-visible{
  outline:2px solid #A855F7; outline-offset:-4px; border-radius:12px}

/* the invitation, shown only while watching */
.eni-showcase .es-invite{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:7; pointer-events:none;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:8px 15px; border-radius:99px;
  background:rgba(21,14,32,.86); border:1px solid rgba(168,85,247,.34);
  backdrop-filter:blur(6px);
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#C39BFF;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8);
  transition:opacity .3s ease, transform .3s ease;
}
.eni-showcase .es-catch:hover + .es-invite{
  transform:translateX(-50%) translateY(-3px);
  border-color:rgba(168,85,247,.6); color:#E9C7FF}
.eni-showcase.es-live .es-invite{opacity:0; transform:translateX(-50%) translateY(6px)}
.eni-showcase .es-invite svg{width:13px; height:13px}

/* ---- controls under the stage ---- */
.eni-showcase .es-controls{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin-top:20px; position:relative; z-index:2;
}
.eni-showcase .es-mode{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 16px; border-radius:99px; border:1px solid rgba(168,85,247,.34);
  background:rgba(122,53,206,.12); color:#C39BFF;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s;
}
.eni-showcase .es-mode:hover{background:rgba(122,53,206,.22);
  border-color:rgba(168,85,247,.6); color:#E9C7FF}
.eni-showcase .es-mode svg{width:14px; height:14px}
.eni-showcase .es-note{font-size:12.5px; color:#6E6182}
.eni-showcase .es-note b{color:#9C8DAF; font-weight:600}

/* dots belong to the timeline, so they go away when you take over */
.eni-showcase.es-live .es-dots{display:none}

/* ---- error / validation ---- */
@keyframes es-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)} 30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)} 60%{transform:translateX(3px)}
  80%{transform:translateX(-1px)}
}
.eni-showcase .es-shake{animation:es-shake .44s cubic-bezier(.36,.07,.19,.97) both}
.eni-showcase .es-field.es-bad{border-color:var(--es-bd);
  box-shadow:0 0 0 3px rgba(255,84,112,.16)}
.eni-showcase .es-field.es-bad .es-lead{color:var(--es-bd)}
.eni-showcase .es-seg.es-bad{border-color:var(--es-bd); background:rgba(255,84,112,.07)}
.eni-showcase .es-sbar.es-bad{background:rgba(255,84,112,.07);
  border-color:rgba(255,84,112,.26)}

/* ---- Reset HWID modal ---- */
.eni-showcase .es-scrim{
  position:absolute; inset:0; z-index:8; display:none; place-items:center;
  padding:22px; background:rgba(6,4,10,.74); backdrop-filter:blur(3px);
}
.eni-showcase .es-scrim.es-on{display:grid}
.eni-showcase .es-modal{
  width:100%; background:var(--es-pn); border:1px solid var(--es-ln2);
  border-radius:14px; padding:22px;
  box-shadow:0 28px 60px -18px rgba(0,0,0,.9);
  animation:es-viewin .32s cubic-bezier(.22,.9,.3,1) both;
}
.eni-showcase .es-mico{width:40px; height:40px; border-radius:11px; flex:none;
  display:grid; place-items:center; background:rgba(245,165,36,.12);
  border:1px solid rgba(245,165,36,.3); color:var(--es-wn)}
.eni-showcase .es-mico svg{width:19px; height:19px}
.eni-showcase .es-pill.es-warn{background:rgba(245,165,36,.12);
  border:1px solid rgba(245,165,36,.32); color:var(--es-wn)}
.eni-showcase .es-hwid{font-family:"JetBrains Mono",monospace; font-size:12px;
  color:var(--es-tx); letter-spacing:.02em; word-break:break-all}

/* ---- screen-reader announcements ---- */
.eni-showcase .es-sr{position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---- focus ---- */
.eni-showcase.es-live .es-btn:focus-visible,
.eni-showcase.es-live .es-btn2:focus-visible,
.eni-showcase.es-live .es-mode:focus-visible,
.eni-showcase .es-mode:focus-visible{
  outline:2px solid #C39BFF; outline-offset:3px}
.eni-showcase.es-live .es-field:focus-within{border-color:var(--es-vi);
  box-shadow:0 0 0 3px rgba(122,53,206,.20); background:#120C1D}
.eni-showcase.es-live .es-field:focus-within .es-lead{color:var(--es-vil)}
.eni-showcase.es-live .es-seg:focus{border-color:var(--es-vi);
  box-shadow:0 0 0 3px rgba(122,53,206,.20); background:#120C1D}

/* ---- interactive mode is desktop-only: see README ----
   A 1000px window scaled to phone width makes 14px inputs about 5px tall,
   and iOS zooms the whole page when you focus one. Below 720px the widget
   stays a showcase and the take-over control is hidden. */
@media (max-width:719px){
  .eni-showcase .es-catch,
  .eni-showcase .es-invite,
  .eni-showcase .es-controls{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  .eni-showcase .es-invite,
  .eni-showcase .es-modal{transition:none !important; animation:none !important}
  .eni-showcase .es-shake{animation-duration:1ms !important}
}


/* ============================================================
   SCENE 05 - DESKTOP, SYSTEM TRAY, STEALTH CLOSE
   Windows chrome is deliberately neutral grey, not ENI violet:
   it is the operating system, and dressing it in brand colour
   would read as part of the product rather than around it.
   ============================================================ */

/* ---- taskbar ---- */
.eni-showcase .es-taskbar{
  position:absolute; left:0; right:0; bottom:0; height:48px; z-index:4;
  display:flex; align-items:center; padding:0 10px 0 14px;
  background:rgba(17,17,21,.94); border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  transform:translateY(100%); opacity:0;
  transition:transform .45s cubic-bezier(.22,.9,.3,1), opacity .35s ease;
  pointer-events:none;
}
.eni-showcase .es-taskbar.es-on{ transform:none; opacity:1; pointer-events:auto }
.eni-showcase .es-tb-l{ display:flex; align-items:center; gap:6px }
.eni-showcase .es-tb-r{ margin-left:auto; display:flex; align-items:center; gap:4px }
.eni-showcase .es-tb-app{
  width:34px; height:34px; border-radius:6px; display:grid; place-items:center;
  color:#c9c9d4;
}
.eni-showcase .es-tb-app svg{ width:18px; height:18px }
.eni-showcase .es-tb-app.es-win svg{ width:17px; height:17px; color:#7fb2ff }
.eni-showcase .es-tb-sq{ width:15px; height:15px; border-radius:3px; background:#4a4a58 }
.eni-showcase .es-tb-sq.es-b{ background:#3f5f8a } .eni-showcase .es-tb-sq.es-c{ background:#5a4470 }
.eni-showcase .es-tray{
  width:30px; height:30px; border-radius:5px; display:grid; place-items:center;
  color:#c9c9d4; border:0; background:none; padding:0; cursor:default;
  transition:background .16s;
}
.eni-showcase .es-tray svg{ width:15px; height:15px }
.eni-showcase .es-tray.es-hot,
.eni-showcase.es-live .es-tray:hover{ background:rgba(255,255,255,.10) }
.eni-showcase .es-tb-clock{
  display:grid; justify-items:end; gap:2px; padding:0 6px 0 10px;
  font:400 11px/1.15 "Segoe UI",Archivo,sans-serif; color:#d2d2dc;
  font-variant-numeric:tabular-nums;
}
.eni-showcase .es-tb-clock i{ font-style:normal; font-size:10.5px; color:#9a9aa8 }

/* ---- hidden-icons flyout ---- */
.eni-showcase .es-flyout{
  position:absolute; right:112px; bottom:58px; z-index:5;
  display:grid; grid-template-columns:repeat(3,34px); gap:6px; padding:9px;
  background:#232329; border:1px solid #3a3a44; border-radius:9px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.85);
  opacity:0; transform:translateY(8px) scale(.96); transform-origin:bottom center;
  transition:opacity .2s ease, transform .2s cubic-bezier(.22,.9,.3,1);
  pointer-events:none;
}
.eni-showcase .es-flyout.es-on{ opacity:1; transform:none; pointer-events:auto }
.eni-showcase .es-fly{
  width:34px; height:34px; border-radius:6px; display:grid; place-items:center;
  border:0; background:none; padding:0; color:#b9b9c6; transition:background .16s;
}
.eni-showcase .es-fly svg{ width:16px; height:16px }
.eni-showcase .es-fly.es-hot,
.eni-showcase.es-live .es-fly:hover{ background:rgba(255,255,255,.10) }
/* the ENI tray icon itself - the one thing here that is allowed brand colour */
.eni-showcase .es-fly-eni{
  background:linear-gradient(140deg,#6E2BD0,#DC4FD6); border-radius:7px;
  width:22px; height:22px; display:grid; place-items:center;
  font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.02em; color:#fff; box-shadow:0 0 12px -2px rgba(160,60,230,.9);
}
.eni-showcase .es-fly-eni.es-gone{ opacity:0; transform:scale(.4);
  transition:opacity .3s ease, transform .3s ease }

/* ---- tray context menu ---- */
.eni-showcase .es-ctx{
  position:absolute; right:96px; bottom:104px; z-index:6; width:224px;
  padding:5px; background:#232329; border:1px solid #3a3a44; border-radius:9px;
  box-shadow:0 22px 54px -16px rgba(0,0,0,.9);
  opacity:0; transform:translateY(8px) scale(.97); transform-origin:bottom right;
  transition:opacity .18s ease, transform .18s cubic-bezier(.22,.9,.3,1);
  pointer-events:none;
}
.eni-showcase .es-ctx.es-on{ opacity:1; transform:none; pointer-events:auto }
.eni-showcase .es-ctx-h{
  display:flex; align-items:center; gap:8px; padding:8px 10px 9px;
  border-bottom:1px solid #34343d; margin-bottom:4px;
}
.eni-showcase .es-ctx-h b{
  font-family:"Chakra Petch",sans-serif; font-size:12px; letter-spacing:.14em;
  color:#e7e7ef;
}
.eni-showcase .es-ctx-h span{
  margin-left:auto; font:500 9.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.12em; color:#4ade9a;
}
.eni-showcase .es-ctx-i{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  border:0; background:none; border-radius:5px; text-align:left;
  font:400 13px/1.2 "Segoe UI",Archivo,sans-serif; color:#e2e2ea;
  transition:background .14s;
}
.eni-showcase .es-ctx-i svg{ width:15px; height:15px; color:#a9a9b8; flex:none }
.eni-showcase .es-ctx-i.es-hot,
.eni-showcase.es-live .es-ctx-i:hover{ background:rgba(255,255,255,.09) }
.eni-showcase .es-ctx-sep{ height:1px; background:#34343d; margin:4px 6px }
/* the one the visitor is here for */
.eni-showcase .es-ctx-i.es-key{ color:#EBD9FF }
.eni-showcase .es-ctx-i.es-key svg{ color:#C39BFF }
.eni-showcase .es-ctx-i.es-key.es-hot,
.eni-showcase.es-live .es-ctx-i.es-key:hover{
  background:linear-gradient(100deg,rgba(110,43,208,.55),rgba(220,79,214,.45));
  color:#fff }
.eni-showcase .es-ctx-i.es-key.es-hot svg,
.eni-showcase.es-live .es-ctx-i.es-key:hover svg{ color:#fff }
.eni-showcase .es-ctx-i.es-warn{ color:#ff9aae }
.eni-showcase .es-ctx-i.es-warn svg{ color:#ff7d95 }

/* ---- desktop line shown once ENI has gone quiet ---- */
.eni-showcase .es-gone{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) scale(.96);
  z-index:3; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.9,.3,1);
}
.eni-showcase .es-gone.es-on{ opacity:1; transform:translate(-50%,-50%) }
.eni-showcase .es-gone b{
  display:block; font-family:"Chakra Petch",sans-serif; font-weight:600;
  font-size:26px; color:var(--es-tx); letter-spacing:.01em;
}
.eni-showcase .es-gone i{
  display:block; margin-top:9px; font-style:normal; font-size:14px;
  color:var(--es-tx2);
}
.eni-showcase .es-gone .es-pill{ margin-top:16px }

/* ---- the pointer that drives scene 05 in watch mode ---- */
.eni-showcase .es-ptr{
  position:absolute; z-index:7; width:22px; height:22px; left:0; top:0;
  opacity:0; pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.85));
  transition:opacity .25s ease, transform .62s cubic-bezier(.4,0,.2,1);
}
.eni-showcase .es-ptr.es-on{ opacity:1 }
.eni-showcase .es-ptr .es-p-fill{ fill:#fff }
.eni-showcase .es-ptr .es-p-line{ fill:#12121a }
/* a click ring, fired at each press */
.eni-showcase .es-ring{
  position:absolute; z-index:7; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; border:2px solid rgba(226,79,208,.9); opacity:0;
  pointer-events:none;
}
.eni-showcase .es-ring.es-go{ animation:es-ring .5s cubic-bezier(0,0,.2,1) both }
@keyframes es-ring{
  0%{ transform:scale(.3); opacity:.95 }
  100%{ transform:scale(1.9); opacity:0 }
}
/* right-click gets two rings so the gesture reads as a different button */
.eni-showcase .es-ring.es-r{ border-color:rgba(168,85,247,.95) }

@media (prefers-reduced-motion:reduce){
  .eni-showcase .es-taskbar,.eni-showcase .es-flyout,
  .eni-showcase .es-ctx,.eni-showcase .es-ptr,
  .eni-showcase .es-gone{ transition:none !important }
  .eni-showcase .es-ring{ animation:none !important; opacity:0 !important }
}

/* real minimise button in the loader titlebar (live mode uses it to reach
   the tray); matches the inert <i> siblings exactly */
.eni-showcase .es-tctl-b{
  width:34px; height:26px; display:grid; place-items:center; border-radius:6px;
  color:var(--es-tx3); border:0; background:none; padding:0;
  transition:background .16s, color .16s;
}
.eni-showcase.es-live .es-tctl-b:hover{ background:rgba(255,255,255,.07); color:var(--es-tx) }
.eni-showcase .es-tctl-b svg{ width:16px; height:16px }

/* window minimising to the tray */
.eni-showcase .es-win.es-min{ opacity:0; visibility:hidden;
  transform:translateY(70px) scale(.965) }

/* The site hides the native cursor (body.has-cur) and draws a dot.
   Unusable over a widget you are meant to type into, so put it back. */
body.has-cur .eni-showcase input{ cursor:text; }
body.has-cur .eni-showcase button,
body.has-cur .eni-showcase .es-catch{ cursor:pointer; }