.wp-block-cni-blocks-background-design-plus { position: relative; isolation: isolate; overflow: hidden; min-height: var(--cni-bg2-min-height, 0); padding: var(--cni-bg2-padding-y, 88px) var(--cni-bg2-padding-x, 32px); border-radius: var(--cni-bg2-radius, 0); background: var(--cni-bg2-base, #f8fafc); box-sizing: border-box; }
.wp-block-cni-blocks-background-design-plus > .cni-bg2__canvas { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.wp-block-cni-blocks-background-design-plus > .cni-bg2__inner { position: relative; z-index: 2; width: min(100%, var(--cni-bg2-content-width, 1200px)); min-height: inherit; margin: 0 auto; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-align="center"] > .cni-bg2__inner { text-align: center; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-align="right"] > .cni-bg2__inner { text-align: right; }
.cni-bg2__mesh, .cni-bg2__fluid, .cni-bg2__polygon, .cni-bg2__confetti { position: absolute; inset: -16%; }
.cni-bg2__mesh { background: radial-gradient(ellipse var(--cni-bg2-mesh-size, 65%) var(--cni-bg2-mesh-size, 65%) at var(--cni-bg2-x1, 20%) var(--cni-bg2-y1, 18%), var(--cni-bg2-color-1, transparent) 0%, transparent 67%), radial-gradient(ellipse var(--cni-bg2-mesh-size, 65%) var(--cni-bg2-mesh-size, 65%) at var(--cni-bg2-x2, 85%) var(--cni-bg2-y2, 24%), var(--cni-bg2-color-2, transparent) 0%, transparent 67%), radial-gradient(ellipse var(--cni-bg2-mesh-size, 65%) var(--cni-bg2-mesh-size, 65%) at var(--cni-bg2-x3, 54%) var(--cni-bg2-y3, 84%), var(--cni-bg2-color-3, transparent) 0%, transparent 67%), radial-gradient(ellipse var(--cni-bg2-mesh-size, 60%) var(--cni-bg2-mesh-size, 60%) at var(--cni-bg2-x4, 16%) var(--cni-bg2-y4, 77%), var(--cni-bg2-color-4, transparent) 0%, transparent 67%), radial-gradient(ellipse var(--cni-bg2-mesh-size, 58%) var(--cni-bg2-mesh-size, 58%) at var(--cni-bg2-x5, 84%) var(--cni-bg2-y5, 73%), var(--cni-bg2-color-5, transparent) 0%, transparent 67%); filter: blur(var(--cni-bg2-blur, 28px)) saturate(1.14); opacity: var(--cni-bg2-opacity, .62); }
.cni-bg2__fluid { filter: blur(var(--cni-bg2-soft-blur, 15px)); opacity: var(--cni-bg2-opacity, .7); }
.cni-bg2__fluid-shape { position: absolute; display: block; width: var(--size); aspect-ratio: 1; border-radius: var(--radius); background: var(--color); transform: translate(-50%, -50%) rotate(var(--rotation)); }
.cni-bg2__polygon-item { position: absolute; display: block; width: var(--size); aspect-ratio: 1; background: var(--color); opacity: var(--alpha); transform: translate(-50%, -50%) rotate(var(--rotation)); clip-path: var(--clip); }
.cni-bg2__confetti-item { position: absolute; display: block; width: var(--width); height: var(--height); border-radius: var(--radius); background: var(--color); opacity: var(--alpha); transform: translate(-50%, -50%) rotate(var(--rotation)); }
.cni-bg2__spots, .cni-bg2__bokeh, .cni-bg2__metaballs, .cni-bg2__rings, .cni-bg2__pattern { position: absolute; inset: -12%; overflow: hidden; }
.cni-bg2__spot-item, .cni-bg2__ring-item { position: absolute; display: block; left: 50%; top: 50%; width: var(--size); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--rotation, 0deg)); }
.cni-bg2__spots .cni-bg2__spot-item { border-radius: var(--radius); background: var(--color); filter: blur(var(--cni-bg2-blur, 28px)); opacity: var(--alpha); }
.cni-bg2__bokeh .cni-bg2__spot-item { border: var(--stroke, 1px) solid var(--color); border-radius: var(--radius); box-shadow: 0 0 18px var(--color); opacity: var(--alpha); }
.cni-bg2__metaballs { filter: blur(var(--cni-bg2-soft-blur, 15px)) contrast(1.38) saturate(1.2); opacity: var(--cni-bg2-opacity, .65); }
.cni-bg2__metaballs .cni-bg2__spot-item { border-radius: 50%; background: var(--color); opacity: .9; }
.cni-bg2__ring-item { border: var(--stroke, 1px) solid var(--color); border-radius: 50%; opacity: var(--alpha); }
.cni-bg2__ring-item--dot { border: 0; background: var(--color); opacity: var(--alpha); }
.cni-bg2__pattern { background-position: 0 0; background-repeat: repeat; }
.cni-bg2__design { position: absolute; inset: 0; pointer-events: none; }
.cni-bg2__design-layer { position: absolute; inset: -4%; display: block; background-size: 100% 100%; background-repeat: no-repeat; }
.cni-bg2__texture { position: absolute; inset: 0; display: block; background-size: 160px 160px; background-repeat: repeat; pointer-events: none; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__design-layer { animation: cni-bg2-design-breathe var(--cni-bg2-duration, 18s) ease-in-out infinite; animation-direction: var(--layer-direction, alternate); animation-delay: var(--layer-delay, 0s); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__design-layer { animation: cni-bg2-design-flow var(--cni-bg2-duration, 18s) ease-in-out infinite; animation-direction: var(--layer-direction, alternate); animation-delay: var(--layer-delay, 0s); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__design-layer--pixel-wave { animation-name: cni-bg2-cluster-float; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__design-layer--particle-wave { animation-name: cni-bg2-particle-flow; }
/* Pixel/viewport distances are derived at render time from the existing saved
 * strength. A tiny object must not shrink its own travel to a fraction of a px.
 * Overscan + a constant scale keep moving full-canvas illustrations edge-safe. */
@keyframes cni-bg2-design-breathe { from { transform: translateY(calc(var(--cni-bg2-motion-distance, 44px) * -.45)) scale(1.12); } to { transform: translateY(calc(var(--cni-bg2-motion-distance, 44px) * .45)) scale(1.12); } }
@keyframes cni-bg2-design-flow { from { transform: translateX(calc(var(--cni-bg2-motion-distance, 44px) * -1.1)) scale(1.12); } to { transform: translateX(calc(var(--cni-bg2-motion-distance, 44px) * 1.1)) scale(1.12); } }
@keyframes cni-bg2-cluster-float { from { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * -.4), calc(var(--cni-bg2-motion-distance, 44px) * .3)) scale(1.12); } to { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * .7), calc(var(--cni-bg2-motion-distance, 44px) * -.7)) scale(1.12); } }
@keyframes cni-bg2-particle-flow { from { transform: translateX(calc(var(--cni-bg2-motion-distance, 44px) * -.8)) scale(1.12, 1.1); } to { transform: translateX(calc(var(--cni-bg2-motion-distance, 44px) * .8)) scale(1.12, calc(1.12 + var(--cni-bg2-motion-scale, .025))); } }
@media (max-width: 781px) { .wp-block-cni-blocks-background-design-plus[data-cni-bg2-mobile-motion="false"] .cni-bg2__design-layer { animation: none; } }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-direction="left"] .cni-bg2__pattern--flow-lines { transform: scaleX(-1); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-direction="down"] .cni-bg2__pattern--flow-lines { transform: rotate(90deg) scale(1.3); }
.cni-bg2__free-images { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.cni-bg2__free-images--front { z-index: 3; }
.cni-bg2__free-image { position: absolute; left: var(--x); top: var(--y); width: var(--width); line-height: 0; transform: translate(-50%, -50%); pointer-events: none; }
.cni-bg2__free-image[data-cni-bg2-pc-visible="false"] { display: none; }
.cni-bg2__free-image-visual { display: block; opacity: var(--opacity, 1); transform: rotate(var(--rotation, 0deg)) scaleX(var(--flip-x, 1)); }
.cni-bg2__free-image img { display: block; width: 100%; height: auto; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__mesh, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__mesh { animation: cni-bg2-mesh-flow var(--cni-bg2-duration, 18s) ease-in-out infinite alternate; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__fluid-shape, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__fluid-shape { animation: cni-bg2-fluid-drift var(--cni-bg2-duration, 18s) ease-in-out infinite alternate; animation-delay: var(--delay); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__polygon-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__polygon-item { animation: cni-bg2-polygon-float var(--cni-bg2-duration, 18s) ease-in-out infinite alternate; animation-delay: var(--delay); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__confetti-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__confetti-item { animation: cni-bg2-confetti-float var(--cni-bg2-duration, 18s) ease-in-out infinite alternate; animation-delay: var(--delay); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__spots .cni-bg2__spot-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__spots .cni-bg2__spot-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__bokeh .cni-bg2__spot-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__bokeh .cni-bg2__spot-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__metaballs .cni-bg2__spot-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__metaballs .cni-bg2__spot-item { animation: cni-bg2-spot-drift var(--cni-bg2-duration, 18s) ease-in-out infinite alternate; animation-delay: var(--delay); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__ring-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__ring-item { animation: cni-bg2-ring-ripple var(--cni-bg2-duration, 18s) ease-out infinite; animation-delay: var(--delay); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__ring-item--dot, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__ring-item--dot { animation-name: cni-bg2-spot-drift; animation-timing-function: ease-in-out; animation-direction: alternate; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__pattern, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern { animation: cni-bg2-pattern-flow var(--cni-bg2-duration, 18s) linear infinite; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__pattern--pixel-wave, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern--pixel-wave { animation-name: cni-bg2-pixel-wave; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__pattern--waves, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern--waves { animation-name: cni-bg2-wave-phase; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__pattern--halftone { animation-name: cni-bg2-halftone-breathe; animation-timing-function: ease-in-out; animation-direction: alternate; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern--flow-lines { animation-name: cni-bg2-line-stream; }
/* Gentle is a local breathing/floating treatment.  Flow is deliberately
 * directional, so the two choices remain legible after only a few seconds. */
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__mesh { animation-name: cni-bg2-mesh-breathe; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__polygon-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__confetti-item { animation-name: cni-bg2-gentle-float; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__spots .cni-bg2__spot-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__bokeh .cni-bg2__spot-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__metaballs .cni-bg2__spot-item { animation-name: cni-bg2-gentle-float; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__pattern { animation-name: cni-bg2-pattern-breathe; animation-timing-function: ease-in-out; animation-direction: alternate; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__confetti-item { animation-name: cni-bg2-confetti-bob; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__fluid-shape { animation-name: cni-bg2-fluid-breathe; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__bokeh .cni-bg2__spot-item { animation-name: cni-bg2-bokeh-glow; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__ring-item { animation-name: cni-bg2-ring-breathe; animation-direction: alternate; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="gentle"] .cni-bg2__ring-item--dot { animation-name: cni-bg2-gentle-float; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__metaballs .cni-bg2__spot-item { animation-name: cni-bg2-metaball-drift; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern { animation-name: cni-bg2-pattern-drift; animation-timing-function: ease-in-out; animation-direction: alternate; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern[data-cni-bg2-repeat-motion="true"] { animation-name: cni-bg2-pattern-flow; animation-timing-function: linear; animation-direction: normal; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern--flow-lines { animation-name: cni-bg2-line-stream; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern--pixel-wave { animation-name: cni-bg2-pixel-wave; }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] .cni-bg2__pattern--waves { animation-name: cni-bg2-wave-phase; }
/* Speed labels describe a whole return trip, not a single half of it. */
.wp-block-cni-blocks-background-design-plus:is([data-cni-bg2-motion="gentle"], [data-cni-bg2-motion="flow"]) > .cni-bg2__canvas :is(.cni-bg2__mesh, .cni-bg2__fluid-shape, .cni-bg2__polygon-item, .cni-bg2__confetti-item, .cni-bg2__spot-item, .cni-bg2__ring-item, .cni-bg2__pattern, .cni-bg2__design-layer) { animation-duration: calc(var(--cni-bg2-duration, 18s) * .5); animation-delay: var(--cni-bg2-item-phase, calc(var(--cni-bg2-motion-phase, -4.5s) + var(--layer-delay, 0s))); }
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] > .cni-bg2__canvas .cni-bg2__ring-item:not(.cni-bg2__ring-item--dot),
.wp-block-cni-blocks-background-design-plus[data-cni-bg2-motion="flow"] > .cni-bg2__canvas .cni-bg2__pattern[data-cni-bg2-repeat-motion="true"] { animation-duration: var(--cni-bg2-duration, 18s); }
.wp-block-cni-blocks-background-design-plus:is([data-cni-bg2-motion="gentle"], [data-cni-bg2-motion="flow"]) > .cni-bg2__canvas .cni-bg2__pattern[data-cni-bg2-motion-overscan="true"] { inset: -12% !important; }
.cni-bg2__free-image[data-cni-bg2-image-motion="float"] .cni-bg2__free-image-visual { animation: cni-bg2-image-float 5s ease-in-out infinite alternate; }
.cni-bg2__free-image[data-cni-bg2-image-motion="pulse"] .cni-bg2__free-image-visual { animation: cni-bg2-image-pulse 3.5s ease-in-out infinite; }
@keyframes cni-bg2-mesh-flow { from { transform: translate3d(calc(var(--cni-bg2-motion-distance, 44px) * -1.8), calc(var(--cni-bg2-motion-distance, 44px) * .6), 0) scale(1.02); } to { transform: translate3d(calc(var(--cni-bg2-motion-distance, 44px) * 1.8), calc(var(--cni-bg2-motion-distance, 44px) * -.6), 0) scale(calc(1.04 + var(--cni-bg2-motion-scale, .025))); } }
@keyframes cni-bg2-mesh-breathe { from { transform: translate3d(calc(var(--cni-bg2-motion-distance, 44px) * -1), calc(var(--cni-bg2-motion-distance, 44px) * .4), 0) scale(calc(1 - var(--cni-bg2-motion-scale, .025))); } to { transform: translate3d(var(--cni-bg2-motion-distance, 44px), calc(var(--cni-bg2-motion-distance, 44px) * -.4), 0) scale(calc(1 + var(--cni-bg2-motion-scale, .025))); } }
@keyframes cni-bg2-gentle-float { from { transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px) * .65), calc(-50% + var(--cni-bg2-item-y, 44px) * .5)) rotate(calc(var(--rotation, 0deg) - var(--cni-bg2-motion-angle, 12deg) * .5)); } to { transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px) * .65), calc(-50% - var(--cni-bg2-item-y, 44px) * .5)) rotate(calc(var(--rotation, 0deg) + var(--cni-bg2-motion-angle, 12deg) * .5)); } }
@keyframes cni-bg2-confetti-bob { from { transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px) * .3), calc(-50% + var(--cni-bg2-item-y, 44px) * .7)) rotate(calc(var(--rotation, 0deg) - var(--cni-bg2-motion-angle, 12deg))); } to { transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px) * .6), calc(-50% - var(--cni-bg2-item-y, 44px))) rotate(calc(var(--rotation, 0deg) + var(--cni-bg2-motion-angle, 12deg))); } }
@keyframes cni-bg2-bokeh-glow { from { transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px) * .5), calc(-50% + var(--cni-bg2-item-y, 44px) * .65)) scale(calc(1 - var(--cni-bg2-motion-scale, .025))); opacity: var(--alpha-quiet, .4); } to { transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px) * .5), calc(-50% - var(--cni-bg2-item-y, 44px) * .65)) scale(calc(1 + var(--cni-bg2-motion-scale, .025))); opacity: var(--alpha); } }
@keyframes cni-bg2-fluid-breathe { from { border-radius: var(--radius); transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px) * .5), calc(-50% + var(--cni-bg2-item-y, 44px) * .4)) rotate(calc(var(--rotation) - var(--cni-bg2-motion-angle, 12deg) * .5)); } to { border-radius: 44% 56% 52% 48% / 55% 45% 55% 45%; transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px) * .5), calc(-50% - var(--cni-bg2-item-y, 44px) * .4)) rotate(calc(var(--rotation) + var(--cni-bg2-motion-angle, 12deg) * .5)); } }
@keyframes cni-bg2-fluid-drift { from { border-radius: var(--radius); transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px)), calc(-50% + var(--cni-bg2-item-y, 44px) * .7)) rotate(calc(var(--rotation) - var(--cni-bg2-motion-angle, 12deg))) scale(calc(1 - var(--cni-bg2-motion-scale, .025))); } to { border-radius: 34% 66% 35% 65% / 63% 35% 65% 37%; transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px)), calc(-50% - var(--cni-bg2-item-y, 44px) * .7)) rotate(calc(var(--rotation) + var(--cni-bg2-motion-angle, 12deg))) scale(calc(1 + var(--cni-bg2-motion-scale, .025))); } }
@keyframes cni-bg2-polygon-float { from { transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px)), calc(-50% + var(--cni-bg2-item-y, 44px))) rotate(calc(var(--rotation) - var(--cni-bg2-motion-angle, 12deg))); } to { transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px)), calc(-50% - var(--cni-bg2-item-y, 44px))) rotate(calc(var(--rotation) + var(--cni-bg2-motion-angle, 12deg))); } }
@keyframes cni-bg2-confetti-float { from { transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px) * .8), calc(-50% + var(--cni-bg2-item-y, 44px))) rotate(calc(var(--rotation) - var(--cni-bg2-motion-angle, 12deg) * 1.5)); } to { transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px) * .8), calc(-50% - var(--cni-bg2-item-y, 44px))) rotate(calc(var(--rotation) + var(--cni-bg2-motion-angle, 12deg) * 1.5)); } }
@keyframes cni-bg2-spot-drift { from { transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px)), calc(-50% + var(--cni-bg2-item-y, 44px) * .8)) scale(calc(1 - var(--cni-bg2-motion-scale, .025))); opacity: var(--alpha-quiet, .4); } to { transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px)), calc(-50% - var(--cni-bg2-item-y, 44px) * .8)) scale(calc(1 + var(--cni-bg2-motion-scale, .025) * 2)); opacity: var(--alpha); } }
@keyframes cni-bg2-metaball-drift { from { border-radius: 50%; transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px)), calc(-50% + var(--cni-bg2-item-y, 44px))) scale(calc(1 - var(--cni-bg2-motion-scale, .025) * 2)); } to { border-radius: 38% 62% 44% 56% / 61% 40% 60% 39%; transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px)), calc(-50% - var(--cni-bg2-item-y, 44px))) scale(calc(1 + var(--cni-bg2-motion-scale, .025) * 2)); } }
@keyframes cni-bg2-ring-ripple { 0% { transform: translate(-50%, -50%) scale(var(--cni-bg2-motion-ring-from, .7)); opacity: 0; } 28% { opacity: var(--alpha); } 100% { transform: translate(-50%, -50%) scale(var(--cni-bg2-motion-ring-to, 1.8)); opacity: 0; } }
@keyframes cni-bg2-ring-breathe { from { transform: translate(calc(-50% - var(--cni-bg2-item-x, 44px) * .3), -50%) scale(calc(1 - var(--cni-bg2-motion-scale, .025) * 3)); opacity: var(--alpha-quiet, .4); } to { transform: translate(calc(-50% + var(--cni-bg2-item-x, 44px) * .3), -50%) scale(calc(1 + var(--cni-bg2-motion-scale, .025) * 5)); opacity: var(--alpha); } }
@keyframes cni-bg2-pattern-flow { from { background-position: 0 0; } to { background-position: var(--cni-bg2-pattern-x, 150px) var(--cni-bg2-pattern-y, 70px); } }
@keyframes cni-bg2-pattern-drift { from { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * -.55), calc(var(--cni-bg2-motion-distance, 44px) * .3)); } to { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * .55), calc(var(--cni-bg2-motion-distance, 44px) * -.3)); } }
@keyframes cni-bg2-pixel-wave { from { background-position: 0 0; } to { background-position: 260px 0; } }
@keyframes cni-bg2-wave-phase { from { background-position: 0 0; } to { background-position: 310px 0; } }
@keyframes cni-bg2-halftone-breathe { from { transform: translateX(calc(var(--cni-bg2-motion-distance, 44px) * -.5)); } to { transform: translateX(calc(var(--cni-bg2-motion-distance, 44px) * .5)); } }
@keyframes cni-bg2-line-stream { from { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * -.8), calc(var(--cni-bg2-motion-distance, 44px) * .2)); } to { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * .8), calc(var(--cni-bg2-motion-distance, 44px) * -.2)); } }
@keyframes cni-bg2-pattern-breathe { from { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * -.35), calc(var(--cni-bg2-motion-distance, 44px) * .25)) scale(calc(1 - var(--cni-bg2-motion-scale, .025))); } to { transform: translate(calc(var(--cni-bg2-motion-distance, 44px) * .35), calc(var(--cni-bg2-motion-distance, 44px) * -.25)) scale(calc(1 + var(--cni-bg2-motion-scale, .025))); } }
@keyframes cni-bg2-image-float { from { transform: rotate(var(--rotation, 0deg)) scaleX(var(--flip-x, 1)) translateY(-7px); } to { transform: rotate(var(--rotation, 0deg)) scaleX(var(--flip-x, 1)) translateY(7px); } }
@keyframes cni-bg2-image-pulse { 0%,100% { opacity: var(--opacity, 1); transform: rotate(var(--rotation, 0deg)) scaleX(var(--flip-x, 1)) scale(1); } 50% { opacity: var(--pulse-opacity, .68); transform: rotate(var(--rotation, 0deg)) scaleX(var(--flip-x, 1)) scale(1.045); } }
@media (max-width: 781px) { .wp-block-cni-blocks-background-design-plus { padding: var(--cni-bg2-padding-y-mobile, 56px) var(--cni-bg2-padding-x-mobile, 24px); } .wp-block-cni-blocks-background-design-plus[data-cni-bg2-mobile-motion="false"] .cni-bg2__mesh, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-mobile-motion="false"] .cni-bg2__fluid-shape, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-mobile-motion="false"] .cni-bg2__polygon-item, .wp-block-cni-blocks-background-design-plus[data-cni-bg2-mobile-motion="false"] .cni-bg2__confetti-item { animation: none; } .cni-bg2__free-image { left: var(--mobile-x, var(--x)); top: var(--mobile-y, var(--y)); width: var(--mobile-width, var(--width)); } .cni-bg2__free-image[data-cni-bg2-mobile-visible="false"] { display: none; } }
@media (max-width: 781px) { .wp-block-cni-blocks-background-design-plus[data-cni-bg2-mobile-motion="false"] > .cni-bg2__canvas * { animation: none !important; } }
@media (min-width: 782px) and (max-width: 1024px) { .wp-block-cni-blocks-background-design-plus { padding: var(--cni-bg2-padding-y-tablet, 56px) var(--cni-bg2-padding-x-tablet, 24px); } .cni-bg2__free-image { left: var(--tablet-x, var(--x)); top: var(--tablet-y, var(--y)); width: var(--tablet-width, var(--width)); } .cni-bg2__free-image[data-cni-bg2-tablet-visible="false"] { display: none; } }
@media (min-width: 782px) { .wp-block-cni-blocks-background-design-plus.cni-bg2--fixed-background { overflow: clip; } .wp-block-cni-blocks-background-design-plus.cni-bg2--fixed-background > .cni-bg2__canvas { position: sticky; inset: auto; top: 0; width: 100%; height: 100vh; margin-bottom: -100vh; } }
@media (prefers-reduced-motion: reduce) { .wp-block-cni-blocks-background-design-plus *, .wp-block-cni-blocks-background-design-plus *::before, .wp-block-cni-blocks-background-design-plus *::after { animation: none !important; } }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus .cni-bg2__free-images { pointer-events: none; }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus .cni-bg2__free-image { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus .cni-bg2__free-image:active { cursor: grabbing; }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus .cni-bg2__free-image.is-selected { outline: 2px solid #2271b1; outline-offset: 4px; }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="pc"] .cni-bg2__free-image { left: var(--x) !important; top: var(--y) !important; width: var(--width) !important; }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="tablet"] .cni-bg2__free-image { left: var(--tablet-x, var(--x)) !important; top: var(--tablet-y, var(--y)) !important; width: var(--tablet-width, var(--width)) !important; }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="mobile"] .cni-bg2__free-image { left: var(--mobile-x, var(--tablet-x, var(--x))) !important; top: var(--mobile-y, var(--tablet-y, var(--y))) !important; width: var(--mobile-width, var(--tablet-width, var(--width))) !important; }

/* New/edited responsive images match Outer+'s PC -> Tablet -> Mobile cascade.
 * The opt-in attribute keeps unedited legacy images and saved markup intact. */
@media (max-width: 781px) {
	.cni-bg2__free-image[data-cni-bg2-responsive-image="true"] { left: var(--mobile-x, var(--tablet-x, var(--x))); top: var(--mobile-y, var(--tablet-y, var(--y))); width: var(--mobile-width, var(--tablet-width, var(--width))); }
	.cni-bg2__free-image[data-cni-bg2-responsive-image="true"][data-cni-bg2-mobile-visible="true"] { display: block; }
}
@media (min-width: 782px) and (max-width: 1023px) {
	.cni-bg2__free-image[data-cni-bg2-responsive-image="true"][data-cni-bg2-tablet-visible="true"] { display: block; }
}
@media (min-width: 1024px) {
	.cni-bg2__free-image[data-cni-bg2-responsive-image="true"] { left: var(--x); top: var(--y); width: var(--width); }
	.cni-bg2__free-image[data-cni-bg2-responsive-image="true"][data-cni-bg2-pc-visible="true"] { display: block; }
	.cni-bg2__free-image[data-cni-bg2-responsive-image="true"][data-cni-bg2-pc-visible="false"] { display: none; }
}
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="pc"] > .cni-bg2__free-images > .cni-bg2__free-image[data-cni-bg2-pc-visible="false"],
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="tablet"] > .cni-bg2__free-images > .cni-bg2__free-image[data-cni-bg2-tablet-visible="false"],
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="mobile"] > .cni-bg2__free-images > .cni-bg2__free-image[data-cni-bg2-mobile-visible="false"] { display: none !important; }
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="pc"] > .cni-bg2__free-images > .cni-bg2__free-image[data-cni-bg2-pc-visible="true"],
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="tablet"] > .cni-bg2__free-images > .cni-bg2__free-image[data-cni-bg2-tablet-visible="true"],
.editor-styles-wrapper .wp-block-cni-blocks-background-design-plus[data-cni-bg2-image-editor-device="mobile"] > .cni-bg2__free-images > .cni-bg2__free-image[data-cni-bg2-mobile-visible="true"] { display: block !important; }
.cni-bg2__image-device-tabs { display: flex; margin: 8px 0 12px; }
.cni-bg2__image-list { display: grid; gap: 4px; margin: 12px 0; }
.cni-bg2__image-list .components-button { justify-content: flex-start; text-align: left; }
.cni-bg2__image-settings { margin-top: 16px; padding-top: 16px; border-top: 1px solid #dcdcde; }
.cni-bg2__image-preview { display: block; width: 100%; max-height: 180px; margin: 0 0 12px; object-fit: contain; background: #f6f7f7; }
.cni-bg2__image-picker-label { margin: 16px 0 8px; font-weight: 600; }
.cni-bg2__image-picker { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 1.6; overflow: hidden; border: 1px solid #8c8f94; background: #f6f7f7; cursor: crosshair; touch-action: none; }
.cni-bg2__image-picker-boundary { position: absolute; left: 18.75%; top: 18.75%; width: 62.5%; height: 62.5%; border: 1px dashed #2271b1; background: rgba(34,113,177,.06); pointer-events: none; }
.cni-bg2__image-picker-dot { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #2271b1; box-shadow: 0 0 0 1px #135e96; transform: translate(-50%, -50%); pointer-events: none; }
.cni-bg2__image-width-control { display: grid; grid-template-columns: minmax(0,1fr) 76px; column-gap: 10px; align-items: end; margin: 16px 0; }
.cni-bg2__image-width-label { grid-column: 1 / -1; margin: 0 0 2px; font-weight: 600; }
.cni-bg2__image-width-slider, .cni-bg2__image-width-number { min-width: 0; margin: 0 !important; }
.cni-bg2__image-width-slider .components-base-control__field, .cni-bg2__image-width-number .components-base-control__field { margin-bottom: 0 !important; }