/* ==========================================================================
   Xpress AI Co-Worker™ — 3D human Co-Worker avatars + shared scene styles
   [data-avatar="<key>"] is filled by assets/js/avatars.js with the 800×800
   portrait from assets/xpress-agent-avatars/ (160px thumbs for small slots).
   The image inherits its container's corner radius; data-shape forces one.
   ========================================================================== */
[data-avatar] { display: block; position: relative; overflow: hidden; border-radius: inherit; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c, #ef401d) 30%, #111827), #0b1220); }
[data-avatar][data-shape='circle'] { border-radius: 9999px; }
[data-avatar][data-shape='round'] { border-radius: 22%; }
.avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; transition: opacity 0.4s; }
.avatar-img.is-loaded { opacity: 1; }
/* office-scene walkers become floating portrait bubbles */
.walker [data-avatar] { border-radius: 9999px; aspect-ratio: 1 / 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 14px 30px -12px rgba(0, 0, 0, 0.85); animation: avatarBob 2.8s ease-in-out infinite; }
.walker.rev [data-avatar] { animation-delay: -1.4s; }
@keyframes avatarBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }

/* --------------------------------------------------------------------------
   Tilt + step-back hover physics (pointer tracking lives in main.js)
   -------------------------------------------------------------------------- */
.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)) scale(var(--sc, 1));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* keep the tilt transform once a .reveal card has been revealed */
.tilt.reveal.active { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)) scale(var(--sc, 1)); }
.tilt.is-hover {
  will-change: transform;
  --lift: -8px;
  --sc: 0.98;
  transition: transform 0.18s ease-out, border-color 0.35s, box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-color: color-mix(in srgb, var(--c, #ef401d) 45%, transparent);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c, #ef401d) 55%, transparent);
}
/* The avatar steps back and leans away from the cursor */
.avatar-actor { transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tilt.is-hover .avatar-actor { will-change: transform; }
.tilt.is-hover .avatar-actor { transform: translate3d(calc(var(--px, 0) * -10px), 7px, 0) scale(0.9) rotate(calc(var(--px, 0) * -7deg)); }

/* Scroll-driven zoom: characters emerge toward the viewer / camera pushes in */
[data-zoom='in'] {
  transform: translate3d(0, calc((1 - var(--zp, 1)) * 46px), 0) scale(calc(0.78 + 0.22 * var(--zp, 1)));
  opacity: calc(0.15 + 0.85 * var(--zp, 1));
  will-change: transform, opacity;
}
[data-zoom='push'] { transform: scale(calc(1 + 0.16 * var(--zp, 0))) translateZ(0); transform-origin: 50% 70%; will-change: transform; }

/* Character pod backdrop with glowing floor grid */
.pod {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 58%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, #0b1120), #070b14);
}
.pod::before {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 42%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--c) 32%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 32%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  transform: perspective(260px) rotateX(58deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(transparent, #000 70%);
          mask-image: linear-gradient(transparent, #000 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Home hero — glass office scene
   -------------------------------------------------------------------------- */
.office-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 72% 8%, rgba(56, 189, 248, 0.25), transparent 60%),
    radial-gradient(60% 50% at 15% 18%, rgba(168, 85, 247, 0.2), transparent 60%),
    linear-gradient(180deg, #0c1730 0%, #0b1324 55%, #070b14 100%);
}
.office-glass {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.06) 27%, transparent 33%, transparent 60%, rgba(255, 255, 255, 0.04) 65%, transparent 69%),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.2) 0 2px, transparent 2px 16.66%),
    linear-gradient(180deg, transparent 0 9%, rgba(148, 163, 184, 0.2) 9% calc(9% + 2px), transparent calc(9% + 2px));
  pointer-events: none;
}
.office-floor {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: 0;
  height: 46%;
  background:
    linear-gradient(rgba(239, 64, 29, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 64, 29, 0.24) 1px, transparent 1px),
    linear-gradient(180deg, #0a1322, #05080e);
  background-size: 60px 60px, 60px 60px, 100% 100%;
  transform: perspective(500px) rotateX(64deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(transparent, #000 35%);
          mask-image: linear-gradient(transparent, #000 35%);
}
/* Walkers move a full-width lane with transform only (no layout work per frame) */
.walker { position: absolute; left: 0; width: 100%; animation: walkRight 26s linear infinite; will-change: transform; transform: translateZ(0); }
.walker.rev { animation-name: walkLeft; }
@keyframes walkRight { from { transform: translate3d(-18%, 0, 0); } to { transform: translate3d(104%, 0, 0); } }
@keyframes walkLeft { from { transform: translate3d(104%, 0, 0); } to { transform: translate3d(-18%, 0, 0); } }

/* Crew carousel (home) — whole cards only: 1.2 / 2 / 3 / 4 / 5 per view */
.crew-viewport { --per: 1.2; --gap: 16px; clip-path: inset(-60px 0 -60px 0); touch-action: pan-y; }
@media (min-width: 480px) { .crew-viewport { --per: 2; } }
@media (min-width: 768px) { .crew-viewport { --per: 3; } }
@media (min-width: 1024px) { .crew-viewport { --per: 4; } }
@media (min-width: 1280px) { .crew-viewport { --per: 5; } }
.crew-track { transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
.crew-track.no-anim { transition: none; }
.crew-card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); margin-right: var(--gap); }
.crew-dot { width: 6px; height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.18); transition: width 0.4s, background 0.4s; }
.crew-dot.is-active { width: 22px; background: var(--c, #ef401d); }

/* --------------------------------------------------------------------------
   Home stats — elevated glowing glass cards with drifting particles
   -------------------------------------------------------------------------- */
.stat-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* gradient hairline across the top edge */
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: 0.8;
}
/* accent glow pooled under the big number */
.stat-glow {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 70%;
  height: 46%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent);
  filter: blur(14px);
  z-index: -1;
  animation: statGlow 4s ease-in-out infinite;
  pointer-events: none;
}
.stat-num { text-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); }
@keyframes statGlow { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }

/* particles rise slowly through each card (spawned by home.js) */
.stat-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stat-particles span {
  position: absolute;
  bottom: -6px;
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  opacity: 0;
  animation: particleUp linear infinite;
  will-change: transform, opacity;
}
@keyframes particleUp {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate3d(var(--dx, 0px), -170px, 0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Crew slider section — backdrop shift + gradient divider from the hero
   -------------------------------------------------------------------------- */
.crew-section {
  position: relative;
  background: linear-gradient(180deg, #060a12 0%, #05080e 100%);
}
.crew-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 64, 29, 0.55), rgba(56, 189, 248, 0.45), transparent);
}
.crew-section::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(720px, 90%);
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(239, 64, 29, 0.12), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-zoom] { transform: none !important; opacity: 1 !important; }
  .walker [data-avatar] { animation: none; }
  .walker { animation: none; }
  .stat-particles { display: none; }
}