/* Immersive layer (concept). Everything here is additive: remove fx.css and fx.js and the site is unchanged. */
.fx .hero .h-xl { opacity: 0; animation: fxSafe 0.01s 3s forwards; }
.fx-on .hero .h-xl { opacity: 1; animation: none; }
@keyframes fxSafe { to { opacity: 1; } }

/* hero: glow and layered depth */
.fx-on .hero__in { position: relative; z-index: 1; }
.fx-glow { position: absolute; z-index: 0; pointer-events: none; width: min(70vw, 900px); aspect-ratio: 1; right: -12%; top: 50%; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(99, 195, 34, 0.20), rgba(99, 195, 34, 0.06) 45%, transparent 70%); animation: fxBreathe 7s ease-in-out infinite; }
.fx-glow--b { width: min(50vw, 520px); right: auto; left: -14%; top: 100%; background: radial-gradient(closest-side, rgba(99, 195, 34, 0.10), transparent 70%); animation-duration: 11s; }
@keyframes fxBreathe { 0%, 100% { opacity: 0.75; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
.fx-on .hero__art--photo picture { display: block; will-change: transform; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 50px rgba(99, 195, 34, 0.10)); }
.fx-on .hero__copy { will-change: transform, opacity; }

/* headline: lines rise out of a mask */
.fxl { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.fxl__in { display: block; transform: translateY(112%); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 0.13s + 0.2s); }
.fx-go .fxl__in { transform: none; }
.fxl__dot { color: var(--accent); text-shadow: 0 0 24px rgba(99, 195, 34, 0.8); }

/* weld seam: scroll progress laid like a bead under the header */
.fx-seam { position: fixed; left: 0; right: 0; top: var(--header-h); height: 3px; z-index: 49; pointer-events: none; }
.fx-seam__bead { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(99, 195, 34, 0.25), var(--accent)); }
.fx-seam__tip { position: absolute; top: 50%; left: 0; width: 90px; height: 14px; margin: -7px 0 0 -90px; background: radial-gradient(closest-side at 92% 50%, #fff, rgba(190, 255, 150, 0.9) 18%, rgba(99, 195, 34, 0.5) 40%, transparent 75%); opacity: 0; }

/* section headings and grids: staged reveals */
.fx-on .rv:not(.hero__copy) h2 { clip-path: inset(0 0 100% 0); transform: translateY(22px); transition: clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s; }
.fx-on .rv.is-in h2 { clip-path: inset(0 0 -20% 0); transform: none; }
.fx-on .rv .fx-item { opacity: 0; transform: translateY(18px) scale(0.985); }
.fx-on .rv.is-in .fx-item { opacity: 1; transform: none; transition: opacity 0.6s ease calc(var(--i) * 70ms + 120ms), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 70ms + 120ms), background-color 0.2s, border-color 0.2s; }

/* luminous hover: light follows the pointer across cards */
@media (hover: hover) and (pointer: fine) {
  .fx-on .svc__item:hover, .fx-on .card--link:hover, .fx-on .chip:hover { background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 195, 34, 0.16), transparent 70%); }
  .fx-on .card--link:hover { border-color: rgba(99, 195, 34, 0.55); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 195, 34, 0.15); transform: translateY(-3px); }
  .fx-on .btn--accent { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s, box-shadow 0.25s; }
  .fx-on .btn--accent:hover { box-shadow: 0 0 0 1px rgba(99, 195, 34, 0.4), 0 10px 40px rgba(99, 195, 34, 0.35); }
}
.fx-on .btn:active { transform: scale(0.97); }


/* stats: numbers glow as they land */
.fx-on .stats b { transition: text-shadow 0.8s; }
.fx-on .stats b.fx-counting { text-shadow: 0 0 28px rgba(99, 195, 34, 0.7); color: var(--accent); }