/* ==========================================================================
   NAZELVO — Motion layer (v1.0)
   Loaded after main.css. Pairs with assets/js/motion.js.

   Rules of this file:
   - Animation / depth / light only. No layout, colour-scheme or content changes.
   - Anything that depends on the script is scoped under `.nz-motion`, a class
     the script adds only when it is running and motion is allowed. If the
     script (or the Motion library) is missing, this file has no effect.
   - Pointer effects use the individual CSS properties `translate`, `rotate`
     and `scale`, so they compose with the theme's existing `transform`
     hover/float animations instead of overriding them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll reveal — the script now drives entrances (springs), so the old
      CSS transition is switched off while it runs.
   -------------------------------------------------------------------------- */
.nz-motion .nz-reveal {
	opacity: 0;
	transform: none;
	filter: none;
	transition: none;
	will-change: auto;
}
.nz-motion .nz-reveal.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}
/* split-text words (hero + section headings) */
.nz-w { display: inline-block; }

/* --------------------------------------------------------------------------
   2. Ambient layers
   -------------------------------------------------------------------------- */
.nz-fx-canvas {
	position: fixed; inset: 0; width: 100%; height: 100%;
	z-index: 105;                       /* above page content, below header (500) */
	pointer-events: none;
	mix-blend-mode: multiply;           /* tints light surfaces only; never veils text */
	opacity: 0;
	transition: opacity 2.2s ease;
}
.nz-fx-canvas.is-on { opacity: 1; }

.nz-cursor-glow {
	position: fixed; left: 0; top: 0; width: 0; height: 0;
	z-index: 110; pointer-events: none;
	will-change: transform;
}
.nz-cursor-glow-core {
	position: absolute; left: -260px; top: -260px; width: 520px; height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(91, 76, 255, .17) 0%,
		rgba(91, 76, 255, .075) 32%,
		rgba(22, 199, 154, .03) 52%,
		transparent 70%);
	opacity: 0;
	transform: scale(.9);
	transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.nz-cursor-glow.is-on .nz-cursor-glow-core { opacity: .8; transform: scale(1); }
.nz-cursor-glow.is-on.is-hot .nz-cursor-glow-core { opacity: 1; transform: scale(1.28); }

/* Performance: the theme's existing background orbs / conic wash / centre glow
   are radial or conic gradients that already fade to transparent, so their
   large `filter: blur()` adds almost nothing visually but forces a costly
   blurred raster of 600px+ layers. Dropping it keeps the look and the motion. */
.nz-motion .nz-motion-bg::before,
.nz-motion .nz-motion-orb,
.nz-motion .nz-motion-glow { filter: none !important; }

/* The existing background layers get a depth transform from JS (`translate`),
   so tell the browser they will move. */
.nz-motion .nz-motion-orb,
.nz-motion .nz-motion-grid,
.nz-motion .nz-motion-glow { will-change: transform, translate; }

/* --------------------------------------------------------------------------
   3. Hero depth scene
   -------------------------------------------------------------------------- */
.nz-motion .nz-hero { position: relative; isolation: isolate; }
.nz-motion .nz-hero .nz-hero-grid { position: relative; z-index: 1; }

.nz-hero-fx {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none; overflow: hidden;
}
.nz-fx-orb {
	position: absolute; border-radius: 50%;
	will-change: transform, translate;
}
.nz-fx-orb-1 {
	width: 460px; height: 460px; left: -9%; top: -28%;
	background: radial-gradient(circle, rgba(91, 76, 255, .30), rgba(91, 76, 255, 0) 68%);
}
.nz-fx-orb-2 {
	width: 520px; height: 520px; right: -8%; bottom: -34%;
	background: radial-gradient(circle, rgba(22, 199, 154, .26), rgba(22, 199, 154, 0) 68%);
}
.nz-fx-light {
	position: absolute; width: 380px; height: 380px; right: 20%; top: -6%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(160, 148, 255, .22) 42%, transparent 70%);
	will-change: translate;
}
.nz-fx-lines {
	position: absolute; inset: 0; width: 100%; height: 100%;
	fill: none; stroke: rgba(91, 76, 255, .13); stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.nz-fx-lines path, .nz-fx-lines circle {
	stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke;
}
.nz-fx-lines circle { stroke: rgba(22, 199, 154, .16); }

.nz-fx-shape { position: absolute; display: block; will-change: translate; }

/* wireframe cube — six thin glass faces, slowly turning */
.nz-fx-cube-w { left: 47%; top: 11%; width: 58px; height: 58px; perspective: 520px; }
.nz-cube {
	position: relative; display: block; width: 100%; height: 100%;
	transform-style: preserve-3d;
	animation: nzCubeSpin 42s linear infinite;
}
.nz-cube i {
	position: absolute; inset: 0; display: block;
	border: 1px solid rgba(91, 76, 255, .42);
	background: linear-gradient(135deg, rgba(91, 76, 255, .08), rgba(22, 199, 154, .06));
	box-shadow: inset 0 0 16px rgba(91, 76, 255, .12);
}
.nz-cube i:nth-child(1) { transform: translateZ(29px); }
.nz-cube i:nth-child(2) { transform: rotateY(90deg)  translateZ(29px); }
.nz-cube i:nth-child(3) { transform: rotateY(180deg) translateZ(29px); }
.nz-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(29px); }
.nz-cube i:nth-child(5) { transform: rotateX(90deg)  translateZ(29px); }
.nz-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(29px); }
@keyframes nzCubeSpin {
	from { transform: rotateX(-24deg) rotateY(0deg); }
	to   { transform: rotateX(-24deg) rotateY(360deg); }
}

/* gyroscope rings */
.nz-fx-ring-w { right: 3.5%; top: 7%; width: 92px; height: 92px; perspective: 600px; }
.nz-ring {
	position: relative; display: block; width: 100%; height: 100%;
	transform-style: preserve-3d;
	animation: nzRingSpin 52s linear infinite reverse;
}
.nz-ring b {
	position: absolute; inset: 0; display: block; border-radius: 50%;
	border: 1px solid rgba(22, 199, 154, .5);
	box-shadow: 0 0 14px rgba(22, 199, 154, .14);
}
.nz-ring b:nth-child(2) { transform: rotateX(68deg); border-color: rgba(91, 76, 255, .45); }
.nz-ring b:nth-child(3) { transform: rotateY(68deg); }
@keyframes nzRingSpin {
	from { transform: rotateZ(0deg) rotateY(0deg); }
	to   { transform: rotateZ(360deg) rotateY(360deg); }
}

/* small glowing diamonds */
.nz-fx-dia { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg);
	background: rgba(91, 76, 255, .55); box-shadow: 0 0 14px rgba(91, 76, 255, .5);
	animation: nzDiaFloat 7s ease-in-out infinite; }
.nz-fx-dia-1 { left: 41%; top: 74%; }
.nz-fx-dia-2 { right: 12%; top: 52%; width: 7px; height: 7px; background: rgba(22, 199, 154, .6);
	box-shadow: 0 0 12px rgba(22, 199, 154, .55); animation-delay: -2.4s; animation-duration: 8.5s; }
.nz-fx-dia-3 { left: 8%; top: 18%; width: 6px; height: 6px; animation-delay: -4.2s; animation-duration: 9.5s; }
@keyframes nzDiaFloat {
	0%, 100% { transform: rotate(45deg) translate3d(0, 0, 0); }
	50%      { transform: rotate(45deg) translate3d(5px, -5px, 0); }
}

/* bars wait for the hero timeline before they grow */
.nz-hero-pre .nz-visual-bars span { animation-play-state: paused; }

/* The old hover rule rotated the card by a fixed amount; the script now tilts
   it from the cursor, so keep only the lift. */
.nz-motion .nz-visual-card-main { transition: box-shadow .45s ease; }
.nz-motion .nz-hero-visual:hover .nz-visual-card-main {
	transform: translate3d(0, -6px, 0);
	box-shadow: 0 30px 75px -28px rgba(11, 13, 18, .30), 0 0 60px -20px rgba(91, 76, 255, .35);
}
.nz-motion .nz-visual-float { box-shadow: var(--nz-shadow), 0 0 36px -14px rgba(91, 76, 255, .4); }

/* soft hero for inner pages */
.nz-motion .nz-has-fx { position: relative; overflow: hidden; isolation: isolate; }
.nz-motion .nz-has-fx > .nz-container { position: relative; z-index: 1; }
.nz-hero-fx-soft .nz-fx-orb { opacity: .8; }
.nz-hero-fx-soft .nz-fx-orb-1 { width: 380px; height: 380px; left: 4%; top: -60%; }
.nz-hero-fx-soft .nz-fx-orb-2 { width: 420px; height: 420px; right: 2%; bottom: -80%; }

/* --------------------------------------------------------------------------
   4. Cards — 3D tilt, spotlight border, cursor-tracked inner light
   -------------------------------------------------------------------------- */
.nz-motion .nz-tilt {
	position: relative;
	transform-style: preserve-3d;
	transition: box-shadow .4s ease, border-color .3s ease;
}
/* the old per-card hover transforms are replaced by the spring-driven ones */
.nz-motion .nz-tilt:hover { transform: none; }
.nz-motion .nz-tilt::before,
.nz-motion .nz-tilt::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.nz-motion .nz-tilt::before {
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 76, 255, .10), transparent 62%);
}
.nz-motion .nz-tilt::after {
	padding: 1.5px;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 76, 255, .85), rgba(22, 199, 154, .5) 45%, transparent 72%);
	-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);
}
.nz-motion .nz-tilt.is-lit::before,
.nz-motion .nz-tilt.is-lit::after { opacity: 1; }
.nz-motion .nz-tilt.is-lit { box-shadow: 0 30px 70px -30px rgba(11, 13, 18, .30), 0 0 50px -24px rgba(91, 76, 255, .5); }

/* the horizontal review scroller clips lifted cards — give them headroom */
.nz-motion .nz-reviews-scroll { padding-top: 14px; margin-top: -14px; }

/* blog images: clipped frame, slow zoom on hover, parallax drift from JS */
.nz-motion .nz-img-frame img { scale: 1.12; transition: scale .9s cubic-bezier(.22, 1, .36, 1); }
.nz-motion .nz-blog-card:hover .nz-img-frame img { scale: 1.2; }

/* --------------------------------------------------------------------------
   5. Buttons — glow, press ripple, pulse, arrows
   -------------------------------------------------------------------------- */
.nz-motion .nz-btn { will-change: auto; }
.nz-motion .nz-btn:active { transform: translateY(-1px); }      /* spring handles the press scale */
.nz-btn-primary:hover { box-shadow: 0 14px 34px -14px rgba(91, 76, 255, .65), 0 0 0 1px rgba(91, 76, 255, .15); }
.nz-btn-outline:hover, .nz-btn-ghost:hover { box-shadow: 0 12px 30px -16px rgba(91, 76, 255, .45); }
.nz-final-cta .nz-btn-primary:hover { box-shadow: 0 14px 40px -12px rgba(160, 148, 255, .8); }

.nz-ripple {
	position: absolute; border-radius: 50%; pointer-events: none;
	background: currentColor; opacity: 0; transform: scale(0);
}
.nz-btn.nz-pulse { animation: nzPulse .65s cubic-bezier(.22, 1, .36, 1); }
@keyframes nzPulse {
	from { box-shadow: 0 0 0 0 rgba(91, 76, 255, .5); }
	to   { box-shadow: 0 0 0 18px rgba(91, 76, 255, 0); }
}

.nz-arrow { display: inline-block; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
/* the wrapped arrow replaces a text-space; keep the original spacing in flex buttons */
.nz-btn > .nz-arrow-r { margin-left: -4px; }
.nz-back-link > .nz-arrow-l { margin-right: -2px; }
a:hover > .nz-arrow-r, a:focus-visible > .nz-arrow-r { transform: translateX(5px); }
a:hover > .nz-arrow-l, a:focus-visible > .nz-arrow-l { transform: translateX(-5px); }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nz-nav-has-ind { position: relative; }
.nz-nav-ind {
	position: absolute; left: 0; bottom: -7px; width: 100px; height: 2px;
	border-radius: 2px; pointer-events: none; transform-origin: 0 50%;
	background: linear-gradient(90deg, #fff, #16C79A);
	box-shadow: 0 0 12px rgba(22, 199, 154, .75);
	opacity: 0; transition: opacity .3s ease;
}
.nz-nav-ind.is-on { opacity: 1; }
/* the old per-link nudge is replaced by the indicator */
.nz-motion #nz-nav a:hover { transform: none; }

.nz-hamburger span { transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; transform-origin: center; }
.nz-social a { transition: background .25s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
.nz-social a:hover { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 8px 20px -8px rgba(91, 76, 255, .7); }

@media (max-width: 720px) {
	.nz-nav-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.nz-nav-close { transition: background .2s ease, border-color .2s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
	.nz-nav-close:hover { transform: rotate(90deg); }
	.nz-nav.is-open { transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility .5s; }
}

/* --------------------------------------------------------------------------
   7. Micro-interactions
   -------------------------------------------------------------------------- */
.nz-service-icon, .nz-why-card .dashicons, .nz-value-card .dashicons, .nz-contact-card .dashicons {
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, box-shadow .4s ease;
}
.nz-service-card:hover .nz-service-icon { transform: rotate(-7deg) scale(1.08); box-shadow: 0 10px 26px -10px rgba(91, 76, 255, .55); }
.nz-why-card:hover .dashicons, .nz-value-card:hover .dashicons, .nz-contact-card:hover .dashicons { transform: rotate(8deg) scale(1.15); }
.nz-process-step .nz-process-num { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.nz-process-step:hover .nz-process-num { transform: translateX(6px); }
.nz-gs-perk, .nz-blog-filter, .nz-post-cat-badge { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, border-color .25s ease, color .25s ease; }
.nz-gs-perk:hover, .nz-blog-filter:hover, .nz-post-cat-badge:hover { transform: translateY(-2px); }
.nz-faq-question { transition: color .25s ease; }
.nz-faq-question:hover { color: var(--nz-accent); }
.nz-faq-icon { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }

/* form focus glow */
.nz-field input, .nz-field select, .nz-field textarea {
	transition: border-color .25s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.nz-field input:focus, .nz-field select:focus, .nz-field textarea:focus {
	box-shadow: 0 0 0 4px var(--nz-accent-soft), 0 14px 32px -16px rgba(91, 76, 255, .55);
	transform: translateY(-1px);
}
.nz-field label { transition: color .25s ease; }
.nz-field:focus-within label { color: var(--nz-accent); }

/* --------------------------------------------------------------------------
   8. Closing CTA — ambient orbs + cursor-lit surface
   -------------------------------------------------------------------------- */
.nz-motion .nz-final-cta { position: relative; overflow: hidden; isolation: isolate; }
.nz-motion .nz-final-cta > .nz-container { position: relative; z-index: 1; }
.nz-cta-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.nz-cta-orb { position: absolute; border-radius: 50%; will-change: translate; }
.nz-cta-orb-1 { width: 420px; height: 420px; left: -6%; top: -40%; background: radial-gradient(circle, rgba(91, 76, 255, .55), transparent 68%); }
.nz-cta-orb-2 { width: 460px; height: 460px; right: -8%; bottom: -50%; background: radial-gradient(circle, rgba(22, 199, 154, .40), transparent 68%); }
.nz-motion .nz-final-cta::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
	background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(150, 138, 255, .26), transparent 62%);
	transition: opacity .5s ease;
}
.nz-motion .nz-final-cta.is-lit::before { opacity: 1; }

/* --------------------------------------------------------------------------
   9. Safety, touch and reduced-motion
   -------------------------------------------------------------------------- */
/* Touch screens: no hover-driven 3D, lighter ambient scene. */
@media (hover: none), (pointer: coarse) {
	.nz-cursor-glow { display: none; }
	.nz-nav-ind { display: none; }
	.nz-fx-ring-w, .nz-fx-dia-2, .nz-fx-dia-3 { display: none; }
}
@media (max-width: 720px) {
	.nz-fx-cube-w { left: auto; right: 8%; top: 6%; width: 40px; height: 40px; }
	.nz-cube i { transform-origin: center; }
	.nz-fx-orb-1 { width: 300px; height: 300px; }
	.nz-fx-orb-2 { width: 320px; height: 320px; }
	.nz-fx-light { display: none; }
	.nz-motion .nz-reviews-scroll { padding-top: 0; margin-top: 0; }
}
/* never let a decorative layer cause sideways scroll */
.nz-hero-fx, .nz-cta-fx { max-width: 100%; }

/* JS toggles this class if the visitor switches reduced-motion on mid-session */
.nz-motion-off .nz-fx-canvas,
.nz-motion-off .nz-cursor-glow,
.nz-motion-off .nz-hero-fx,
.nz-motion-off .nz-cta-fx { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.nz-fx-canvas, .nz-cursor-glow, .nz-hero-fx, .nz-cta-fx, .nz-nav-ind { display: none !important; }
	.nz-cube, .nz-ring, .nz-fx-dia, .nz-btn.nz-pulse { animation: none !important; }
	.nz-arrow, .nz-service-icon, .nz-social a { transition: none !important; }
	.nz-service-card:hover .nz-service-icon, .nz-social a:hover { transform: none; }
}