/* MEGADS static pages — motion layer.
   Content is complete and visible without this file / without JavaScript (search engines and AI assistants read
   the plain HTML). Every hidden-before-reveal state is scoped to html.fx, which a tiny inline script adds only when
   JavaScript runs and the visitor has not asked for reduced motion. Animations use transform / opacity only. */

@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --fx-trace { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

body { position: relative; overflow-x: clip; }
header { position: relative; z-index: 3; }
main, footer { position: relative; z-index: 1; }

/* ——— scroll progress ——— */
.fx-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 50; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #ed252b, #ff5a5f 35%, #6ea8ff 70%, #3ad0ff); box-shadow: 0 0 12px rgb(110 168 255 / .6); pointer-events: none; }

/* ——— hero backdrop: drifting light, perspective grid, MEGADS pin pulse ——— */
.fx-aurora { position: absolute; inset: 0 0 auto 0; height: 980px; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.fx-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.fx-orb--a { width: 560px; height: 560px; left: -140px; top: -120px; background: radial-gradient(circle, #1f4fb8, transparent 68%); animation: fx-float-a 18s ease-in-out infinite alternate; }
.fx-orb--b { width: 480px; height: 480px; right: -120px; top: 60px; background: radial-gradient(circle, #0fa3d8, transparent 66%); opacity: .35; animation: fx-float-b 22s ease-in-out infinite alternate; }
.fx-orb--c { width: 300px; height: 300px; right: 22%; top: 420px; background: radial-gradient(circle, #ed252b, transparent 66%); opacity: .22; animation: fx-float-a 16s ease-in-out infinite alternate-reverse; }
@keyframes fx-float-a { to { transform: translate3d(80px, 60px, 0) scale(1.12); } }
@keyframes fx-float-b { to { transform: translate3d(-90px, 70px, 0) scale(.92); } }
.fx-grid { position: absolute; left: -10%; right: -10%; bottom: 40px; height: 460px; transform: perspective(700px) rotateX(62deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgb(120 160 255 / .14) 1px, transparent 1px), linear-gradient(90deg, rgb(120 160 255 / .14) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent 75%);
  animation: fx-grid 9s linear infinite; }
@keyframes fx-grid { to { background-position: 0 64px, 0 0; } }
.fx-pin { position: absolute; right: max(6vw, 40px); top: 210px; width: 14px; height: 14px; border-radius: 50%; background: #ed252b; box-shadow: 0 0 18px 4px rgb(237 37 43 / .6); }
.fx-pin::before, .fx-pin::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .55); animation: fx-ripple 3.2s cubic-bezier(.2, .7, .2, 1) infinite; }
.fx-pin::after { animation-delay: 1.6s; }
@keyframes fx-ripple { from { transform: scale(.6); opacity: .9; } to { transform: scale(9); opacity: 0; } }
@media (max-width: 760px) { .fx-pin { top: 120px; right: 28px; } .fx-aurora { height: 760px; } }

/* ——— facts card, tiles, CTA: glowing border that traces itself, then idles; spotlight follows the pointer ——— */
.facts, .tile, .cta-panel { position: relative; isolation: isolate; }
.tile, .facts, .cta-panel { --mx: 50%; --my: 0%; }
.tile::before, .facts::before, .cta-panel::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--fx-a), transparent 0 calc(100% - var(--fx-trace)), #6ea8ff calc(100% - var(--fx-trace) + 2%), #3ad0ff, #ed252b calc(100% - 2%), transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .0; transition: opacity .6s;
}
.tile::after, .cta-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(110 168 255 / .16), transparent 60%); }
.tile:hover::after, .cta-panel:hover::after { opacity: 1; }
.tile { transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .4s, box-shadow .5s; transform-style: preserve-3d; }
.tile:hover { border-color: rgb(110 168 255 / .35); box-shadow: 0 30px 60px -30px rgb(30 80 200 / .55), 0 0 0 1px rgb(110 168 255 / .08); }
.tile:hover::before { opacity: 1; animation: fx-spin 3.4s linear infinite; --fx-trace: 38%; }
.tile h3 { transition: color .3s; }
.tile:hover h3 { color: #fff; }
@keyframes fx-spin { to { --fx-a: 360deg; } }
/* traced once when it scrolls in */
html.fx .tile.is-in::before, html.fx .facts.is-in::before, html.fx .cta-panel.is-in::before { animation: fx-trace 1.6s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both; }
@keyframes fx-trace { 0% { opacity: 1; --fx-trace: 0%; --fx-a: 0deg; } 70% { opacity: 1; --fx-trace: 100%; --fx-a: 140deg; } 100% { opacity: 0; --fx-trace: 100%; --fx-a: 200deg; } }
.cta-panel::before { opacity: .9; animation: fx-spin 6s linear infinite; --fx-trace: 45%; }
html.fx .cta-panel.is-in::before { animation: fx-spin 6s linear infinite; }

/* tile number badge (added by fx.js) */
.fx-num { position: absolute; top: 22px; right: 24px; font: 600 12px/1 ui-monospace, 'IBM Plex Mono', monospace; letter-spacing: .14em; color: rgb(149 181 255 / .55); transition: color .3s; }
.tile:hover .fx-num { color: #ed252b; }

/* ——— buttons: light sheen ——— */
.btn { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; box-shadow: 0 12px 30px -12px rgb(237 37 43 / .8); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%); transform: translateX(-120%); animation: fx-sheen 4.5s ease-in-out 2.2s infinite; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgb(237 37 43 / .95); }
@keyframes fx-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* steps get big outline numerals */
.steps { counter-reset: fx-step; }
.steps li { position: relative; counter-increment: fx-step; padding-left: 74px !important; border-left-color: transparent !important; }
.steps li::before { content: counter(fx-step, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 800 34px/1 Manrope, sans-serif; color: transparent; -webkit-text-stroke: 1px rgb(149 181 255 / .5); }
.steps li::after { content: ''; position: absolute; left: 56px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(#ed252b, #6ea8ff); transform-origin: 50% 0; }

/* headline accent: the last words settle into electric blue */
.fx-accent { background: linear-gradient(90deg, #8fb4ff, #3ad0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* client logos */
.client-logo { transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s; filter: saturate(.75) brightness(.95); border-radius: 12px; }
.tile:hover .client-logo { transform: scale(1.06); filter: none; }

/* ============ entrance choreography (only with html.fx) ============ */
html.fx .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html.fx .fx-w > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: 0 100%; }
html.fx .is-in .fx-w > span, html.fx .fx-open .hero .fx-w > span { transform: none; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + var(--i, 0) * 55ms); }

/* opening */
html.fx header { transform: translateY(-100%); opacity: 0; }
html.fx .fx-open header { transform: none; opacity: 1; transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s; }
html.fx .hero .backlink, html.fx .hero .eyebrow, html.fx .hero .lead, html.fx .hero .meta, html.fx .hero .btn { opacity: 0; transform: translateY(18px); }
html.fx .hero .eyebrow { letter-spacing: .6em; }
html.fx .fx-open .hero .backlink { opacity: 1; transform: none; transition: all .8s cubic-bezier(.16, 1, .3, 1) .15s; }
html.fx .fx-open .hero .eyebrow { opacity: 1; transform: none; letter-spacing: .22em; transition: opacity .8s .25s, transform .8s cubic-bezier(.16, 1, .3, 1) .25s, letter-spacing 1.4s cubic-bezier(.16, 1, .3, 1) .25s; }
html.fx .fx-open .hero .lead { opacity: 1; transform: none; transition: all 1s cubic-bezier(.16, 1, .3, 1) .85s; }
html.fx .fx-open .hero .meta { opacity: 1; transform: none; transition: all 1s cubic-bezier(.16, 1, .3, 1) 1s; }
html.fx .fx-open .hero .btn { opacity: 1; transform: none; transition: opacity .8s 1.15s, transform .8s cubic-bezier(.34, 1.56, .64, 1) 1.15s, box-shadow .3s; }
html.fx .fx-aurora { opacity: 0; }
html.fx .fx-open .fx-aurora { opacity: 1; transition: opacity 2.2s ease .1s; }

/* facts card tilts up into place, rows follow */
/* (no clip-path here: a fully clipped element never reports as on screen, so it would never open) */
html.fx .facts { opacity: 0; transform: perspective(1000px) translate3d(0, 34px, 0) rotateX(-10deg) scale(.97); transform-origin: 50% 0; }
html.fx .facts.is-in { opacity: 1; transform: none; transition: opacity .8s ease var(--d, 0s), transform 1.2s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
html.fx .facts > div { opacity: 0; transform: translateY(10px); }
html.fx .facts.is-in > div { opacity: 1; transform: none; transition: all .7s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .35s + var(--i, 0) * 80ms); }

/* tiles open up like cards being dealt: tilt back, rise, settle */
html.fx .tile { opacity: 0; transform: perspective(900px) translate3d(0, 46px, 0) rotateX(-16deg) scale(.96); }
html.fx .tile.is-in { opacity: 1; transform: none; transition: opacity .7s ease var(--d, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), border-color .4s, box-shadow .5s; }
html.fx .tile.is-in:hover { transition: transform .25s ease-out, border-color .4s, box-shadow .5s; }

/* steps: numeral fades, the line draws down */
html.fx .steps li { opacity: 0; transform: translateX(-24px); }
html.fx .steps li::after { transform: scaleY(0); }
html.fx .steps li.is-in { opacity: 1; transform: none; transition: all .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
html.fx .steps li.is-in::after { transform: none; transition: transform .9s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .2s); }

/* FAQ rows slide in, the divider draws */
html.fx .qa { opacity: 0; transform: translateY(16px); border-bottom-color: transparent; background: linear-gradient(90deg, rgb(255 255 255 / .1), rgb(255 255 255 / .1)) 0 100% / 0 1px no-repeat; }
html.fx .qa.is-in { opacity: 1; transform: none; background-size: 100% 1px; transition: opacity .7s var(--d, 0s), transform .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), background-size 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .15s); }

/* section rule draws across */
html.fx .section { border-top-color: transparent; background: linear-gradient(90deg, #ed252b, rgb(110 168 255 / .5) 30%, rgb(255 255 255 / .09) 60%) 0 0 / 0 1px no-repeat; }
html.fx .section.is-in { background-size: 100% 1px; transition: background-size 1.4s cubic-bezier(.65, 0, .35, 1); }

/* CTA panel scales up into place */
html.fx .cta-panel { opacity: 0; transform: translateY(40px) scale(.96); }
html.fx .cta-panel.is-in { opacity: 1; transform: none; transition: opacity .8s, transform 1.2s cubic-bezier(.16, 1, .3, 1); }
html.fx .note { opacity: 0; }
html.fx .note.is-in { opacity: 1; transition: opacity 1s .2s; }

@media (prefers-reduced-motion: reduce) {
  .fx-orb, .fx-grid, .fx-pin::before, .fx-pin::after, .btn::after, .cta-panel::before { animation: none !important; }
}