/* Motion pack (index.html only). Each block is independent: delete one to drop that effect.
   All motion is off under prefers-reduced-motion. */

/* FX-4 navbar drop-in. "backwards" fill so the header's own transforms (hide on scroll) are untouched. */
@keyframes fxNav { from { opacity: 0; transform: translateY(-16px); } }
#header-mount > * { animation: fxNav .8s cubic-bezier(.16, 1, .3, 1) .4s backwards; }

/* FX-2 hero image settles from soft focus */
@keyframes fxHeroImg { from { filter: blur(14px); transform: scale(1.07); } }
.h2-hero-image-wrap img { animation: fxHeroImg 1.5s cubic-bezier(.16, 1, .3, 1) .25s backwards; }

/* FX-12 drifting gradient light + FX-13 grain, hero only */
.fx-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.h2-hero > .container { position: relative; z-index: 1; }
.fx-hero-bg i { position: absolute; width: 560px; height: 560px; border-radius: 50%; will-change: transform; }
.fx-hero-bg i:nth-child(1) { top: -180px; left: -120px; background: radial-gradient(circle, rgba(37, 99, 235, .20), transparent 68%); animation: fxDrift1 16s ease-in-out infinite alternate; }
.fx-hero-bg i:nth-child(2) { bottom: -240px; right: -100px; background: radial-gradient(circle, rgba(20, 184, 166, .18), transparent 68%); animation: fxDrift2 20s ease-in-out infinite alternate; }
.fx-hero-bg i:nth-child(3) { top: 20%; left: 45%; background: radial-gradient(circle, rgba(99, 102, 241, .13), transparent 68%); animation: fxDrift3 24s ease-in-out infinite alternate; }
@keyframes fxDrift1 { to { transform: translate3d(160px, 90px, 0) scale(1.15); } }
@keyframes fxDrift2 { to { transform: translate3d(-180px, -70px, 0) scale(1.1); } }
@keyframes fxDrift3 { to { transform: translate3d(-120px, 110px, 0) scale(.9); } }
.fx-hero-bg::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* FX-5 fade and rise (JS adds .fx-rise, then .fx-in when visible) */
.fx-rise { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.fx-rise.fx-in { opacity: 1; transform: none; }

/* FX-7 image clip reveal */
.fx-clip { clip-path: inset(10% 8% 10% 8% round 28px); transform: scale(1.08); transition: clip-path 1.2s cubic-bezier(.16, 1, .3, 1), transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.fx-clip.fx-in { clip-path: inset(0 0 0 0 round 0); transform: none; }

/* FX-6 scroll-linked word highlight (opacity set per word by JS) */
.fx-word { opacity: .18; }

/* FX-9 step rail that draws while scrolling */
.fx-rail { position: absolute; left: 0; right: 0; top: -14px; height: 3px; border-radius: 3px; background: #e2e8f0; overflow: hidden; pointer-events: none; }
.fx-rail b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #1d4ed8, #14b8a6); transform: scaleX(0); transform-origin: left; }
.h2-workflow-card { transition: border-color .5s, box-shadow .5s; }
.h2-workflow-card.fx-on { border-color: #93b4f5; box-shadow: 0 14px 34px -16px rgba(29, 78, 216, .35); }
.h2-workflow-card .h2-workflow-step-badge { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s; }
.h2-workflow-card.fx-on .h2-workflow-step-badge { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(29, 78, 216, .14); }
@media (max-width: 900px) { .fx-rail { display: none; } }

/* FX-11 button shine sweep + arrow nudge */
.h2-btn-primary, .h2-btn-outline { position: relative; overflow: hidden; }
.h2-btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); transition: transform .75s cubic-bezier(.16, 1, .3, 1); }
.h2-btn-primary:hover::after { transform: translateX(130%); }
.h2-btn-primary svg, .h2-btn-outline svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.h2-btn-primary:hover svg.lucide-arrow-right, .h2-ring-cta:hover .h2-ring-cta-arrow svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    #header-mount > *, .h2-hero-image-wrap img, .fx-hero-bg i { animation: none; }
    .fx-rise, .fx-clip { opacity: 1; transform: none; clip-path: none; transition: none; }
    .fx-word { opacity: 1; }
}