/**
 * Doc Aura — DA Motion Effects runtime stylesheet.
 *
 * Everything here is driven by classes and custom properties that PHP puts on
 * the element wrapper, so the CSS-only tools (preset, entrance, loop, hover)
 * cost nothing at runtime. The scroll, mouse and sticky tools only need the
 * base rules from this file; their maths lives in assets/js/motion-effects.js.
 *
 * Naming: dae-entrance-*, dae-loop-*, dae-hover-*, dae-preset-*, dae-sticky-*,
 * dae-stuck-*.
 *
 * Two conventions run through the whole file:
 *
 * - Every distance, angle and scale is multiplied by an intensity multiplier
 *   (--dae-entrance-travel, --dae-loop-amount, --dae-hover-amount). It defaults
 *   to 1, so a slider left alone leaves the hand-tuned shape exactly as it was.
 * - Timing functions come from --dae-*-ease with the effect's own curve as the
 *   fallback. PHP only prints the property when the user picks a curve, which
 *   is what lets the per effect defaults below survive.
 */

/* --------------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------------- */

.dae-mfx.dae-has-transform {
	will-change: transform;
}

/* --------------------------------------------------------------------------
 * Entrance
 *
 * The element ships hidden and the runtime swaps in .dae-mfx-animate once it
 * enters the viewport. animation-fill-mode: both means the "from" frame is
 * already applied during the delay, so nothing flashes in before it plays.
 *
 * The animation to play is carried in --dae-entrance-name rather than named by
 * each class, because a custom property inherits: that one indirection is what
 * lets .dae-stagger hand the very same animation to the children instead.
 * ----------------------------------------------------------------------- */

.dae-mfx-invisible {
	visibility: hidden;
}

.dae-mfx-animate {
	visibility: visible;
	animation-name: var(--dae-entrance-name, none);
	animation-duration: var(--dae-entrance-duration, 800ms);
	animation-delay: var(--dae-entrance-delay, 0ms);
	animation-fill-mode: both;
	animation-timing-function: var(--dae-entrance-ease, cubic-bezier(.22, .61, .36, 1));
}

.dae-entrance-fade { --dae-entrance-name: dae-fade; }
.dae-entrance-fade-up { --dae-entrance-name: dae-fade-up; }
.dae-entrance-fade-down { --dae-entrance-name: dae-fade-down; }
.dae-entrance-fade-left { --dae-entrance-name: dae-fade-left; }
.dae-entrance-fade-right { --dae-entrance-name: dae-fade-right; }
.dae-entrance-zoom-in { --dae-entrance-name: dae-zoom-in; }
.dae-entrance-zoom-out { --dae-entrance-name: dae-zoom-out; }
.dae-entrance-zoom-up { --dae-entrance-name: dae-zoom-up; }
.dae-entrance-slide-up { --dae-entrance-name: dae-slide-up; }
.dae-entrance-slide-down { --dae-entrance-name: dae-slide-down; }
.dae-entrance-slide-left { --dae-entrance-name: dae-slide-left; }
.dae-entrance-slide-right { --dae-entrance-name: dae-slide-right; }
.dae-entrance-flip-x { --dae-entrance-name: dae-flip-x; }
.dae-entrance-flip-y { --dae-entrance-name: dae-flip-y; }
.dae-entrance-bounce-in { --dae-entrance-name: dae-bounce-in; --dae-entrance-ease: ease-out; }
.dae-entrance-back-up { --dae-entrance-name: dae-back-up; }
.dae-entrance-blur-in { --dae-entrance-name: dae-blur-in; }
.dae-entrance-skew-in { --dae-entrance-name: dae-skew-in; }
.dae-entrance-roll-in { --dae-entrance-name: dae-roll-in; }
.dae-entrance-pop-in { --dae-entrance-name: dae-pop-in; --dae-entrance-ease: cubic-bezier(.34, 1.56, .64, 1); }
.dae-entrance-drop-in { --dae-entrance-name: dae-drop-in; --dae-entrance-ease: cubic-bezier(.28, 1.4, .5, 1); }
.dae-entrance-swing-in { --dae-entrance-name: dae-swing-in; }
.dae-entrance-reveal-up { --dae-entrance-name: dae-reveal-up; }
.dae-entrance-reveal-down { --dae-entrance-name: dae-reveal-down; }
.dae-entrance-reveal-left { --dae-entrance-name: dae-reveal-left; }
.dae-entrance-reveal-right { --dae-entrance-name: dae-reveal-right; }

.dae-entrance-flip-x.dae-mfx-animate,
.dae-entrance-flip-y.dae-mfx-animate,
.dae-entrance-flip-x.dae-stagger.dae-mfx-animate > *,
.dae-entrance-flip-y.dae-stagger.dae-mfx-animate > * {
	backface-visibility: hidden;
}

.dae-entrance-swing-in.dae-mfx-animate,
.dae-entrance-swing-in.dae-stagger.dae-mfx-animate > * {
	transform-origin: top center;
}

/* --------------------------------------------------------------------------
 * Stagger
 *
 * With a stagger step set the wrapper stops animating itself and hands the
 * animation to its direct children, each one a step later than the one before.
 * Twenty explicit steps, then everything past that shares the last one — long
 * enough for any real list, short enough to stay a fixed cost.
 * ----------------------------------------------------------------------- */

.dae-mfx-animate.dae-stagger {
	animation-name: none;
}

.dae-mfx-animate.dae-stagger > * {
	animation-name: var(--dae-entrance-name, none);
	animation-duration: var(--dae-entrance-duration, 800ms);
	animation-fill-mode: both;
	animation-timing-function: var(--dae-entrance-ease, cubic-bezier(.22, .61, .36, 1));
	animation-delay: calc(var(--dae-entrance-delay, 0ms) + 20 * var(--dae-stagger-step, 80ms));
}

.dae-mfx-animate.dae-stagger > *:nth-child(1) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 0 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(2) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 1 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(3) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 2 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(4) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 3 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(5) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 4 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(6) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 5 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(7) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 6 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(8) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 7 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(9) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 8 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(10) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 9 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(11) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 10 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(12) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 11 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(13) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 12 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(14) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 13 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(15) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 14 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(16) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 15 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(17) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 16 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(18) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 17 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(19) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 18 * var(--dae-stagger-step, 80ms)); }
.dae-mfx-animate.dae-stagger > *:nth-child(20) { animation-delay: calc(var(--dae-entrance-delay, 0ms) + 19 * var(--dae-stagger-step, 80ms)); }

/* --------------------------------------------------------------------------
 * Entrance keyframes
 * ----------------------------------------------------------------------- */

@keyframes dae-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dae-fade-up {
	from { opacity: 0; transform: translate3d(0, calc(40px * var(--dae-entrance-travel, 1)), 0); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-fade-down {
	from { opacity: 0; transform: translate3d(0, calc(-40px * var(--dae-entrance-travel, 1)), 0); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-fade-left {
	from { opacity: 0; transform: translate3d(calc(40px * var(--dae-entrance-travel, 1)), 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-fade-right {
	from { opacity: 0; transform: translate3d(calc(-40px * var(--dae-entrance-travel, 1)), 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-zoom-in {
	from { opacity: 0; transform: scale3d(calc(1 - .15 * var(--dae-entrance-travel, 1)), calc(1 - .15 * var(--dae-entrance-travel, 1)), 1); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-zoom-out {
	from { opacity: 0; transform: scale3d(calc(1 + .18 * var(--dae-entrance-travel, 1)), calc(1 + .18 * var(--dae-entrance-travel, 1)), 1); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-zoom-up {
	from {
		opacity: 0;
		transform: translate3d(0, calc(40px * var(--dae-entrance-travel, 1)), 0) scale3d(calc(1 - .15 * var(--dae-entrance-travel, 1)), calc(1 - .15 * var(--dae-entrance-travel, 1)), 1);
	}
	to { opacity: 1; transform: none; }
}

@keyframes dae-slide-up {
	from { transform: translate3d(0, calc(100% * var(--dae-entrance-travel, 1)), 0); }
	to { transform: none; }
}

@keyframes dae-slide-down {
	from { transform: translate3d(0, calc(-100% * var(--dae-entrance-travel, 1)), 0); }
	to { transform: none; }
}

@keyframes dae-slide-left {
	from { transform: translate3d(calc(100% * var(--dae-entrance-travel, 1)), 0, 0); }
	to { transform: none; }
}

@keyframes dae-slide-right {
	from { transform: translate3d(calc(-100% * var(--dae-entrance-travel, 1)), 0, 0); }
	to { transform: none; }
}

@keyframes dae-flip-x {
	from { opacity: 0; transform: perspective(1000px) rotateY(calc(-80deg * var(--dae-entrance-travel, 1))); }
	to { opacity: 1; transform: perspective(1000px) rotateY(0); }
}

@keyframes dae-flip-y {
	from { opacity: 0; transform: perspective(1000px) rotateX(calc(80deg * var(--dae-entrance-travel, 1))); }
	to { opacity: 1; transform: perspective(1000px) rotateX(0); }
}

@keyframes dae-bounce-in {
	0% { opacity: 0; transform: scale3d(.3, .3, 1); }
	40% { opacity: 1; transform: scale3d(calc(1 + .08 * var(--dae-entrance-travel, 1)), calc(1 + .08 * var(--dae-entrance-travel, 1)), 1); }
	65% { transform: scale3d(.96, .96, 1); }
	85% { transform: scale3d(1.02, 1.02, 1); }
	100% { transform: none; }
}

@keyframes dae-back-up {
	from { opacity: 0; transform: translate3d(0, calc(120px * var(--dae-entrance-travel, 1)), 0) scale3d(.72, .72, 1); }
	65% { opacity: 1; transform: translate3d(0, -6px, 0) scale3d(1.02, 1.02, 1); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-blur-in {
	from { opacity: 0; filter: blur(calc(14px * var(--dae-entrance-travel, 1))); transform: scale3d(1.04, 1.04, 1); }
	to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes dae-skew-in {
	from { opacity: 0; transform: translate3d(calc(60px * var(--dae-entrance-travel, 1)), 0, 0) skewX(calc(-14deg * var(--dae-entrance-travel, 1))); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-roll-in {
	from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate(calc(-120deg * var(--dae-entrance-travel, 1))); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-pop-in {
	from { opacity: 0; transform: scale3d(calc(1 - .6 * var(--dae-entrance-travel, 1)), calc(1 - .6 * var(--dae-entrance-travel, 1)), 1); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-drop-in {
	from { opacity: 0; transform: translate3d(0, calc(-140px * var(--dae-entrance-travel, 1)), 0); }
	to { opacity: 1; transform: none; }
}

@keyframes dae-swing-in {
	from { opacity: 0; transform: perspective(1000px) rotateX(calc(-95deg * var(--dae-entrance-travel, 1))); }
	to { opacity: 1; transform: perspective(1000px) rotateX(0); }
}

@keyframes dae-reveal-up {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes dae-reveal-down {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes dae-reveal-left {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes dae-reveal-right {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------------------
 * Loop
 *
 * .dae-loop-on is the gate: with an entrance animation set, the runtime only
 * adds it once the entrance has finished, so the two never share the shorthand.
 * Longhands throughout, so duration, delay, easing and direction can each be
 * driven by their own custom property.
 * ----------------------------------------------------------------------- */

.dae-loop-on {
	animation-duration: var(--dae-loop-duration, 3000ms);
	animation-delay: var(--dae-loop-delay, 0ms);
	animation-timing-function: var(--dae-loop-ease, ease-in-out);
	animation-direction: var(--dae-loop-direction, normal);
	animation-iteration-count: infinite;
	animation-fill-mode: none;
}

.dae-loop-pause:hover {
	animation-play-state: paused;
}

.dae-loop-on.dae-loop-float { animation-name: dae-loop-float; }
.dae-loop-on.dae-loop-sway { animation-name: dae-loop-sway; }
.dae-loop-on.dae-loop-pulse { animation-name: dae-loop-pulse; }
.dae-loop-on.dae-loop-heartbeat { animation-name: dae-loop-heartbeat; }
.dae-loop-on.dae-loop-swing { animation-name: dae-loop-swing; transform-origin: top center; }
.dae-loop-on.dae-loop-wobble { animation-name: dae-loop-wobble; }
.dae-loop-on.dae-loop-spin { animation-name: dae-loop-spin; }
.dae-loop-on.dae-loop-glow { animation-name: dae-loop-glow; }
.dae-loop-on.dae-loop-blink { animation-name: dae-loop-blink; }
.dae-loop-on.dae-loop-jelly { animation-name: dae-loop-jelly; }
.dae-loop-on.dae-loop-bounce { animation-name: dae-loop-bounce; }
.dae-loop-on.dae-loop-shake { animation-name: dae-loop-shake; }
.dae-loop-on.dae-loop-tada { animation-name: dae-loop-tada; }
.dae-loop-on.dae-loop-rubber { animation-name: dae-loop-rubber; }
.dae-loop-on.dae-loop-orbit { animation-name: dae-loop-orbit; }
.dae-loop-on.dae-loop-tilt { animation-name: dae-loop-tilt; }
.dae-loop-on.dae-loop-flip { animation-name: dae-loop-flip; backface-visibility: visible; }
.dae-loop-on.dae-loop-shimmer { animation-name: dae-loop-shimmer; }
.dae-loop-on.dae-loop-hue { animation-name: dae-loop-hue; }
.dae-loop-on.dae-loop-wave { animation-name: dae-loop-wave; transform-origin: bottom center; }

/* Curves that belong to the effect rather than to the panel default. */
.dae-loop-spin,
.dae-loop-hue,
.dae-loop-flip,
.dae-loop-orbit { --dae-loop-ease: linear; }

@keyframes dae-loop-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, calc(-14px * var(--dae-loop-amount, 1)), 0); }
}

@keyframes dae-loop-sway {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(calc(14px * var(--dae-loop-amount, 1)), 0, 0); }
}

@keyframes dae-loop-pulse {
	0%, 100% { transform: scale3d(1, 1, 1); }
	50% { transform: scale3d(calc(1 + .05 * var(--dae-loop-amount, 1)), calc(1 + .05 * var(--dae-loop-amount, 1)), 1); }
}

@keyframes dae-loop-heartbeat {
	0%, 60%, 100% { transform: scale3d(1, 1, 1); }
	15% { transform: scale3d(calc(1 + .12 * var(--dae-loop-amount, 1)), calc(1 + .12 * var(--dae-loop-amount, 1)), 1); }
	30% { transform: scale3d(1, 1, 1); }
	45% { transform: scale3d(calc(1 + .08 * var(--dae-loop-amount, 1)), calc(1 + .08 * var(--dae-loop-amount, 1)), 1); }
}

@keyframes dae-loop-swing {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(calc(5deg * var(--dae-loop-amount, 1))); }
	75% { transform: rotate(calc(-5deg * var(--dae-loop-amount, 1))); }
}

@keyframes dae-loop-wobble {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	25% { transform: translate3d(calc(-6px * var(--dae-loop-amount, 1)), 0, 0) rotate(calc(-3deg * var(--dae-loop-amount, 1))); }
	75% { transform: translate3d(calc(6px * var(--dae-loop-amount, 1)), 0, 0) rotate(calc(3deg * var(--dae-loop-amount, 1))); }
}

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

@keyframes dae-loop-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(120, 120, 255, 0)); }
	50% { filter: drop-shadow(0 0 calc(14px * var(--dae-loop-amount, 1)) rgba(120, 120, 255, .65)); }
}

@keyframes dae-loop-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: calc(1 - .55 * var(--dae-loop-amount, 1)); }
}

@keyframes dae-loop-jelly {
	0%, 100% { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(calc(1 + .1 * var(--dae-loop-amount, 1)), calc(1 - .1 * var(--dae-loop-amount, 1)), 1); }
	50% { transform: scale3d(calc(1 - .08 * var(--dae-loop-amount, 1)), calc(1 + .08 * var(--dae-loop-amount, 1)), 1); }
	70% { transform: scale3d(calc(1 + .04 * var(--dae-loop-amount, 1)), calc(1 - .04 * var(--dae-loop-amount, 1)), 1); }
}

@keyframes dae-loop-bounce {
	0%, 20%, 53%, 100% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
	40% { transform: translate3d(0, calc(-24px * var(--dae-loop-amount, 1)), 0); animation-timing-function: cubic-bezier(.75, .05, .85, .5); }
	70% { transform: translate3d(0, calc(-12px * var(--dae-loop-amount, 1)), 0); animation-timing-function: cubic-bezier(.75, .05, .85, .5); }
	90% { transform: translate3d(0, calc(-4px * var(--dae-loop-amount, 1)), 0); }
}

@keyframes dae-loop-shake {
	0%, 100% { transform: translate3d(0, 0, 0); }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(calc(-8px * var(--dae-loop-amount, 1)), 0, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(calc(8px * var(--dae-loop-amount, 1)), 0, 0); }
}

@keyframes dae-loop-tada {
	0%, 100% { transform: scale3d(1, 1, 1) rotate(0deg); }
	10%, 20% { transform: scale3d(.94, .94, 1) rotate(calc(-3deg * var(--dae-loop-amount, 1))); }
	30%, 50%, 70% { transform: scale3d(calc(1 + .1 * var(--dae-loop-amount, 1)), calc(1 + .1 * var(--dae-loop-amount, 1)), 1) rotate(calc(3deg * var(--dae-loop-amount, 1))); }
	40%, 60%, 80% { transform: scale3d(calc(1 + .1 * var(--dae-loop-amount, 1)), calc(1 + .1 * var(--dae-loop-amount, 1)), 1) rotate(calc(-3deg * var(--dae-loop-amount, 1))); }
}

@keyframes dae-loop-rubber {
	0%, 100% { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(calc(1 + .25 * var(--dae-loop-amount, 1)), calc(1 - .25 * var(--dae-loop-amount, 1)), 1); }
	40% { transform: scale3d(calc(1 - .25 * var(--dae-loop-amount, 1)), calc(1 + .25 * var(--dae-loop-amount, 1)), 1); }
	55% { transform: scale3d(calc(1 + .15 * var(--dae-loop-amount, 1)), calc(1 - .15 * var(--dae-loop-amount, 1)), 1); }
	70% { transform: scale3d(calc(1 - .05 * var(--dae-loop-amount, 1)), calc(1 + .05 * var(--dae-loop-amount, 1)), 1); }
}

@keyframes dae-loop-orbit {
	0%, 100% { transform: translate3d(calc(10px * var(--dae-loop-amount, 1)), 0, 0); }
	25% { transform: translate3d(0, calc(10px * var(--dae-loop-amount, 1)), 0); }
	50% { transform: translate3d(calc(-10px * var(--dae-loop-amount, 1)), 0, 0); }
	75% { transform: translate3d(0, calc(-10px * var(--dae-loop-amount, 1)), 0); }
}

@keyframes dae-loop-tilt {
	0%, 100% { transform: perspective(900px) rotateY(calc(-8deg * var(--dae-loop-amount, 1))) rotateX(calc(4deg * var(--dae-loop-amount, 1))); }
	50% { transform: perspective(900px) rotateY(calc(8deg * var(--dae-loop-amount, 1))) rotateX(calc(-4deg * var(--dae-loop-amount, 1))); }
}

@keyframes dae-loop-flip {
	from { transform: perspective(1200px) rotateY(0deg); }
	to { transform: perspective(1200px) rotateY(360deg); }
}

@keyframes dae-loop-shimmer {
	0%, 100% { filter: brightness(1) saturate(1); }
	50% { filter: brightness(calc(1 + .25 * var(--dae-loop-amount, 1))) saturate(calc(1 + .3 * var(--dae-loop-amount, 1))); }
}

@keyframes dae-loop-hue {
	from { filter: hue-rotate(0deg); }
	to { filter: hue-rotate(360deg); }
}

@keyframes dae-loop-wave {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(calc(9deg * var(--dae-loop-amount, 1))); }
	40% { transform: rotate(calc(-7deg * var(--dae-loop-amount, 1))); }
	60% { transform: rotate(calc(6deg * var(--dae-loop-amount, 1))); }
	80% { transform: rotate(calc(-3deg * var(--dae-loop-amount, 1))); }
}

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

[class*="dae-hover-"] {
	transition:
		transform var(--dae-hover-duration, 300ms) var(--dae-hover-ease, cubic-bezier(.2, .7, .3, 1)),
		box-shadow var(--dae-hover-duration, 300ms) var(--dae-hover-ease, ease),
		filter var(--dae-hover-duration, 300ms) var(--dae-hover-ease, ease);
}

.dae-hover-lift:hover {
	transform: translate3d(0, calc(-8px * var(--dae-hover-amount, 1)), 0);
	box-shadow: 0 18px 40px -18px var(--dae-hover-color, rgba(0, 0, 0, .45));
}

.dae-hover-sink:hover { transform: translate3d(0, calc(6px * var(--dae-hover-amount, 1)), 0); }
.dae-hover-grow:hover { transform: scale3d(calc(1 + .06 * var(--dae-hover-amount, 1)), calc(1 + .06 * var(--dae-hover-amount, 1)), 1); }
.dae-hover-shrink:hover { transform: scale3d(calc(1 - .06 * var(--dae-hover-amount, 1)), calc(1 - .06 * var(--dae-hover-amount, 1)), 1); }
.dae-hover-tilt:hover { transform: perspective(900px) rotateX(calc(6deg * var(--dae-hover-amount, 1))) rotateY(calc(-6deg * var(--dae-hover-amount, 1))); }
.dae-hover-skew:hover { transform: skewX(calc(-6deg * var(--dae-hover-amount, 1))); }
.dae-hover-rotate:hover { transform: rotate(calc(4deg * var(--dae-hover-amount, 1))); }
.dae-hover-swivel:hover { transform: perspective(1000px) rotateY(calc(14deg * var(--dae-hover-amount, 1))); }
.dae-hover-glow:hover { filter: drop-shadow(0 0 calc(16px * var(--dae-hover-amount, 1)) var(--dae-hover-color, rgba(120, 120, 255, .7))); }
.dae-hover-blur:hover { filter: blur(calc(3px * var(--dae-hover-amount, 1))); }
.dae-hover-saturate:hover { filter: saturate(calc(1 + .6 * var(--dae-hover-amount, 1))); }
.dae-hover-brighten:hover { filter: brightness(calc(1 + .15 * var(--dae-hover-amount, 1))); }
.dae-hover-push:active { transform: scale3d(calc(1 - .04 * var(--dae-hover-amount, 1)), calc(1 - .04 * var(--dae-hover-amount, 1)), 1); }

.dae-hover-float:hover {
	transform: translate3d(0, calc(-6px * var(--dae-hover-amount, 1)), 0);
	animation: dae-hover-float 2.2s ease-in-out infinite;
	box-shadow: 0 22px 44px -22px var(--dae-hover-color, rgba(0, 0, 0, .5));
}

.dae-hover-press {
	transform-style: preserve-3d;
}

.dae-hover-press:hover { transform: perspective(800px) translate3d(0, calc(-3px * var(--dae-hover-amount, 1)), 0) rotateX(calc(7deg * var(--dae-hover-amount, 1))); }
.dae-hover-press:active { transform: perspective(800px) translate3d(0, calc(2px * var(--dae-hover-amount, 1)), 0) rotateX(calc(-3deg * var(--dae-hover-amount, 1))); }

.dae-hover-bounce:hover { animation: dae-hover-bounce var(--dae-hover-duration, 300ms) ease; }
.dae-hover-pop:hover { animation: dae-hover-pop var(--dae-hover-duration, 300ms) cubic-bezier(.34, 1.56, .64, 1); }
.dae-hover-jiggle:hover { animation: dae-hover-jiggle calc(var(--dae-hover-duration, 300ms) * 2) ease; }
.dae-hover-pulse:hover { animation: dae-hover-pulse calc(var(--dae-hover-duration, 300ms) * 4) ease-in-out infinite; }

.dae-hover-outline {
	box-shadow: 0 0 0 0 var(--dae-hover-color, rgba(120, 120, 255, .7));
	transition: box-shadow var(--dae-hover-duration, 300ms) var(--dae-hover-ease, cubic-bezier(.2, .7, .3, 1));
}

.dae-hover-outline:hover {
	box-shadow: 0 0 0 calc(3px * var(--dae-hover-amount, 1)) var(--dae-hover-color, rgba(120, 120, 255, .7));
}

.dae-hover-underline {
	position: relative;
}

.dae-hover-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: calc(2px * var(--dae-hover-amount, 1));
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--dae-hover-color, currentColor);
	transition: transform var(--dae-hover-duration, 300ms) var(--dae-hover-ease, cubic-bezier(.2, .7, .3, 1));
	pointer-events: none;
}

.dae-hover-underline:hover::after {
	transform: scaleX(1);
}

.dae-hover-shine {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dae-hover-shine::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	opacity: 0;
	z-index: 2;
}

.dae-hover-shine:hover::after {
	animation: dae-preset-shine calc(var(--dae-hover-duration, 300ms) * 3) ease forwards;
}

@keyframes dae-hover-bounce {
	0% { transform: translate3d(0, 0, 0); }
	40% { transform: translate3d(0, calc(-12px * var(--dae-hover-amount, 1)), 0); }
	70% { transform: translate3d(0, calc(-4px * var(--dae-hover-amount, 1)), 0); }
	100% { transform: translate3d(0, 0, 0); }
}

@keyframes dae-hover-float {
	0%, 100% { transform: translate3d(0, calc(-6px * var(--dae-hover-amount, 1)), 0); }
	50% { transform: translate3d(0, calc(-14px * var(--dae-hover-amount, 1)), 0); }
}

@keyframes dae-hover-pop {
	0% { transform: scale3d(1, 1, 1); }
	60% { transform: scale3d(calc(1 + .12 * var(--dae-hover-amount, 1)), calc(1 + .12 * var(--dae-hover-amount, 1)), 1); }
	100% { transform: scale3d(calc(1 + .06 * var(--dae-hover-amount, 1)), calc(1 + .06 * var(--dae-hover-amount, 1)), 1); }
}

@keyframes dae-hover-jiggle {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(calc(-4deg * var(--dae-hover-amount, 1))); }
	40% { transform: rotate(calc(3deg * var(--dae-hover-amount, 1))); }
	60% { transform: rotate(calc(-2deg * var(--dae-hover-amount, 1))); }
	80% { transform: rotate(calc(1deg * var(--dae-hover-amount, 1))); }
}

@keyframes dae-hover-pulse {
	0%, 100% { transform: scale3d(1, 1, 1); }
	50% { transform: scale3d(calc(1 + .05 * var(--dae-hover-amount, 1)), calc(1 + .05 * var(--dae-hover-amount, 1)), 1); }
}

/* --------------------------------------------------------------------------
 * Presets
 *
 * Curated idle + hover combinations. They never touch the entrance animation,
 * so a preset can be dropped on any element and works immediately.
 * ----------------------------------------------------------------------- */

.dae-preset-float-card {
	animation: dae-loop-float 4s ease-in-out infinite;
	transition: box-shadow .4s ease, filter .4s ease;
}

.dae-preset-float-card:hover {
	box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .5);
}

.dae-preset-breathe {
	animation: dae-preset-breathe 6s ease-in-out infinite;
}

@keyframes dae-preset-breathe {
	0%, 100% { transform: scale3d(1, 1, 1); }
	50% { transform: scale3d(1.03, 1.03, 1); }
}

.dae-preset-pulse-cta {
	animation: dae-preset-pulse-cta 2.4s cubic-bezier(.66, 0, 0, 1) infinite;
	border-radius: inherit;
}

@keyframes dae-preset-pulse-cta {
	0% { box-shadow: 0 0 0 0 currentColor; }
	70% { box-shadow: 0 0 0 18px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.dae-preset-neon-glow {
	animation: dae-loop-glow 2.8s ease-in-out infinite;
	transition: filter .3s ease;
}

.dae-preset-neon-glow:hover {
	animation: none;
	filter: drop-shadow(0 0 22px rgba(120, 120, 255, .9));
}

.dae-preset-tilt-3d {
	transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
	transform-style: preserve-3d;
}

.dae-preset-tilt-3d:hover {
	transform: perspective(1100px) rotateX(7deg) rotateY(-9deg) translate3d(0, -6px, 0);
	box-shadow: 0 30px 55px -25px rgba(0, 0, 0, .55);
}

.dae-preset-shine-sweep {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dae-preset-shine-sweep::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	opacity: 0;
	z-index: 2;
}

.dae-preset-shine-sweep:hover::after {
	animation: dae-preset-shine .9s ease forwards;
}

@keyframes dae-preset-shine {
	from { left: -60%; opacity: 1; }
	to { left: 130%; opacity: 1; }
}

.dae-preset-magnetic-lift {
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.dae-preset-magnetic-lift:hover {
	transform: translate3d(0, -10px, 0) scale3d(1.02, 1.02, 1) rotate(-.6deg);
	box-shadow: 0 28px 48px -24px rgba(0, 0, 0, .55);
}

.dae-preset-soft-press {
	transition: transform .18s ease, box-shadow .18s ease;
}

.dae-preset-soft-press:hover { transform: translate3d(0, -2px, 0); }
.dae-preset-soft-press:active { transform: translate3d(0, 2px, 0) scale3d(.985, .985, 1); }

/* Drifts whatever gradient the element already has. Give it a background
   gradient with background-size larger than the element for the full effect. */
.dae-preset-gradient-drift {
	background-size: 220% 220%;
	animation: dae-preset-gradient-drift 9s ease infinite;
}

@keyframes dae-preset-gradient-drift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.dae-preset-wobble {
	transition: transform .3s ease;
}

.dae-preset-wobble:hover {
	animation: dae-loop-wobble .6s ease;
}

/* Frosted panel that lifts on hover. Needs something behind it to blur. */
.dae-preset-glass-card {
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	background-color: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease, backdrop-filter .4s ease;
}

.dae-preset-glass-card:hover {
	transform: translate3d(0, -6px, 0);
	backdrop-filter: blur(16px) saturate(170%);
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .6);
}

/* A soft light that grows out of the middle on hover. */
.dae-preset-spotlight {
	position: relative;
	isolation: isolate;
}

.dae-preset-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .35), transparent 65%);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}

.dae-preset-spotlight:hover::before {
	opacity: 1;
	transform: scale(1);
}

/* Draws a ring in from the corners. */
.dae-preset-outline-draw {
	position: relative;
	transition: transform .3s ease;
}

.dae-preset-outline-draw::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	border: 2px solid currentColor;
	clip-path: inset(0 100% 100% 0);
	opacity: .8;
	transition: clip-path .5s cubic-bezier(.2, .7, .3, 1);
}

.dae-preset-outline-draw:hover::after {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
 * Mouse glare
 *
 * The runtime writes --dae-mx / --dae-my as 0–1 positions inside the element;
 * everything else is a gradient that follows them.
 * ----------------------------------------------------------------------- */

.dae-mfx.dae-mouse-glare {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dae-mfx.dae-mouse-glare::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	border-radius: inherit;
	background: radial-gradient(
		circle at calc(var(--dae-mx, .5) * 100%) calc(var(--dae-my, .5) * 100%),
		rgba(255, 255, 255, var(--dae-glare, .2)),
		transparent 55%
	);
	opacity: 0;
	transition: opacity .35s ease;
}

.dae-mfx.dae-mouse-glare:hover::before {
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Sticky
 *
 * Two techniques, one set of hooks.
 *
 * .dae-sticky-css is CSS position: sticky — cheap and perfectly smooth, but it
 * only travels inside its own parent and dies under any clipping ancestor. The
 * runtime uses it when it can prove it will work, and otherwise pins the
 * element itself with position: fixed against a placeholder that holds the
 * layout open. Either way .dae-sticky-active means "sticky on this device" and
 * .dae-is-stuck means "holding position right now".
 * ----------------------------------------------------------------------- */

.dae-mfx.dae-sticky-active.dae-sticky-css {
	position: sticky;
	z-index: var(--dae-sticky-z, 100);
}

.dae-mfx.dae-sticky-active.dae-sticky-css.dae-sticky-top {
	top: var(--dae-sticky-offset, 0px);
}

.dae-mfx.dae-sticky-active.dae-sticky-css.dae-sticky-bottom {
	bottom: var(--dae-sticky-offset, 0px);
}

/* A sticky child of a flex row is stretched to the row's full height by
   default, which leaves it nothing to travel through. */
.dae-mfx.dae-sticky-selfstart {
	align-self: flex-start;
}

/* The runtime hands it a border-box measurement of the element it stands in
   for, so it has to be reading widths and heights the same way. */
.dae-sticky-placeholder {
	display: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	pointer-events: none;
	visibility: hidden;
}

/* The stuck state. .dae-sticky-anim also transitions transform, which is what
   makes Hide On Scroll Down and Shrink glide; .dae-sticky-paint is the same
   list without it, used when scrolling or mouse effects are writing transform
   every frame and a transition would only smear them. */
.dae-mfx.dae-sticky-anim {
	transition:
		transform var(--dae-stuck-transition, 350ms) cubic-bezier(.4, 0, .2, 1),
		background-color var(--dae-stuck-transition, 350ms) ease,
		box-shadow var(--dae-stuck-transition, 350ms) ease,
		filter var(--dae-stuck-transition, 350ms) ease,
		backdrop-filter var(--dae-stuck-transition, 350ms) ease;
}

.dae-mfx.dae-sticky-paint {
	transition:
		background-color var(--dae-stuck-transition, 350ms) ease,
		box-shadow var(--dae-stuck-transition, 350ms) ease,
		filter var(--dae-stuck-transition, 350ms) ease,
		backdrop-filter var(--dae-stuck-transition, 350ms) ease;
}

.dae-mfx.dae-is-stuck.dae-stuck-bg {
	background-color: var(--dae-stuck-bg);
}

.dae-mfx.dae-is-stuck.dae-stuck-blur {
	backdrop-filter: blur(var(--dae-stuck-blur, 0px));
	-webkit-backdrop-filter: blur(var(--dae-stuck-blur, 0px));
}

.dae-mfx.dae-is-stuck.dae-stuck-shadow-soft { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); }
.dae-mfx.dae-is-stuck.dae-stuck-shadow-medium { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45); }
.dae-mfx.dae-is-stuck.dae-stuck-shadow-strong { box-shadow: 0 18px 46px -18px rgba(0, 0, 0, .6); }

/* --------------------------------------------------------------------------
 * Reduced motion
 *
 * Honoured only when the plugin setting is on, which is what puts
 * .dae-reduce-motion on the body. Sticky is left alone: holding position is
 * layout, not motion, and taking it away would break the page.
 * ----------------------------------------------------------------------- */

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

	body.dae-reduce-motion .dae-mfx,
	body.dae-reduce-motion .dae-mfx.dae-stagger > *,
	body.dae-reduce-motion .dae-mfx::before,
	body.dae-reduce-motion .dae-mfx::after {
		animation: none !important;
		transition-duration: 1ms !important;
	}

	body.dae-reduce-motion .dae-mfx-invisible {
		visibility: visible !important;
	}

	body.dae-reduce-motion .dae-mfx.dae-has-transform {
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
	}
}