/* Apex AI hero: a tilted map plane with three telephely pins feeding one ajánlati rend, and the map-pin mascot. Scoped to .mk-ai and .scene-ai. */

/* mascot idle: the satellite pins bob out of step, a ripple runs out from the pin's foot */
.mk-ai .m-ripple{transform-origin:50% 50%;animation:ai-ripple 2.4s ease-out infinite}
.mk-ai .m-sat{transform-origin:50% 100%;animation:ai-bob 3.6s ease-in-out infinite}
.mk-ai .m-sat.s2{animation-delay:-1.2s}.mk-ai .m-sat.s3{animation-delay:-2.4s}
/* mascot is-hot: the pin hops (shared), the satellites bounce in turn, the right hand waves, the ripple runs fast */
.mk-ai.is-hot .m-sat{animation:ai-pop .6s ease-in-out infinite}
.mk-ai.is-hot .m-sat.s2{animation-delay:.15s}.mk-ai.is-hot .m-sat.s3{animation-delay:.3s}
.mk-ai.is-hot .m-ripple{animation-duration:.8s}
.mk-ai.is-hot .m-arm-r{animation:mk-wave-fast .5s ease-in-out 3}
@keyframes ai-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ai-pop{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-16px) scale(1,1)}55%{transform:translateY(0) scale(1.12,.9)}}
@keyframes ai-ripple{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* the map plane: a 3D tilt that follows the pointer (--sx, --sy2 from fx.js); data-depth elements never set translate */
.scene-ai .plane-wrap{position:absolute;left:2%;top:6%;width:74%;height:64%}
.scene-ai .rot{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--sy2,0)*-8deg + 30deg)) rotateY(calc(var(--sx,0)*12deg - 6deg)) rotateZ(-5deg);transition:transform .3s}
.scene-ai .ai-plane{position:absolute;inset:0;border:2.5px solid var(--ink);border-radius:18px;background-color:var(--bg2);background-image:linear-gradient(var(--line) 2px,transparent 2px),linear-gradient(90deg,var(--line) 2px,transparent 2px);background-size:42px 42px;box-shadow:12px 12px 0 rgba(0,0,0,.2);overflow:hidden}
.scene-ai .ai-plane::before{content:"";position:absolute;left:-10%;right:-10%;top:44%;height:62px;background:var(--accent2);transform:rotate(-14deg);opacity:.8}
.scene-ai .ai-tag{position:absolute;left:12px;bottom:10px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--bg);border:1.5px solid var(--ink);border-radius:6px;padding:3px 7px}
.scene-ai .ai-routes{position:absolute;inset:0;width:100%;height:100%}
.scene-ai .ai-route{fill:none;stroke:var(--ink);stroke-width:2.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:7 8;animation:ai-flow 1.6s linear infinite}
@keyframes ai-flow{to{stroke-dashoffset:-15}}

/* pins: a map-pin shape with a ping ring */
.scene-ai .ai-pin{position:absolute;width:26px;height:26px;background:var(--accent);border:3px solid var(--ink);border-radius:50% 50% 50% 0;rotate:-45deg;box-shadow:3px 3px 0 var(--ink)}
.scene-ai .ai-pin::before{content:"";position:absolute;inset:-12px;border:2px solid var(--ink);border-radius:50%;animation:ai-ping 2.6s ease-out infinite}
.scene-ai .ai-pin::after{content:"";position:absolute;left:8px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.scene-ai .p1{left:14%;top:20%}.scene-ai .p2{left:78%;top:18%}.scene-ai .p3{left:18%;top:70%}
@keyframes ai-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}

.scene-ai .ai-card{position:absolute;font:700 13px var(--fd);color:var(--ink);background:#fffdf6;border:2px solid var(--ink);border-radius:10px;padding:5px 9px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.scene-ai .k1{left:6%;top:4%}.scene-ai .k2{left:48%;top:6%}.scene-ai .k3{left:27%;top:76%}

/* the one offer rule the routes run into */
.scene-ai .ai-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink);color:var(--accent2);border-radius:14px;padding:11px 18px;box-shadow:5px 5px 0 rgba(0,0,0,.25);white-space:nowrap}
.scene-ai .ai-hub span{font:800 17px var(--fd)}

/* the reaction: while the mascot is hot, the routes run faster and the ping rings speed up */
.scene-ai:has(.mk-ai.is-hot) .ai-route{animation-duration:.5s}
.scene-ai:has(.mk-ai.is-hot) .ai-pin::before{animation-duration:1s}

/* phones: the plane is narrower and the cards would crowd the mascot */
@media (max-width:760px){.scene-ai .ai-card{display:none}}
@media (max-width:600px){.scene-ai .plane-wrap{left:0;top:4%;width:80%;height:56%}.scene-ai .chip.c1{right:auto;left:0;top:auto;bottom:4%}}

/* reduced motion and the .calm class stop every loop; the mascot and the plane still read complete */
@media (prefers-reduced-motion:reduce){.scene-ai *,.mk-ai *{animation:none!important}}
.calm .scene-ai *,.calm .mk-ai *{animation:none!important}