/* ==========================================================================
   Services page — cinematic layer v1. Transform/opacity only for the moving
   parts. Without allotech-svc.v1.js, or with reduced motion, every photo sits
   still and the section keeps its neutral colour.
   ========================================================================== */

/* ---- category colours ---- */
.svc[data-cat="seo"]{--c:43,212,240}
.svc[data-cat="ads"]{--c:255,180,84}
.svc[data-cat="social"]{--c:255,122,198}
.svc[data-cat="ai"]{--c:124,140,255}
.svc[data-cat="deploy"]{--c:61,220,151}
.svc[data-cat="data"]{--c:75,141,255}
/* clip, not hidden: a hidden box is still scrollable by script or focus, and the lights overflow it on purpose */
.svc-stage{--g:75,141,255;position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.svc-stage[data-cat="seo"]{--g:43,212,240}
.svc-stage[data-cat="ads"]{--g:255,180,84}
.svc-stage[data-cat="social"]{--g:255,122,198}
.svc-stage[data-cat="ai"]{--g:124,140,255}
.svc-stage[data-cat="deploy"]{--g:61,220,151}
.svc-stage[data-cat="data"]{--g:75,141,255}

/* ---- section atmosphere: two slow lights in the colour of the chosen category ---- */
.svc-stage::before,.svc-stage::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--g),.20),rgba(var(--g),.06) 55%,transparent 72%);transition:background 1s ease;will-change:transform}
.svc-stage::before{left:-22%;top:-6%;width:min(1100px,120vw);aspect-ratio:1;animation:svc-drift-a 30s ease-in-out infinite alternate}
.svc-stage::after{right:-24%;bottom:-8%;width:min(1000px,110vw);aspect-ratio:1;animation:svc-drift-b 36s ease-in-out infinite alternate}
@keyframes svc-drift-a{to{transform:translate3d(16%,22%,0) scale(1.15)}}
@keyframes svc-drift-b{to{transform:translate3d(-14%,-20%,0) scale(.9)}}
.svc-stage .fchip.active{box-shadow:0 0 0 4px rgba(var(--g),.18),0 14px 40px -14px rgba(var(--g),.8)}

/* ---- hero backdrop ---- */
.svc-hero-shot{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.34;animation:svc-hero 34s ease-in-out infinite alternate;will-change:transform}
@keyframes svc-hero{from{transform:scale(1.04)}to{transform:scale(1.16) translate3d(-2%,-1.5%,0)}}

/* ---- the card ---- */
.card.svc{position:relative;overflow:hidden;overflow:clip;border-color:rgba(var(--c),.22);background:linear-gradient(180deg,rgba(var(--c),.07),rgba(8,12,22,.72) 46%)}
.card.svc:hover{border-color:rgba(var(--c),.6);box-shadow:0 34px 80px -40px rgba(var(--c),.75)}
.svc-shot{position:relative;margin:-22px -22px 6px;aspect-ratio:16/9;overflow:hidden;background:#070b14}
.svc-shot img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:svc-kb 16s ease-in-out infinite alternate;animation-play-state:paused;will-change:transform}
.svc.is-live .svc-shot img{animation-play-state:running}
.svc:nth-child(3n+2) .svc-shot img{animation-name:svc-kb-b;animation-duration:19s}
.svc:nth-child(3n) .svc-shot img{animation-name:svc-kb-c;animation-duration:22s}
@keyframes svc-kb{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.2) translate3d(-3%,-2%,0)}}
@keyframes svc-kb-b{from{transform:scale(1.2) translate3d(3%,-2%,0)}to{transform:scale(1.06) translate3d(0,0,0)}}
@keyframes svc-kb-c{from{transform:scale(1.08) translate3d(-2%,2%,0)}to{transform:scale(1.22) translate3d(2%,-1%,0)}}
.svc-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,12,0) 40%,rgba(8,12,22,.92)),linear-gradient(120deg,rgba(var(--c),.22),transparent 55%);pointer-events:none}
.svc-shot::before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(var(--c),0),rgba(var(--c),.95),rgba(var(--c),0));transform:translateX(-100%);animation:svc-scan 5.5s ease-in-out infinite;animation-play-state:paused}
.svc.is-live .svc-shot::before{animation-play-state:running}
@keyframes svc-scan{0%,20%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
.card.svc .svc-icon{position:relative;z-index:1;margin-top:-34px;margin-bottom:6px;background:rgba(8,12,22,.82);box-shadow:0 0 0 1px rgba(var(--c),.55) inset,0 10px 30px -10px rgba(var(--c),.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card.svc .svc-feats li::before{border-color:rgb(var(--c))}
.card.svc .amt{color:#fff}
.card.svc .amt .per{color:rgb(var(--c))}

@media (prefers-reduced-motion:reduce){
  .svc-shot img,.svc-shot::before,.svc-hero-shot,.svc-stage::before,.svc-stage::after{animation:none !important}
  .svc-shot::before{display:none}
}