/* Ensure elements are hidden before JavaScript runs */
[data-animate] {
	opacity: 1;
	visibility: visible;
	will-change: opacity, visibility, transform;
}

/* When JavaScript applies .animated, animations start */
[data-animate].animated {
	animation-name: var(--animation-name);
	animation-duration: var(--animation-speed);
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: var(--animation-delay);
	animation-iteration-count: var(--animation-repeat, 1);
}

/* Frontend: Trigger CSS keyframe animations when element enters viewport */
[data-animate].animated.animate-active {
	animation-name: var(--animation-name);
	animation-duration: var(--animation-speed);
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: var(--animation-delay);
	animation-iteration-count: var(--animation-repeat, 1);
	opacity: 1;
	visibility: visible;
}

/* Ensure animation does not reset */
.animate-on-scroll {
	animation-fill-mode: forwards;
}

@media (prefers-reduced-motion:reduce),print{
	.animated{
		animation-duration:1ms!important;
		animation-iteration-count:1!important;
		transition-duration:1ms!important
	}
}


/* Entrance animations - hidden until triggered */
[data-animate="fadeIn"],
[data-animate="fadeInDown"],
[data-animate="fadeInDownBig"],
[data-animate="fadeInLeft"],
[data-animate="fadeInLeftBig"],
[data-animate="fadeInRight"],
[data-animate="fadeInRightBig"],
[data-animate="fadeInUp"],
[data-animate="fadeInUpBig"],
[data-animate="zoomIn"],
[data-animate="zoomOut"],
[data-animate="flipInX"],
[data-animate="flipInY"],
[data-animate="rotateIn"],
[data-animate="slideUp"],
[data-animate="slideLeft"] {
	opacity: 0;
	visibility: hidden;
}

/* When animation is triggered, make visible */
[data-animate].animate-active {
	visibility: visible !important;
}

/* Example animations with visibility fix */
@keyframes fadeIn {
	0% { opacity: 0; visibility: hidden; }
	1% { visibility: visible; }
	100% { opacity: 1; visibility: visible; }
}

@keyframes fadeOut {
	0% { opacity: 1; visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}

@keyframes fadeInDown{
	0%{
		opacity:0;
		transform:translate3d(0,-10%,0)
	}
	100% {
		opacity:1;
		transform:translateZ(0)
	}
}

@keyframes fadeInDownBig{
	0%{
		opacity:0;
		transform:translate3d(0,-30%,0)
	}
	100% {
		opacity:1;
		transform:translateZ(0)
	}
}

@keyframes fadeInLeft{
	0%{
		opacity:0;
		transform:translate3d(-10%,0,0)
	}
	100% {
		opacity:1;
		transform:translateZ(0)
	}
}

@keyframes fadeInLeftBig{
	0%{
		opacity:0;
		transform:translate3d(-2000px,0,0)
	}
	100% {
		opacity:1;
		transform:translateZ(0)
	}
}

@keyframes fadeInRight{
	0%{
		opacity:0;
		transform:translate3d(10%,0,0)
	}
	100% {
		opacity:1;
		transform:translateZ(0)
	}
}

@keyframes fadeInRightBig{
	0%{
		opacity:0;
		transform:translate3d(2000px,0,0)
	}
	100% {
		opacity:1;
		transform:translateZ(0)
	}
}

@keyframes fadeInUp{
	0%{
		opacity:0;
		transform:translate3d(0,10%,0)
	}
	100%{
		opacity:1;
		transform:translateZ(0)
	}
}

@keyframes fadeInUpBig{
	0%{
		opacity:0;
		transform:translate3d(0,2000px,0)
	}
	100%{
		opacity:1;
		transform:translateZ(0)
	}
}

[data-animate="bounce"] {
	animation-name: bounce;
	transform-origin: center bottom;
}

@keyframes bounce{
	0%,20%,53%,to{
		animation-timing-function:cubic-bezier(.215,.61,.355,1);
		transform:translateZ(0)
	}
	40%,43%{
		animation-timing-function:cubic-bezier(.755,.05,.855,.06);
		transform:translate3d(0,-30px,0) scaleY(1.1)
	}
	70%{
		animation-timing-function:cubic-bezier(.755,.05,.855,.06);
		transform:translate3d(0,-15px,0) scaleY(1.05)
	}
	80%{
		transform:translateZ(0) scaleY(.95);
		transition-timing-function:cubic-bezier(.215,.61,.355,1)
	}
	90%{
		transform:translate3d(0,-4px,0) scaleY(1.02)
	}
}


@keyframes slideUp {
	0% { transform: translateY(30px); opacity: 0; visibility: hidden; }
	1% { visibility: visible; }
	100% { transform: translateY(0); opacity: 1; visibility: visible; }
}

@keyframes slideLeft {
	0% { transform: translateX(30px); opacity: 0; visibility: hidden; }
	1% { visibility: visible; }
	100% { transform: translateX(0); opacity: 1; visibility: visible; }
}

[data-animate="heartBeat"] {
	animation-duration:1.3s;
	animation-duration:calc(var(--animation-speed)*1.3);
	animation-name:heartBeat;
	animation-timing-function:ease-in-out
}

@keyframes heartBeat{
	0%{
		transform:scale(1)
	}
	14%{
		transform:scale(1.3)
	}
	28%{
		transform:scale(1)
	}
	42%{
		transform:scale(1.3)
	}
	70%{
		transform:scale(1)
	}
}

@keyframes wobble{
	0%{
		transform:translateZ(0)
	}
	15%{
		transform:translate3d(-25%,0,0) rotate(-5deg)
	}
	30%{
		transform:translate3d(20%,0,0) rotate(3deg)
	}
	45%{
		transform:translate3d(-15%,0,0) rotate(-3deg)
	}
	60%{
		transform:translate3d(10%,0,0) rotate(2deg)
	}
	75%{
		transform:translate3d(-5%,0,0) rotate(-1deg)
	}
	to{
		transform:translateZ(0)
	}
}

/* ========================================
   CONTINUOUS/LOOPING ANIMATIONS
   ======================================== */

/* Float - Subtle smooth up/down motion */
@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

[data-animate="float"] {
	animation-timing-function: ease-in-out;
}

/* Float Horizontal - Subtle left/right drift */
@keyframes floatHorizontal {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(4px);
	}
}

[data-animate="floatHorizontal"] {
	animation-timing-function: ease-in-out;
}

/* Pulse - Gentle scale breathing effect */
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.03);
	}
}

[data-animate="pulse"] {
	animation-timing-function: ease-in-out;
}

/* Glow - Subtle opacity pulsing */
@keyframes glow {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

[data-animate="glow"] {
	animation-timing-function: ease-in-out;
}

/* ========================================
   ENTRANCE ANIMATIONS
   ======================================== */

/* Zoom In - Scale from small to full size with fade */
@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

[data-animate="zoomIn"] {
	opacity: 0;
}

/* Zoom Out - Scale from large to normal with fade */
@keyframes zoomOut {
	0% {
		opacity: 0;
		transform: scale(1.5);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

[data-animate="zoomOut"] {
	opacity: 0;
}

/* Flip In X - 3D flip on horizontal axis */
@keyframes flipInX {
	0% {
		opacity: 0;
		transform: perspective(400px) rotateX(90deg);
	}
	40% {
		transform: perspective(400px) rotateX(-20deg);
	}
	60% {
		opacity: 1;
		transform: perspective(400px) rotateX(10deg);
	}
	80% {
		transform: perspective(400px) rotateX(-5deg);
	}
	100% {
		opacity: 1;
		transform: perspective(400px) rotateX(0);
	}
}

[data-animate="flipInX"] {
	opacity: 0;
	backface-visibility: visible;
}

/* Flip In Y - 3D flip on vertical axis */
@keyframes flipInY {
	0% {
		opacity: 0;
		transform: perspective(400px) rotateY(90deg);
	}
	40% {
		transform: perspective(400px) rotateY(-20deg);
	}
	60% {
		opacity: 1;
		transform: perspective(400px) rotateY(10deg);
	}
	80% {
		transform: perspective(400px) rotateY(-5deg);
	}
	100% {
		opacity: 1;
		transform: perspective(400px) rotateY(0);
	}
}

[data-animate="flipInY"] {
	opacity: 0;
	backface-visibility: visible;
}

/* Rotate In - Rotate while fading in */
@keyframes rotateIn {
	0% {
		opacity: 0;
		transform: rotate(-200deg);
	}
	100% {
		opacity: 1;
		transform: rotate(0);
	}
}

[data-animate="rotateIn"] {
	opacity: 0;
	transform-origin: center;
}

/* ========================================
   ATTENTION SEEKER ANIMATIONS
   ======================================== */

/* Shake - Horizontal shake */
@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-6px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(6px);
	}
}

/* Swing - Pendulum swing from top */
@keyframes swing {
	20% {
		transform: rotate(15deg);
	}
	40% {
		transform: rotate(-10deg);
	}
	60% {
		transform: rotate(5deg);
	}
	80% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

[data-animate="swing"] {
	transform-origin: top center;
}

/* Tada - Scale + rotate attention grab */
@keyframes tada {
	0% {
		transform: scale(1);
	}
	10%, 20% {
		transform: scale(0.9) rotate(-3deg);
	}
	30%, 50%, 70%, 90% {
		transform: scale(1.1) rotate(3deg);
	}
	40%, 60%, 80% {
		transform: scale(1.1) rotate(-3deg);
	}
	100% {
		transform: scale(1) rotate(0);
	}
}

/* Rubber Band - Elastic stretch effect */
@keyframes rubberBand {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scaleX(1.25) scaleY(0.75);
	}
	40% {
		transform: scaleX(0.75) scaleY(1.25);
	}
	50% {
		transform: scaleX(1.15) scaleY(0.85);
	}
	65% {
		transform: scaleX(0.95) scaleY(1.05);
	}
	75% {
		transform: scaleX(1.05) scaleY(0.95);
	}
	100% {
		transform: scale(1);
	}
}

/* Flash - Quick opacity flash */
@keyframes flash {
	0%, 50%, 100% {
		opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
}

/* Jello - Wobbly skew effect */
@keyframes jello {
	0%, 11.1%, 100% {
		transform: translateZ(0);
	}
	22.2% {
		transform: skewX(-12.5deg) skewY(-12.5deg);
	}
	33.3% {
		transform: skewX(6.25deg) skewY(6.25deg);
	}
	44.4% {
		transform: skewX(-3.125deg) skewY(-3.125deg);
	}
	55.5% {
		transform: skewX(1.5625deg) skewY(1.5625deg);
	}
	66.6% {
		transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}
	77.7% {
		transform: skewX(0.390625deg) skewY(0.390625deg);
	}
	88.8% {
		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	}
}