/* Cybergate homepage motion layer (2026-10-26): dark cinematic sections, scroll reveal, 3D tilt, animated backgrounds.
   Progressive enhancement: everything stays readable without JS / with reduced motion. */

/* ---- scroll progress bar ---- */
.mx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#0F62D6,#00ACEF,#F5A623);z-index:10001;pointer-events:none}

/* ---- scroll reveal (only hides once JS has marked <html class="mx">) ---- */
html.mx .mx-rv{opacity:0;transform:translateY(38px) scale(.985);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 75ms);will-change:opacity,transform}
html.mx .mx-rv.mx-l{transform:translateX(-46px)}
html.mx .mx-rv.mx-r{transform:translateX(46px)}
html.mx .mx-rv.mx-z{transform:scale(.9)}
html.mx .mx-rv.in{opacity:1;transform:none}

/* ---- dark cinematic sections ---- */
.mx-dark{position:relative;overflow:hidden;color:#c3cee3;
  background:radial-gradient(900px 520px at 88% 0%,rgba(0,172,239,.13),transparent 60%),radial-gradient(800px 480px at 0% 100%,rgba(15,98,214,.20),transparent 60%),linear-gradient(180deg,#05070d 0%,#0a1224 100%)!important}
.mx-dark>.container,.mx-dark>.ig-wrap{position:relative;z-index:2}
.mx-dark .section-head h2{color:#fff}
.mx-dark .lead{color:#c3cee3}
.mx-dark .eyebrow{background:rgba(0,172,239,.16);color:#8fd0f7}
.mx-dark:not(.ig-sec):before,.mx-dark:not(.ig-sec):after{content:"";position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;opacity:.5;z-index:0;will-change:transform;translate:0 calc(var(--py,0) * 70px)}
.mx-dark:not(.ig-sec):before{width:440px;height:440px;left:-140px;top:6%;background:radial-gradient(circle,#1f6fff,transparent 70%);animation:mxf1 19s ease-in-out infinite}
.mx-dark:not(.ig-sec):after{width:400px;height:400px;right:-120px;bottom:2%;background:radial-gradient(circle,#00acef,transparent 70%);animation:mxf2 23s ease-in-out infinite}
@keyframes mxf1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,70px) scale(1.12)}}
@keyframes mxf2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-60px) scale(1.1)}}
.mx-bg{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,40%),rgba(90,160,255,.16),transparent 70%),
    linear-gradient(rgba(77,163,255,.06) 1px,transparent 1px) 0 0/52px 52px,linear-gradient(90deg,rgba(77,163,255,.06) 1px,transparent 1px) 0 0/52px 52px;
  animation:mxgrid 26s linear infinite;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
@keyframes mxgrid{to{background-position:0 0,0 52px,52px 0}}

/* platforms strip, dark variant */
.ig-sec.mx-dark:before{background-image:radial-gradient(circle at center,rgba(255,255,255,.08) 1px,transparent 1px)}
.ig-sec.mx-dark .ig-fl{background:linear-gradient(90deg,#070b16,rgba(7,11,22,0))}.ig-sec.mx-dark .ig-fr{background:linear-gradient(270deg,#070b16,rgba(7,11,22,0))}
.ig-sec.mx-dark .ig-c{border-color:rgba(255,255,255,.14);box-shadow:0 0 26px rgba(77,163,255,.22)}
.ig-sec.mx-dark .ig-i b{color:#9fb0cc}.ig-sec.mx-dark .ig-note{color:#7f90ad}

/* ---- glass panels / steps / cards inside dark sections ---- */
.mx-dark .v2-panel{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.13);box-shadow:0 20px 50px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mx-dark .v2-panel h3{color:#fff}.mx-dark .v2-panel>p{color:#c3cee3}
.mx-dark .v2-panel .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.v2-tile{flex-direction:row;align-items:center;gap:12px;border-top:3px solid var(--c,#0F62D6)}
.v2-ti{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(11,31,77,.08)}
.v2-ti i{display:block;width:26px;height:26px}.v2-ti svg{width:26px;height:26px;display:block}
.v2-tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mx-dark .v2-step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#c3cee3;position:relative;z-index:1}
.mx-dark .v2-step h3{color:#fff}.mx-dark .v2-step p{color:#c3cee3}
.mx-dark .v2-step:before{background:linear-gradient(135deg,#0F62D6,#00ACEF);box-shadow:0 0 22px rgba(0,172,239,.5)}
@media(min-width:1001px){.mx-dark .v2-steps{position:relative}
  .mx-dark .v2-steps:before{content:"";position:absolute;left:8%;right:8%;top:46px;height:2px;z-index:0;background:linear-gradient(90deg,#0F62D6,#00ACEF,#F5A623);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.3,.6,.2,1) .25s;box-shadow:0 0 14px rgba(0,172,239,.7)}
  .mx-dark .v2-steps.mx-seen:before{transform:scaleX(1)}}

/* ---- colourful card tops (like the reference) + coloured icons ---- */
.why,.sol-card,.svc,.case,.client-cat{--c:#0F62D6;border-top:4px solid var(--c)}
.svc{border-top-width:3px}
.why:nth-child(4n+2),.sol-card:nth-child(6n+2),.svc:nth-child(6n+2),.case:nth-child(3n+2),.client-cat:nth-child(4n+2),.v2-tile:nth-child(6n+2){--c:#00ACEF}
.why:nth-child(4n+3),.sol-card:nth-child(6n+3),.svc:nth-child(6n+3),.case:nth-child(3n+3),.client-cat:nth-child(4n+3),.v2-tile:nth-child(6n+3){--c:#F5A623}
.why:nth-child(4n+4),.sol-card:nth-child(6n+4),.svc:nth-child(6n+4),.client-cat:nth-child(4n+4),.v2-tile:nth-child(6n+4){--c:#16A36A}
.sol-card:nth-child(6n+5),.svc:nth-child(6n+5),.v2-tile:nth-child(6n+5){--c:#7c5cff}
.sol-card:nth-child(6n+6),.svc:nth-child(6n+6),.v2-tile:nth-child(6n+6){--c:#ef4d87}
.why .ic,.sol-card .ic,.svc .si{background:color-mix(in srgb,var(--c) 14%,#fff)!important;color:var(--c)!important}
.why .ic svg,.sol-card .ic svg,.svc .si svg{filter:drop-shadow(0 4px 6px color-mix(in srgb,var(--c) 35%,transparent))}
.why:hover .ic,.sol-card:hover .ic,.svc:hover .si{animation:mxpop .6s ease}
@keyframes mxpop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1)}}

/* tilt-enabled elements: let JS drive transform, keep other transitions */
.mx-t{transition:box-shadow .25s,border-color .25s,background .25s!important;transform-style:preserve-3d;will-change:transform}
.mx-t.mx-hot{box-shadow:0 24px 50px rgba(11,31,77,.28)}
.mx-dark .mx-t.mx-hot{box-shadow:0 24px 54px rgba(0,0,0,.55),0 0 0 1px rgba(77,163,255,.4)}

/* ---- headings: animated underline once seen ---- */
.section-head h2{position:relative}
.section-head.mx-seen h2:after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:14px auto 0;background:linear-gradient(90deg,#0F62D6,#00ACEF,#F5A623);transform-origin:50% 50%;animation:mxbar .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes mxbar{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.eyebrow{position:relative}
.eyebrow:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:middle;animation:mxpulse 2s ease-in-out infinite}
@keyframes mxpulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---- button shimmer ---- */
main .btn-primary{position:relative;overflow:hidden}
main .btn-primary:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
main .btn-primary:hover:after{transform:translateX(130%);transition:transform .8s ease}

/* ---- hero card logos (real brand icons) ---- */
.td-logos{display:flex;align-items:center}
.td-logos i{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 3px 10px rgba(11,31,77,.18);margin-left:-10px;overflow:hidden}
.td-logos i:first-child{margin-left:0}
.td-logos svg{width:20px;height:20px;display:block}
.v2-door--grow .td-logos i{box-shadow:0 3px 10px rgba(15,98,214,.3)}.v2-door--it .td-logos i{box-shadow:0 3px 10px rgba(0,172,239,.3)}.v2-door--web .td-logos i{box-shadow:0 3px 10px rgba(245,166,35,.35)}

@media(prefers-reduced-motion:reduce){
  .mx-dark:before,.mx-dark:after,.mx-bg,.eyebrow:before{animation:none!important}
  html.mx .mx-rv{opacity:1;transform:none;transition:none}
}

/* white cards inside dark sections keep dark, readable text */
.mx-dark .case,.mx-dark .why,.mx-dark .sol-card,.mx-dark .svc,.mx-dark .client-cat{color:#42536e}
.mx-dark .case p,.mx-dark .why p,.mx-dark .sol-card p,.mx-dark .svc p,.mx-dark .client-cat p,.mx-dark .case li,.mx-dark .why li,.mx-dark .svc li,.mx-dark .client-cat li{color:#4a5a75}
.mx-dark .case h3,.mx-dark .why h3,.mx-dark .sol-card h3,.mx-dark .svc h3,.mx-dark .client-cat h3,.mx-dark .case h4,.mx-dark .client-cat h4{color:#0B1F4D}
.mx-dark .case .case-tag,.mx-dark .case a{color:#0F62D6}