/* Sejafy FX layer — 3D + motion on top of the existing site */
:root{--fx-ease:cubic-bezier(.2,.7,.2,1)}
.fx-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.6s var(--fx-ease);z-index:0}
.fx-gl.on{opacity:1}
.hero-bg{overflow:hidden}
.hero-bg .blob{mix-blend-mode:screen}

/* hero 3D stage */
.hero-visual{perspective:1400px}
.hero-stage{transform-style:preserve-3d;transition:transform .7s var(--fx-ease);will-change:transform}
.hero-stage>*{transform-style:preserve-3d}
.fx-z1{translate:0 0 40px}.fx-z2{translate:0 0 90px}.fx-z3{translate:0 0 140px}
.fx-shadow{position:absolute;left:8%;right:8%;bottom:-40px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);filter:blur(10px);translate:0 0 -80px;pointer-events:none}

/* 3D tilt cards */
.fx-tilt{transform-style:preserve-3d;transition:transform .5s var(--fx-ease),box-shadow .5s var(--fx-ease);will-change:transform;position:relative}
.fx-tilt.fx-hot{transition:transform .12s linear,box-shadow .3s}
.fx-tilt.fx-hot{box-shadow:0 40px 80px -30px rgba(15,42,67,.45)}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:5;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 55%);mix-blend-mode:soft-light}
.fx-tilt.fx-hot .fx-glare{opacity:1}
.fx-tilt .ic,.fx-tilt .svc-num,.fx-tilt .svc-art,.fx-tilt .leader-badge,.fx-tilt .tag,.fx-tilt h3{transition:translate .5s var(--fx-ease)}
.fx-tilt.fx-hot .ic,.fx-tilt.fx-hot .svc-num,.fx-tilt.fx-hot .leader-badge{translate:0 0 50px}
.fx-tilt.fx-hot .svc-art{translate:0 0 30px}
.fx-tilt.fx-hot h3{translate:0 0 24px}

/* split headings */
.fx-split{perspective:900px}
.fx-w{display:inline-block;transform-origin:50% 100%;transform:translateY(.6em) rotateX(-80deg);opacity:0;transition:transform 1s var(--fx-ease),opacity .8s var(--fx-ease);transition-delay:calc(var(--i,0)*45ms)}
.fx-split.fx-in .fx-w{transform:none;opacity:1}

/* navy sections constellation */
.fx-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}
.section--navy{position:relative;overflow:hidden}
.section--navy>.container{position:relative;z-index:1}

/* section depth on scroll */
.fx-depth{transform-style:preserve-3d;will-change:transform}

/* marquee speed skew */
.marquee{will-change:transform;transition:transform .25s ease-out}

/* cursor */
.fx-cursor{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;z-index:2147483000;pointer-events:none;border:1.5px solid rgba(255,138,61,.9);background:radial-gradient(closest-side,rgba(255,194,71,.3),transparent);opacity:0;transition:opacity .3s,width .35s var(--fx-ease),height .35s var(--fx-ease),margin .35s var(--fx-ease),background .35s,border-color .35s;mix-blend-mode:multiply}
.fx-dark .fx-cursor,.fx-cursor.fx-ondark{mix-blend-mode:screen;border-color:rgba(255,255,255,.8)}
.fx-cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px;border-color:transparent;background:radial-gradient(closest-side,rgba(255,90,78,.35),rgba(28,199,184,.18) 70%,transparent)}
.fx-cursor.down{width:20px;height:20px;margin:-10px 0 0 -10px}
.fx-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FF5A4E;z-index:2147483001;pointer-events:none;opacity:0;transition:opacity .3s}
@media (hover:none),(pointer:coarse){.fx-cursor,.fx-dot{display:none}}
.fx-spark{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;z-index:2147483002;pointer-events:none}
.fx-wave{position:fixed;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;z-index:2147483002;pointer-events:none;border:2px solid #FF8A3D}

/* magnetic buttons + shine */
.btn{will-change:translate;transition:translate .35s var(--fx-ease)}
.btn--primary{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);animation:fx-shine 3.6s var(--fx-ease) infinite;z-index:-1;pointer-events:none}
@keyframes fx-shine{55%,100%{transform:translateX(130%)}}

/* case shots */
.case-shot{overflow:hidden}
.case-shot>*{transition:scale .9s var(--fx-ease)}
.case:hover .case-shot>*{scale:1.04}

/* intro curtain */
.fx-intro{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:#0A1F33;perspective:900px;pointer-events:none}
.fx-intro img{width:84px;height:104px;animation:fx-logo 1.15s var(--fx-ease) both;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.fx-intro i{position:absolute;inset:0;background:linear-gradient(100deg,#FF5A4E,#FFC247 52%,#1CC7B8);transform:translateY(100%);animation:fx-wipe 1.25s .55s cubic-bezier(.7,0,.2,1) both}
.fx-intro.out{animation:fx-out .7s 1.15s cubic-bezier(.7,0,.2,1) forwards}
@keyframes fx-logo{0%{transform:rotateY(-180deg) scale(.4);opacity:0}60%{transform:rotateY(20deg) scale(1.1);opacity:1}100%{transform:rotateY(0) scale(1)}}
@keyframes fx-wipe{0%{transform:translateY(100%)}50%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes fx-out{to{clip-path:inset(0 0 100% 0)}}

/* 3D floating badge in hero */
.fx-orb{position:absolute;left:-46px;bottom:-26px;width:110px;height:110px;translate:0 0 180px;pointer-events:none;z-index:6}
.fx-orb .r{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--fxa,0deg),#FF5A4E,#FFC247,#1CC7B8,#FF5A4E);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:fx-spin 6s linear infinite}
.fx-orb .g{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.35),rgba(255,255,255,.06) 45%,rgba(15,42,67,.55));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
.fx-orb img{position:absolute;left:50%;top:50%;width:40px;height:50px;margin:-25px 0 0 -20px;animation:fx-bob 4.5s ease-in-out infinite}
@property --fxa{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes fx-spin{to{--fxa:360deg}}
@keyframes fx-bob{0%,100%{transform:translateY(0) rotateY(-12deg)}50%{transform:translateY(-6px) rotateY(12deg)}}
@media (max-width:860px){.fx-orb{width:78px;height:78px;left:-6px;bottom:-16px}.fx-orb img{width:30px;height:37px;margin:-18.5px 0 0 -15px}}

@media (prefers-reduced-motion:reduce){.fx-w{transform:none!important;opacity:1!important}.fx-intro{display:none}.btn--primary::after{animation:none}}

/* living orbit */
.fx-orbit{transform-style:preserve-3d;transition:transform .15s linear}
.fx-orbit-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.fx-orbit .orbit-ring{animation:fx-ring 60s linear infinite}
.fx-orbit .orbit-ring.r2{animation-duration:38s;animation-direction:reverse}
@keyframes fx-ring{to{rotate:360deg}}
.fx-orbit .orbit-node{z-index:2;transition:scale .3s cubic-bezier(.2,.7,.2,1);cursor:pointer}
.fx-orbit .orbit-node i{transition:box-shadow .3s,translate .3s cubic-bezier(.2,.7,.2,1)}
.fx-orbit .orbit-node.fx-node-hot{scale:1.14}
.fx-orbit .orbit-node.fx-node-hot i{translate:0 -4px;box-shadow:0 18px 40px -10px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.08)}
.fx-orbit .orbit-core{z-index:1;overflow:visible}
.fx-orbit .orbit-core img{animation:fx-core-spin 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes fx-core-spin{0%,100%{transform:rotateY(-18deg) scale(1)}50%{transform:rotateY(18deg) scale(1.04)}}
.fx-orbit .orbit-core.fx-core-hit img{animation:fx-core-spin 7s ease-in-out infinite,fx-hit .45s cubic-bezier(.2,.7,.2,1)}
@keyframes fx-hit{40%{filter:brightness(1.35) drop-shadow(0 0 18px rgba(255,194,71,.8))}}
.fx-pulse{position:absolute;left:50%;top:50%;width:100%;height:100%;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(28,199,184,.55);pointer-events:none;animation:fx-pulse 3.3s cubic-bezier(.2,.7,.2,1) infinite;opacity:0}
.fx-pulse:nth-child(odd){border-color:rgba(255,138,61,.5)}
@keyframes fx-pulse{0%{scale:.9;opacity:.9}100%{scale:2.3;opacity:0}}
@media (prefers-reduced-motion:reduce){.fx-orbit .orbit-ring,.fx-pulse,.fx-orbit .orbit-core img{animation:none}}

/* giant liquid wordmark */
.fx-word{background:#0A1F33;padding:clamp(40px,7vw,90px) 0 clamp(20px,4vw,50px);overflow:hidden;position:relative}
.fx-word::before{content:"";position:absolute;left:50%;top:55%;width:70%;height:60%;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,90,78,.18),rgba(28,199,184,.10) 60%,transparent);filter:blur(30px);pointer-events:none}
.fx-word-in{position:relative;width:min(1200px,92vw);margin:0 auto;opacity:0;translate:0 40px;scale:.96;transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),translate 1.2s cubic-bezier(.2,.7,.2,1),scale 1.2s cubic-bezier(.2,.7,.2,1)}
.fx-word-on .fx-word-in{opacity:1;translate:0 0;scale:1}
.fx-word canvas{display:block;width:100%;cursor:crosshair;touch-action:pan-y}
.fx-word-fallback{display:block;text-align:center;font:800 clamp(80px,20vw,300px)/1 Poppins,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.03em;background:linear-gradient(100deg,#FF5A4E,#FFC247 52%,#1CC7B8);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-word+footer,.fx-word+.site-footer{border-top:1px solid rgba(255,255,255,.06)}

/* intro v2: S + liquid "ejafy" */
.fx-intro2{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:#0A1F33;perspective:900px;pointer-events:none;overflow:hidden}
.fx-intro2::before{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,90,78,.22),rgba(28,199,184,.12) 55%,transparent 72%);filter:blur(30px);animation:fx-glow 3s ease-in-out both}
@keyframes fx-glow{0%{opacity:0;scale:.6}50%{opacity:1;scale:1}100%{opacity:.8;scale:1.1}}
.fx-intro2 .grp{position:relative;display:flex;align-items:flex-start;justify-content:flex-start}
.fx-intro2 .s{display:block;flex:0 0 auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));translate:var(--shift,0) 0}
.fx-intro2.go .s{animation:fx-logo 1.15s cubic-bezier(.2,.7,.2,1) both,fx-slide .55s 1.2s cubic-bezier(.7,0,.2,1) both}
@keyframes fx-slide{from{translate:var(--shift,0px) 0}to{translate:0 0}}
.fx-intro2 .s{animation-fill-mode:both}
.fx-intro2 .t{display:block;flex:0 0 auto}
.fx-intro2 .w{position:absolute;inset:0;background:linear-gradient(100deg,#FF5A4E,#FFC247 52%,#1CC7B8);transform:translateY(100%);z-index:3}
.fx-intro2.open .w{animation:fx-wipe 1.1s cubic-bezier(.7,0,.2,1) both}
.fx-intro2.open{animation:fx-out .6s .5s cubic-bezier(.7,0,.2,1) forwards}
.fx-intro2.open .grp{animation:fx-grp .6s cubic-bezier(.7,0,.2,1) forwards}
@keyframes fx-grp{to{scale:1.15;opacity:0;filter:blur(6px)}}

/* safety: the intro can never stay on screen */
.fx-intro2:not(.open){animation:fx-kill .01s 4.6s forwards}
@keyframes fx-kill{to{opacity:0;visibility:hidden}}