/* VANTAGE cinematic motion layer. Loaded after app.css on every page. All motion respects prefers-reduced-motion. */
:root{--glow:0 0 0 1px #ff2a3d55,0 12px 40px -10px #ff2a3daa;--silver:#c9d3de;--ease:cubic-bezier(.2,.8,.2,1)}

/* Smooth cross-page transitions (Chromium, Safari 18+); others get a soft fade-in */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .55s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985);filter:blur(4px)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.01);filter:blur(6px)}}
body{animation:page-in .6s var(--ease) both}
@keyframes page-in{from{opacity:0}}

/* Scroll progress + cursor light + film grain */
.mo-progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:75;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--scarlet),#ff6b78 60%,var(--ice));box-shadow:0 0 12px var(--scarlet)}
[dir=rtl] .mo-progress{transform-origin:100% 50%}
.mo-spot{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(520px circle at var(--cx,50%) var(--cy,30%),#ff2a3d0f,transparent 60%);transition:opacity .4s}
.mo-grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}}
main,.site-f,.content{position:relative;z-index:3}
.site-h{z-index:60}

/* Buttons: glow, sheen sweep, magnetic hover */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),background .25s,border-color .25s,box-shadow .35s}
.btn::after{content:"";position:absolute;inset:-1px;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff2e 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{box-shadow:0 0 0 1px #ffffff22,0 14px 40px -14px #7fd8ff66}
.btn.red:hover{box-shadow:var(--glow)}
.btn.red{animation:btn-breathe 4.5s ease-in-out infinite}
@keyframes btn-breathe{50%{box-shadow:0 10px 44px -10px #ff2a3dcc}}
.btn:active{transform:translateY(0) scale(.97)}
.menu>a,.menu .dd>button{position:relative}
.menu>a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--scarlet);transform:scaleX(0);transition:transform .35s var(--ease);box-shadow:0 0 8px var(--scarlet)}
.menu>a:hover::after,.menu>a.on::after{transform:scaleX(1)}
.dd-panel a{transition:background .25s,transform .3s var(--ease)}
.dd-panel a:hover{transform:translateX(4px)}
[dir=rtl] .dd-panel a:hover{transform:translateX(-4px)}
.dd-panel a:hover .ico{box-shadow:0 0 18px -2px var(--scarlet)}
.side a{transition:background .25s,color .25s,padding .3s var(--ease)}
.side a:hover{padding-inline-start:16px}
.card.hov:hover{box-shadow:0 30px 80px -40px #ff2a3d66,inset 0 1px 0 #ffffff14}

/* Text reveals: words rise in sequence when a [data-split] element scrolls into view */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
[data-split] .w>span{display:inline-block;transition:transform .9s var(--ease),opacity .9s;transition-delay:calc(var(--i,0) * 45ms)}
[data-split].pre .w>span{transform:translateY(105%);opacity:0}
.rv{transition-delay:calc(var(--d,0) * 80ms)}
.rv.pre[data-rv=left]{transform:translateX(-40px)}.rv.pre[data-rv=right]{transform:translateX(40px)}.rv.pre[data-rv=zoom]{transform:scale(.94)}
.eyebrow{overflow:hidden}
.eyebrow::before{transform-origin:0 50%;animation:line-in 1s var(--ease) both}
@keyframes line-in{from{transform:scaleX(0)}}
.eyebrow .em{font-size:20px;filter:saturate(1.2)}

/* Layered depth: elements with data-depth drift on scroll (set by motion.js) */
[data-depth]{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.sec{position:relative}
.sec::before{content:"";position:absolute;inset:-10% 0 auto;height:60%;pointer-events:none;z-index:-1;opacity:var(--glow-o,0);transition:opacity 1.2s;background:radial-gradient(ellipse at var(--gx,80%) 0,#ff2a3d14,transparent 60%)}
.sec.lit::before{--glow-o:1}

/* Scroll-driven enquiry story (home): the stage panel stays pinned while you scroll */
.flow-pin{height:300vh;position:relative}
.flow-pin>.wrap{position:sticky;top:calc(80px + env(safe-area-inset-top,0px))}
.flow-pin .scroll-hint{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;margin-top:18px;display:flex;gap:8px;align-items:center}
@media(max-width:800px){.flow-pin{height:auto}.flow-pin>.wrap{position:static}.flow-pin .scroll-hint{display:none}}

/* Animated system diagrams (service pages) */
.diagram{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:center;padding:28px 8px}
.dnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 6px}
.dnode .box{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;font-size:30px;background:linear-gradient(160deg,#16202e,#0b1018);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 #ffffff14,0 20px 40px -20px #000;transition:transform .5s var(--ease),border-color .4s,box-shadow .4s}
.dnode b{font-size:14px;font-weight:600;max-width:16ch}
.dnode small{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.12em}
.dnode.core .box{width:108px;height:108px;border-radius:50%;font-size:40px;border-color:var(--scarlet);background:radial-gradient(circle,#3a0a12,#0b1018 70%);box-shadow:0 0 0 10px #ff2a3d12,0 0 60px -6px var(--scarlet)}
.dnode.core .box::before,.dnode.core .box::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed #7fd8ff55;animation:spin 14s linear infinite}
.dnode.core .box::after{inset:-26px;border:1px solid #ff2a3d33;animation-duration:22s;animation-direction:reverse}
.dnode.core .box{position:relative}
.dnode.on .box{transform:translateY(-6px) scale(1.06);border-color:var(--ice);box-shadow:0 0 0 6px #7fd8ff14,0 18px 50px -12px #7fd8ff88}
.dline{position:absolute;z-index:0;top:calc(28px + 37px);height:2px;background:repeating-linear-gradient(90deg,#7fd8ff66 0 8px,transparent 8px 16px);background-size:32px 2px;animation:dash 1.2s linear infinite;inset-inline:10% 10%}
[dir=rtl] .dline{animation-direction:reverse}
@keyframes dash{to{background-position:32px 0}}
.dpulse{position:absolute;z-index:0;top:calc(28px + 37px - 4px);width:10px;height:10px;border-radius:50%;background:var(--scarlet);box-shadow:0 0 14px 2px var(--scarlet);inset-inline-start:10%;animation:pulse-run 4s var(--ease) infinite}
.dpulse.p2{animation-delay:2s;background:var(--ice);box-shadow:0 0 14px 2px var(--ice)}
@keyframes pulse-run{0%{inset-inline-start:10%;opacity:0}8%{opacity:1}92%{opacity:1}100%{inset-inline-start:89%;opacity:0}}
@media(max-width:760px){
  .diagram{grid-template-columns:1fr;gap:26px;padding:10px 0}
  .dnode{flex-direction:row;text-align:start}.dnode .box{width:60px;height:60px;font-size:24px;flex:none}.dnode.core .box{width:76px;height:76px;font-size:30px}
  .dline{top:5%;bottom:5%;height:auto;width:2px;inset-inline:auto;inset-inline-start:37px;background:repeating-linear-gradient(180deg,#7fd8ff66 0 8px,transparent 8px 16px);background-size:2px 32px;animation:dashv 1.2s linear infinite}
  @keyframes dashv{to{background-position:0 32px}}
  .dpulse{top:5%;inset-inline-start:33px;animation:pulse-runv 4s var(--ease) infinite}
  @keyframes pulse-runv{0%{top:5%;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:93%;opacity:0}}
}

/* Service visual tile (glass icon object) */
.holo{position:relative;aspect-ratio:1;max-width:100%;display:grid;place-items:center;border-radius:28px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#ff2a3d22,transparent 55%),linear-gradient(160deg,#121b28,#06090e);border:1px solid var(--line);isolation:isolate}
.holo canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}

/* ---------- Dashboards: restrained motion ---------- */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.ring{transition:--p 1.4s var(--ease)}
.ring.mo-zero{--p:0!important}
.bar i{animation:bar-grow 1.2s var(--ease) both}
@keyframes bar-grow{from{width:0}}
.stat{transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.stat:hover{transform:translateY(-3px);border-color:#ffffff22;box-shadow:0 24px 60px -36px #7fd8ff55}
.stat .v{background:linear-gradient(180deg,#fff,var(--silver));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel{animation:panel-in .6s var(--ease) both;animation-delay:calc(var(--d,0) * 70ms)}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}}
.tbl tbody tr{animation:row-in .5s var(--ease) both;animation-delay:calc(var(--r,0) * 40ms)}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}}
.pill{transition:background .4s,color .4s,border-color .4s}
.pill-amber::before,.pill-red::before{animation:pulse 1.8s infinite}
.nbell.has-new>button .ic{animation:bell 2.8s ease-in-out infinite;transform-origin:50% 10%}
@keyframes bell{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(14deg)}94%{transform:rotate(-12deg)}97%{transform:rotate(6deg)}}
.flashes .alert{animation:toast-in .5s var(--ease) both}
@keyframes toast-in{from{opacity:0;transform:translateY(-12px) scale(.98)}}
.kcard{transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.kcard:hover{transform:translateY(-2px);box-shadow:0 16px 40px -24px #000}
.kcol.drag{box-shadow:inset 0 0 0 1px var(--ice),0 0 40px -20px var(--ice)}
.tasks li{transition:background .3s}
.tasks li.done .tt{transition:color .4s}

/* Phones and low-power devices: keep it light */
@media (max-width:760px),(pointer:coarse){.mo-spot,.mo-grain{display:none}.btn.red{animation:none}}
.lite .mo-grain,.lite .mo-spot{display:none}
@media (prefers-reduced-motion:reduce){
  .mo-grain,.mo-spot{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  [data-split].pre .w>span{transform:none;opacity:1}
  .dpulse{display:none}
  [data-depth]{transform:none}
}