/* ========================================================================== Synflow — optional animation layer (TRIAL) -------------------------------------------------------------------------- Everything here is additive and self-contained. It is loaded only when the element carries the `data-anim` attribute (set in _Layout.cshtml). TO DISABLE INSTANTLY: set animationsEnabled = false in _Layout.cshtml. TO REMOVE COMPLETELY: delete this file, animations.js, and the three lines they are referenced by in _Layout.cshtml. Nothing in site.css depends on any of this — remove it and the site is exactly as it was. Every effect is wrapped so that a visitor with "reduce motion" set gets none of it. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* ---------------------------------------------------- scroll progress -- */ html[data-anim] .scroll-progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 300; block-size: 3px; inline-size: 100%; transform: scaleX(var(--scroll, 0)); transform-origin: var(--progress-origin, left); background: linear-gradient(90deg, var(--accent), var(--accent-2)); will-change: transform; } html[data-anim][dir="rtl"] .scroll-progress { --progress-origin: right; } /* ----------------------------------------------- richer scroll reveal -- */ /* Upgrade the base reveal (opacity + translateY) with a touch of scale and a clearing blur, and let each item pick a direction. site.js still owns the .is-visible toggle; this only restyles the transition. */ html[data-anim] .reveal { transform: translateY(32px) scale(.98); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } html[data-anim] .reveal.is-visible { transform: none; filter: none; } html[data-anim] .reveal[data-anim-from="left"] { transform: translateX(-42px); } html[data-anim] .reveal[data-anim-from="right"] { transform: translateX(42px); } html[data-anim] .reveal[data-anim-from="left"].is-visible, html[data-anim] .reveal[data-anim-from="right"].is-visible { transform: none; } /* --------------------------------------------- animated hero accent --- */ /* The gradient in the headline slowly sweeps rather than sitting still. */ html[data-anim] .hero__title-accent { background-size: 220% 100%; animation: sf-accent-pan 7s ease-in-out infinite alternate; } @keyframes sf-accent-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* Two soft brand orbs drifting behind the hero copy. Purely decorative, layered under everything (the ::after grid already exists in site.css). */ html[data-anim] .hero__bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(38% 42% at 18% 30%, rgba(28, 174, 104, .16), transparent 70%), radial-gradient(34% 38% at 82% 12%, rgba(53, 209, 131, .14), transparent 70%); animation: sf-orb-drift 16s ease-in-out infinite alternate; will-change: transform; } @keyframes sf-orb-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2%, -2.5%, 0) scale(1.08); } } /* ----------------------------------------- pointer glow + soft tilt --- */ /* Applied ONLY while a card is actively hovered (JS adds .is-tilting), so it never fights the card's reveal-entrance transform or the plain hover lift in site.css. JS sets --mx/--my (pointer %, for the glow) and --tilt-* (degrees). When the class is removed on leave, the card eases back using site.css's own transform transition. */ html[data-anim] .service-card.is-tilting, html[data-anim] .why-card.is-tilting, html[data-anim] .post-card.is-tilting { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, -6px)); transform-style: preserve-3d; transition: transform .1s linear, box-shadow .4s var(--ease), border-color .4s var(--ease); } html[data-anim] .service-card::after, html[data-anim] .why-card::after, html[data-anim] .post-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; opacity: 0; background: radial-gradient( 260px circle at var(--mx, 50%) var(--my, 0%), rgba(28, 174, 104, .14), transparent 60%); transition: opacity .35s var(--ease); pointer-events: none; } html[data-anim] .service-card.is-tilting::after, html[data-anim] .why-card.is-tilting::after, html[data-anim] .post-card.is-tilting::after { opacity: 1; } /* Keep real content above the pointer-glow layer. The service card's own decorative __glow span is absolutely positioned, so it is excluded — making it relative would knock it out of place. */ html[data-anim] .service-card > *:not(.service-card__glow), html[data-anim] .why-card > *, html[data-anim] .post-card > * { position: relative; z-index: 2; } /* --------------------------------------------- primary button shine --- */ html[data-anim] .btn--primary { position: relative; overflow: hidden; } html[data-anim] .btn--primary::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -80%; inline-size: 60%; background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); transition: inset-inline-start .6s var(--ease); pointer-events: none; } html[data-anim] .btn--primary:hover::after { inset-inline-start: 140%; } /* --------------------------------------------- hero image parallax ---- */ /* JS sets --parallax from scroll position. Applied to the FRAME, not the — the image already runs the `hero-drift` keyframe in site.css, and a running animation would override a transform set here. Shifting the frame keeps both effects and does not detach the floating badge (which is positioned against .hero__media, a level up). */ html[data-anim] .hero__frame { transform: translate3d(0, var(--parallax, 0), 0); will-change: transform; } /* ------------------------------------------------- nav link sheen ----- */ html[data-anim] .stats__value.is-counting { background-size: 200% 100%; animation: sf-accent-pan 1.6s ease-in-out; } }