/* ============================================================
   Auth 3D showcase — longtail query → AI engines → you show up.
   Pure CSS, one synchronized 14s loop (transform/opacity only).
   Static-site port: markup in shared/auth-showcase.jsx (window.LTQAuthShowcase).
   Scenery (bar, engines, floor) persists; story content resets
   behind its own exit fades so the loop reads as continuous.
   ============================================================ */

.sqa {
  --t: 14s;
  --sqa-scale: 1;
  --gpt: #10a37f;
  --pplx: #1fb8cd;
  --gem: #8b5cf6;
  --cld: #d97757;
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  --card-brd: rgba(255, 255, 255, 0.12);
  position: relative;
  width: 440px;
  height: 448px;
  margin: 6px auto 0;
  perspective: 1150px;
  perspective-origin: 50% 28%;
  transform: scale(var(--sqa-scale));
  transform-origin: top center;
  margin-bottom: calc((var(--sqa-scale) - 1) * 448px);
}

/* ---------- ambient ---------- */
.sqa-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  pointer-events: none;
}
.sqa-orb.o1 {
  width: 190px;
  height: 190px;
  left: -60px;
  top: -40px;
  background: radial-gradient(circle, rgba(48, 164, 108, 0.32), transparent 70%);
  animation: sqaDrift1 11s ease-in-out infinite alternate;
}
.sqa-orb.o2 {
  width: 170px;
  height: 170px;
  right: -50px;
  top: 130px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 70%);
  animation: sqaDrift2 13s ease-in-out infinite alternate;
}
.sqa-orb.o3 {
  width: 150px;
  height: 150px;
  left: -30px;
  bottom: -20px;
  background: radial-gradient(circle, rgba(33, 184, 205, 0.18), transparent 70%);
  animation: sqaDrift1 9s ease-in-out infinite alternate-reverse;
}
@keyframes sqaDrift1 {
  from { transform: translate(0, 0); }
  to { transform: translate(18px, 14px); }
}
@keyframes sqaDrift2 {
  from { transform: translate(0, 0); }
  to { transform: translate(-16px, 18px); }
}

/* ---------- 3D stage ---------- */
.sqa-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: sqaSway var(--t) ease-in-out infinite;
}
@keyframes sqaSway {
  0%, 100% { transform: rotateX(9deg) rotateY(-5deg); }
  50% { transform: rotateX(6.5deg) rotateY(5deg); }
}

.sqa-floor {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 580px;
  height: 430px;
  transform: translateX(-50%) rotateX(78deg);
  transform-origin: 50% 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 10%, #000 20%, transparent 74%);
  mask-image: radial-gradient(ellipse 58% 52% at 50% 10%, #000 20%, transparent 74%);
}

/* ---------- composer bar (Act 1, ChatGPT-style) ---------- */
.sqa-search {
  position: absolute;
  left: 50px;
  top: 10px;
  width: 340px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 16px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(56px);
  animation: sqaPress var(--t) ease-in-out infinite both;
}
@keyframes sqaPress {
  0%, 23.2% { transform: translateZ(56px) scale(1); }
  24% { transform: translateZ(56px) scale(0.972); }
  25.2%, 100% { transform: translateZ(56px) scale(1); }
}
.sqa-plus {
  color: rgba(255, 255, 255, 0.55);
  flex: none;
}
.sqa-ph {
  position: absolute;
  left: 42px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  pointer-events: none;
  animation: sqaPh var(--t) linear infinite both;
}
@keyframes sqaPh {
  0%, 3.5% { opacity: 1; }
  5.5% { opacity: 0; }
  99.9% { opacity: 0; }
  100% { opacity: 1; }
}
.sqa-send {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: #fff;
  color: #0a0a0c;
  animation: sqaSend var(--t) ease-in-out infinite both;
}
@keyframes sqaSend {
  0%, 21% { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.45); transform: scale(1); }
  23% { background: #fff; color: #0a0a0c; transform: scale(1); }
  23.8% { transform: scale(0.82); }
  25.2% { transform: scale(1); }
  96.5% { background: #fff; color: #0a0a0c; }
  100% { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.45); }
}
.sqa-query {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  animation: sqaType var(--t) linear infinite both;
}
@keyframes sqaType {
  0% { width: 0; opacity: 1; }
  4.5% { width: 0; opacity: 1; animation-timing-function: steps(38, end); }
  23% { width: var(--qw, 38ch); }
  96.5% { width: var(--qw, 38ch); opacity: 1; }
  99.4% { opacity: 0; }
  100% { width: var(--qw, 38ch); opacity: 0; }
}
.sqa-caret-gate {
  animation: sqaCaretGate var(--t) linear infinite both;
}
@keyframes sqaCaretGate {
  0%, 24% { opacity: 1; }
  25.5%, 100% { opacity: 0; }
}
.sqa-caret {
  display: inline-block;
  width: 1.5px;
  height: 15px;
  margin-left: 1px;
  background: var(--accent-300);
  animation: sqaBlinkCaret 1s steps(2, jump-none) infinite;
}
@keyframes sqaBlinkCaret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.sqa-ring {
  position: absolute;
  inset: -1px;
  border-radius: 26px;
  border: 1.5px solid var(--accent-300);
  pointer-events: none;
  animation: sqaRing var(--t) ease-out infinite both;
}
@keyframes sqaRing {
  0%, 23.6% { opacity: 0; transform: scale(0.6); }
  24.6% { opacity: 0.75; transform: scale(0.9); }
  30% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* ---------- engine tiles (Act 2) ---------- */
.sqa-engine {
  position: absolute;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, 0.14));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(var(--tz));
  animation: sqaBob 5.6s ease-in-out infinite both;
}
.sqa-engine::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 75%, transparent);
  box-shadow:
    0 0 26px 3px color-mix(in srgb, var(--c) 50%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--c) 30%, transparent);
  opacity: 0;
  animation: sqaGlowGate var(--t) ease-in-out infinite both;
  animation-delay: var(--gd);
}
@keyframes sqaBob {
  0%, 100% { transform: translateZ(var(--tz)) translateY(0); }
  50% { transform: translateZ(var(--tz)) translateY(-5px); }
}
@keyframes sqaGlowGate {
  0% { opacity: 0; }
  1.6% { opacity: 0.9; }
  19% { opacity: 0.9; }
  23% { opacity: 0; }
  100% { opacity: 0; }
}
.sqa-engine.e1 { left: 23px; top: 122px; --c: var(--gpt); --tz: -46px; --gd: 4.35s; animation-delay: -0.9s; }
.sqa-engine.e2 { left: 129px; top: 142px; --c: var(--pplx); --tz: -18px; --gd: 4.7s; animation-delay: -2.2s; }
.sqa-engine.e3 { left: 235px; top: 142px; --c: var(--gem); --tz: -18px; --gd: 5.05s; animation-delay: -3.4s; }
.sqa-engine.e4 { left: 341px; top: 122px; --c: var(--cld); --tz: -46px; --gd: 5.4s; animation-delay: -4.6s; }
.sqa-engine-logo {
  display: grid;
  place-items: center;
  color: #f2f2f4;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 80%, transparent));
}
.sqa-engine-logo svg {
  display: block;
}
.sqa-think {
  position: absolute;
  bottom: -15px;
  display: flex;
  gap: 4px;
  animation: sqaThinkGate var(--t) linear infinite both;
  animation-delay: var(--gd);
}
@keyframes sqaThinkGate {
  0% { opacity: 0; }
  1.6% { opacity: 1; }
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
.sqa-think i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 85%, #fff);
  animation: sqaThinkDot 1.05s ease-in-out infinite;
}
.sqa-think i:nth-child(2) { animation-delay: 0.17s; }
.sqa-think i:nth-child(3) { animation-delay: 0.34s; }
@keyframes sqaThinkDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

/* ---------- traveling pulses ---------- */
.sqa-dot,
.sqa-ret {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
}
.sqa-dot {
  left: 217px;
  top: 59px;
  background: #7ee2b0;
  box-shadow: 0 0 12px 2px rgba(99, 191, 150, 0.8);
  transform: translateZ(30px);
  animation: sqaDotOut var(--t) linear infinite both;
  animation-delay: var(--dd);
}
@keyframes sqaDotOut {
  0% { opacity: 0; transform: translateZ(30px) translate(0, 0); }
  1% { opacity: 1; animation-timing-function: ease-in-out; }
  7.2% { opacity: 1; transform: translateZ(30px) translate(var(--dx), var(--dy)); }
  8.4% { opacity: 0; transform: translateZ(30px) translate(var(--dx), var(--dy)); }
  100% { opacity: 0; transform: translateZ(30px) translate(var(--dx), var(--dy)); }
}
.sqa-dot.d1 { --dx: -164px; --dy: 60px; --dd: 3.4s; }
.sqa-dot.d2 { --dx: -58px; --dy: 80px; --dd: 3.75s; }
.sqa-dot.d3 { --dx: 48px; --dy: 80px; --dd: 4.1s; }
.sqa-dot.d4 { --dx: 154px; --dy: 60px; --dd: 4.45s; }

.sqa-ret {
  background: color-mix(in srgb, var(--c) 80%, #fff);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--c) 70%, transparent);
  transform: translateZ(30px);
  animation: sqaDotBack var(--t) linear infinite both;
  animation-delay: var(--dd);
}
@keyframes sqaDotBack {
  0% { opacity: 0; transform: translateZ(30px) translate(0, 0); }
  1% { opacity: 1; animation-timing-function: ease-in-out; }
  6.6% { opacity: 1; transform: translateZ(30px) translate(var(--rx), var(--ry)); }
  7.8% { opacity: 0; transform: translateZ(30px) translate(var(--rx), var(--ry)); }
  100% { opacity: 0; transform: translateZ(30px) translate(var(--rx), var(--ry)); }
}
.sqa-ret.r1 { left: 53px; top: 185px; --c: var(--gpt); --rx: 164px; --ry: 49px; --dd: 7.15s; }
.sqa-ret.r2 { left: 159px; top: 205px; --c: var(--pplx); --rx: 58px; --ry: 29px; --dd: 7.43s; }
.sqa-ret.r3 { left: 265px; top: 205px; --c: var(--gem); --rx: -48px; --ry: 29px; --dd: 7.71s; }
.sqa-ret.r4 { left: 371px; top: 185px; --c: var(--cld); --rx: -154px; --ry: 49px; --dd: 7.99s; }

/* ---------- AI answer panel (Acts 3 + 4) ---------- */
.sqa-answer {
  position: absolute;
  left: 20px;
  top: 214px;
  width: 400px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-brd);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  transform: translateZ(28px);
  animation: sqaPanel var(--t) ease-out infinite both;
}
@keyframes sqaPanel {
  0%, 59.5% { opacity: 0; transform: translateZ(28px) translateY(18px); }
  64% { opacity: 1; transform: translateZ(28px) translateY(0); }
  96.8% { opacity: 1; transform: translateZ(28px) translateY(0); }
  100% { opacity: 0; transform: translateZ(28px) translateY(18px); }
}
.sqa-answer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sqa-ai-logos {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #e8e8ea;
}
.sqa-ai-logos svg {
  display: block;
}

.sqa-line {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  margin-bottom: 7px;
  transform-origin: left center;
  animation: sqaLine var(--t) ease-out infinite both;
}
.sqa-line.l1 { width: 92%; }
.sqa-line.l2 { width: 84%; animation-delay: 0.3s; }
.sqa-line.l3 { width: 56%; margin-bottom: 12px; animation-delay: 0.6s; }
@keyframes sqaLine {
  0%, 64.5% { transform: scaleX(0); }
  68.5% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

.sqa-src-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.sqa-src {
  display: flex;
  gap: 10px;
}
.sqa-ranks {
  display: flex;
  flex-direction: column;
  width: 14px;
  flex: none;
}
.sqa-ranks span {
  height: 30px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}
.sqa-rows {
  position: relative;
  width: 218px;
  height: 98px;
  flex: none;
}
.sqa-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
}
.sqa-row.m1 { top: 0; }
.sqa-row.m2 { top: 34px; }
.sqa-row.m3 { top: 68px; }
.sqa-row.down {
  animation: sqaRankDown var(--t) linear infinite both;
}
.sqa-row.up {
  animation: sqaRankUp var(--t) linear infinite both;
  z-index: 2;
}
@keyframes sqaRankDown {
  0%, 78.5% { transform: translateY(0); animation-timing-function: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
  83.5%, 100% { transform: translateY(34px); }
}
@keyframes sqaRankUp {
  0%, 78.5% { transform: translateY(0); animation-timing-function: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
  83.5%, 100% { transform: translateY(-68px); }
}
.sqa-row-in {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  animation: sqaRowIn var(--t) ease-out infinite both;
  animation-delay: var(--rd, 0s);
}
.sqa-row-in.p2 { --rd: 0.25s; }
.sqa-row-in.p3 { --rd: 0.5s; }
@keyframes sqaRowIn {
  0%, 67% { opacity: 0; transform: translateY(7px); }
  70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
.sqa-row-in.you {
  animation: sqaRowIn var(--t) ease-out infinite both, sqaYou var(--t) ease-out infinite both;
  color: rgba(255, 255, 255, 0.92);
}
@keyframes sqaYou {
  0%, 83% {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: none;
  }
  87%, 100% {
    background: rgba(14, 138, 95, 0.16);
    border-color: rgba(99, 191, 150, 0.5);
    box-shadow: 0 0 20px rgba(48, 164, 108, 0.28);
  }
}
.sqa-fav {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
  background: rgba(255, 255, 255, 0.28);
}
.sqa-fav.fy {
  background: var(--accent-300, #63bf96);
  box-shadow: 0 0 8px rgba(99, 191, 150, 0.7);
}
.sqa-cited {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(14, 138, 95, 0.3);
  border: 1px solid rgba(99, 191, 150, 0.55);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #a7e6c8;
  animation: sqaCited var(--t) ease-out infinite both;
}
@keyframes sqaCited {
  0%, 85.5% { opacity: 0; transform: scale(0.5); animation-timing-function: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
  89% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

.sqa-pill {
  position: absolute;
  right: 12px;
  top: 117px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(14, 138, 95, 0.18);
  border: 1px solid rgba(99, 191, 150, 0.45);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-300, #63bf96);
  white-space: nowrap;
  animation: sqaPill var(--t) ease-out infinite both;
}
@keyframes sqaPill {
  0%, 87% { opacity: 0; transform: translateX(10px); }
  90.5% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---------- responsive scale ---------- */
@media (max-width: 1240px) {
  .sqa { --sqa-scale: 0.85; }
}
@media (max-width: 1000px) {
  .sqa { --sqa-scale: 0.72; }
}
@media (max-height: 900px) {
  .sqa { --sqa-scale: 0.85; }
}
@media (max-height: 780px) {
  .sqa { --sqa-scale: 0.72; }
}

/* ---------- reduced motion: static final tableau ---------- */
@media (prefers-reduced-motion: reduce) {
  .sqa,
  .sqa * {
    animation: none !important;
  }
  .sqa-dot,
  .sqa-ret,
  .sqa-ring,
  .sqa-think,
  .sqa-ph,
  .sqa-caret-gate {
    display: none;
  }
  .sqa-engine::after { opacity: 0.45; }
  .sqa-row.up { transform: translateY(-68px); }
  .sqa-row.down { transform: translateY(34px); }
  .sqa-row-in.you {
    background: rgba(14, 138, 95, 0.16);
    border-color: rgba(99, 191, 150, 0.5);
    box-shadow: 0 0 20px rgba(48, 164, 108, 0.28);
  }
}