/* MAIT cinematic layer: hero opening shot, scroll camera, depth reveals, 3D card physics, film grain.
   Loads after the page stylesheets. Everything is gated by html.cn-on, which is only set when the
   visitor has not asked for reduced motion, so without it the pages look exactly as before. */
:root{--cn-ease:cubic-bezier(.16,1,.3,1);--cn-ease-io:cubic-bezier(.65,0,.35,1)}

/* ---------- opening shot: letterbox bars retract, headline rises out of depth ---------- */
.cn-letterbox{position:absolute;inset:0;z-index:6;pointer-events:none}
.cn-letterbox:before,.cn-letterbox:after{content:"";position:absolute;left:0;right:0;height:13%;background:#050302;transform-origin:top}
.cn-letterbox:before{top:0}
.cn-letterbox:after{bottom:0;transform-origin:bottom}
html.cn-on .cn-letterbox:before,html.cn-on .cn-letterbox:after{animation:cn-bars 1.5s var(--cn-ease-io) .35s both}
@keyframes cn-bars{to{transform:scaleY(0)}}

html.cn-on .hm-hero h1,html.cn-on .sv-hero h1,html.cn-on .svc-hero h1{perspective:900px}
html.cn-on .hm-hero h1:not(.cn-split),html.cn-on .sv-hero h1:not(.cn-split),html.cn-on .svc-hero h1:not(.cn-split){animation:cn-rise 1.3s var(--cn-ease) .3s both}
.cn-w{display:inline-block;transform-style:preserve-3d;white-space:nowrap}
html.cn-on .cn-w{animation:cn-word 1.25s var(--cn-ease) both;animation-delay:calc(.35s + var(--i,0) * 70ms);transform-origin:50% 100% -20px}
@keyframes cn-word{
  from{opacity:0;transform:translate3d(0,.7em,-120px) rotateX(-75deg);filter:blur(12px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
/* the gradient half of the home headline keeps its colour when it travels as one piece */
.hm-hero h1 .cn-w:not(.cn-grad){background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
.hm-hero h1 .cn-w.cn-grad{background:linear-gradient(90deg,#ffb35c,#DD7109);-webkit-background-clip:text;background-clip:text;color:transparent}

html.cn-on .cn-rise{animation:cn-rise 1.2s var(--cn-ease) both;animation-delay:var(--cn-at,.9s)}
@keyframes cn-rise{from{opacity:0;transform:translate3d(0,34px,0);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

/* the hero visual is pulled in by a dolly move, from far and tilted to its resting pose */
html.cn-on .hm-stage,html.cn-on .svc-hero-visual{animation:cn-dolly 2.2s var(--cn-ease) .25s backwards}
html.cn-on .svc-hero-visual{transition:transform .7s var(--cn-ease)}
.cn-grad-host{background:none!important}
@keyframes cn-dolly{from{opacity:0;transform:perspective(1200px) translate3d(0,40px,-320px) rotateX(22deg) rotateY(-14deg);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}

/* floating cards fly in from depth, one after another, then keep bobbing */
.hm-float-1,.sv-float-1{--k:0}.hm-float-2,.sv-float-2{--k:1}.hm-float-3,.sv-float-3{--k:2}.hm-float-4{--k:3}
html.cn-on .hm-float{animation:cn-float-in 1.5s var(--cn-ease) both,hm-bob 6s ease-in-out infinite;animation-delay:calc(1.1s + var(--k,0) * 140ms),calc(var(--k,0) * -1.5s)}
@keyframes cn-float-in{from{opacity:0;transform:translate3d(0,30px,-260px) rotateY(calc(var(--k,0) * 12deg - 18deg));filter:blur(10px)}to{opacity:1;filter:none}}

/* service hero: the device swings round into place, rings orbit in 3D, a light pass crosses the glass */
html.cn-on .sv-device{animation:cn-device 2.4s var(--cn-ease) .3s backwards,sv-float 7s ease-in-out 2.7s infinite}
@keyframes cn-device{from{opacity:0;transform:translateZ(-380px) rotateY(-48deg) rotateX(18deg);filter:blur(12px)}to{opacity:1;transform:rotateY(-10deg) rotateX(5deg);filter:none}}
html.cn-on .sv-plate{animation:cn-plate 2.6s var(--cn-ease) .5s backwards,sv-float 7s ease-in-out 1.5s infinite}
@keyframes cn-plate{from{opacity:0;transform:rotateY(-30deg) rotateX(14deg) translateZ(-260px)}to{opacity:1;transform:rotateY(-10deg) rotateX(5deg) translateZ(-80px)}}
html.cn-on .sv-orbit{animation:cn-ring 34s linear infinite;border-width:1.5px}
html.cn-on .sv-orbit-2{animation:cn-ring-2 22s linear infinite}
@keyframes cn-ring{from{transform:rotateX(72deg) rotateY(-12deg) rotateZ(0)}to{transform:rotateX(72deg) rotateY(-12deg) rotateZ(360deg)}}
@keyframes cn-ring-2{from{transform:rotateX(64deg) rotateY(18deg) rotateZ(360deg)}to{transform:rotateX(64deg) rotateY(18deg) rotateZ(0)}}
.sv-device:after{content:"";position:absolute;inset:-20%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 48%,rgba(255,220,180,.08) 53%,transparent 60%);transform:translateX(-80%)}
html.cn-on .sv-device:after{animation:cn-pass 7s var(--cn-ease-io) 2.4s infinite}
@keyframes cn-pass{0%{transform:translateX(-80%)}28%,100%{transform:translateX(80%)}}
/* scrolling the hero away tips the device back, like a camera craning up */
.sv-device{transform:rotateY(var(--ry,-10deg)) rotateX(calc(var(--rx,5deg) + var(--cn-p,0) * 24deg))}

/* ---------- scroll camera: the hero recedes into depth as it leaves the screen ---------- */
html.cn-on .hm-hero-grid,html.cn-on .sv-hero-grid,html.cn-on .svc-hero-grid{
  transform:translate3d(0,calc(var(--cn-p,0) * 90px),0) scale(calc(1 - var(--cn-p,0) * .07));
  opacity:calc(1 - var(--cn-p,0) * .8);will-change:transform,opacity}

/* ---------- atmosphere: drifting light beams, depth dust and film grain on dark scenes ---------- */
.cn-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cn-beam{position:absolute;top:-30%;width:34%;height:160%;left:var(--x,50%);background:linear-gradient(90deg,transparent,rgba(255,170,90,.09) 45%,rgba(255,200,140,.13) 50%,rgba(255,170,90,.09) 55%,transparent);
         filter:blur(18px);transform:rotate(22deg);transform-origin:50% 0;mix-blend-mode:screen;animation:cn-beam 14s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes cn-beam{0%,100%{transform:rotate(18deg) translateX(-6%);opacity:.5}50%{transform:rotate(28deg) translateX(6%);opacity:1}}
.cn-dust{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#ffcf99;box-shadow:0 0 8px 1px rgba(255,170,90,.7);opacity:0;
         animation:cn-dust var(--t,14s) linear infinite;animation-delay:var(--d,0s)}
@keyframes cn-dust{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}15%{opacity:var(--o,.7)}85%{opacity:var(--o,.7)}100%{opacity:0;transform:translate3d(var(--dx,20px),-140px,0) scale(1.2)}}
.cn-grain{position:absolute;inset:-50%;z-index:5;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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:cn-grain .9s steps(6) infinite}
@keyframes cn-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,6%)}80%{transform:translate(5%,-2%)}100%{transform:translate(0,0)}}
.cn-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 55% 45%,transparent 55%,rgba(0,0,0,.55))}
.hm-hero>.hm-wrap,.sv-hero>.hm-wrap,.svc-hero>.svc-wrap{position:relative;z-index:2}
.hm-dark>.hm-wrap{position:relative;z-index:2}

/* ---------- depth reveal: blocks rise out of the screen, tipped back, coming into focus ---------- */
html.cn-on .hm-js [data-reveal]{opacity:0;transform:perspective(1400px) translate3d(0,64px,-160px) rotateX(16deg);filter:blur(8px);transform-origin:50% 100%;
  transition:opacity 1s var(--cn-ease) var(--cn-d,0s),transform 1.3s var(--cn-ease) var(--cn-d,0s),filter 1s var(--cn-ease) var(--cn-d,0s)}
html.cn-on .hm-js [data-reveal].is-in{opacity:1;transform:none;filter:none}
html.cn-on .hm-js [data-delay="1"]{--cn-d:.12s}
html.cn-on .hm-js [data-delay="2"]{--cn-d:.24s}
html.cn-on .hm-js [data-delay="3"]{--cn-d:.36s}
/* the kicker rule draws itself once its block is on screen */
html.cn-on .hm-js [data-reveal] .hm-kicker:before{width:0;transition:width .9s var(--cn-ease) calc(var(--cn-d,0s) + .45s)}
html.cn-on .hm-js [data-reveal].is-in .hm-kicker:before{width:24px}

/* photos open like a shutter and settle from a slow push-in */
html.cn-on .hm-js .hm-about-media[data-reveal],html.cn-on .hm-js .sv-media[data-reveal]{transform:none;filter:none;clip-path:inset(14% 10% 14% 10% round 28px);
  transition:opacity .8s ease var(--cn-d,0s),clip-path 1.6s var(--cn-ease) var(--cn-d,0s)}
html.cn-on .hm-js .hm-about-media[data-reveal].is-in,html.cn-on .hm-js .sv-media[data-reveal].is-in{clip-path:inset(0 0 0 0 round 28px)}
html.cn-on .hm-about-media,html.cn-on .sv-media,html.cn-on .sv-story-img,html.cn-on .svc-hero-visual{overflow:hidden;border-radius:28px;isolation:isolate}
html.cn-on .hm-about-media,html.cn-on .sv-media{box-shadow:0 30px 70px rgba(16,10,8,.16)}
html.cn-on .sv-story-img{border-radius:22px}
html.cn-on .hm-about-media img,html.cn-on .sv-media img,html.cn-on .sv-story-img img,html.cn-on .svc-hero-visual img{box-shadow:none;border-radius:0;
  transform:translate3d(0,var(--cn-y,0px),0) scale(1.14);transition:scale 2.2s var(--cn-ease);will-change:transform}
html.cn-on .hm-js .hm-about-media[data-reveal]:not(.is-in) img,html.cn-on .hm-js .sv-media[data-reveal]:not(.is-in) img{scale:1.18}

/* ---------- 3D cards: spring tilt, depth layers, a moving glare and a shadow that follows the light ---------- */
html.cn-on .hm-js [data-tilt][data-reveal]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));translate:0 64px;rotate:x 14deg;scale:.94;
  transition:opacity 1s var(--cn-ease) var(--cn-d,0s),translate 1.3s var(--cn-ease) var(--cn-d,0s),rotate 1.3s var(--cn-ease) var(--cn-d,0s),scale 1.3s var(--cn-ease) var(--cn-d,0s),filter 1s var(--cn-ease) var(--cn-d,0s),box-shadow .4s ease,border-color .35s ease}
html.cn-on .hm-js [data-tilt][data-reveal].is-in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));translate:none;rotate:none;scale:1}
html.cn-on [data-tilt]:hover{box-shadow:var(--sx,0px) calc(30px + var(--sy,0px)) 60px rgba(16,10,8,.16)}
html.cn-on .hm-dark [data-tilt]:hover{box-shadow:var(--sx,0px) calc(30px + var(--sy,0px)) 70px rgba(0,0,0,.5),0 0 0 1px rgba(221,113,9,.35)}
html.cn-on .hm-card .hm-icon{transform:translateZ(46px);transition:transform .4s var(--cn-ease)}
html.cn-on .hm-card h3{transform:translateZ(28px)}
html.cn-on .hm-card .hm-card-arrow{transform:translateZ(36px)}
html.cn-on .hm-card:hover .hm-card-arrow{transform:translateZ(36px) rotate(45deg)}
html.cn-on .hm-card:hover .hm-icon{transform:translateZ(60px)}
.cn-glare{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s ease;mix-blend-mode:soft-light;
          background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 47%,rgba(255,255,255,.15) 53%,transparent 66%);background-size:260% 260%;background-position:var(--mx,50%) var(--my,50%)}
[data-tilt]:hover>.cn-glare{opacity:1}

@media (max-width:991px){
  html.cn-on .hm-hero-grid,html.cn-on .sv-hero-grid,html.cn-on .svc-hero-grid{transform:none;opacity:1}
  .cn-beam{width:60%}
}
@media (max-width:991px){html.cn-on .svc-hero-visual,html.cn-on .svc-hero-visual img{border-radius:20px}}
@media (prefers-reduced-motion:reduce){
  .cn-letterbox,.cn-atmos,.cn-grain,.cn-glare{display:none}
}