/**
 * Toopix Creative 2.2 — движење и 3D.
 *
 * 1. Заглавие на страниците: стилови, анимации на насловот, глувче и скрол
 * 2. 3D објекти (коцка, глобус, сфера, пирамида)
 * 3. Транзиции помеѓу страниците: колони, дијагонално, затворач
 * 4. Појавување: 3D превртување и завеса; наслови во 3D и со изострување
 * 5. Одблесок при 3D навалување
 * 6. 3D карусел на слики и 3D сцена (WPBakery елементи)
 * 7. Намалено движење, уредувачи
 */

/* ==========================================================================
   1. Заглавие на страниците
   ========================================================================== */
.tx-ph {
	--ph-mx: 0;
	--ph-my: 0;
	--ph-p: 0;
}

.tx-ph .tx-page-header__inner {
	position: relative;
	z-index: 2;
}

.tx-ph[data-ph-scroll] .tx-page-header__inner {
	transform: translate3d(0, calc(var(--ph-p) * 90px), 0);
	opacity: calc(1 - var(--ph-p) * 1.2);
}

.tx-ph[data-ph-scroll] .tx-page-header__bg {
	transform: scale(calc(1 + var(--ph-p) * 0.08));
	transform-origin: 50% 0;
}

/* Голем контурен наслов во позадина */
.tx-ph-word {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.2em;
	overflow: hidden;
	font-family: var(--tx-font-display);
	font-size: clamp(5.5rem, 17vw, 20rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
	pointer-events: none;
	user-select: none;
}

.tx-ph-word > span {
	display: inline-block;
	padding-left: 3vw;
	translate: calc(var(--ph-p) * -18%) 0;
	animation: tx-ph-word 42s linear infinite alternate;
}

@keyframes tx-ph-word {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-22%, 0, 0); }
}

/* Знак за скролање */
.tx-ph-cue {
	position: absolute;
	z-index: 2;
	left: max(var(--tx-gutter), calc((100% - var(--tx-container)) / 2));
	bottom: 0;
	width: 1px;
	height: clamp(2.4rem, 5vw, 4rem);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
}

.tx-ph-cue i {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 40%;
	background: var(--tx-accent);
	animation: tx-ph-cue 2.2s var(--tx-ease-io) infinite;
}

@keyframes tx-ph-cue {
	from { transform: translateY(-100%); }
	to { transform: translateY(260%); }
}

/* --- Влез: позадина, патека, наслов, поднаслов --- */
.js .tx-ph .tx-page-header__bg > *:not(.tx-page-header__img) {
	transition: opacity calc(1.6s * var(--tx-speed)) var(--tx-ease), scale calc(1.8s * var(--tx-speed)) var(--tx-ease), filter calc(1.6s * var(--tx-speed)) var(--tx-ease);
}

.js:not(.tx-fallback) .tx-ph:not(.is-ph-in) .tx-page-header__bg > *:not(.tx-page-header__img) {
	opacity: 0;
	scale: 1.12;
	filter: blur(10px);
}

.js .tx-ph .tx-breadcrumbs > *,
.js .tx-ph .tx-ph-eyebrow,
.js .tx-ph .tx-ph-sub,
.js .tx-ph .tx-ph-meta,
.js .tx-ph .tx-ph-cue {
	transition: opacity calc(0.9s * var(--tx-speed)) var(--tx-ease), transform calc(1.1s * var(--tx-speed)) var(--tx-ease), filter calc(1s * var(--tx-speed)) var(--tx-ease);
}

.js:not(.tx-fallback) .tx-ph:not(.is-ph-in) .tx-breadcrumbs > * {
	opacity: 0;
	transform: translate3d(-16px, 0, 0);
}

.js .tx-ph .tx-breadcrumbs > *:nth-child(2) { transition-delay: 0.05s; }
.js .tx-ph .tx-breadcrumbs > *:nth-child(3) { transition-delay: 0.1s; }
.js .tx-ph .tx-breadcrumbs > *:nth-child(4) { transition-delay: 0.15s; }
.js .tx-ph .tx-breadcrumbs > *:nth-child(5) { transition-delay: 0.2s; }
.js .tx-ph .tx-breadcrumbs > *:nth-child(n + 6) { transition-delay: 0.25s; }

.js:not(.tx-fallback) .tx-ph:not(.is-ph-in) .tx-ph-eyebrow {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
}

.js .tx-ph .tx-ph-eyebrow {
	transition-delay: 0.1s;
}

.js:not(.tx-fallback) .tx-ph:not(.is-ph-in) .tx-ph-sub {
	opacity: 0;
	filter: blur(8px);
	transform: translate3d(0, 24px, 0);
}

.js .tx-ph .tx-ph-sub {
	transition-delay: calc(0.55s * var(--tx-speed));
}

.js:not(.tx-fallback) .tx-ph:not(.is-ph-in) .tx-ph-meta,
.js:not(.tx-fallback) .tx-ph:not(.is-ph-in) .tx-ph-cue {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
}

.js .tx-ph .tx-ph-meta {
	transition-delay: calc(0.75s * var(--tx-speed));
}

.js .tx-ph .tx-ph-cue {
	transition-delay: calc(1s * var(--tx-speed));
}

/* Насловот поделен на зборови и букви (main.js) */
.tx-ph-w {
	display: inline-block;
	white-space: nowrap;
	vertical-align: top;
}

.tx-ph-wi,
.tx-ph-c {
	display: inline-block;
}

/* Буква по буква во 3D */
.tx-ph-t--chars .tx-ph-w {
	perspective: 700px;
}

.js .tx-ph-t--chars .tx-ph-c {
	transform-origin: 50% 100% -0.25em;
	transition: transform calc(1.1s * var(--tx-speed)) var(--tx-ease), opacity calc(0.7s * var(--tx-speed)) var(--tx-ease);
	transition-delay: calc(0.15s + var(--ci, 0) * 26ms * var(--tx-speed));
}

.js:not(.tx-fallback) .tx-ph-t--chars:not(.is-ph-in) .tx-ph-c {
	opacity: 0;
	transform: translate3d(0, 0.32em, 0) rotateX(-92deg);
}

/* Збор по збор одоздола */
.tx-ph-t--rise .tx-ph-w {
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.js .tx-ph-t--rise .tx-ph-wi {
	transform-origin: left bottom;
	transition: transform calc(1.15s * var(--tx-speed)) var(--tx-ease);
	transition-delay: calc(0.12s + var(--wi, 0) * 70ms * var(--tx-speed));
}

.js:not(.tx-fallback) .tx-ph-t--rise:not(.is-ph-in) .tx-ph-wi {
	transform: translate3d(0, 112%, 0) rotate(6deg);
}

/* Изострување */
.js .tx-ph-t--blur .tx-ph-c {
	transition: opacity calc(0.9s * var(--tx-speed)) var(--tx-ease), filter calc(1s * var(--tx-speed)) var(--tx-ease), transform calc(1.1s * var(--tx-speed)) var(--tx-ease);
	transition-delay: calc(0.1s + var(--ci, 0) * 22ms * var(--tx-speed));
}

.js:not(.tx-fallback) .tx-ph-t--blur:not(.is-ph-in) .tx-ph-c {
	opacity: 0;
	filter: blur(16px);
	transform: translate3d(0.35em, 0, 0) scale(1.3);
}

/* Дешифрирање (буквите ги менува main.js) */
.tx-ph-c.is-scrambling {
	color: var(--tx-accent);
	opacity: 0.85;
}

.js:not(.tx-fallback) .tx-ph-t--scramble:not(.is-ph-in) .tx-page-title {
	opacity: 0;
}

/* Откривање со завеса */
.tx-ph-t--mask .tx-page-title {
	position: relative;
}

.js .tx-ph-t--mask .tx-page-title {
	clip-path: inset(-0.2em 0 -0.2em 0);
	transition: clip-path calc(1.2s * var(--tx-speed)) var(--tx-ease-io) calc(0.45s * var(--tx-speed));
}

.js:not(.tx-fallback) .tx-ph-t--mask:not(.is-ph-in) .tx-page-title {
	clip-path: inset(-0.2em 100% -0.2em 0);
}

.js .tx-ph-t--mask .tx-page-title::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: var(--tx-accent);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

.js .tx-ph-t--mask.is-ph-in .tx-page-title::after {
	animation: tx-ph-mask calc(1.4s * var(--tx-speed)) var(--tx-ease-io) 0.1s both;
}

@keyframes tx-ph-mask {
	0% { transform: scaleX(0); transform-origin: left; }
	45% { transform: scaleX(1); transform-origin: left; }
	55% { transform: scaleX(1); transform-origin: right; }
	100% { transform: scaleX(0); transform-origin: right; }
}

/* --- Стил: 3D орбити --- */
.tx-ph-orbit {
	position: absolute;
	right: -6vw;
	top: 50%;
	width: clamp(340px, 46vw, 720px);
	aspect-ratio: 1;
	translate: calc(var(--ph-mx) * 34px) calc(-50% + var(--ph-my) * 24px);
	perspective: 1100px;
}

.tx-ph-orbit__tilt {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(calc(64deg + var(--ph-my) * 16deg)) rotateY(calc(var(--ph-mx) * 20deg));
}

.tx-ph-orbit__ring {
	position: absolute;
	inset: var(--in, 0%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	transform-style: preserve-3d;
	animation: tx-ph-spin 28s linear infinite;
}

.tx-ph-orbit__ring--1 {
	border-width: 2px;
	border-color: color-mix(in srgb, var(--tx-accent) 45%, transparent);
	box-shadow: 0 0 60px color-mix(in srgb, var(--tx-accent) 18%, transparent), inset 0 0 60px color-mix(in srgb, var(--tx-accent) 12%, transparent);
}

.tx-ph-orbit__ring--2 {
	--in: 15%;
	animation-duration: 19s;
	animation-direction: reverse;
}

.tx-ph-orbit__ring--3 {
	--in: 29%;
	border-style: dashed;
	animation-duration: 13s;
}

.tx-ph-orbit__ring i {
	position: absolute;
	top: -8px;
	left: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 4px;
	background: var(--tx-accent);
	box-shadow: 0 0 24px var(--tx-accent), 0 0 4px #fff;
	transform: rotateX(-64deg);
}

.tx-ph-orbit__ring--2 i {
	top: auto;
	bottom: -6px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: #fff;
}

.tx-ph-orbit__ring--3 i {
	width: 8px;
	height: 8px;
	margin-left: -4px;
	top: -4px;
	border-radius: 50%;
}

.tx-ph-orbit__core {
	position: absolute;
	z-index: -1;
	inset: 39%;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, #fff 0, color-mix(in srgb, var(--tx-accent) 60%, #fff) 10%, var(--tx-accent) 38%, color-mix(in srgb, var(--tx-accent) 30%, #000) 78%);
	box-shadow: 0 0 90px color-mix(in srgb, var(--tx-accent) 55%, transparent);
	animation: tx-ph-pulse 6s ease-in-out infinite;
}

@keyframes tx-ph-spin {
	to { transform: rotateZ(360deg); }
}

@keyframes tx-ph-pulse {
	50% { box-shadow: 0 0 140px color-mix(in srgb, var(--tx-accent) 75%, transparent); }
}

/* --- Стил: аурора --- */
.tx-ph-aurora {
	position: absolute;
	inset: -25% -10%;
	opacity: 0.85;
	translate: calc(var(--ph-mx) * 50px) calc(var(--ph-my) * 36px);
}

.tx-ph-aurora i {
	position: absolute;
	width: 62%;
	height: 62%;
	border-radius: 50%;
	animation: tx-ph-aurora 18s ease-in-out infinite alternate;
}

.tx-ph-aurora i:nth-child(1) {
	left: 42%;
	top: 2%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--tx-accent) 85%, transparent), transparent);
}

.tx-ph-aurora i:nth-child(2) {
	left: 58%;
	top: 34%;
	background: radial-gradient(closest-side, color-mix(in srgb, color-mix(in srgb, var(--tx-accent) 45%, #4f46e5) 70%, transparent), transparent);
	animation-duration: 23s;
	animation-delay: -6s;
}

.tx-ph-aurora i:nth-child(3) {
	left: 8%;
	top: 46%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--tx-accent-soft, var(--tx-accent)) 60%, transparent), transparent);
	animation-duration: 27s;
	animation-delay: -12s;
}

.tx-ph-aurora i:nth-child(4) {
	left: 70%;
	top: -14%;
	width: 40%;
	height: 40%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.28), transparent);
	animation-duration: 31s;
}

@keyframes tx-ph-aurora {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(-14%, 12%, 0) rotate(45deg) scale(1.22); }
	100% { transform: translate3d(12%, -10%, 0) rotate(-25deg) scale(0.88); }
}

.tx-ph-noise {
	position: absolute;
	inset: 0;
	opacity: 0.09;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

/* --- Стил: 3D мрежа до хоризонтот --- */
.tx-ph-grid {
	position: absolute;
	inset: 0;
	overflow: hidden;
	perspective: 380px;
	perspective-origin: calc(50% + var(--ph-mx) * 24%) 36%;
}

.tx-ph-grid__floor {
	position: absolute;
	left: -60%;
	right: -60%;
	top: 56%;
	height: 160%;
	transform-origin: 50% 0;
	transform: rotateX(80deg);
}

.tx-ph-grid__plane {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(color-mix(in srgb, var(--tx-accent) 60%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--tx-accent) 60%, transparent) 1px, transparent 1px);
	background-size: 70px 70px;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000);
	mask-image: linear-gradient(to bottom, transparent, #000 22%, #000);
	animation: tx-ph-grid 2.8s linear infinite;
}

@keyframes tx-ph-grid {
	to { background-position: 0 70px, 0 0; }
}

.tx-ph-grid__sun {
	position: absolute;
	left: 76%;
	top: 56%;
	width: clamp(220px, 30vw, 460px);
	aspect-ratio: 1;
	translate: -50% -62%;
	border-radius: 50%;
	background:
		repeating-linear-gradient(to bottom, transparent 0 58%, var(--tx-ink) 58% 61%, transparent 61% 66%),
		radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tx-accent) 85%, #fff), color-mix(in srgb, var(--tx-accent) 35%, transparent) 62%, transparent 70%);
	opacity: 0.45;
	animation: tx-ph-sun 8s ease-in-out infinite alternate;
}

@keyframes tx-ph-sun {
	to { translate: -50% -56%; opacity: 0.6; }
}

.tx-ph-grid__haze {
	position: absolute;
	left: 0;
	right: 0;
	top: 44%;
	height: 22%;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--tx-ink) 85%, transparent) 55%, transparent);
}

/* --- Стил: светлосни зраци --- */
.tx-ph-beams {
	position: absolute;
	inset: -30% -10% 0;
	translate: calc(var(--ph-mx) * 40px) 0;
}

.tx-ph-beams i {
	position: absolute;
	top: -10%;
	left: var(--x, 60%);
	width: 16%;
	height: 150%;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--tx-accent) 42%, transparent), transparent 72%);
	transform-origin: 50% 0;
	filter: blur(20px);
	animation: tx-ph-beam 9s ease-in-out infinite alternate;
}

.tx-ph-beams i:nth-child(1) { --x: 52%; --r: 22deg; }
.tx-ph-beams i:nth-child(2) { --x: 66%; --r: 9deg; animation-delay: -3s; animation-duration: 11s; }
.tx-ph-beams i:nth-child(3) { --x: 79%; --r: -6deg; animation-delay: -6s; }
.tx-ph-beams i:nth-child(4) { --x: 90%; --r: -18deg; animation-delay: -1s; animation-duration: 13s; }

@keyframes tx-ph-beam {
	0% { transform: rotate(var(--r, 0deg)) scaleX(1); opacity: 0.35; }
	100% { transform: rotate(calc(var(--r, 0deg) - 14deg)) scaleX(1.5); opacity: 0.85; }
}

.tx-ph-spot {
	position: absolute;
	inset: 0;
	background: radial-gradient(460px circle at calc(62% + var(--ph-mx) * 70%) calc(45% + var(--ph-my) * 70%), color-mix(in srgb, var(--tx-accent) 24%, transparent), transparent 70%);
}

.tx-ph-dots i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px var(--tx-accent);
	opacity: 0.55;
	animation: tx-ph-dot var(--d, 7s) ease-in-out var(--t, 0s) infinite alternate;
}

@keyframes tx-ph-dot {
	to { transform: translate3d(16px, -46px, 0); opacity: 0.08; }
}

/* --- Стил: 3D објекти (во заглавието десно) --- */
.tx-ph--shapes .tx-shapes {
	--mx: var(--ph-mx);
	--my: var(--ph-my);
}

.tx-ph--shapes .tx-shape {
	--size: clamp(70px, 9vw, 130px);
}

/* ==========================================================================
   2. 3D објекти
   ========================================================================== */
.tx-shapes {
	--mx: 0;
	--my: 0;
	position: absolute;
	inset: 0;
	perspective: 1000px;
	pointer-events: none;
}

.tx-shape {
	--size: clamp(64px, 8vw, 120px);
	--w: calc(var(--size) * var(--s, 1));
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--w);
	margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
	transform-style: preserve-3d;
	translate: calc(var(--mx) * var(--d, 1) * 90px) calc(var(--my) * var(--d, 1) * 64px);
	transform: rotateX(calc(var(--my) * -28deg)) rotateY(calc(var(--mx) * 34deg));
}

.tx-shape__float,
.tx-shape__spin {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.tx-shape__float {
	animation: tx-shape-float calc(6s + var(--n, 0) * 1.1s) ease-in-out var(--t, 0s) infinite alternate;
}

.tx-shape__spin {
	animation: tx-shape-spin calc(18s + var(--n, 0) * 2.5s) linear var(--t, 0s) infinite;
}

.tx-shape:nth-child(even) .tx-shape__spin {
	animation-name: tx-shape-spin-b;
	animation-direction: reverse;
}

@keyframes tx-shape-float {
	from { transform: translate3d(0, -16px, 0); }
	to { transform: translate3d(0, 18px, 0); }
}

@keyframes tx-shape-spin {
	from { transform: rotate3d(1, 1, 0.25, 0deg); }
	to { transform: rotate3d(1, 1, 0.25, 360deg); }
}

@keyframes tx-shape-spin-b {
	from { transform: rotate3d(0.3, 1, 0.6, 0deg); }
	to { transform: rotate3d(0.3, 1, 0.6, 360deg); }
}

/* Коцка од стакло */
.tx-cube,
.tx-globe,
.tx-pyramid {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.tx-cube i {
	position: absolute;
	inset: 0;
	border: 1px solid color-mix(in srgb, var(--tx-accent) 55%, rgba(255, 255, 255, 0.6));
	background: linear-gradient(135deg, color-mix(in srgb, var(--tx-accent) 42%, transparent), color-mix(in srgb, var(--tx-accent) 6%, transparent));
	box-shadow: inset 0 0 calc(var(--w) * 0.3) color-mix(in srgb, var(--tx-accent) 38%, transparent);
	backface-visibility: visible;
}

.tx-cube i:nth-child(1) { transform: translateZ(calc(var(--w) / 2)); }
.tx-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.tx-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.tx-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.tx-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--w) / 2)); background: color-mix(in srgb, var(--tx-accent) 30%, rgba(255, 255, 255, 0.1)); }
.tx-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--w) / 2)); }

/* Жичен глобус */
.tx-globe i,
.tx-globe b {
	position: absolute;
	inset: 0;
	border: 1px solid color-mix(in srgb, var(--tx-accent) 70%, rgba(255, 255, 255, 0.4));
	border-radius: 50%;
	transform: rotateY(var(--r, 0deg));
}

.tx-globe b {
	border-width: 2px;
	border-color: color-mix(in srgb, var(--tx-accent) 90%, #fff);
	box-shadow: 0 0 22px color-mix(in srgb, var(--tx-accent) 40%, transparent);
	transform: rotateX(90deg);
}

/* Сфера (секогаш свртена кон гледачот) */
.tx-shape--sphere {
	transform: none;
}

.tx-shape--sphere .tx-shape__spin {
	animation: none;
}

.tx-sphere {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #fff 0, color-mix(in srgb, var(--tx-accent) 55%, #fff) 9%, var(--tx-accent) 38%, color-mix(in srgb, var(--tx-accent) 32%, #000) 82%);
	box-shadow: 0 30px 60px -22px color-mix(in srgb, var(--tx-accent) 70%, transparent), inset -10px -14px 30px rgba(0, 0, 0, 0.3);
}

/* Пирамида */
.tx-pyramid {
	transform: translateY(-8%);
}

.tx-pyramid i {
	position: absolute;
	inset: 0;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transform-origin: 50% 100%;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--tx-accent) 70%, #fff), color-mix(in srgb, var(--tx-accent) 35%, transparent));
}

.tx-pyramid i:nth-child(1) { transform: rotateY(0deg) translateZ(calc(var(--w) / 2)) rotateX(30deg); }
.tx-pyramid i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)) rotateX(30deg); filter: brightness(0.75); }
.tx-pyramid i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)) rotateX(30deg); filter: brightness(0.55); }
.tx-pyramid i:nth-child(4) { transform: rotateY(270deg) translateZ(calc(var(--w) / 2)) rotateX(30deg); filter: brightness(0.9); }

/* ==========================================================================
   3. Транзиции помеѓу страниците
   ========================================================================== */
.tx-transition__panel > i {
	display: none;
}

/* Колони */
.tx-transition--columns .tx-transition__panel {
	display: flex;
	transform: none;
	background: transparent;
}

.tx-transition--columns .tx-transition__panel::before {
	display: none;
}

.tx-transition--columns .tx-transition__panel > i {
	display: block;
	flex: 1 1 20%;
	margin-left: -1px;
	background: var(--tx-ink);
	transform: translateY(101%);
}

.tx-transition--columns .tx-transition__panel > i:nth-child(3) {
	background: color-mix(in srgb, var(--tx-ink) 82%, var(--tx-accent));
}

.tx-transition--columns .tx-transition__panel > i:nth-child(2) { transition-delay: 0.05s !important; }
.tx-transition--columns .tx-transition__panel > i:nth-child(3) { transition-delay: 0.1s !important; }
.tx-transition--columns .tx-transition__panel > i:nth-child(4) { transition-delay: 0.15s !important; }
.tx-transition--columns .tx-transition__panel > i:nth-child(5) { transition-delay: 0.2s !important; }

.tx-leaving .tx-transition--columns .tx-transition__panel,
.tx-entering .tx-transition--columns .tx-transition__panel,
.tx-entered .tx-transition--columns .tx-transition__panel {
	transform: none;
}

.tx-leaving .tx-transition--columns .tx-transition__panel > i {
	transform: translateY(0);
	transition: transform 0.5s var(--tx-ease-io);
}

.tx-entering .tx-transition--columns .tx-transition__panel > i {
	transform: translateY(0);
}

.tx-entered .tx-transition--columns .tx-transition__panel > i {
	transform: translateY(-101%);
	transition: transform 0.7s var(--tx-ease-io);
}

/* Дијагонално бришење */
.tx-transition--diagonal .tx-transition__panel {
	inset: 0 -45%;
	border-right: 16px solid var(--tx-accent);
	transform: translateX(-125%) skewX(-18deg);
}

.tx-transition--diagonal .tx-transition__panel::before {
	display: none;
}

.tx-leaving .tx-transition--diagonal .tx-transition__panel {
	transform: translateX(0) skewX(-18deg);
	transition: transform 0.62s var(--tx-ease-io);
}

.tx-entering .tx-transition--diagonal .tx-transition__panel {
	transform: translateX(0) skewX(-18deg);
}

.tx-entered .tx-transition--diagonal .tx-transition__panel {
	transform: translateX(125%) skewX(-18deg);
	transition: transform 0.8s var(--tx-ease-io);
}

/* Затворач: горе и долу кон средината */
.tx-transition--shutter .tx-transition__panel {
	transform: none;
	background: transparent;
}

.tx-transition--shutter .tx-transition__panel::before,
.tx-transition--shutter .tx-transition__panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 50.5%;
	border-radius: 0;
	background: var(--tx-ink);
	transform: scaleY(0);
}

.tx-transition--shutter .tx-transition__panel::before {
	top: 0;
	bottom: auto;
	inset: 0 0 auto;
	transform-origin: top;
}

.tx-transition--shutter .tx-transition__panel::after {
	bottom: 0;
	transform-origin: bottom;
}

.tx-transition--shutter .tx-transition__panel > i:first-child {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--tx-accent);
	transform: scaleX(0);
}

.tx-leaving .tx-transition--shutter .tx-transition__panel,
.tx-entering .tx-transition--shutter .tx-transition__panel,
.tx-entered .tx-transition--shutter .tx-transition__panel {
	transform: none;
}

.tx-leaving .tx-transition--shutter .tx-transition__panel::before,
.tx-leaving .tx-transition--shutter .tx-transition__panel::after {
	transform: scaleY(1);
	transition: transform 0.5s var(--tx-ease-io);
}

.tx-leaving .tx-transition--shutter .tx-transition__panel > i:first-child {
	transform: scaleX(1);
	transition: transform 0.45s var(--tx-ease-io) 0.15s;
}

.tx-entering .tx-transition--shutter .tx-transition__panel::before,
.tx-entering .tx-transition--shutter .tx-transition__panel::after {
	transform: scaleY(1);
}

.tx-entering .tx-transition--shutter .tx-transition__panel > i:first-child {
	transform: scaleX(1);
}

.tx-entered .tx-transition--shutter .tx-transition__panel::before,
.tx-entered .tx-transition--shutter .tx-transition__panel::after {
	transform: scaleY(0);
	transition: transform 0.75s var(--tx-ease-io) 0.1s;
}

.tx-entered .tx-transition--shutter .tx-transition__panel > i:first-child {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--tx-ease-io);
}

/* ==========================================================================
   4. Појавување и наслови
   ========================================================================== */
.js .tx-reveal-flip [data-reveal=""]:not(.is-in),
.js [data-reveal="flip"]:not(.is-in) {
	transform: perspective(900px) rotateX(-32deg) translate3d(0, calc(var(--tx-distance) * 0.6), 0);
	transform-origin: 50% 0;
}

.js .tx-reveal-clip [data-reveal=""],
.js [data-reveal="clip"] {
	transition: opacity calc(0.6s * var(--tx-speed)) var(--tx-ease), transform calc(1.3s * var(--tx-speed)) var(--tx-ease), clip-path calc(1.2s * var(--tx-speed)) var(--tx-ease-io);
	transition-delay: calc(var(--i, 0) * var(--tx-stagger));
}

.js .tx-reveal-clip [data-reveal=""]:not(.is-in),
.js [data-reveal="clip"]:not(.is-in) {
	clip-path: inset(100% 0 0 0);
	transform: translate3d(0, calc(var(--tx-distance) * 0.5), 0);
}

.js .tx-reveal-clip [data-reveal=""].is-in,
.js [data-reveal="clip"].is-in {
	clip-path: inset(0 0 0 0);
}

/* Наслови: збор по збор во 3D */
.tx-split-flip .tx-w {
	overflow: visible;
	perspective: 700px;
}

.tx-split-flip .tx-w__i {
	opacity: 0;
	transform: translate3d(0, 0.3em, 0) rotateX(-90deg);
	transform-origin: 50% 100%;
}

.tx-split-flip .is-in .tx-w__i,
.tx-split-flip .is-in.tx-w__i {
	opacity: 1;
	transform: none;
}

/* Наслови: збор по збор изострување */
.tx-split-blur .tx-w {
	overflow: visible;
}

.tx-split-blur .tx-w__i {
	opacity: 0;
	filter: blur(14px);
	transform: translate3d(0, 0.2em, 0);
	transition: transform calc(1.1s * var(--tx-speed)) var(--tx-ease), opacity calc(0.9s * var(--tx-speed)) var(--tx-ease), filter calc(0.9s * var(--tx-speed)) var(--tx-ease);
	transition-delay: calc(var(--wi, 0) * 55ms * var(--tx-speed));
}

.tx-split-blur .is-in .tx-w__i,
.tx-split-blur .is-in.tx-w__i {
	opacity: 1;
	filter: none;
	transform: none;
}

/* ==========================================================================
   5. Одблесок при 3D навалување
   ========================================================================== */
.tx-glare {
	position: absolute;
	z-index: 6;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 48%);
	mix-blend-mode: soft-light;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.is-tilt:hover > .tx-glare {
	opacity: 1;
}

/* ==========================================================================
   6. 3D карусел на слики и 3D сцена
   ========================================================================== */
.tx-carousel3d {
	position: relative;
	height: var(--h, 460px);
	margin: 0 0 1.5rem;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
}

.tx-carousel3d--dark {
	border-radius: 28px;
	background:
		radial-gradient(60% 55% at 50% 35%, color-mix(in srgb, var(--tx-accent) 26%, transparent), transparent 70%),
		var(--tx-ink);
}

.tx-carousel3d__stage {
	position: absolute;
	inset: 0;
	perspective: 1500px;
	perspective-origin: 50% 38%;
	cursor: grab;
	outline: 0;
	touch-action: pan-y;
}

.tx-carousel3d__stage.is-dragging {
	cursor: grabbing;
}

.tx-carousel3d__stage:focus-visible {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tx-accent) 60%, transparent);
	border-radius: 28px;
}

.tx-carousel3d__ring {
	--w: 260px;
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--w);
	height: calc(var(--h, 460px) * 0.64);
	margin: calc(var(--h, 460px) * -0.32) 0 0 calc(var(--w) / -2);
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--r, 420px) * -1)) rotateX(-5deg) rotateY(var(--a, 0deg));
}

.tx-carousel3d__item {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #151314;
	box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.7);
	transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r, 420px));
	backface-visibility: hidden;
}

.tx-carousel3d__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.tx-carousel3d__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 38%);
	pointer-events: none;
}

.tx-carousel3d__item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.6rem 1rem 0.9rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
}

.tx-carousel3d__hint {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	translate: -50% 0;
	color: var(--tx-muted);
	font-family: var(--tx-font-display);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

.tx-carousel3d--dark .tx-carousel3d__hint {
	color: rgba(255, 255, 255, 0.55);
}

.tx-shapes3d {
	position: relative;
	display: grid;
	place-items: center;
	min-height: var(--h, 520px);
	margin: 0 0 1.5rem;
	overflow: hidden;
	border-radius: 28px;
	isolation: isolate;
}

.tx-shapes3d--dark {
	background:
		radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--tx-accent) 24%, transparent), transparent 70%),
		var(--tx-ink);
	color: var(--tx-white, #fff);
}

.tx-shapes3d--light {
	background:
		radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--tx-accent) 16%, transparent), transparent 70%),
		color-mix(in srgb, var(--tx-accent) 4%, #f4f2ee);
}

.tx-shapes3d .tx-shapes {
	z-index: -1;
}

.tx-shapes3d__content {
	position: relative;
	max-width: 760px;
	padding: 3rem 1.5rem;
	text-align: center;
}

.tx-shapes3d__content .tx-lead {
	margin-inline: auto;
}

.tx-shapes3d__action {
	margin-top: 1.8rem;
}

/* ==========================================================================
   Мобилни
   ========================================================================== */
@media (max-width: 760px) {
	.tx-ph--shapes .tx-shape {
		--size: 54px;
	}

	.tx-ph--shapes .tx-shape:nth-child(n + 5) {
		display: none;
	}

	.tx-ph-orbit {
		right: -30vw;
		width: 90vw;
		opacity: 0.6;
	}

	.tx-ph-cue {
		display: none;
	}

	.tx-carousel3d__ring {
		--w: 190px;
	}
}

/* ==========================================================================
   7. Намалено движење, уредувачи, Customizer
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.tx-ph-word > span,
	.tx-ph-orbit__ring,
	.tx-ph-orbit__core,
	.tx-ph-aurora i,
	.tx-ph-grid__plane,
	.tx-ph-grid__sun,
	.tx-ph-beams i,
	.tx-ph-dots i,
	.tx-ph-cue i,
	.tx-shape__float,
	.tx-shape__spin {
		animation: none !important;
	}
}