/* ==========================================================================
   Jobatech FX — 21st.dev-style motion components, rebuilt for WordPress.
   Driven by Motion (motion.dev) in fx.js. `html.fx` is set in <head>
   before paint; it is removed if Motion fails to load or the visitor
   prefers reduced motion, so content is never stuck hidden.
   ========================================================================== */

@property --fx-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------- pre-paint hidden states (only while .fx is on) ---------- */
.fx [data-fx="words"],
.fx [data-fx="up"],
.fx [data-fx-item],
.fx [data-fx-hero],
.fx [data-fx-system] { opacity: 0; }
.fx-w { display: inline-block; will-change: transform, opacity, filter; }

/* ---------- Aurora background (one heavy background per page) ---------- */
.fx-aurora { position: absolute; inset: -20% -10% -10%; z-index: -1; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: .9; }
.fx-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.fx-aurora span:nth-child(1) { width: 46vw; height: 46vw; left: 46%; top: 30%; background: radial-gradient(closest-side, rgba(179, 0, 0, .85), transparent); animation: fx-drift-a 18s ease-in-out infinite alternate; }
.fx-aurora span:nth-child(2) { width: 34vw; height: 34vw; left: 62%; top: -6%; background: radial-gradient(closest-side, rgba(245, 183, 0, .38), transparent); animation: fx-drift-b 22s ease-in-out infinite alternate; }
.fx-aurora span:nth-child(3) { width: 38vw; height: 38vw; left: -8%; top: 50%; background: radial-gradient(closest-side, rgba(135, 0, 0, .7), transparent); animation: fx-drift-c 26s ease-in-out infinite alternate; }
@keyframes fx-drift-a { to { transform: translate3d(-14vw, -8vh, 0) scale(1.15); } }
@keyframes fx-drift-b { to { transform: translate3d(-10vw, 14vh, 0) scale(.9); } }
@keyframes fx-drift-c { to { transform: translate3d(16vw, -12vh, 0) scale(1.2); } }
@media (max-width: 700px) { .fx-aurora span:nth-child(3) { display: none; } .fx-aurora { filter: blur(50px); } }

/* noise grain over the hero for a printed, premium finish */
.v2-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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"); }
.v2-hero::before { display: none; } /* aurora replaces the static glow */

/* ---------- Cursor spotlight ---------- */
.fx-spotlight { position: absolute; left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, .09), transparent 70%); }
.v2-hero__inner { position: relative; z-index: 1; }

/* ---------- Animated badge (shine sweep) ---------- */
.fx-badge { position: relative; overflow: hidden; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); letter-spacing: .06em; }
.fx-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-100%); animation: fx-sweep 4.5s var(--v2-ease-out) 1.5s infinite; }
@keyframes fx-sweep { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

/* ---------- Shimmer gradient text ---------- */
.fx-shimmer-text { background: linear-gradient(110deg, var(--v2-danfo) 0%, #FFE9A8 25%, var(--v2-danfo) 50%, #FF8A3D 75%, var(--v2-danfo) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: fx-shimmer-text 6s linear infinite; padding-right: .06em; }
.fx-shimmer-text .fx-w { -webkit-text-fill-color: transparent; }
@keyframes fx-shimmer-text { to { background-position: -200% 0; } }

/* ---------- Shimmer button ---------- */
.fx-shimmer { position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 40px -10px rgba(179, 0, 0, .8); }
.fx-shimmer::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); background-size: 250% 100%; animation: fx-btn-shine 3.2s ease-in-out infinite; }
@keyframes fx-btn-shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }

/* ---------- Border beam card ---------- */
.fx-beam { position: relative; }
.fx-beam::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
	background: conic-gradient(from var(--fx-angle), transparent 0 70%, var(--v2-danfo) 80%, #FF5A3C 88%, transparent 96%);
	-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 exclude, linear-gradient(#000 0 0);
	animation: fx-spin 5s linear infinite; }
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* tilt needs perspective on the parent */
.v2-system { perspective: 1100px; }
[data-fx-tilt] { transform-style: preserve-3d; will-change: transform; }

/* growth flow highlight */
.v2-flow li { transition: background var(--v2-dur-enter) var(--v2-ease-out), border-color var(--v2-dur-enter) var(--v2-ease-out), box-shadow var(--v2-dur-enter) var(--v2-ease-out); }
.v2-flow li.is-hot { background: rgba(245, 183, 0, .1); border-color: rgba(245, 183, 0, .55); box-shadow: 0 0 24px -6px rgba(245, 183, 0, .5); }

/* ---------- Logo marquee (edge-faded, pausable) ---------- */
.v2-logos { padding: 40px 0 34px; overflow: hidden; }
.fx-logos__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.fx-pause { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v2-line); background: var(--v2-white); color: var(--v2-text); font: 600 13px var(--v2-body); cursor: pointer; }
.fx-pause:hover { border-color: var(--v2-text); }
.fx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-marquee__track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 64px; width: max-content; animation: fx-marquee 34s linear infinite; }
.fx-marquee:hover .fx-marquee__track, .fx-marquee.is-paused .fx-marquee__track { animation-play-state: paused; }
.fx-marquee__track img { height: 46px; width: auto; display: block; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: filter var(--v2-dur-micro), opacity var(--v2-dur-micro); }
.fx-marquee__track li:hover img { filter: none; opacity: 1; }
@keyframes fx-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Velocity ribbon ---------- */
.fx-ribbon { background: var(--v2-crimson); color: #fff; padding: clamp(18px, 2.4vw, 28px) 0; overflow: hidden; transform: rotate(-1.5deg); margin: -12px -2vw; position: relative; z-index: 2; box-shadow: 0 20px 50px -20px rgba(179, 0, 0, .6); }
.fx-ribbon__track { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); width: max-content; white-space: nowrap; will-change: transform; font-family: var(--v2-display); font-weight: 700; font-size: clamp(2rem, 5.5vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; }
.fx-ribbon__track em { font-family: var(--v2-serif); font-weight: 400; font-style: italic; color: var(--v2-danfo-soft); }
.fx-ribbon__star { width: .5em; height: .5em; flex: none; color: var(--v2-danfo); }

/* ---------- Glow bento (pillars) ---------- */
.fx-bento { display: grid; gap: 16px; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; list-style: none; border: 0; }
@media (min-width: 860px) { .fx-bento { grid-template-columns: repeat(3, 1fr); } }
.fx-bento li { border: 0 !important; padding: 0 !important; }
.fx-card { position: relative; height: 100%; box-sizing: border-box; border-radius: var(--v2-r-lg); padding: clamp(26px, 3vw, 36px) !important; background: var(--v2-white); border: 1px solid var(--v2-line) !important; overflow: hidden; isolation: isolate; transition: transform var(--v2-dur-enter) var(--v2-ease-out), box-shadow var(--v2-dur-enter) var(--v2-ease-out); }
.fx-card:hover { transform: translateY(-4px); box-shadow: var(--v2-shadow-2); }
.fx-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--v2-ink); color: var(--v2-danfo); margin-bottom: 22px; }
.fx-card__icon svg { width: 26px; height: 26px; }
.fx-card .v2-num { position: absolute; right: 24px; top: 24px; }
.fx-card h3 { font-size: 1.6rem; font-weight: 700; margin: 0 0 10px; color: var(--v2-text); }
.fx-card p { color: var(--v2-muted); margin: 0; }

/* cursor-tracked spotlight + glowing border (21st "Spotlight card" / "Glowing effect") */
.fx-spot { --mx: 50%; --my: 50%; }
.fx-spot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--v2-dur-enter); background: radial-gradient(420px circle at var(--mx) var(--my), rgba(179, 0, 0, .10), transparent 60%); }
.fx-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity var(--v2-dur-enter);
	background: radial-gradient(260px circle at var(--mx) var(--my), var(--v2-crimson), rgba(245, 183, 0, .8) 35%, transparent 70%);
	-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 exclude, linear-gradient(#000 0 0); }
.fx-spot:hover::before, .fx-spot:hover::after { opacity: 1; }
.v2-contrast__after.fx-spot, .v2-tq.fx-spot { position: relative; isolation: isolate; overflow: hidden; }
.v2-contrast__after.fx-spot::before { background: radial-gradient(460px circle at var(--mx) var(--my), rgba(245, 183, 0, .12), transparent 60%); }
.v2-tq.fx-spot::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .14), transparent 60%); }
.v2-tq.fx-spot::after { background: radial-gradient(260px circle at var(--mx) var(--my), #fff, rgba(255, 212, 92, .8) 35%, transparent 70%); }

/* ---------- Services: sliding indicator ---------- */
.v2-svc__list { position: relative; }
.v2-svc__tab { padding-left: 18px; }
.v2-svc__tab::after { display: none; }
.fx-tab-ind { position: absolute; left: 0; top: 0; width: 3px; height: 0; border-radius: 3px; background: linear-gradient(var(--v2-danfo), #FF5A3C); box-shadow: 0 0 18px rgba(245, 183, 0, .6); pointer-events: none; }
.v2-svc__tab[aria-selected="true"] { background: linear-gradient(90deg, rgba(245, 183, 0, .07), transparent 70%); }
.v2-svc__img { will-change: clip-path; }

/* ---------- Work rail progress ---------- */
.fx-rail-progress { max-width: var(--v2-wrap); margin: 8px auto 0; padding: 0 var(--v2-gutter); }
.fx-rail-progress > div { height: 3px; border-radius: 3px; background: var(--v2-line); overflow: hidden; }
.fx-rail-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--v2-crimson), var(--v2-danfo)); transform-origin: left; transform: scaleX(.18); }
.v2-case__art { transition: transform .9s var(--v2-ease-out); }
.v2-case:hover .v2-case__art { transform: scale(1.04); }

/* ---------- Process timeline beam ---------- */
.fx-timeline { position: relative; --fx-p: 0; border-top: 0 !important; }
.fx-timeline::before, .fx-timeline::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; transform-origin: left; }
.fx-timeline::before { background: #DCD2C5; }
.fx-timeline::after { background: linear-gradient(90deg, var(--v2-crimson), var(--v2-danfo)); transform: scaleX(var(--fx-p)); box-shadow: 0 0 16px rgba(245, 183, 0, .55); }
@media (max-width: 859px) {
	.fx-timeline { padding-left: 28px !important; }
	.fx-timeline::before, .fx-timeline::after { width: 2px; height: 100%; transform-origin: top; }
	.fx-timeline::after { transform: scaleY(var(--fx-p)); }
}
.fx-timeline .v2-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--v2-white); border: 1.5px solid #DCD2C5; transition: background var(--v2-dur-enter) var(--v2-ease-out), color var(--v2-dur-enter), border-color var(--v2-dur-enter), box-shadow var(--v2-dur-enter); }
.fx-timeline li.is-lit .v2-num { background: var(--v2-crimson); border-color: var(--v2-crimson); color: #fff; box-shadow: 0 0 0 6px rgba(179, 0, 0, .12); }
@media (max-width: 859px) { .fx-timeline .v2-num { margin-left: -48px; } }

/* ---------- Parallax frame ---------- */
[data-fx-parallax] { overflow: hidden; border-radius: var(--v2-r-lg); }
[data-fx-parallax] img { will-change: transform; }

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
	.fx-aurora span, .fx-badge::after, .fx-shimmer::before, .fx-beam::before, .fx-shimmer-text, .fx-marquee__track { animation: none !important; }
	.fx-marquee__track { flex-wrap: wrap; width: auto; gap: 24px 48px; }
	.fx-marquee__track li[aria-hidden="true"] { display: none; }
	.fx-marquee { -webkit-mask-image: none; mask-image: none; }
	[data-fx-pause] { display: none; }
	.fx-timeline::after { transform: none; }
	.fx-card:hover, .v2-case:hover .v2-case__art { transform: none; }
}