/* hero v46: clean plates + animated lines/dots/code + randomised photo row. Default state = finished design (no-JS / reduced motion). JS adds .is-live to run the loop. */
.hero-art--layers2{display:flex;align-items:center;justify-content:center}
.hero-art--layers2 .hero-stage{position:relative;width:100%;height:auto;aspect-ratio:1360/940}
.hero-stage img{display:block}
.hero-base{position:absolute;inset:0;width:100%;height:100%}
.hero-lines{position:absolute;inset:0;pointer-events:none}
.hero-lines>img{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero-layer{position:absolute;overflow:hidden}
.hero-layer img{position:absolute;max-width:none}
/* glow running along the lines (masked by the lines image) */
.hero-glow{position:absolute;inset:0;-webkit-mask:url(/assets/media/home/hero2-lines.webp) center/100% 100% no-repeat;mask:url(/assets/media/home/hero2-lines.webp) center/100% 100% no-repeat;background-size:300% 100%;opacity:0}
.hero-glow--1{background-image:linear-gradient(100deg,transparent 0 44%,rgba(36,150,226,.0) 44%,rgba(36,150,226,1) 50%,rgba(36,150,226,0) 56%,transparent 56%)}
.hero-glow--2{background-image:linear-gradient(80deg,transparent 0 45%,rgba(30,40,60,0) 45%,rgba(30,40,60,.75) 50%,rgba(30,40,60,0) 55%,transparent 55%)}
/* radar sweep around the PC: a bright wedge rotates about the big circle's centre and lights up whatever line it passes */
@property --ra{syntax:"<angle>";inherits:false;initial-value:0deg}
.hero-radar{position:absolute;inset:0;-webkit-mask:url(/assets/media/home/hero2-lines.webp) center/100% 100% no-repeat;mask:url(/assets/media/home/hero2-lines.webp) center/100% 100% no-repeat;background:conic-gradient(from var(--ra) at 61.74% 45.16%,transparent 0deg,transparent 285deg,rgba(36,150,226,.0) 285deg,rgba(36,150,226,.95) 356deg,transparent 360deg);opacity:0}
/* dots */
.hero-dot{position:absolute;width:1.15%;aspect-ratio:1;margin:-.575% 0 0 -.575%;border-radius:50%}
.hero-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(36,150,226,.7);opacity:0}
/* live code */
.hero-code{position:absolute}
.code-win{position:absolute;left:7%;top:7%;display:flex;gap:3%}
.code-win i{display:block;width:5px;height:5px;border-radius:50%;background:#7a828a}
.code-row{position:absolute;display:flex;gap:3%;height:4.2%;width:84%;align-items:center}
.code-row i{display:block;height:100%;border-radius:2px}
/* code: white + gray only */
.c-g,.c-a{background:#8d969e}.c-b,.c-w{background:#eceff1}
.code-cursor{position:absolute;left:9%;top:calc(24% + 9*8.2%);width:3%;height:4.2%;background:#eceff1;opacity:0}
@media(min-width:1px){.hero-art--layers2 .hero-stage{max-height:100%}}
@media(max-width:700px){.hero-art--layers2{height:auto}}

/* ---------- live loop (JS adds .is-live) ---------- */
@media(prefers-reduced-motion:no-preference){
.motion-ready .hero-lines>img{clip-path:circle(0% at 52% 48%);transition:clip-path 2.4s cubic-bezier(.3,.6,.2,1)}
.is-live.lines-on .hero-lines>img{clip-path:circle(80% at 52% 48%)}
.motion-ready .hero-dot{transform:scale(0);background:#6d7278;transition:transform .5s cubic-bezier(.3,1.6,.5,1) var(--d)}
.is-live.lines-on .hero-dot{transform:scale(1)}
.is-live.lines-on .hero-dot::after{animation:hero-ping 3.2s ease-out var(--pd) infinite}
.is-live.lines-on .hero-glow,.is-live.lines-on .hero-radar{opacity:1}
.is-live.lines-on .hero-radar{animation:hero-radar 9s linear infinite}
.is-live.lines-on .hero-glow--1{animation:hero-sweep 6s linear infinite}
.is-live.lines-on .hero-glow--2{animation:hero-sweep 9s linear 1.5s infinite}
.motion-ready .hero-layer{transition:clip-path 1.3s cubic-bezier(.4,0,.2,1),opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.motion-ready .hero-layer--wipe{clip-path:inset(0 100% 0 0)}
.motion-ready .hero-layer--pop{opacity:0;transform:scale(.9);filter:blur(7px)}
.is-live .hero-layer--wipe.is-on{clip-path:inset(0 0 0 0)}
.is-live .hero-layer--pop.is-on{opacity:1;transform:none;filter:none}
.is-live.is-out .hero-layer{opacity:0;transition:opacity 1.4s ease}
.is-live.is-reset *{transition:none!important}
.hero-lines{translate:calc(var(--px,0)*10px) calc(var(--py,0)*8px);animation:hero-breathe 12s ease-in-out infinite alternate;transform-origin:52% 48%}
.is-live .code-row{animation:code-type 8s steps(12,end) infinite;animation-delay:calc(var(--i)*.38s)}
.is-live .code-cursor{animation:code-blink 1s steps(1) infinite}
.hero-art.is-paused .hero-radar,.hero-art.is-paused .hero-lines,.hero-art.is-paused .hero-glow,.hero-art.is-paused .hero-dot::after,.hero-art.is-paused .code-row,.hero-art.is-paused .code-cursor{animation-play-state:paused}
}
@keyframes hero-breathe{from{scale:1}to{scale:1.018}}
@keyframes hero-radar{to{--ra:360deg}}
@keyframes hero-sweep{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes hero-ping{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(3.4);opacity:0}}
@keyframes code-type{0%{clip-path:inset(0 100% 0 0);opacity:1}10%,78%{clip-path:inset(0 0 0 0);opacity:1}92%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes code-blink{0%{opacity:.9}50%{opacity:0}}