/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation Classes */
.scroll-animate {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scroll-animate.visible {
  opacity: 1;
}

[data-anim="scroll-fade-up"] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-anim="scroll-fade-down"] {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-anim="scroll-fade-right"] {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-anim="scroll-zoom"] {
  opacity: 0;
  transform: scale(5);
  will-change: transform, opacity;
}

[data-anim="scroll-zoom-in-up"] {
  opacity: 0;
  transform: translateY(100px) scale(0.3);
  will-change: transform, opacity;
}

/* Active States */
[data-anim].visible {
  opacity: 1;
  transform: translate(0) scale(1);
  transition: opacity 1s ease, transform 1s ease, scale 1s ease;
}


/* Slide */
[data-anim="scroll-slide-right"].scroll-animate {
	animation-name: slideRight;
}

[data-anim="scroll-slide-left"].scroll-animate {
	animation-name: slideLeft;
}

[data-anim="scroll-slide-up"].scroll-animate {
	animation-name: slideUp;
}

[data-anim="scroll-slide-down"].scroll-animate {
	animation-name: slideDown;
}

@keyframes slideRight {
	0% {
		transform: translate3d(-30%, 0, 0);
	}

	100% {
		transform: translateZ(0);
	}
}

@keyframes slideLeft {
	0% {
		transform: translate3d(30%, 0, 0);
	}

	100% {
		transform: translateZ(0);
	}
}

@keyframes slideUp {
	0% {
		transform: translate3d(0, 50%, 0);
	}

	100% {
		transform: translateZ(0);
	}
}

@keyframes slideDown {
	0% {
		transform: translate3d(0, -100px, 0);
	}

	100% {
		transform: translateZ(0);
	}
}


/*
// slide with rotate
[data-anim="slide-rotate-left"].has-animate {
	animation-name: slideRotateLeft;
}

[data-anim="slide-rotate-right"].has-animate {
	animation-name: slideRotateRight;
}

[data-anim="slide-rotate-up"].has-animate {
	animation-name: slideUpRotateLeft;
}

@keyframes slideRotateLeft {
	0% {
		transform: translate3d(30%, 0, 0) rotate(45deg);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) rotate(0);
	}
}

@keyframes slideRotateRight {
	0% {
		transform: translate3d(-30%, 0, 0) rotate(-45deg);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) rotate(0);
	}
}

@keyframes slideUpRotateLeft {
	0% {
		transform: translate3d(0, 150px, 0) rotate(30deg);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) rotateZ(0);
	}
}

// rotate
[data-anim="rotate-right"].has-animate {
	animation-name: rotateRight;
}

[data-anim="rotate-left"].has-animate {
	animation-name: rotateLeft;
}

[data-anim="lambai"].has-animate {
	animation-name: lambai;
}

@keyframes rotateRight {
	0% {
		transform: rotateZ(0);
	}

	100% {
		transform: rotate(10deg);
	}
}

@keyframes rotateLeft {
	0% {
		transform: rotateZ(0);
	}

	100% {
		transform: rotate(-10deg);
	}
}

@keyframes lambai {
	0% {
		transform: rotateZ(5deg);
	}

	100% {
		transform: rotateZ(-5deg);
	}
}

// Zoom
[data-anim="zoom-in"].has-animate {
	animation-name: zoomIn;
}

[data-anim="zoom-in-up"].has-animate {
	animation-name: zoomInUp;
}

[data-anim="zoom-in-down"].has-animate {
	animation-name: zoomInDown;
}

[data-anim="zoom-in-left"].has-animate {
	animation-name: zoomInLeft;
}

[data-anim="zoom-in-right"].has-animate {
	animation-name: zoomInRight;
}

[data-anim="zoom-out"].has-animate {
	animation-name: zoomOut;
}

[data-anim="zoom-out-up"].has-animate {
	animation-name: zoomOutUp;
}

[data-anim="zoom-out-down"].has-animate {
	animation-name: zoomOutDown;
}

@keyframes zoomIn {
	0% {
		transform: scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes zoomInUp {
	0% {
		transform: translate3d(0, 100px, 0) scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) scale3d(1, 1, 1);
	}
}

@keyframes zoomInDown {
	0% {
		transform: translate3d(0, -100px, 0) scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) scale3d(1, 1, 1);
	}
}

@keyframes zoomInLeft {
	0% {
		transform: translate3d(50%, 0, 0) scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) scale3d(1, 1, 1);
	}
}

@keyframes zoomInRight {
	0% {
		transform: translate3d(-50%, 0, 0) scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) scale3d(1, 1, 1);
	}
}

@keyframes zoomOut {
	0% {
		transform: scale3d(1.3, 1.3, 1.3);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes zoomOutUp {
	0% {
		transform: translate3d(0, 100px, 0) scale3d(1.3, 1.3, 1.3);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) scale3d(1, 1, 1);
	}
}

@keyframes zoomOutDown {
	0% {
		transform: translate3d(0, -100px, 0) scale3d(1.3, 1.3, 1.3);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateZ(0) scale3d(1, 1, 1);
	}
}

// Flip
[data-anim*="flip"][data-anim*="flip"] {
	backface-visibility: hidden;
}

[data-anim="flip-up"].has-animate {
	animation-name: flipUp;
}

[data-anim="flip-down"].has-animate {
	animation-name: flipDown;
}

[data-anim="flip-left"].has-animate {
	animation-name: flipLeft;
}

[data-anim="flip-right"].has-animate {
	animation-name: flipRight;
}

@keyframes flipUp {
	0% {
		perspective: 2500px;
		transform: rotateX(100deg);
	}

	100% {
		perspective: 0;
		transform: rotateX(0);
	}
}

@keyframes flipDown {
	0% {
		perspective: 2500px;
		transform: rotateX(-100deg);
	}

	100% {
		perspective: 0;
		transform: rotateX(0);
	}
}

@keyframes flipLeft {
	0% {
		perspective: 2500px;
		transform: rotateY(-100deg);
	}

	100% {
		perspective: 0;
		transform: rotateY(0);
	}
}

@keyframes flipRight {
	0% {
		perspective: 2500px;
		transform: rotateY(100deg);
	}

	100% {
		perspective: 0;
		transform: rotateY(0);
	}
}

[data-anim="height-up"].has-animate {
	animation-name: heightUp;
	visibility: visible !important;
}

[data-anim="height-up-reverse"].has-animate {
	animation-name: heightUpReverse;
	animation-fill-mode: forwards;
	visibility: visible !important;
}

[data-anim="height-down"].has-animate {
	animation-name: heightDown;
	visibility: visible !important;
}

[data-anim="height-down-reverse"].has-animate {
	animation-name: heightDownReverse;
	animation-fill-mode: forwards;
	visibility: visible !important;
}

[data-anim="height-center"].has-animate {
	animation-name: heightCenter;
	visibility: visible !important;
}

[data-anim="height-center-reverse"].has-animate {
	animation-name: heightCenterReverse;
	animation-fill-mode: forwards;
	visibility: visible !important;
}

[data-anim="width-left"].has-animate {
	animation-name: widthLeft;
	visibility: visible !important;
}

[data-anim="width-left-reverse"].has-animate {
	animation-name: widthLeftReverse;
	animation-fill-mode: forwards;
	visibility: visible !important;
}

[data-anim="width-right"].has-animate {
	animation-name: widthRight;
	visibility: visible !important;
}

[data-anim="width-right-reverse"].has-animate {
	animation-name: widthRightReverse;
	animation-fill-mode: forwards;
	visibility: visible !important;
}

[data-anim="width-center"].has-animate {
	animation-name: widthCenter;
	visibility: visible !important;
}

[data-anim="width-center-reverse"].has-animate {
	animation-name: widthCenterReverse;
	animation-fill-mode: forwards;
	visibility: visible !important;
}

@keyframes heightUp {
	0% {
		clip-path: inset(100% 0 0 0);
	}

	100% {
		clip-path: inset(0% 0 0 0);
	}
}

@keyframes heightDown {
	0% {
		clip-path: inset(0 0 100% 0);
	}

	100% {
		clip-path: inset(0 0 0% 0);
	}
}

@keyframes heightUpReverse {
	0% {
		transform: translateZ(0) scaleY(1);
	}

	100% {
		transform: translate3d(0, 50%, 0) scaleY(0);
	}
}

@keyframes heightDownReverse {
	0% {
		transform: translateZ(0) scaleY(1);
	}

	100% {
		transform: translate3d(0, -50%, 0) scaleY(0);
	}
}

@keyframes heightCenter {
	0% {
		transform: scaleY(0);
	}

	100% {
		transform: scaleY(1);
	}
}

@keyframes heightCenterReverse {
	0% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

@keyframes widthLeft {
	0% {
		transform: translate3d(50%, 0, 0) scaleX(0);
	}

	100% {
		transform: translateZ(0) scaleX(1);
	}
}

@keyframes widthRight {
	0% {
		transform: translate3d(-50%, 0, 0) scaleX(0);
	}

	100% {
		transform: translateZ(0) scaleX(1);
	}
}

@keyframes widthCenter {
	0% {
		transform: scaleX(0);
	}

	100% {
		transform: scaleX(1);
	}
}

@keyframes widthLeftReverse {
	0% {
		transform: translateZ(0) scaleX(1);
	}

	100% {
		transform: translate3d(50%, 0, 0) scaleX(0);
	}
}

@keyframes widthRightReverse {
	0% {
		transform: translateZ(0) scaleX(1);
	}

	100% {
		transform: translate3d(-50%, 0, 0) scaleX(0);
	}
}

@keyframes widthCenterReverse {
	0% {
		transform: scaleX(1);
	}

	100% {
		transform: scaleX(0);
	}
}

[data-anim="zoom-out-image"].has-animate {
	transition-duration: 1500ms;
	transition-timing-function: ease;
	transition-delay: 200ms;
	transition-property: transform;
	transform: scale3d(1, 1, 1);
}

[data-anim="zoom-out-image"] {
	transform: scale3d(1.25, 1.25, 1.25);
	transition-duration: 5000ms !important;
	visibility: visible !important;
}

img[alt="flower-1"] {
	transform-origin: 10% 35%;
}

img[alt="flower-2"] {
	transform-origin: 40% 95%;
}

img[alt="flower-3"] {
	transform-origin: 40% 95%;
}

img[alt="tree"] {
	transform-origin: 45% 95%;
}
*/