/**
 * Wedwebs Scratch Pad
 *
 * The widget is an overlay: it leaves the flow and covers the padding box of
 * the Container it sits in. The Container owns the frame (border, radius,
 * shadow, clip, mask) and whatever it holds is what gets uncovered.
 *
 *     --ww-scratch-base    surface colour (#D6D0C4)
 *     --ww-scratch-spark   sparkle colour (#FFFFFF)
 *     --ww-scratch-c1..c4  confetti colours
 *     --ww-scratch-z       stacking order inside the Container (1)
 *
 * State classes on .ww-scratch, in order:
 * is-ready > is-touched > is-clearing > is-done.
 */

.elementor-element.elementor-widget-wedwebs-scratch-pad {
	position: absolute;
	inset: 0;
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
	/* Below 2 on purpose, so a Silhouette Frame's lines stay on top. */
	z-index: var(--ww-scratch-z, 1);
	/* The box itself never takes a tap: once the surface is gone, links and
	   buttons underneath have to work. Only the canvas listens. */
	pointer-events: none;
}

.e-con > .elementor-widget-wedwebs-scratch-pad,
.elementor-widget-wedwebs-scratch-pad > .elementor-widget-container {
	border-radius: inherit;
}

.ww-scratch {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Until the script measures the Container and writes the exact inner
	   radius inline. */
	border-radius: inherit;
	/* Stand-in for the canvas, so the content underneath is covered from the
	   first painted frame. An image surface adds its own inline background. */
	background-color: var(--ww-scratch-base, #D6D0C4);
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.ww-scratch.is-ready {
	background: none !important;
}

.ww-scratch:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -5px;
}

.ww-scratch__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	pointer-events: auto;
	/* A finger on the surface scratches; it does not scroll the page. */
	touch-action: none;
	transition: opacity 650ms ease;
}

.ww-scratch__shade {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	transition: opacity 650ms ease;
}

.ww-scratch__text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em 1.5em;
	color: #3A3A3A;
	font-size: 12px;
	letter-spacing: 0.3em;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity 450ms ease;
}

.ww-scratch.is-touched .ww-scratch__text,
.ww-scratch.is-clearing .ww-scratch__canvas,
.ww-scratch.is-clearing .ww-scratch__shade {
	opacity: 0;
}

.ww-scratch.is-clearing .ww-scratch__canvas {
	pointer-events: none;
}

.ww-scratch.is-done {
	display: none;
}

/* ---------- effects layer ----------
 *
 * One canvas over the viewport, shared by every pad on the page. The script
 * creates it for the first particle and removes it when the last one dies.
 */

.ww-scratch-fx {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---------- revealed elements ----------
 *
 * ww-scratch-reveal keeps its place in the layout, so nothing around it
 * moves when it appears. That matters above the pad: an element that took
 * space only on reveal would push the pad out from under the guest's finger.
 *
 * The shown state is simply this rule no longer matching, so the element
 * returns to whatever opacity and position the author gave it.
 *
 * Elementor's colour sampler drops elementor-editor-active while it is
 * picking, so that state is excluded by its own class.
 */

body:not(.elementor-editor-active):not(.e-ui-state--elements-color-picker-color-picking__on) .ww-scratch-reveal:not(.ww-scratch-shown) {
	visibility: hidden;
	opacity: 0;
	translate: 0 var(--ww-scratch-shift, 0px);
}

/*
 * Only for the length of the reveal. Left in place it would replace the
 * element's own hover transitions for good.
 */
.ww-scratch-reveal.ww-scratch-showing {
	transition:
		opacity 800ms ease var(--ww-scratch-delay, 0ms),
		translate 800ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--ww-scratch-delay, 0ms),
		visibility 0s linear var(--ww-scratch-delay, 0ms) !important;
}

/*
 * ww-scratch-reveal-flow is out of the layout until revealed. Elementor
 * starts an entrance animation when its element comes into view, and an
 * element that is display: none never does, so the animation and its delay
 * wait for the reveal instead of playing unseen behind the surface.
 */
body:not(.elementor-editor-active):not(.e-ui-state--elements-color-picker-color-picking__on) .ww-scratch-reveal-flow:not(.ww-scratch-shown) {
	display: none !important;
}

/* Stands aside when the element has an Elementor entrance animation of its own. */
.ww-scratch-reveal-flow.ww-scratch-showing:not(.elementor-invisible):not(.animated) {
	animation: ww-scratch-in 800ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--ww-scratch-delay, 0ms) both;
}

@keyframes ww-scratch-in {
	from {
		opacity: 0;
		translate: 0 var(--ww-scratch-shift, 0px);
	}
}

/* ---------- editor ----------
 *
 * While editing, the surface never takes a click, so the widgets underneath
 * stay selectable. The tag is the one clickable part of the pad.
 */

.ww-scratch__tag {
	position: absolute;
	top: 6px;
	left: 50%;
	z-index: 2;
	display: none;
	padding: 3px 8px;
	border-radius: 3px;
	background: #1F2124;
	color: #FFFFFF;
	font: 500 10px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transform: translateX(-50%);
	cursor: pointer;
}

body.elementor-editor-active .ww-scratch__tag {
	display: block;
	pointer-events: auto;
}

body.elementor-editor-active .ww-scratch__canvas {
	pointer-events: none;
}

body.elementor-editor-active .elementor-widget-wedwebs-scratch-pad > .elementor-element-overlay {
	pointer-events: auto;
}

body.elementor-editor-active .ww-scratch-edit-peek .ww-scratch,
body.elementor-editor-active .ww-scratch-edit-off .ww-scratch {
	background: none !important;
}

body.elementor-editor-active .ww-scratch-edit-peek .ww-scratch > :not(.ww-scratch__tag) {
	opacity: 0.35;
}

body.elementor-editor-active .ww-scratch-edit-off .ww-scratch > :not(.ww-scratch__tag) {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.ww-scratch__canvas,
	.ww-scratch__shade,
	.ww-scratch__text {
		transition-duration: 1ms;
	}
}