/* fx/agents.css — lane 5, AI team (/ai-business-tools/ + product pages). Prefix .fxai- */

/* ── Overview cards: accent, tilt, drift ───────────────────────────── */
.fxai-grid{perspective:1400px}
.fxai-card.fxai-card{position:relative;scroll-margin-top:140px;
  transform:rotateX(var(--fxai-rx,0deg)) rotateY(var(--fxai-ry,0deg));
  transition:transform .7s var(--fx-ease-out),box-shadow .35s ease,opacity .5s ease,filter .5s ease}
.fxai-card.fxai-tilting{transition:transform .12s linear,box-shadow .35s ease,opacity .5s ease,filter .5s ease;will-change:transform}
.fxai-img.fxai-img{transform:translate3d(var(--fxai-dx,0px),var(--fxai-dy,0px),0) scale(1);
  transition:transform .9s var(--fx-ease-out),opacity .15s ease}
.fxai-tilting .fxai-img.fxai-img{transform:translate3d(var(--fxai-dx,0px),var(--fxai-dy,0px),0) scale(1.05);transition:transform .25s ease-out,opacity .15s ease}
.fxai-media:focus-visible{outline:3px solid var(--fx-gold);outline-offset:-3px}

/* Brush stroke under each agent's name, in their colour */
.fxai-name{position:relative;display:inline-block;margin-bottom:.55rem}
.fxai-name::after{content:"";position:absolute;left:1px;bottom:-3px;height:3px;width:34px;border-radius:3px 1px 4px 2px;
  background:var(--fxai-c);transform-origin:left center;transition:transform .6s var(--fx-ease-out)}
.fxai-card:hover .fxai-name::after,.fxai-card:focus-within .fxai-name::after,.fxai-spot .fxai-name::after{transform:scaleX(2.4)}

/* "On duty" status light */
.fxai-duty{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px 4px 9px;border-radius:999px;background:rgba(12,10,46,.74);color:#fff;
  font:500 11px/1.3 var(--fx-sans);letter-spacing:.09em;text-transform:uppercase;pointer-events:none;transition:opacity .3s ease}
.fxai-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--fxai-c);flex:none}
.fxai-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--fxai-c);opacity:0;
  animation:fxai-breathe 4.4s ease-in-out infinite;animation-delay:calc(var(--fxai-i,0) * -.73s);animation-play-state:paused}
.fxai-live .fxai-dot::after{animation-play-state:running}
@keyframes fxai-breathe{0%,100%{opacity:0;transform:scale(.55)}50%{opacity:.5;transform:scale(1.2)}}

/* Hidden touch: type an agent's name → spotlight + hello */
.fxai-grid.fxai-spotting .fxai-card:not(.fxai-spot){opacity:.4;filter:saturate(.45)}
.fxai-card.fxai-spot{box-shadow:0 0 0 3px var(--fxai-c),0 28px 60px -24px var(--fxai-c)}
.fxai-spot .fxai-duty{opacity:0}
.fxai-hello{position:absolute;left:50%;top:16px;z-index:3;width:max-content;max-width:86%;padding:10px 18px;border-radius:14px;
  background:#fff;color:var(--fx-navy);border-bottom:3px solid var(--fxai-c);box-shadow:0 12px 30px rgba(12,10,46,.35);
  font:italic 400 16px/1.35 var(--fx-serif);text-align:center;pointer-events:none;
  opacity:0;transform:translate(-50%,-8px);transition:opacity .35s ease,transform .55s var(--fx-ease-out)}
.fxai-spot .fxai-hello{opacity:1;transform:translate(-50%,0)}
.fxai-ping{animation:fxai-ping 1.6s var(--fx-ease-out)}
@keyframes fxai-ping{0%{box-shadow:0 0 0 0 var(--fxai-c)}100%{box-shadow:0 0 0 18px transparent}}

/* ── Overview hero: roll call of sigils ────────────────────────────── */
.fxai-roll{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:2.25rem;padding:0;list-style:none}
.fxai-roll a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;color:var(--fxai-c);
  text-decoration:none;border-radius:12px;padding:6px 0 4px;transition:transform .35s var(--fx-ease-out)}
.fxai-roll svg{width:40px;height:40px;overflow:visible;transition:filter .35s ease}
.fxai-roll span{font:500 11px/1.2 var(--fx-sans);letter-spacing:.06em;color:#d8d5ea;opacity:.75;transition:opacity .3s ease,color .3s ease}
.fxai-roll a:hover,.fxai-roll a:focus-visible{transform:translateY(-3px)}
.fxai-roll a:hover svg,.fxai-roll a:focus-visible svg{filter:drop-shadow(0 0 8px var(--fxai-c))}
.fxai-roll a:hover span,.fxai-roll a:focus-visible span{opacity:1;color:#fff}
.fxai-roll a:focus-visible{outline:2px solid var(--fx-gold);outline-offset:2px}
.fxai-roll .fxai-ink{stroke-width:4.2}
@media (max-width:639px){.fxai-roll{display:grid;grid-template-columns:repeat(3,64px);gap:12px 22px}}
.fxai-roll .fxai-ink.fxai-ring{stroke-width:6}
.fxai-roll .fxai-ink.fxai-wash{stroke-width:2.4}

/* ── Sigils (shared by roll call + product heroes) ─────────────────── */
.fxai-ink{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:fxai-draw 1.5s var(--fx-ease-forge) forwards}
.fxai-ink.fxai-ring{stroke-width:4.2;animation-duration:1.3s}
.fxai-ink.fxai-wash{stroke-width:1.4;opacity:.45}
/* the hanko: a small red artist's seal, like the ones on the site's ink paintings (desktop hero only) */
.fxai-seal{fill:#c93812;stroke:rgba(242,232,212,.6);stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center;animation:fxai-seal .45s ease-out forwards}
.fxai-roll .fxai-seal{display:none}
@media (max-width:1151px){.fxai-sigil .fxai-seal{display:none}}
@keyframes fxai-draw{to{stroke-dashoffset:0}}
@keyframes fxai-seal{0%{opacity:0;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}

/* Product-page hero sigil */
.fxai-sigil{--fxai-size:60px;position:relative;width:var(--fxai-size);height:var(--fxai-size);margin-bottom:16px;color:var(--fxai-c)}
.fxai-sigil svg{display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--fxai-c) 40%,transparent));transition:filter .6s ease,transform .9s var(--fx-ease-out)}
.fxai-sigil .fxai-ink{stroke-width:3.4}
.fxai-sigil .fxai-ink.fxai-ring{stroke-width:5.4}
.fxai-sigil .fxai-ink.fxai-wash{stroke-width:2}
.fxai-sigil .fxai-breath{animation:fxai-glow 7s ease-in-out 2.4s infinite;animation-play-state:paused}
.fxai-sigil.fxai-live .fxai-breath{animation-play-state:running}
@keyframes fxai-glow{0%,100%{opacity:1}50%{opacity:.62}}
.fxai-sigil.fxai-awake svg{filter:drop-shadow(0 0 22px var(--fxai-c)) drop-shadow(0 0 4px #fff);transform:rotate(-8deg) scale(1.06)}
.fxai-sigil-hello{position:absolute;left:calc(100% + 14px);top:50%;width:max-content;max-width:min(260px,calc(100vw - 120px));
  padding:9px 16px;border-radius:14px;background:#fff;color:var(--fx-navy);border-bottom:3px solid var(--fxai-c);
  font:italic 400 15px/1.35 var(--fx-serif);box-shadow:0 12px 30px rgba(0,0,0,.35);pointer-events:none;
  opacity:0;transform:translate(-6px,-50%);transition:opacity .35s ease,transform .5s var(--fx-ease-out)}
.fxai-awake .fxai-sigil-hello{opacity:1;transform:translate(0,-50%)}
@media (min-width:1152px){
  .fxai-sigil{--fxai-size:210px;position:absolute;right:2.5rem;top:50%;margin:0;transform:translateY(-50%);pointer-events:none}
  .fxai-sigil .fxai-ink{stroke-width:1.7}
  .fxai-sigil .fxai-ink.fxai-ring{stroke-width:3.4}
  .fxai-sigil .fxai-ink.fxai-wash{stroke-width:1.1}
  .fxai-sigil-hello{left:50%;top:calc(100% + 12px);transform:translate(-50%,-6px)}
  .fxai-awake .fxai-sigil-hello{transform:translate(-50%,0)}
}

/* ── Reduced motion: still, lit, never blank ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  .fxai-ink{animation:none;stroke-dashoffset:0}
  .fxai-seal{animation:none;opacity:1}
  .fxai-dot::after,.fxai-sigil .fxai-breath,.fxai-ping{animation:none}
  .fxai-dot::after{opacity:.35;transform:scale(1)}
  .fxai-card.fxai-card,.fxai-img.fxai-img,.fxai-hello,.fxai-sigil svg,.fxai-sigil-hello,.fxai-roll a{transition:none}
  .fxai-card.fxai-card{transform:none}
  .fxai-sigil.fxai-awake svg{transform:none}
}