/**
 * Custom Cursor - frontend styles.
 *
 * Layout notes
 * ------------
 * .cc-cursor  : a zero-sized point. JavaScript only ever writes a
 *               translate3d() transform on it (one composited property).
 * .cc-inner   : the sized box, centred on the point with negative
 *               margins. CSS owns its transform so hover states can use
 *               cheap transitions without fighting the animation loop.
 * .cc-shape   : the visual itself (background, border, pseudo elements).
 *               Rotation is applied here, so it never clashes with the
 *               hover scale on .cc-inner.
 *
 * Nothing in this file touches outline or focus styling.
 */

/* -------------------------------------------------------------------------
 * Layer
 * ---------------------------------------------------------------------- */

.cc-root {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: var( --cc-z-index, 999999 );
	opacity: 0;
	transition: opacity 180ms ease;
	-webkit-user-select: none;
	user-select: none;
}

/* Scoped mode is used by the admin live preview. */
.cc-root--scoped {
	position: absolute;
}

/*
 * Scoped "hide the native pointer". The frontend uses the stronger
 * html.cc-hide-default rule printed by PHP; this one is added by the
 * engine to a single container, so it needs no !important.
 */
.cc-hide-cursor,
.cc-hide-cursor * {
	cursor: none;
}

.cc-root.is-active {
	opacity: var( --cc-opacity, 1 );
}

/* Pointer left the window, or it is over an excluded element. */
.cc-root.is-suppressed {
	opacity: 0;
}

.cc-cursor,
.cc-trail-item,
.cc-spark,
.cc-ripple {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.cc-cursor {
	width: 0;
	height: 0;
	will-change: transform;
	transform: translate3d( -200px, -200px, 0 );
}

.cc-inner {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: var( --cc-el-size, 24px );
	height: var( --cc-el-size, 24px );
	margin: calc( var( --cc-el-size, 24px ) / -2 );
	transform: scale( var( --cc-scale, 1 ) );
	transition: transform 220ms cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 220ms ease;
}

.cc-shape {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-sizing: border-box;
}

.cc-primary {
	--cc-el-size: var( --cc-size, 24px );
}

.cc-secondary {
	--cc-el-size: calc( var( --cc-size, 24px ) * var( --cc-secondary-scale, 2 ) );
}

/* Pressed state: a small, shared click response. */
.cc-root.is-pressed .cc-primary .cc-inner {
	transform: scale( calc( var( --cc-scale, 1 ) * 0.8 ) );
}

/* -------------------------------------------------------------------------
 * Style 1 - Minimal Dot
 * ---------------------------------------------------------------------- */

.cc-style-dot .cc-primary .cc-shape {
	background-color: var( --cc-primary-color, #000 );
}

/* -------------------------------------------------------------------------
 * Style 2 - Ring
 * ---------------------------------------------------------------------- */

.cc-style-ring .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 1.6 );
}

.cc-style-ring .cc-primary .cc-shape {
	border: var( --cc-ring-thickness, 2px ) solid var( --cc-primary-color, #000 );
}

/* -------------------------------------------------------------------------
 * Style 3 - Dot + Ring
 * ---------------------------------------------------------------------- */

.cc-style-dot-ring {
	--cc-secondary-scale: 1.9;
}

.cc-style-dot-ring .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 0.34 );
}

.cc-style-dot-ring .cc-primary .cc-shape {
	background-color: var( --cc-primary-color, #000 );
}

.cc-style-dot-ring .cc-secondary .cc-shape {
	border: var( --cc-ring-thickness, 2px ) solid var( --cc-primary-color, #000 );
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
 * Style 4 - Glow
 * ---------------------------------------------------------------------- */

.cc-style-glow .cc-primary .cc-shape {
	background: radial-gradient(
		circle at center,
		var( --cc-primary-color, #000 ) 0%,
		rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.55 ) 55%,
		rgba( var( --cc-color-rgb, 0, 0, 0 ), 0 ) 100%
	);
	box-shadow:
		0 0 var( --cc-glow, 18px ) rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.75 ),
		0 0 calc( var( --cc-glow, 18px ) * 2 ) rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.35 );
}

/* -------------------------------------------------------------------------
 * Style 5 - Crosshair
 * ---------------------------------------------------------------------- */

.cc-style-crosshair .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 1.8 );
}

.cc-style-crosshair .cc-primary .cc-shape {
	border-radius: 0;
}

.cc-style-crosshair .cc-primary .cc-shape::before,
.cc-style-crosshair .cc-primary .cc-shape::after {
	content: "";
	position: absolute;
	background-color: var( --cc-primary-color, #000 );
}

.cc-style-crosshair .cc-primary .cc-shape::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: var( --cc-ring-thickness, 2px );
	transform: translateY( -50% );
}

.cc-style-crosshair .cc-primary .cc-shape::after {
	left: 50%;
	top: 0;
	height: 100%;
	width: var( --cc-ring-thickness, 2px );
	transform: translateX( -50% );
}

/* -------------------------------------------------------------------------
 * Style 6 - Magnetic
 * ---------------------------------------------------------------------- */

.cc-style-magnetic .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 1.5 );
}

.cc-style-magnetic .cc-primary .cc-shape {
	border: var( --cc-ring-thickness, 2px ) solid var( --cc-primary-color, #000 );
	background-color: rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.1 );
	transition: background-color 220ms ease, border-color 220ms ease;
}

.cc-style-magnetic.is-hover .cc-primary .cc-shape {
	background-color: rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.22 );
}

/* -------------------------------------------------------------------------
 * Style 7 - Blob
 * ---------------------------------------------------------------------- */

.cc-style-blob .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 1.35 );
}

.cc-style-blob .cc-primary .cc-shape {
	background-color: var( --cc-primary-color, #000 );
	animation: cc-blob 5s ease-in-out infinite;
}

@keyframes cc-blob {
	0% {
		border-radius: 66% 34% 38% 62% / 55% 62% 38% 45%;
	}
	25% {
		border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	}
	50% {
		border-radius: 34% 66% 45% 55% / 62% 38% 62% 38%;
	}
	75% {
		border-radius: 55% 45% 35% 65% / 38% 60% 40% 62%;
	}
	100% {
		border-radius: 66% 34% 38% 62% / 55% 62% 38% 45%;
	}
}

/* -------------------------------------------------------------------------
 * Style 8 - Follow Circle
 * ---------------------------------------------------------------------- */

.cc-style-follow-circle {
	--cc-secondary-scale: 2.2;
}

.cc-style-follow-circle .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 0.3 );
}

.cc-style-follow-circle .cc-primary .cc-shape {
	background-color: var( --cc-primary-color, #000 );
}

.cc-style-follow-circle .cc-secondary .cc-shape {
	border: var( --cc-ring-thickness, 2px ) solid rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.55 );
	background-color: rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.08 );
}

/* -------------------------------------------------------------------------
 * Style 9 - Target
 * ---------------------------------------------------------------------- */

.cc-style-target {
	--cc-secondary-scale: 2.1;
}

.cc-style-target .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 0.22 );
}

.cc-style-target .cc-primary .cc-shape {
	background-color: var( --cc-primary-color, #000 );
}

.cc-style-target .cc-secondary .cc-shape {
	border: var( --cc-ring-thickness, 2px ) solid var( --cc-primary-color, #000 );
	opacity: 0.9;
}

/* Four reticle ticks, drawn with two crossing lines behind the ring. */
.cc-style-target .cc-secondary .cc-shape::before,
.cc-style-target .cc-secondary .cc-shape::after {
	content: "";
	position: absolute;
	background-color: var( --cc-primary-color, #000 );
}

.cc-style-target .cc-secondary .cc-shape::before {
	top: 50%;
	left: -22%;
	width: 144%;
	height: var( --cc-ring-thickness, 2px );
	transform: translateY( -50% );
	-webkit-mask-image: linear-gradient( to right, #000 0 22%, transparent 22% 78%, #000 78% 100% );
	mask-image: linear-gradient( to right, #000 0 22%, transparent 22% 78%, #000 78% 100% );
}

.cc-style-target .cc-secondary .cc-shape::after {
	left: 50%;
	top: -22%;
	height: 144%;
	width: var( --cc-ring-thickness, 2px );
	transform: translateX( -50% );
	-webkit-mask-image: linear-gradient( to bottom, #000 0 22%, transparent 22% 78%, #000 78% 100% );
	mask-image: linear-gradient( to bottom, #000 0 22%, transparent 22% 78%, #000 78% 100% );
}

.cc-style-target.is-hover .cc-secondary .cc-shape {
	animation: cc-spin 2.4s linear infinite;
}

@keyframes cc-spin {
	from {
		transform: rotate( 0deg );
	}
	to {
		transform: rotate( 360deg );
	}
}

/* -------------------------------------------------------------------------
 * Style 10 - Spark
 * ---------------------------------------------------------------------- */

.cc-style-spark .cc-primary {
	--cc-el-size: calc( var( --cc-size, 24px ) * 0.45 );
}

.cc-style-spark .cc-primary .cc-shape {
	background-color: var( --cc-primary-color, #000 );
	box-shadow: 0 0 calc( var( --cc-size, 24px ) * 0.4 ) rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.6 );
}

.cc-spark {
	width: var( --cc-spark-size, 6px );
	height: var( --cc-spark-size, 6px );
	margin: calc( var( --cc-spark-size, 6px ) / -2 );
	border-radius: 50%;
	background-color: var( --cc-primary-color, #000 );
	will-change: transform, opacity;
	animation: cc-spark-twinkle 1.6s ease-in-out infinite;
}

@keyframes cc-spark-twinkle {
	0%,
	100% {
		opacity: 0.25;
	}
	50% {
		opacity: 0.9;
	}
}

/* -------------------------------------------------------------------------
 * Hover states
 * ---------------------------------------------------------------------- */

.cc-root.is-hover .cc-primary .cc-inner {
	--cc-scale: 1.5;
}

.cc-root.is-hover .cc-secondary .cc-inner {
	--cc-scale: 1.25;
}

/* Effect overrides win over the per-style default above. */
.cc-root.cc-effect-hover-expand.is-hover .cc-primary .cc-inner,
.cc-root.cc-effect-hover-expand.is-hover .cc-secondary .cc-inner {
	--cc-scale: var( --cc-hover-scale, 2 );
}

.cc-root.cc-effect-hover-shrink.is-hover .cc-primary .cc-inner,
.cc-root.cc-effect-hover-shrink.is-hover .cc-secondary .cc-inner {
	--cc-scale: var( --cc-shrink-scale, 0.5 );
}

.cc-root.cc-effect-magnetic.is-hover .cc-primary .cc-inner {
	--cc-scale: 1.7;
}

/* -------------------------------------------------------------------------
 * Effect - Trail
 * ---------------------------------------------------------------------- */

.cc-trail-item {
	width: var( --cc-trail-size, 12px );
	height: var( --cc-trail-size, 12px );
	margin: calc( var( --cc-trail-size, 12px ) / -2 );
	border-radius: 50%;
	background-color: var( --cc-primary-color, #000 );
	will-change: transform;
	transform: translate3d( -200px, -200px, 0 );
}

/* -------------------------------------------------------------------------
 * Effect - Glow Pulse
 * ---------------------------------------------------------------------- */

.cc-root.cc-effect-glow-pulse .cc-primary .cc-shape {
	animation: cc-pulse 1.8s ease-in-out infinite;
}

@keyframes cc-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.5 );
	}
	50% {
		box-shadow:
			0 0 var( --cc-glow, 18px ) rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.85 ),
			0 0 calc( var( --cc-glow, 18px ) * 2.2 ) rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.4 );
	}
}

/* The blob keeps its morph animation, so pulse the wrapper instead. */
.cc-root.cc-effect-glow-pulse.cc-style-blob .cc-primary .cc-shape {
	animation: cc-blob 5s ease-in-out infinite, cc-pulse 1.8s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
 * Effect - Click Ripple
 * ---------------------------------------------------------------------- */

.cc-ripple {
	width: var( --cc-ripple-size, 40px );
	height: var( --cc-ripple-size, 40px );
	margin: calc( var( --cc-ripple-size, 40px ) / -2 );
	border-radius: 50%;
	border: 2px solid var( --cc-primary-color, #000 );
	background-color: rgba( var( --cc-color-rgb, 0, 0, 0 ), 0.08 );
	will-change: transform, opacity;
	animation: cc-ripple var( --cc-ripple-duration, 500ms ) cubic-bezier( 0.22, 1, 0.36, 1 ) forwards;
}

@keyframes cc-ripple {
	from {
		transform: scale( 0.2 );
		opacity: 0.7;
	}
	to {
		transform: scale( 1.6 );
		opacity: 0;
	}
}

/* -------------------------------------------------------------------------
 * Accessibility - reduced motion
 *
 * Movement smoothing is switched off in JavaScript as well; these rules
 * remove the decorative animations and the secondary elements.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	.cc-root,
	.cc-root * {
		animation: none !important;
		transition: none !important;
	}

	.cc-trail,
	.cc-sparks {
		display: none !important;
	}
}

.cc-root.is-reduced,
.cc-root.is-reduced * {
	animation: none !important;
	transition: none !important;
}

.cc-root.is-reduced .cc-trail,
.cc-root.is-reduced .cc-sparks {
	display: none !important;
}