/* ==========================================================================
   Xpress AI Co-Worker™ — Robot crew, hover physics, scroll zoom, hero scene
   Pairs with assets/js/robots.js (characters) and main.js (tilt + zoom).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Robot stage: animated SVG fallback with optional video loop on top
   -------------------------------------------------------------------------- */
.bot-stage { position: relative; width: 100%; height: 100%; }
.bot-fallback { position: absolute; inset: 0; transition: opacity 0.5s; }
.bot-video, .scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.6s; }
.scene-video { object-fit: cover; z-index: 0; pointer-events: none; }
.video-ready > .bot-video { opacity: 1; }
/* Hero banner video plays as a dimmed background layer and replaces the coded office scene */
.video-ready > .scene-video { opacity: 0.4; }
.video-ready > .office-scene { opacity: 0; transition: opacity 0.6s; }
.video-ready > .bot-fallback { opacity: 0; }

.bot { display: block; width: 100%; height: 100%; overflow: visible; }
.bot * { transform-box: fill-box; }
/* bust/head crops must not paint outside their frame (no overlap with nearby text) */
.bot.bot--crop { overflow: hidden; }
.bot-paused .bot, .bot-paused .bot * { animation-play-state: paused !important; }

/* Loading placeholder: soft floating glow until the character mounts */
[data-robot]:not([data-hydrated]) {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #ef401d) 25%, transparent), transparent);
  border-radius: 9999px;
  animation: kitFloat 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Idle loop shared by every robot
   -------------------------------------------------------------------------- */
.bot-rig { animation: botBob 3.2s ease-in-out infinite; }
.bot-shadow { transform-origin: center; animation: botShadow 3.2s ease-in-out infinite; }
.bot-head { transform-origin: 50% 100%; animation: botHead 6s ease-in-out infinite; }
.bot-eyes { transform-origin: center; animation: botBlink 4.6s infinite; }
.bot-look { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); transform: translate(var(--ex, 0px), var(--ey, 0px)); }
.bot-antenna { transform-origin: center; animation: botPulse 1.8s ease-in-out infinite; }
.bot .arm { animation: armIdle 3.2s ease-in-out infinite; }
/* explicit shoulder pivots (user-space px) so anything an arm carries rotates with it */
.bot .arm { transform-box: view-box; }
.bot .arm-l { transform-origin: 54px 141.5px; }
.bot .arm-r { transform-origin: 146px 141.5px; }
.bot .arm-r { animation-name: armIdleR; }
.bot .leg { transform-origin: 50% 0%; }

@keyframes botBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes botShadow { 0%, 100% { transform: scaleX(1); opacity: 0.4; } 50% { transform: scaleX(0.82); opacity: 0.22; } }
@keyframes botHead { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes botBlink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(0.08); } }
@keyframes botPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.78); } }
@keyframes armIdle { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-1deg); } }
@keyframes armIdleR { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(1deg); } }
@keyframes kitFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(4deg); } }

/* Pip — waving greeting */
.bot--wave .arm-r { animation: waveR 1.9s ease-in-out infinite; }
.kit-float { animation: kitFloat 3s ease-in-out infinite; }
@keyframes waveR { 0%, 100% { transform: rotate(-138deg); } 20% { transform: rotate(-122deg); } 40% { transform: rotate(-150deg); } 60% { transform: rotate(-124deg); } 80% { transform: rotate(-146deg); } }

/* Millo — floating holographic camera */
.bot--camera .arm-r { animation: holdUp 3.2s ease-in-out infinite; }
.holo-cam { animation: kitFloat 3.2s ease-in-out infinite; }
.holo-beam { animation: beam 2.4s ease-in-out infinite; }
.cam-flash { animation: flash 2.8s infinite; }
@keyframes holdUp { 0%, 100% { transform: rotate(-128deg); } 50% { transform: rotate(-136deg); } }
@keyframes beam { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.26; } }
@keyframes flash { 0%, 86%, 100% { opacity: 0.15; } 90% { opacity: 1; } }

/* Echo — scanning visor */
.bot-scan { animation: scan 2.2s ease-in-out infinite alternate; }
.visor-light { animation: dot 1.1s ease-in-out infinite; }
@keyframes scan { from { transform: translateX(0); } to { transform: translateX(96px); } }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Penny — tapping the payment ledger */
.bot--ledger .arm-l { animation: tapL 0.55s ease-in-out infinite alternate; }
.bot--ledger .arm-r { animation: none; transform: rotate(40deg); }
.ledger-row { animation: dot 1.8s ease-in-out infinite; }
.tap-ring { transform-origin: center; animation: ring 1.1s ease-out infinite; }
.coin { transform-origin: center; animation: coin 2.6s ease-in-out infinite; }
@keyframes tapL { from { transform: rotate(-48deg); } to { transform: rotate(-38deg); } }
@keyframes ring { from { transform: scale(0.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes coin { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-9px) scaleX(0.6); } }

/* Hunter — adjusting radar ears */
.radar-ear { transform-origin: 100% 50%; animation: radarL 2.4s ease-in-out infinite; }
.radar-ear-r { transform-origin: 0% 50%; animation-name: radarR; }
.radar-wave { transform-origin: 50% 100%; animation: wave 1.8s ease-out infinite; }
.sound-wave { transform-origin: 0% 50%; animation: wave 1s ease-out infinite; }
@keyframes radarL { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@keyframes radarR { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-16deg); } }
@keyframes wave { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* Spark — glowing heart eyes */
.heart-eye { transform-origin: center; animation: heartBeat 0.9s ease-in-out infinite; }
.float-heart { animation: heartUp 3s ease-in infinite; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(0.96); } }
@keyframes heartUp { 0% { transform: translateY(20px) scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34px) scale(1.1); opacity: 0; } }

/* Taxo — crunching the virtual calculator */
.bot--calc .arm-r { animation: tapR 0.45s ease-in-out infinite alternate; }
.calc-key { animation: key 1.8s steps(1) infinite; }
.holo-calc { animation: kitFloat 4s ease-in-out infinite; }
@keyframes tapR { from { transform: rotate(-62deg); } to { transform: rotate(-72deg); } }
@keyframes key { 0%, 100% { opacity: 0.25; } 10% { opacity: 1; } 20% { opacity: 0.25; } }

/* Shieldo — holding the shield badge */
.bot--shield .arm-l { animation: none; transform: rotate(-28deg); }
.shield-badge { transform-origin: center; animation: shield 2.4s ease-in-out infinite; }
@keyframes shield { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.06) rotate(3deg); } }

/* Vocal — headset on, speaking and waving */
.bot--headset .arm-l { animation: waveL 1.9s ease-in-out infinite; }
.bot--headset .bot-mouth { transform-origin: center; animation: talk 0.32s ease-in-out infinite alternate; }
.mic { transform-origin: center; animation: botPulse 0.8s ease-in-out infinite; }
@keyframes waveL { 0%, 100% { transform: rotate(138deg); } 20% { transform: rotate(122deg); } 40% { transform: rotate(150deg); } 60% { transform: rotate(124deg); } 80% { transform: rotate(146deg); } }
@keyframes talk { from { transform: scaleY(1); } to { transform: scaleY(2.2) scaleX(0.85); } }

/* Walk cycle (office scene) — overrides each robot's arm loop */
.bot.bot--walk .bot-rig { animation: walkBob 0.5s ease-in-out infinite; }
.bot.bot--walk .leg-l { animation: legSwing 1s ease-in-out infinite; }
.bot.bot--walk .leg-r { animation: legSwing 1s ease-in-out -0.5s infinite; }
.bot.bot--walk .arm-l { animation: armSwing 1s ease-in-out -0.5s infinite; transform: none; }
.bot.bot--walk .arm-r { animation: armSwing 1s ease-in-out infinite; transform: none; }
.bot.bot--walk .bot-shadow { animation: none; }
@keyframes walkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes legSwing { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes armSwing { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }

/* Reaction hop (hover, chat replies) */
.bot-stage.is-hop .bot { animation: hop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(6px) scale(1.06, 0.92); } 60% { transform: translateY(-14px) scale(0.96, 1.05); } 100% { transform: translateY(0) scale(1); } }

/* --------------------------------------------------------------------------
   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 robot steps back and leans away from the cursor */
.bot-actor { transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tilt.is-hover .bot-actor { will-change: transform; }
.tilt.is-hover .bot-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; }
.walker.rev .bot-fallback { transform: scaleX(-1); }
@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); }

/* --------------------------------------------------------------------------
   Hand-held props (data-prop) — arms pose to hold the item
   -------------------------------------------------------------------------- */
.bot.bot--hold-l .arm-l,
.bot.bot--hold-both .arm-l { animation: none; transform: rotate(-40deg); }
.bot.bot--hold-r .arm-r,
.bot.bot--hold-both .arm-r { animation: none; transform: rotate(40deg); }
.prop-glow { transform-origin: center; animation: botPulse 2.2s ease-in-out infinite; }
.prop-ping { transform-origin: center; animation: botPulse 1.2s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   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 { animation: none; }
  .stat-particles { display: none; }
}