/* Animech – Symbol Parallax v1.4.0
   Same artwork as the start page "Who we are": gold gradient fill layer + faint white outline layer, offset for depth.
   Theme tokens (override per theme / section):
     --am-sym-tone    fill colour   (default #d2c58a)
     --am-sym-stroke  outline colour (default #fff)
   Light theme example:  [data-theme="light"] .am-sym { --am-sym-tone:#8a7a3a; --am-sym-stroke:#1e1e1e; }
*/
.am-sym-host { position: relative; overflow: clip; }

/* Keep real content above the symbol */
.am-sym-host > .col.span_12,
.am-sym-host > .span_12,
.am-sym-host > .vc_column_container,
.am-sym-host > .wpb_column,
.am-sym-host > .amh-wrap,
.am-sym-host > .am-buy__in,
.am-sym-host > .am-pe__in {
	position: relative;
	z-index: 3;
}

.am-sym {
	position: absolute;
	left: var(--am-sym-x, 60%);
	top: var(--am-sym-y, -6%);
	width: var(--am-sym-size, 41vw);
	aspect-ratio: 81 / 79;
	z-index: 2;
	pointer-events: none;
	opacity: var(--am-sym-opacity, 1);
	/* JS writes --am-sym-py (px). Only transform is animated. */
	transform: translate3d(0, var(--am-sym-py, 0px), 0) rotate(var(--am-sym-rot, 0deg)) scaleX(var(--am-sym-flip, 1));
	will-change: transform;
	user-select: none;
}
.am-sym__l { position: absolute; inset: 0; }
.am-sym__svg { display: block; width: 100%; height: 100%; overflow: visible; }

.am-sym__fill .am-sym-path { fill: url(#am-sym-grad); }

/* Outline layer: shifted sideways and moves 1.6x as fast as the fill = depth */
.am-sym__line {
	transform: translate3d(var(--am-sym-split, -15%), calc(var(--am-sym-py, 0px) * .6), 0);
	will-change: transform;
}
.am-sym__line .am-sym-path {
	fill: none;
	stroke: var(--am-sym-stroke, #fff);
	stroke-opacity: .065;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* 3D mode: canvas sits on top of the SVG fallback, which fades out once WebGL is running */
.am-sym[data-mode="3d"] canvas { pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.am-sym--3d-on canvas { opacity: 1 !important; }
.am-sym--3d-on .am-sym__l { opacity: 0; transition: opacity .9s ease; }

/* Mobile: static, smaller, no parallax */
@media (max-width: 767px) {
	.am-sym { width: calc(var(--am-sym-size, 41vw) * 1.4); transform: rotate(var(--am-sym-rot, 0deg)) scaleX(var(--am-sym-flip, 1)); will-change: auto; }
	.am-sym__line { transform: translate3d(var(--am-sym-split, -15%), 0, 0); will-change: auto; }
	.am-sym--no-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.am-sym { transform: rotate(var(--am-sym-rot, 0deg)) scaleX(var(--am-sym-flip, 1)); will-change: auto; }
	.am-sym__line { transform: translate3d(var(--am-sym-split, -15%), 0, 0); will-change: auto; }
}