/**
 * Block Animator - Frontend Styles
 * Base states + predefined @keyframes for enter & leave animations.
 * JS (frontend.js) toggles classes that trigger these animations
 * via IntersectionObserver.
 */

/* ==========================================================================
   Base state: elements with animation enabled start hidden/transformed
   until JS marks them ready (banim-ready) and triggers enter animation.
   ========================================================================== */
.banim-el {
	will-change: opacity, transform;
}

/* Before JS runs / before in view (entry trigger only) */
.banim-el.banim-trigger-enter:not(.banim-played-enter):not(.banim-no-js),
.banim-el.banim-trigger-both:not(.banim-played-enter):not(.banim-no-js) {
	opacity: 0;
}

/* If JS is disabled, never hide content */
.banim-no-js {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   Animation runner classes — applied dynamically by frontend.js
   .banim-run-enter / .banim-run-leave trigger the keyframes.
   Custom duration/delay/easing are applied via inline style by JS.
   ========================================================================== */
.banim-run-enter,
.banim-run-leave {
	animation-fill-mode: both;
	animation-timing-function: var(--banim-easing, ease);
	animation-duration: var(--banim-duration, 600ms);
	animation-delay: var(--banim-delay, 0ms);
}

/* ==========================================================================
   PREDEFINED ANIMATIONS
   Each animation defines an "-enter" and "-leave" keyframe set.
   Naming convention: banim-kf-{type}-enter / banim-kf-{type}-leave
   ========================================================================== */

/* ---------- Fade ---------- */
@keyframes banim-kf-fade-enter {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes banim-kf-fade-leave {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* ---------- Fade Up ---------- */
@keyframes banim-kf-fade-up-enter {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes banim-kf-fade-up-leave {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-40px); }
}

/* ---------- Fade Down ---------- */
@keyframes banim-kf-fade-down-enter {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes banim-kf-fade-down-leave {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(40px); }
}

/* ---------- Fade Left (enters from right, moves left) ---------- */
@keyframes banim-kf-fade-left-enter {
	from { opacity: 0; transform: translateX(60px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes banim-kf-fade-left-leave {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-60px); }
}

/* ---------- Fade Right (enters from left, moves right) ---------- */
@keyframes banim-kf-fade-right-enter {
	from { opacity: 0; transform: translateX(-60px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes banim-kf-fade-right-leave {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(60px); }
}

/* ---------- Zoom In ---------- */
@keyframes banim-kf-zoom-in-enter {
	from { opacity: 0; transform: scale(0.6); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes banim-kf-zoom-in-leave {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.6); }
}

/* ---------- Zoom Out ---------- */
@keyframes banim-kf-zoom-out-enter {
	from { opacity: 0; transform: scale(1.4); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes banim-kf-zoom-out-leave {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(1.4); }
}

/* ---------- Slide Up (no fade, full slide) ---------- */
@keyframes banim-kf-slide-up-enter {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
@keyframes banim-kf-slide-up-leave {
	from { transform: translateY(0); }
	to   { transform: translateY(-100%); }
}

/* ---------- Slide Down ---------- */
@keyframes banim-kf-slide-down-enter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@keyframes banim-kf-slide-down-leave {
	from { transform: translateY(0); }
	to   { transform: translateY(100%); }
}

/* ---------- Slide Left ---------- */
@keyframes banim-kf-slide-left-enter {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}
@keyframes banim-kf-slide-left-leave {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* ---------- Slide Right ---------- */
@keyframes banim-kf-slide-right-enter {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}
@keyframes banim-kf-slide-right-leave {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

/* ---------- Flip X ---------- */
@keyframes banim-kf-flip-x-enter {
	from { opacity: 0; transform: perspective(800px) rotateX(90deg); }
	to   { opacity: 1; transform: perspective(800px) rotateX(0); }
}
@keyframes banim-kf-flip-x-leave {
	from { opacity: 1; transform: perspective(800px) rotateX(0); }
	to   { opacity: 0; transform: perspective(800px) rotateX(90deg); }
}

/* ---------- Flip Y ---------- */
@keyframes banim-kf-flip-y-enter {
	from { opacity: 0; transform: perspective(800px) rotateY(90deg); }
	to   { opacity: 1; transform: perspective(800px) rotateY(0); }
}
@keyframes banim-kf-flip-y-leave {
	from { opacity: 1; transform: perspective(800px) rotateY(0); }
	to   { opacity: 0; transform: perspective(800px) rotateY(90deg); }
}

/* ---------- Rotate In ---------- */
@keyframes banim-kf-rotate-in-enter {
	from { opacity: 0; transform: rotate(-200deg) scale(0.8); }
	to   { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes banim-kf-rotate-in-leave {
	from { opacity: 1; transform: rotate(0) scale(1); }
	to   { opacity: 0; transform: rotate(200deg) scale(0.8); }
}

/* ---------- Bounce In ---------- */
@keyframes banim-kf-bounce-in-enter {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.08); }
	70%  { transform: scale(0.95); }
	100% { transform: scale(1); }
}
@keyframes banim-kf-bounce-in-leave {
	0%   { opacity: 1; transform: scale(1); }
	30%  { transform: scale(1.08); }
	100% { opacity: 0; transform: scale(0.3); }
}

/* ==========================================================================
   Custom animation placeholder keyframes.
   These get OVERRIDDEN per-block via an injected <style> tag (frontend.js)
   using the unique custom CSS the user typed in the editor.
   The fallback below is just a safe no-op fade in case JS injection fails.
   ========================================================================== */
@keyframes banim-kf-custom-enter-fallback {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes banim-kf-custom-leave-fallback {
	from { opacity: 1; }
	to   { opacity: 0; }
}