/* ===========================================================================
   TrustedIQ intro — refined space loader.
   Calm starfield + clean logo reveal + slim progress bar + mono caption.
   Injected by intro.js on first load (once per session).
   =========================================================================== */

#tiq-intro {
  --blue: #4752FC;
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 42%, #0a2050 0%, #06183A 48%, #02112E 100%);
  display: grid; place-items: center; overflow: hidden;
  opacity: 1; transition: opacity .8s ease, visibility .8s ease;
}
#tiq-intro.tiq-done { opacity: 0; visibility: hidden; }

#tiq-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }

.tiq-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}

.tiq-intro-logo {
  width: min(260px, 56vw); height: auto; display: block;
  opacity: 0; transform: scale(0.94);
  filter: drop-shadow(0 0 26px rgba(71, 82, 252, 0.45));
  animation: tiq-logo-in 1.1s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}
@keyframes tiq-logo-in { to { opacity: 1; transform: scale(1); } }

/* Progress bar (fills first), then the name prompt */
.tiq-loader {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  opacity: 0; animation: tiq-fade-in 0.6s ease forwards; animation-delay: 0.55s;
}
.tiq-bar { width: 200px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.tiq-bar i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--blue); box-shadow: 0 0 10px rgba(71, 82, 252, 0.8);
  animation: tiq-fill 1.5s cubic-bezier(0.45, 0.05, 0.2, 1) forwards; animation-delay: 0.4s;
}
@keyframes tiq-fill { to { width: 100%; } }
.tiq-caption {
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin: 0;
}
.tiq-loader.tiq-hide { opacity: 0; transition: opacity .4s ease; }

/* "Who am I speaking with?" prompt — appears after the bar fills */
.tiq-ask {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0; animation: tiq-fade-in 0.5s ease forwards; animation-delay: 2s;
}
.tiq-tim-face { width: 116px; height: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 0 18px rgba(71, 82, 252, 0.40)); overflow: visible; }
@keyframes tiq-tim-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tiq-tim-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes tiq-tim-spk { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes greet-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(19deg); } 75% { transform: rotate(-19deg); } }
.tiq-tim-float { animation: tiq-tim-bob 4.6s ease-in-out infinite; }
.tiq-tim-eyes { transform-box: view-box; transform-origin: 160px 118px; animation: tiq-tim-blink 2.2s ease-in-out infinite; }
.tiq-tim-spark { animation: tiq-tim-spk 2.8s ease-in-out infinite; }
/* wave: smooth raise (both ways) separate from the oscillation, triggered once they type */
.tiq-tim-face .greet-arm { transform-box: view-box; transform-origin: 216px 206px; transform: rotate(28deg); transition: transform 1.7s cubic-bezier(.3, .7, .3, 1); }
.tiq-tim-face .greet-hand { transform-box: view-box; transform-origin: 228px 300px; }
.tiq-tim-face .greet-arm-l { transform-box: view-box; transform-origin: 107px 206px; transform: rotate(-28deg); transition: transform 1.5s cubic-bezier(.3, .7, .3, 1); }
.tiq-ask.is-typing .greet-arm { transform: rotate(-142deg); }
.tiq-ask.is-typing .greet-arm-l { transform: rotate(28deg); }
.tiq-ask.is-typing .greet-hand { animation: greet-wave 0.8s ease-in-out 1.95s infinite; }
@media (prefers-reduced-motion: reduce) { .tiq-tim-float, .tiq-tim-eyes, .tiq-tim-spark { animation: none; } .tiq-ask.is-typing .greet-hand { animation: none; } }
.tiq-ask-label { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 18px; color: #fff; }
.tiq-ask-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28); padding-bottom: 7px;
}
.tiq-ask-row::before { content: ""; flex: 0 0 34px; }  /* balances the → button so the input centres */
.tiq-ask-row:focus-within { border-color: var(--blue); }
#tiqName {
  background: none; border: 0; outline: none; color: #fff;
  font-family: "Fragment Mono", ui-monospace, monospace; font-size: 18px;
  text-align: center; width: 210px;
}
#tiqName::placeholder { color: rgba(255, 255, 255, 0.4); }
.tiq-ask-go {
  background: var(--blue); color: #fff; border: 0; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
  transition: background .15s ease;
}
.tiq-ask-go:hover { background: #3742e8; }
.tiq-ask-hint {
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45);
}
.tiq-ask-skip {
  margin-top: 4px;
  background: none; border: 0; cursor: pointer;
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 6px;
  transition: color .15s ease;
}
.tiq-ask-skip:hover { color: #fff; }
@keyframes tiq-fade-in { to { opacity: 1; } }

.tiq-skip {
  position: absolute; bottom: 26px; right: 26px; z-index: 3;
  background: none; border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.55);
  font-family: "Fragment Mono", ui-monospace, monospace; font-size: 12px;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tiq-skip:hover { color: #fff; border-color: #fff; }

@media (prefers-reduced-motion: reduce) { #tiq-intro { display: none; } }

/* ===== "Trusted Tim" demo confirmation overlay (same look as the opener) ===== */
.tiq-overlay {
  --blue: #4752FC;
  position: fixed; inset: 0; z-index: 9998;
  background: radial-gradient(circle at 50% 42%, #0a2050 0%, #06183A 48%, #02112E 100%);
  display: grid; place-items: center; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease;
}
.tiq-overlay.tiq-show { opacity: 1; visibility: visible; }
.tiq-ov-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#tiq-demo .tiq-stage { position: relative; z-index: 2; align-items: center; text-align: center; gap: 18px; max-width: 460px; padding: 0 24px; }
.tiq-robot { width: 200px; height: auto; display: block; filter: drop-shadow(0 0 30px rgba(71, 82, 252, 0.55)); animation: tiq-logo-in 1s cubic-bezier(0.22, 0.7, 0.2, 1) both; }
.tiq-robot-name { font-family: "Fragment Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0; }
.tiq-robot-msg { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.35; color: #fff; margin: 0; }
.tiq-demo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.tiq-demo-go { background: var(--blue); color: #fff; font-family: "Fragment Mono", ui-monospace, monospace; font-size: 14px; padding: 13px 24px; border-radius: 999px; transition: background .15s ease; box-shadow: 0 0 24px rgba(71, 82, 252, 0.35); }
.tiq-demo-go:hover { background: #3742e8; }
.tiq-demo-close { background: none; border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.6); font-family: "Fragment Mono", ui-monospace, monospace; font-size: 13px; padding: 12px 18px; border-radius: 999px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.tiq-demo-close:hover { color: #fff; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .tiq-robot { animation: none; } }