/* ==========================================================================
   MirrorORG — motion layer
   --------------------------------------------------------------------------
   Driven by assets/js/motion.js. Rules:
   - Only transform / opacity / filter / background-position are animated.
   - Hidden-before-reveal states apply ONLY under html.js-motion, which is set
     by an inline head script and removed again by a 3s failsafe if
     motion.js never runs — content can never stay hidden.
   - Pointer effects only for (hover: hover) and (pointer: fine).
   - prefers-reduced-motion: the class is never added; CSS keyframes are
     wrapped in (prefers-reduced-motion: no-preference).
   ========================================================================== */

/* Registered property so the CTA border angle can be animated. */
@property --mirror-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* Page-to-page transitions (Chromium cross-document View Transitions). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: 0.28s cubic-bezier(0.4, 0, 1, 1) both mirror-vt-out;
	}

	::view-transition-new(root) {
		animation: 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both mirror-vt-in;
	}
}

@keyframes mirror-vt-out {
	to { opacity: 0; transform: translateY(-12px) scale(0.99); }
}

@keyframes mirror-vt-in {
	from { opacity: 0; transform: translateY(18px) scale(1.01); }
}

/* 1. Scroll reveal ========================================================= */
.js-motion [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition:
		opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
		filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 80ms);
	will-change: opacity, transform;
}

.js-motion [data-reveal="zoom"] {
	transform: scale(0.92);
	filter: blur(6px);
}

.js-motion [data-reveal="start"] {
	transform: translate3d(48px, 0, 0);
}

.js-motion [data-reveal="end"] {
	transform: translate3d(-48px, 0, 0);
}

[dir="rtl"].js-motion [data-reveal="start"] { transform: translate3d(-48px, 0, 0); }
[dir="rtl"].js-motion [data-reveal="end"] { transform: translate3d(48px, 0, 0); }

.js-motion [data-reveal="clip"] {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 100% 0 round var(--r-xl));
	transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1);
}

.js-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

.js-motion [data-reveal="clip"].is-in {
	clip-path: inset(0 0 0 0 round var(--r-xl));
}

/* Above the fold: hidden only until motion.js is ready (3s failsafe in
   the head script removes .js-motion if it never is). */
.js-motion:not(.motion-ready) .mirror-hero__content > *,
.js-motion:not(.motion-ready) .mirror-showcase__item,
.js-motion:not(.motion-ready) .mirror-page-header .mirror-container > * {
	opacity: 0;
}

/* 2. Hero headline: word by word ========================================== */
.mirror-split .w {
	display: inline-block;
	white-space: pre;
}

.js-motion .mirror-split .w {
	opacity: 0;
	filter: blur(10px);
	transform: translate3d(0, 0.55em, 0) rotate(2deg);
	transition:
		opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		filter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(120ms + var(--wi, 0) * 70ms);
}

.js-motion .mirror-split.is-in .w {
	opacity: 1;
	filter: none;
	transform: none;
}

/* Highlight bar under <mark> draws in after the words land. */
.mirror-hero__title mark {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transition: background-size 0.9s cubic-bezier(0.7, 0, 0.2, 1) 0.9s;
}

.js-motion .mirror-hero__title:not(.is-in) mark {
	background-size: 0% 100%;
}

[dir="rtl"] .mirror-hero__title mark {
	background-position: 100% 0;
}

/* 3. Scroll progress + auto-hiding header ================================== */
.mirror-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 120;
	height: 3px;
	background: linear-gradient(90deg, var(--c-navy), var(--c-blue), #5aa0ff);
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
	pointer-events: none;
}

[dir="rtl"] .mirror-progress {
	transform-origin: right center;
}

.mirror-header {
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.mirror-header.is-hidden {
	transform: translate3d(0, -110%, 0);
}

/* Nav links: underline that slides in. */
@media (hover: hover) {
	.mirror-nav__list > li > a {
		position: relative;
	}

	.mirror-nav__list > li:not(.current-menu-item):not(.current_page_item) > a::before {
		content: "";
		position: absolute;
		inset-inline: 14px;
		bottom: 4px;
		height: 2px;
		border-radius: 2px;
		background: var(--c-blue);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.mirror-nav__list > li > a:hover::before {
		transform: scaleX(1);
	}
}

/* 4. Buttons: shine sweep + magnetic ======================================= */
.mirror-btn,
.woocommerce a.button,
.woocommerce button.button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.mirror-btn--primary::after,
.mirror-btn--light::after,
.woocommerce button.single_add_to_cart_button::after,
.woocommerce #place_order::after,
.woocommerce a.checkout-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}

@media (hover: hover) {
	.mirror-btn--primary:hover::after,
	.mirror-btn--light:hover::after,
	.woocommerce button.single_add_to_cart_button:hover::after,
	.woocommerce #place_order:hover::after,
	.woocommerce a.checkout-button:hover::after {
		transform: translateX(120%);
		transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.mirror-btn--primary:hover,
	.woocommerce button.single_add_to_cart_button:hover {
		box-shadow: 0 16px 34px -14px rgba(8, 102, 255, 0.85);
	}
}

/* Click ripple. */
.mirror-ripple {
	position: absolute;
	z-index: -1;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: scale(0);
	animation: mirror-ripple 0.6s ease-out forwards;
	pointer-events: none;
}

.mirror-btn--secondary .mirror-ripple,
.mirror-btn--ghost .mirror-ripple {
	background: rgba(8, 102, 255, 0.2);
}

@keyframes mirror-ripple {
	to { transform: scale(40); opacity: 0; }
}

/* Magnetic elements are moved by JS through --tx / --ty. */
.is-magnetic {
	transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* 5. Cards: cursor spotlight + 3D tilt ===================================== */
@media (hover: hover) and (pointer: fine) {
	.mirror-card,
	.woocommerce ul.products[class] li.mirror-product-card.product,
	.mirror-steps__item,
	.mirror-reasons li,
	.mirror-cat a,
	.mirror-capabilities li {
		background-image: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(8, 102, 255, 0.09), transparent 45%);
	}

	.mirror-steps__item {
		background-image: radial-gradient(360px circle at var(--mx, -500px) var(--my, -500px), rgba(143, 184, 255, 0.16), transparent 45%);
	}

	.is-tilt {
		transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0);
		transform-style: preserve-3d;
		transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	}

	.is-tilt.is-hovered {
		--lift: -6px;
		transition: transform 0.12s linear, border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	}

	/* Tilt replaces the plain hover lift on these. */
	.woocommerce ul.products[class] li.mirror-product-card.product.is-tilt:hover,
	.mirror-post-card.is-tilt:hover,
	.mirror-project-card.is-tilt:hover {
		transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0);
		box-shadow: 0 30px 60px -30px rgba(3, 22, 51, 0.35);
	}
}

/* Icon micro-interactions */
@media (hover: hover) {
	.mirror-feature__icon,
	.mirror-capabilities__icon,
	.mirror-reasons__icon,
	.mirror-contact-card__icon {
		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
	}

	.mirror-feature:hover .mirror-feature__icon,
	.mirror-capabilities li:hover .mirror-capabilities__icon,
	.mirror-reasons li:hover .mirror-reasons__icon,
	.mirror-contact-card:hover .mirror-contact-card__icon {
		background: var(--c-blue);
		color: var(--c-white);
		transform: rotate(-8deg) scale(1.12);
	}

	.mirror-steps__num {
		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
	}

	.mirror-steps__item:hover .mirror-steps__num {
		background: var(--c-blue);
		color: var(--c-white);
		transform: scale(1.12) rotate(-6deg);
	}

	.mirror-cat__media img {
		transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.mirror-cat a:hover .mirror-cat__media img {
		transform: scale(1.12);
	}

	[dir="rtl"] .mirror-cat a:hover .mirror-cat__arrow { transform: scaleX(-1) translateX(4px); }
	[dir="ltr"] .mirror-cat a:hover .mirror-cat__arrow { transform: translateX(4px); }

	.mirror-cat__arrow {
		transition: transform 0.3s var(--ease), color var(--dur) var(--ease);
	}

	.mirror-social a:hover {
		transform: translateY(-3px);
	}

	.mirror-social a {
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
	}
}

/* 6. Custom cursor (desktop) =============================================== */
.mirror-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 150;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1.5px solid rgba(8, 102, 255, 0.55);
	border-radius: 50%;
	pointer-events: none;
	transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, 1));
	transition: width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.mirror-cursor.is-link {
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	background: rgba(8, 102, 255, 0.1);
	border-color: rgba(8, 102, 255, 0.3);
}

.mirror-cursor.is-down {
	--cs: 0.8;
}

.mirror-cursor.is-hidden {
	opacity: 0;
}

.mirror-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 151;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--c-blue);
	pointer-events: none;
	transform: translate3d(var(--dx, -100px), var(--dy, -100px), 0);
}

@media (hover: none), (pointer: coarse) {
	.mirror-cursor,
	.mirror-cursor-dot {
		display: none;
	}
}

/* 7. Home: hero atmosphere ================================================= */
@media (prefers-reduced-motion: no-preference) {
	/* Aurora light that slowly drifts behind the hero. */
	.mirror-hero__bg::after {
		content: "";
		position: absolute;
		inset: -20%;
		background:
			radial-gradient(35% 45% at 20% 30%, rgba(8, 102, 255, 0.16), transparent 70%),
			radial-gradient(30% 40% at 75% 20%, rgba(0, 48, 126, 0.12), transparent 70%),
			radial-gradient(28% 36% at 60% 80%, rgba(90, 160, 255, 0.14), transparent 70%);
		filter: blur(20px);
		animation: mirror-aurora 18s ease-in-out infinite alternate;
	}

	@keyframes mirror-aurora {
		0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
		50% { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.08); }
		100% { transform: translate3d(-4%, 3%, 0) rotate(-4deg) scale(1.02); }
	}

	/* Showcase cards float gently, out of phase. */
	.mirror-showcase__item--1 { animation: mirror-float 7s ease-in-out infinite; }
	.mirror-showcase__item--2 { animation: mirror-float 8s ease-in-out -2s infinite; }
	.mirror-showcase__item--3 { animation: mirror-float 9s ease-in-out -4s infinite; }

	@keyframes mirror-float {
		0%, 100% { translate: 0 0; }
		50% { translate: 0 -10px; }
	}

	/* Live dot on eyebrow pills. */
	.mirror-dot {
		position: relative;
	}

	.mirror-dot::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: inherit;
		animation: mirror-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
	}

	@keyframes mirror-ping {
		75%, 100% { transform: scale(2.6); opacity: 0; }
	}
}

/* Grid lines light up around the cursor. */
.mirror-hero__spot {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(8, 102, 255, 0.28) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(8, 102, 255, 0.28) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%);
	mask-image: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%);
	pointer-events: none;
}

/* Showcase: depth on hover (tilt comes from .is-tilt). */
.mirror-showcase {
	perspective: 1200px;
}

.mirror-showcase__caption {
	transform: translateZ(30px);
}

/* 8. Dark process section: moving grid + glow ============================== */
.mirror-section--dark {
	overflow: hidden;
	isolation: isolate;
}

.mirror-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(143, 184, 255, 0.07) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, rgba(143, 184, 255, 0.07) 1px, transparent 1px) 0 0 / 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 80%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 80%);
}

.mirror-section--dark::after {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	top: -160px;
	inset-inline-end: -120px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(8, 102, 255, 0.35), transparent 65%);
	filter: blur(10px);
}

@media (prefers-reduced-motion: no-preference) {
	.mirror-section--dark::before {
		animation: mirror-grid-move 22s linear infinite;
	}

	.mirror-section--dark::after {
		animation: mirror-orb 14s ease-in-out infinite alternate;
	}

	@keyframes mirror-grid-move {
		to { background-position: 64px 64px, 64px 64px; }
	}

	@keyframes mirror-orb {
		to { transform: translate3d(-120px, 180px, 0) scale(1.2); }
	}
}

.mirror-process .mirror-container {
	position: relative;
}

/* Steps light up in sequence as they reveal. */
.js-motion .mirror-steps__item[data-reveal] .mirror-steps__num {
	transform: scale(0.4);
	opacity: 0;
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
	transition-delay: calc(250ms + var(--i, 0) * 80ms);
}

.js-motion .mirror-steps__item.is-in .mirror-steps__num {
	transform: none;
	opacity: 1;
}

/* 9. Final CTA: rotating glow border ======================================= */
.mirror-cta {
	isolation: isolate;
}

.mirror-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	padding: 1.5px;
	border-radius: inherit;
	background: conic-gradient(from var(--mirror-angle), transparent 0 70%, #5aa0ff 80%, #ffffff 85%, #5aa0ff 90%, transparent 100%);
	-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);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.mirror-cta::after {
		animation: mirror-spin 6s linear infinite;
	}

	@keyframes mirror-spin {
		to { --mirror-angle: 360deg; }
	}
}

/* 10. Page header: animated grid drift ===================================== */
@media (prefers-reduced-motion: no-preference) {
	.mirror-page-header {
		animation: mirror-header-grid 30s linear infinite;
	}

	@keyframes mirror-header-grid {
		to { background-position: 48px 48px, 48px 48px, 0 0, 0 0; }
	}
}

/* 11. Product page ========================================================= */
@media (hover: hover) {
	.woocommerce div.product .woocommerce-product-gallery__image img {
		transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.mirror-product-media:hover .woocommerce-product-gallery__image img {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.woocommerce div.product form.cart .single_add_to_cart_button {
		animation: mirror-nudge 5s ease-in-out 2s infinite;
	}

	@keyframes mirror-nudge {
		0%, 88%, 100% { box-shadow: 0 10px 24px -12px rgba(8, 102, 255, 0.7); }
		94% { box-shadow: 0 0 0 8px rgba(8, 102, 255, 0.18), 0 10px 24px -12px rgba(8, 102, 255, 0.7); }
	}
}

/* 12. Reduced motion: everything static and visible ======================== */
@media (prefers-reduced-motion: reduce) {
	.mirror-progress,
	.mirror-cursor,
	.mirror-cursor-dot,
	.mirror-hero__spot {
		display: none;
	}

	.mirror-header.is-hidden {
		transform: none;
	}
}