/**
 * Controlled motion primitives. Content is hidden only after JavaScript has
 * initialised the observer and never inside Elementor editor contexts.
 */

@keyframes fikcija-shimmer {
	to { background-position: -220% 0; }
}

@keyframes fikcija-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
	50% { transform: translate3d(0, -0.65rem, 0) rotate(2deg); }
}

@keyframes fikcija-pulse-border {
	0%, 100% { border-color: rgba(255, 255, 255, 0.1); }
	50% { border-color: rgba(231, 53, 63, 0.3); }
}

/*
 * Display-type focus.
 *
 * Applied by fikcija-experience.js only to primary page and section headings.
 * This keeps Anton expressive without adding motion to navigation, cards,
 * forms, or reading copy.
 */
@keyframes fikcija-type-marker {
	from { background-size: 0% 0.12em; }
	to { background-size: 100% 0.12em; }
}

.fikcija-type-highlight {
	transition:
		opacity 560ms var(--fikcija-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)),
		transform 700ms var(--fikcija-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)),
		clip-path 700ms var(--fikcija-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.fikcija-type-motion-ready .fikcija-type-highlight:not(.is-type-visible) {
	opacity: 0;
	transform: translateY(0.22em);
	clip-path: inset(0 0 32% 0);
}

.fikcija-type-highlight.is-type-visible {
	opacity: 1;
	transform: none;
	clip-path: inset(0);
}

.fikcija-type-highlight :where(em, .fikcija-hero-accent),
.fikcija-type-highlight:is(.vh-bento-title h2, .vh-two-col > header h2, .vh-enquire h2) span {
	background-image: linear-gradient(to right, color-mix(in srgb, currentColor 38%, transparent), color-mix(in srgb, currentColor 38%, transparent));
	background-position: 0 94%;
	background-repeat: no-repeat;
	background-size: 0% 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.fikcija-type-highlight.is-type-visible :where(em, .fikcija-hero-accent),
.fikcija-type-highlight.is-type-visible:is(.vh-bento-title h2, .vh-two-col > header h2, .vh-enquire h2) span {
	animation: fikcija-type-marker 620ms 260ms var(--fikcija-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
}

.fikcija-motion-ready :where(.fikcija-reveal, .fikcija-fade-up, .fikcija-scale-in, .fikcija-shortcode):not(.is-visible) {
	opacity: 0;
}

.fikcija-motion-ready .fikcija-scale-in:not(.is-visible) {
	transform: scale(0.975);
}

:where(.fikcija-reveal, .fikcija-fade-up, .fikcija-scale-in, .fikcija-shortcode).is-visible {
	opacity: 1;
	transform: none;
}

.fikcija-motion-ready .fikcija-shortcode > :where(.fikcija-grid, .fikcija-list, .fikcija-compact) > * {
	transition: opacity 420ms var(--fikcija-ease-out), transform 420ms var(--fikcija-ease-out);
}

.fikcija-motion-ready .fikcija-shortcode:not(.is-visible) > :where(.fikcija-grid, .fikcija-list, .fikcija-compact) > * {
	opacity: 0;
}

.fikcija-shortcode.is-visible > :where(.fikcija-grid, .fikcija-list, .fikcija-compact) > *:nth-child(2) { transition-delay: 60ms; }
.fikcija-shortcode.is-visible > :where(.fikcija-grid, .fikcija-list, .fikcija-compact) > *:nth-child(3) { transition-delay: 120ms; }
.fikcija-shortcode.is-visible > :where(.fikcija-grid, .fikcija-list, .fikcija-compact) > *:nth-child(4) { transition-delay: 180ms; }
.fikcija-shortcode.is-visible > :where(.fikcija-grid, .fikcija-list, .fikcija-compact) > *:nth-child(n + 5) { transition-delay: 220ms; }

.fikcija-floating-shape,
.fikcija-float {
	animation: fikcija-float 6s ease-in-out infinite;
}

[data-fikcija-parallax] {
	transform: translate3d(0, var(--fikcija-parallax-y, 0), 0);
	will-change: transform;
}

.fikcija-card,
.fikcija-category-card {
	transition-property: border-color, box-shadow, transform, background-color;
}

.fikcija-category-card.is-active,
.fikcija-card.is-active {
	border-color: var(--fikcija-card-accent, var(--fikcija-color-primary));
	box-shadow: 0 0 2.5rem color-mix(in srgb, var(--fikcija-card-accent, var(--fikcija-color-primary)) 16%, transparent);
}

.elementor-editor-active :where(.fikcija-reveal, .fikcija-fade-up, .fikcija-scale-in, .fikcija-shortcode),
.elementor-editor-preview :where(.fikcija-reveal, .fikcija-fade-up, .fikcija-scale-in, .fikcija-shortcode) {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.fikcija-type-motion-ready .fikcija-type-highlight,
	.fikcija-type-highlight {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.fikcija-type-highlight :where(em, .fikcija-hero-accent),
	.fikcija-type-highlight:is(.vh-bento-title h2, .vh-two-col > header h2, .vh-enquire h2) span {
		animation: none !important;
		background-size: 100% 0.12em;
	}

	.fikcija-motion-ready :where(.fikcija-reveal, .fikcija-fade-up, .fikcija-scale-in, .fikcija-shortcode),
	.fikcija-motion-ready .fikcija-shortcode > :where(.fikcija-grid, .fikcija-list, .fikcija-compact) > *,
	.fikcija-floating-shape,
	.fikcija-float,
	[data-fikcija-parallax] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition-delay: 0s !important;
	}

	.fikcija-loading span {
		background: rgba(255, 255, 255, 0.08);
		animation: none;
	}
}

@media (max-width: 63.999rem), (pointer: coarse) {
	[data-fikcija-parallax] {
		transform: none !important;
		will-change: auto;
	}

	[data-fikcija-cursor-glow]::before {
		display: none;
	}
}
