/* ==========================================================================
   Xpress AI Co-Worker™ — Homepage sections
   Hero badges · Meet the team · Request→execution pipeline · Glass FAQ
   ========================================================================== */

/* --------------------------------------------------------------------------
   New robot kits: Scout (magnifying glass) and Cogs (gears)
   -------------------------------------------------------------------------- */
.bot--lens .arm-r { animation: peer 3.2s ease-in-out infinite; }
@keyframes peer { 0%, 100% { transform: rotate(150deg); } 50% { transform: rotate(160deg); } }
.bot--gears .arm-r { animation: tapR 0.5s ease-in-out infinite alternate; }
.gear-a { transform-origin: center; animation: gearSpin 4s linear infinite; }
.gear-b { transform-origin: center; animation: gearSpin 2.6s linear infinite reverse; }
@keyframes gearSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Media slot: coded robot scene underneath, optional video loop on top
   -------------------------------------------------------------------------- */
.media-slot .slot-scene { transition: opacity 0.6s; }
.media-slot.video-ready .slot-scene { opacity: 0; }

/* --------------------------------------------------------------------------
   S1 · Meet your AI team
   -------------------------------------------------------------------------- */
.team-highlight {
  background: linear-gradient(135deg, rgba(239, 64, 29, 0.1), rgba(56, 189, 248, 0.05));
  border: 1px solid rgba(239, 64, 29, 0.25);
}
.team-highlight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #ef401d, #38bdf8, #a855f7);
}
/* clickable Co-Worker pills inside the copy */
.agent-tag { color: color-mix(in srgb, var(--c) 70%, #fff); border-color: color-mix(in srgb, var(--c) 40%, #334155); }
.agent-tag:hover { background: color-mix(in srgb, var(--c) 16%, #1e293b); border-color: var(--c); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c) 60%, transparent); }
/* quote card: soft emerald glow behind the glass */
.team-quote::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 40px -18px rgba(239, 64, 29, 0.5); pointer-events: none; }
@media (min-width: 1024px) {
  .team-float { animation: teamFloat 7s ease-in-out infinite; will-change: transform; }
}
@keyframes teamFloat { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-10px); } }

/* --------------------------------------------------------------------------
   S4 · Request → completed work pipeline
   -------------------------------------------------------------------------- */
.flow-step { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; padding: 0.5rem; border-radius: 18px; }
.flow-step > span:not(.flow-node) { grid-column: 2; }
@media (min-width: 768px) { .flow-step { display: block; } }
.flow-node {
  grid-row: span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: #0b1120;
  border: 2px solid color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--c);
  font-size: 1.15rem;
  position: relative;
  z-index: 1;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s, color 0.35s, box-shadow 0.35s;
}
.flow-step:hover .flow-node { transform: scale(1.06); }
.flow-step.is-active .flow-node {
  background: var(--c);
  color: #05080e;
  transform: scale(1.12);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent), 0 0 32px color-mix(in srgb, var(--c) 60%, transparent);
}
.flow-step.is-done .flow-node { background: color-mix(in srgb, var(--c) 22%, #0b1120); }
.flow-step:not(.is-active) > span:last-child { opacity: 0.75; }
.flow-msg { animation: bubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* --------------------------------------------------------------------------
   Hero · floating mini-agent badges
   -------------------------------------------------------------------------- */
.hero-badge { pointer-events: none; }

/* --------------------------------------------------------------------------
   FAQ · glass accordion items
   -------------------------------------------------------------------------- */
.faq-glass {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(11, 17, 32, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq-glass:hover { border-color: rgba(239, 64, 29, 0.3); }
.faq-glass.open { border-color: rgba(239, 64, 29, 0.45); box-shadow: 0 18px 40px -24px rgba(239, 64, 29, 0.55), inset 3px 0 0 #ef401d; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .team-float { animation: none !important; }
  .cw-show, .cw-show-link i { transition: none !important; }
  .cw-show.reveal.active:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   10 Co-Workers showcase (cream section): white cards, dark avatar boxes,
   lift + brand border on hover, gradient "View Co-Worker" link
   -------------------------------------------------------------------------- */
.cw-show {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, border-color 0.3s, opacity 0.6s;
}
.cw-show.reveal.active:hover,
.cw-show:focus-visible {
  transform: translateY(-8px);
  border-color: #ef401d;
  box-shadow: 0 30px 60px -24px rgba(239, 64, 29, 0.28), 0 12px 24px -16px rgba(15, 23, 42, 0.18);
}
.cw-show:focus-visible { outline: 2px solid #ef401d; outline-offset: 3px; }
.cw-show-avatar {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--c) 80%, transparent);
}
.cw-show-tag {
  color: color-mix(in srgb, var(--c) 55%, #000);
  background: color-mix(in srgb, var(--c) 10%, #fff);
  border-color: color-mix(in srgb, var(--c) 35%, #fff);
}
.text-gradient-brand {
  background: linear-gradient(110deg, #ef401d 0%, #f66f48 55%, #ffb18f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* the peach end of the gradient is too pale on white; deepen it for the link text */
.cw-show-link .text-gradient-brand { background-image: linear-gradient(110deg, #d6330f 0%, #ef401d 60%, #f66f48 100%); }
.cw-show-link i { color: #ef401d; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cw-show:hover .cw-show-link i { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   "Employ AI staff" prompt cards (Sintra-style): accent-tinted glass card,
   a chat-style prompt with the Co-Workers' faces, then a live UI preview
   -------------------------------------------------------------------------- */
.staff-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(9, 13, 22, 0.96));
  border: 1px solid color-mix(in srgb, var(--c) 35%, rgba(255, 255, 255, 0.06));
  box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.45s;
}
.staff-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 65%, transparent); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c) 85%, transparent); }
.staff-card.reveal.active:hover { transform: translateY(-4px); }
.staff-prompt { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.staff-send { background: var(--c); color: #0b1120; box-shadow: 0 8px 20px -8px var(--c); }
.staff-poster { background: radial-gradient(90% 80% at 80% 10%, #ffb18f 0%, transparent 55%), linear-gradient(135deg, #a855f7 0%, #ef401d 70%, #f66f48 100%); }
@media (prefers-reduced-motion: reduce) { .staff-card, .staff-card:hover { transition: none; transform: none; } }