/* Clogik motion layer (Oct 2026). Loaded on every page after the page CSS.
   Hidden "before" states apply only under html.fx (set by an inline script),
   so content is never hidden without JavaScript, and a safety animation
   reveals everything after 3s if fx.js fails. Reduced motion: all off. */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: fx-vt-in .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fx-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes fx-vt-in { from { opacity: 0; transform: translateY(12px); } }

/* scroll progress */
.fx-progress {
  position: fixed; left: 0; top: 0; z-index: 60; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--fx-p, 0));
  background: linear-gradient(90deg, #1489c9, #ed7c19);
  pointer-events: none;
}

/* word-by-word headings */
html.fx .fx-words .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .1em 0; margin: 0 -.08em -.1em 0; }
html.fx .fx-words .fx-w > span {
  display: inline-block; transform: translateY(105%); opacity: 0;
  transition: transform .8s cubic-bezier(.2, .75, .15, 1), opacity .5s ease;
  transition-delay: calc(var(--wi, 0) * 55ms);
}
html.fx .fx-words.fx-in .fx-w > span { transform: none; opacity: 1; }

/* single blocks and staggered grids */
html.fx [data-fx] {
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .75, .15, 1);
  transition-delay: calc(var(--fi, 0) * 75ms);
  animation: fx-safety 0s 3s forwards;
}
html.fx [data-fx].fx-in { opacity: 1; transform: none; animation: none; }
@keyframes fx-safety { to { opacity: 1; transform: none; } }

/* image wipe */
html.fx [data-fx-img] { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path 1.1s cubic-bezier(.65, 0, .2, 1); transition-delay: calc(var(--fi, 0) * 90ms); animation: fx-safety-clip 0s 3s forwards; }
html.fx [data-fx-img].fx-in { clip-path: inset(0 0 0 0 round 0); animation: none; }
@keyframes fx-safety-clip { to { clip-path: none; } }

/* hero network canvas */
.fx-net, .service-page-hero > canvas.fx-net, .hero > canvas.fx-net { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: .9; }
.service-page-hero { position: relative; }
.service-page-hero > .fx-net { z-index: 0; opacity: .55; }
.service-page-hero > *:not(.fx-net) { position: relative; z-index: 1; }

/* cursor spotlight on dark bands */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(20, 137, 201, .16), rgba(237, 124, 25, .07) 40%, transparent 70%);
}
.fx-spot:hover::after { opacity: 1; }

/* buttons: shine sweep + magnetic */
.button, .nav-cta, .btn-cta { position: relative; overflow: hidden; }
.button::after, .nav-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .7s cubic-bezier(.2, .7, .2, 1);
}
.button:hover::after, .nav-cta:hover::after { left: 130%; }
.fx-mag { transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform; }

/* partner marquee: soft edges, pause on hover */
.partner-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partner-marquee:hover .partner-marquee-track { animation-play-state: paused; }

/* animated em underline on section headings */
.section-heading h2 em, .inner-lede h2 em { background: linear-gradient(90deg, #ed7c19, #ed7c19) no-repeat 0 92% / 0 .08em; transition: background-size .9s cubic-bezier(.2, .7, .2, 1) .35s; }
.fx-in em, .section-heading h2.fx-in em { background-size: 100% .08em; }

/* counters */
.fx-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.fx [data-fx], html.fx [data-fx-img], html.fx .fx-words .fx-w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .fx-net, .fx-progress { display: none; }
  .button::after, .nav-cta::after { display: none; }
}
@media print { .fx-net, .fx-progress { display: none; } html.fx [data-fx], html.fx [data-fx-img] { opacity: 1; transform: none; clip-path: none; } }