/* ───── Floating animations ───── */
@keyframes float-vertical {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 calc(-1 * var(--float-amp, 10px)); }
}

@keyframes float-horizontal {
	0%, 100% { translate: 0 0; }
	50% { translate: var(--float-amp, 10px) 0; }
}

@keyframes float-both-0 {
	0%   { translate: 0 0; }
	15%  { translate: calc(0.8 * var(--float-amp, 10px)) calc(-0.6 * var(--float-amp, 10px)); }
	35%  { translate: calc(-0.4 * var(--float-amp, 10px)) calc(-1 * var(--float-amp, 10px)); }
	55%  { translate: calc(-0.9 * var(--float-amp, 10px)) calc(0.3 * var(--float-amp, 10px)); }
	75%  { translate: calc(0.3 * var(--float-amp, 10px)) calc(0.7 * var(--float-amp, 10px)); }
	100% { translate: 0 0; }
}

@keyframes float-both-1 {
	0%   { translate: 0 0; }
	20%  { translate: calc(-0.7 * var(--float-amp, 10px)) calc(-0.8 * var(--float-amp, 10px)); }
	40%  { translate: calc(0.5 * var(--float-amp, 10px)) calc(-0.3 * var(--float-amp, 10px)); }
	60%  { translate: calc(0.9 * var(--float-amp, 10px)) calc(0.6 * var(--float-amp, 10px)); }
	80%  { translate: calc(-0.4 * var(--float-amp, 10px)) calc(0.9 * var(--float-amp, 10px)); }
	100% { translate: 0 0; }
}

@keyframes float-both-2 {
	0%   { translate: 0 0; }
	12%  { translate: calc(0.6 * var(--float-amp, 10px)) calc(0.5 * var(--float-amp, 10px)); }
	30%  { translate: calc(1 * var(--float-amp, 10px)) calc(-0.4 * var(--float-amp, 10px)); }
	50%  { translate: calc(-0.3 * var(--float-amp, 10px)) calc(-0.9 * var(--float-amp, 10px)); }
	70%  { translate: calc(-0.8 * var(--float-amp, 10px)) calc(0.2 * var(--float-amp, 10px)); }
	88%  { translate: calc(0.2 * var(--float-amp, 10px)) calc(0.8 * var(--float-amp, 10px)); }
	100% { translate: 0 0; }
}

@keyframes float-both-3 {
	0%   { translate: 0 0; }
	17%  { translate: calc(-0.9 * var(--float-amp, 10px)) calc(0.4 * var(--float-amp, 10px)); }
	33%  { translate: calc(-0.5 * var(--float-amp, 10px)) calc(-0.7 * var(--float-amp, 10px)); }
	50%  { translate: calc(0.7 * var(--float-amp, 10px)) calc(-0.9 * var(--float-amp, 10px)); }
	67%  { translate: calc(0.9 * var(--float-amp, 10px)) calc(0.5 * var(--float-amp, 10px)); }
	83%  { translate: calc(-0.2 * var(--float-amp, 10px)) calc(0.8 * var(--float-amp, 10px)); }
	100% { translate: 0 0; }
}

/* ───── Idle-preset motion shapes ───── */
@keyframes idle-breathe {
	0%, 100% { scale: 1; }
	50%      { scale: var(--float-amp-scale, 1.05); }
}

@keyframes idle-pulse {
	0%, 100% { scale: 1; }
	45%      { scale: var(--float-amp-scale, 1.05); }
	55%      { scale: var(--float-amp-scale, 1.05); }
}

@keyframes idle-wiggle {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	25%      { translate: calc(-0.4 * var(--float-amp, 10px)) 0; rotate: calc(-0.5 * var(--float-amp-rot, 5deg)); }
	50%      { translate: 0 0; rotate: 0deg; }
	75%      { translate: calc(0.4 * var(--float-amp, 10px)) 0; rotate: calc(0.5 * var(--float-amp-rot, 5deg)); }
}

@keyframes idle-sway {
	0%, 100% { rotate: calc(-1 * var(--float-amp-rot, 5deg)); }
	50%      { rotate: var(--float-amp-rot, 5deg); }
}

@keyframes idle-tilt {
	0%, 100% { transform: skewX(0deg); }
	50%      { transform: skewX(var(--float-amp-rot, 5deg)); }
}

@keyframes idle-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 calc(-1 * var(--float-amp, 10px)); }
}

@keyframes idle-drift {
	0%   { translate: 0 0; }
	25%  { translate: calc(0.5 * var(--float-amp, 10px)) calc(-0.3 * var(--float-amp, 10px)); }
	50%  { translate: calc(0.1 * var(--float-amp, 10px)) calc(0.5 * var(--float-amp, 10px)); }
	75%  { translate: calc(-0.4 * var(--float-amp, 10px)) calc(-0.2 * var(--float-amp, 10px)); }
	100% { translate: 0 0; }
}

/* ───── Phase 2: emphasis ───── */
@keyframes emphasis-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}
@keyframes emphasis-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-4px); }
	40%      { transform: translateX(4px); }
	60%      { transform: translateX(-3px); }
	80%      { transform: translateX(3px); }
}
@keyframes emphasis-flash {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}
@keyframes emphasis-wobble {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(-4deg); }
	75%      { transform: rotate(4deg); }
}
@keyframes emphasis-glow-flash {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(124, 58, 237, 0)); }
	50%      { filter: drop-shadow(0 0 16px rgba(124, 58, 237, 0.85)); }
}
@keyframes emphasis-bob-once {
	0%       { transform: translateY(0); }
	30%      { transform: translateY(-12px); }
	60%      { transform: translateY(0); }
	100%     { transform: translateY(0); }
}
@keyframes emphasis-tada {
	0%       { transform: scale(1) rotate(0deg); }
	10%, 20% { transform: scale(0.95) rotate(-3deg); }
	30%, 50%, 70%, 90% { transform: scale(1.08) rotate(3deg); }
	40%, 60%, 80%      { transform: scale(1.08) rotate(-3deg); }
	100%     { transform: scale(1) rotate(0deg); }
}

/* ───── Phase 2: runtime entrance ───── */
@keyframes runtime-entrance-fade {
	0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes runtime-entrance-slide-up {
	0% { translate: 0 60px; opacity: 0; } 100% { translate: 0 0; opacity: 1; }
}
@keyframes runtime-entrance-slide-down {
	0% { translate: 0 -60px; opacity: 0; } 100% { translate: 0 0; opacity: 1; }
}
@keyframes runtime-entrance-slide-left {
	0% { translate: 60px 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; }
}
@keyframes runtime-entrance-slide-right {
	0% { translate: -60px 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; }
}
@keyframes runtime-entrance-pop {
	0% { scale: 0.4; opacity: 0; }
	60% { scale: 1.08; opacity: 1; }
	100% { scale: 1; opacity: 1; }
}
@keyframes runtime-entrance-scale-in {
	0% { scale: 0.7; opacity: 0; } 100% { scale: 1; opacity: 1; }
}
@keyframes runtime-entrance-rotate-in {
	0% { rotate: -15deg; scale: 0.8; opacity: 0; }
	100% { rotate: 0deg; scale: 1; opacity: 1; }
}
@keyframes runtime-entrance-blur-in {
	0% { filter: blur(20px); opacity: 0; } 100% { filter: blur(0); opacity: 1; }
}
@keyframes runtime-entrance-rise {
	0% { translate: 0 30px; opacity: 0; } 100% { translate: 0 0; opacity: 1; }
}
@keyframes runtime-entrance-flip-x {
	0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes runtime-entrance-flip-y {
	0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes runtime-entrance-bounce-in {
	0% { scale: 0.3; opacity: 0; }
	50% { scale: 1.15; opacity: 1; }
	75% { scale: 0.92; }
	90% { scale: 1.04; }
	100% { scale: 1; opacity: 1; }
}

/* ───── Phase 2: runtime exit ───── */
@keyframes runtime-exit-fade {
	0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes runtime-exit-slide-up {
	0% { translate: 0 0; opacity: 1; } 100% { translate: 0 -60px; opacity: 0; }
}
@keyframes runtime-exit-slide-down {
	0% { translate: 0 0; opacity: 1; } 100% { translate: 0 60px; opacity: 0; }
}
@keyframes runtime-exit-slide-left {
	0% { translate: 0 0; opacity: 1; } 100% { translate: -60px 0; opacity: 0; }
}
@keyframes runtime-exit-slide-right {
	0% { translate: 0 0; opacity: 1; } 100% { translate: 60px 0; opacity: 0; }
}
@keyframes runtime-exit-pop {
	0% { scale: 1; opacity: 1; }
	50% { scale: 1.25; opacity: 1; }
	100% { scale: 1.6; opacity: 0; }
}
@keyframes runtime-exit-scale-out {
	0% { scale: 1; opacity: 1; } 100% { scale: 0.5; opacity: 0; }
}
@keyframes runtime-exit-rotate-out {
	0% { rotate: 0deg; scale: 1; opacity: 1; }
	100% { rotate: 15deg; scale: 0.8; opacity: 0; }
}
@keyframes runtime-exit-blur-out {
	0% { filter: blur(0); opacity: 1; } 100% { filter: blur(20px); opacity: 0; }
}
@keyframes runtime-exit-sink {
	0% { translate: 0 0; opacity: 1; } 100% { translate: 0 30px; opacity: 0; }
}
@keyframes runtime-exit-flip-x {
	0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes runtime-exit-flip-y {
	0% { opacity: 1; } 100% { opacity: 0; }
}

/* Freehand draw element */
.animot-draw-element { display: block; width: 100%; height: 100%; overflow: visible; }

/* Sticky note element */
.animot-sticky-element {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
}
.animot-sticky-sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.06));
}
.animot-sticky-fold {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 22px;
	height: 22px;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
	border-top-left-radius: 4px;
	box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.12);
}
.animot-sticky-text {
	position: relative;
	z-index: 1;
	width: 100%;
	line-height: 1.3;
	white-space: pre-wrap;
	word-break: break-word;
}

/* SVG path-trace animations (Icon + Svg elements) */
.animot-svg-element.icon-anim-draw path,
.animot-svg-element.icon-anim-draw circle,
.animot-svg-element.icon-anim-draw rect,
.animot-svg-element.icon-anim-draw line,
.animot-svg-element.icon-anim-draw polyline,
.animot-svg-element.icon-anim-draw polygon,
.animot-svg-element.icon-anim-draw ellipse {
	stroke-dashoffset: var(--path-len, 1000);
	animation: animot-svg-draw var(--icon-anim-duration, 800ms) ease-out forwards;
}
.animot-svg-element.icon-anim-undraw path,
.animot-svg-element.icon-anim-undraw circle,
.animot-svg-element.icon-anim-undraw rect,
.animot-svg-element.icon-anim-undraw line,
.animot-svg-element.icon-anim-undraw polyline,
.animot-svg-element.icon-anim-undraw polygon,
.animot-svg-element.icon-anim-undraw ellipse {
	stroke-dashoffset: 0;
	animation: animot-svg-undraw var(--icon-anim-duration, 800ms) ease-out forwards;
}
.animot-svg-element.icon-anim-draw-undraw path,
.animot-svg-element.icon-anim-draw-undraw circle,
.animot-svg-element.icon-anim-draw-undraw rect,
.animot-svg-element.icon-anim-draw-undraw line,
.animot-svg-element.icon-anim-draw-undraw polyline,
.animot-svg-element.icon-anim-draw-undraw polygon,
.animot-svg-element.icon-anim-draw-undraw ellipse {
	stroke-dashoffset: var(--path-len, 1000);
	animation: animot-svg-draw-undraw var(--icon-anim-duration, 800ms) ease-out forwards;
}
.animot-svg-element.icon-anim-loop path,
.animot-svg-element.icon-anim-loop circle,
.animot-svg-element.icon-anim-loop rect,
.animot-svg-element.icon-anim-loop line,
.animot-svg-element.icon-anim-loop polyline,
.animot-svg-element.icon-anim-loop polygon,
.animot-svg-element.icon-anim-loop ellipse { animation-iteration-count: infinite !important; }
.animot-svg-element.icon-anim-reverse path,
.animot-svg-element.icon-anim-reverse circle,
.animot-svg-element.icon-anim-reverse rect,
.animot-svg-element.icon-anim-reverse line,
.animot-svg-element.icon-anim-reverse polyline,
.animot-svg-element.icon-anim-reverse polygon,
.animot-svg-element.icon-anim-reverse ellipse { animation-direction: reverse !important; }
@keyframes animot-svg-draw { to { stroke-dashoffset: 0; } }
@keyframes animot-svg-undraw { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--path-len, 1000); } }
@keyframes animot-svg-draw-undraw {
	0% { stroke-dashoffset: var(--path-len, 1000); }
	50% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: var(--path-len, 1000); }
}