/* ==========================================================================
   AI employees page — cinematic layer v1. A slow-moving scene behind every
   employee card, in the colour of its category. Transform/opacity only.
   Without allotech-emp.v1.js, or with reduced motion, the scenes sit still.
   ========================================================================== */
.agent[data-cat="1"]{--c:43,212,240}
.agent[data-cat="2"]{--c:255,180,84}
.agent[data-cat="3"]{--c:255,122,198}
.agent[data-cat="4"]{--c:61,220,151}
.agent[data-cat="5"]{--c:75,141,255}
.agent[data-cat="6"]{--c:246,196,83}
.agent[data-cat="7"]{--c:167,139,250}
.agent[data-cat="8"]{--c:56,189,248}

.card.agent[data-cat]{position:relative;isolation:isolate;overflow:hidden;overflow:clip;border-color:rgba(var(--c),.24);background:rgba(8,12,22,.6)}
.card.agent[data-cat]:hover{border-color:rgba(var(--c),.65);box-shadow:0 34px 80px -40px rgba(var(--c),.8)}

/* ---- the scene ---- */
.agent-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.agent-bg img{position:absolute;inset:-12%;width:124%;height:124%;max-width:none;object-fit:cover;opacity:.66;animation:emp-pan-0 24s ease-in-out infinite alternate;animation-play-state:paused;will-change:transform}
.agent.is-live .agent-bg img{animation-play-state:running}
.agent[style*="--v:1"] .agent-bg img{object-position:80% 30%;animation-name:emp-pan-1;animation-duration:28s}
.agent[style*="--v:2"] .agent-bg img{object-position:20% 70%;animation-name:emp-pan-2;animation-duration:21s}
.agent[style*="--v:3"] .agent-bg img{object-position:60% 90%;animation-name:emp-pan-3;animation-duration:31s}
@keyframes emp-pan-0{from{transform:scale(1) translate3d(-3%,-2%,0)}to{transform:scale(1.14) translate3d(3%,2%,0)}}
@keyframes emp-pan-1{from{transform:scale(1.14) translate3d(4%,-2%,0)}to{transform:scale(1) translate3d(-3%,1%,0)}}
@keyframes emp-pan-2{from{transform:scale(1.04) translate3d(-2%,4%,0)}to{transform:scale(1.18) translate3d(2%,-3%,0)}}
@keyframes emp-pan-3{from{transform:scale(1.16) translate3d(0,3%,0)}to{transform:scale(1.02) translate3d(-4%,-2%,0)}}
/* keeps the text readable over any scene, and tints it with the category */
.agent-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,17,.34),rgba(6,9,17,.78) 52%,rgba(6,9,17,.93)),linear-gradient(130deg,rgba(var(--c),.26),transparent 60%)}
/* a line of light crossing the card now and then */
.agent-bg::before{content:"";position:absolute;z-index:1;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(var(--c),.16),transparent);transform:translateX(-140%) skewX(-12deg);animation:emp-sweep 9s ease-in-out infinite;animation-play-state:paused}
.agent.is-live .agent-bg::before{animation-play-state:running}
.agent[style*="--v:1"] .agent-bg::before{animation-delay:-2.2s}
.agent[style*="--v:2"] .agent-bg::before{animation-delay:-4.5s}
.agent[style*="--v:3"] .agent-bg::before{animation-delay:-6.7s}
@keyframes emp-sweep{0%,55%{transform:translateX(-140%) skewX(-12deg)}100%{transform:translateX(420%) skewX(-12deg)}}

/* ---- the employee ---- */
.card.agent[data-cat] .top{position:relative}
.card.agent[data-cat] .av{width:68px;height:68px;box-shadow:0 0 0 2px rgba(var(--c),.75),0 0 0 7px rgba(var(--c),.12),0 0 34px rgba(var(--c),.55);animation:emp-halo 4.8s ease-in-out infinite;animation-play-state:paused}
.agent.is-live .av{animation-play-state:running}
@keyframes emp-halo{0%,100%{box-shadow:0 0 0 2px rgba(var(--c),.75),0 0 0 7px rgba(var(--c),.12),0 0 34px rgba(var(--c),.55)}50%{box-shadow:0 0 0 2px rgba(var(--c),1),0 0 0 11px rgba(var(--c),.05),0 0 46px rgba(var(--c),.85)}}
.card.agent[data-cat] h3{text-shadow:0 1px 14px rgba(4,6,12,.9)}
.card.agent[data-cat] .role{color:rgb(var(--c))}
.card.agent[data-cat] p{color:#c8d2e4;text-shadow:0 1px 10px rgba(4,6,12,.85)}

@media (prefers-reduced-motion:reduce){
  .agent-bg img,.agent-bg::before,.card.agent[data-cat] .av{animation:none !important}
  .agent-bg::before{display:none}
}