/**
 * GranpaiMotion Engine — front-end styles (Elementor edition).
 *
 * Sizing/positioning note: this widget behaves like any other Elementor
 * widget by default — a normal, in-flow block sized by its own Width/Height
 * controls (which generate a rule targeting `.elementor-element-{id}`, a
 * single-class selector). It does NOT force `position: absolute` on itself
 * by default.
 *
 * To use it as a full background layer behind other content in a Section or
 * Container, either turn on this widget's own "Full Background (Auto
 * Absolute)" switch (see `.granpai-motion-auto-bg` below -- it targets this
 * exact same `.elementor-element-{id}` element, so it behaves the same as
 * setting Position to Absolute with all offsets at 0), or use Elementor's
 * own native Advanced -> Position control directly, the same way you would
 * for any other widget. Either way, Elementor already handles establishing
 * the positioning context correctly; fighting that from our own CSS by
 * forcing it on *every* instance unconditionally is exactly what previously
 * caused the widget to ignore the chosen Position and to render at the
 * wrong size/offset (fixed in 2.4.0) -- the opt-in class below only ever
 * applies when the widget's own switch is explicitly turned on for that one
 * instance. The defaults below use `:where()` (zero specificity) so they
 * can never outrank Elementor's generated per-instance rule, no matter
 * which stylesheet happens to print first. Do not add `!important` or a
 * higher-specificity selector for width/height here.
 */

:where(.elementor-widget-granpai_motion_bg) {
	width: 100%;
	height: 400px;
}

/*
 * Opt-in "Full Background (Auto Absolute)" switch
 * (`granpai_auto_absolute_bg` control, off by default) -- added to
 * {{WRAPPER}} via Granpai_Motion_Widget::before_render() only when that
 * instance's switch is on. Only sets position/inset; width and height stay
 * fully driven by this widget's own Dimensions controls above (set them to
 * 100% / 100% for this to actually cover the parent). Two classes (0,2,0)
 * so it reliably outranks the single-class per-instance width/height rule
 * on `position`/`inset` without touching the properties that rule owns.
 */
.elementor-widget-granpai_motion_bg.granpai-motion-auto-bg {
	position: absolute;
	inset: 0;
}

.elementor-widget-granpai_motion_bg > .elementor-widget-container {
	width: 100%;
	height: 100%;
	position: relative;
	/*
	 * Elementor's own "Border Radius" control (Advanced tab) sets
	 * `border-radius` on this exact element, but never adds `overflow:
	 * hidden` itself for a custom widget — that's left to the widget to
	 * opt into. Without it, the canvas underneath (a plain rectangle,
	 * filling 100% width/height) simply pokes out past the now-rounded
	 * corners of this box instead of being clipped to them, which is why
	 * setting a border radius appeared to do nothing. `border-radius:
	 * inherit` plus `overflow: hidden` here means whatever radius gets set
	 * on this element is the shape everything inside actually gets cut to.
	 */
	border-radius: inherit;
	overflow: hidden;
}

.granpai-motion-wrapper {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
}

.granpai-motion-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.granpai-motion-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Glassmorphism presets (Glass Squares / Glass Triangles): the frosted
 * look blurs whatever actually sits behind this widget on the page —
 * toggled by the engine (see GranpaiMotionEngine.GLASS_PRESETS) so it
 * always matches the currently selected preset. */
.granpai-motion-wrapper.granpai-motion-glass {
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}