/* Entrance animations used by the Motion tab.
   These are the same animations Elementor / Animate.css use.
   The class is applied via JS as an inline style. */

@keyframes fvcmsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fvcmsFadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fvcmsFadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fvcmsFadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fvcmsFadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fvcmsSlideInUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fvcmsSlideInDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes fvcmsZoomIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fvcmsBounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.06); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes fvcmsFlipInX {
  from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
  to   { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@keyframes fvcmsFlipInY {
  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  to   { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}

.fadeIn      { animation: fvcmsFadeIn 0.6s ease-out both; }
.fadeInUp    { animation: fvcmsFadeInUp 0.6s ease-out both; }
.fadeInDown  { animation: fvcmsFadeInDown 0.6s ease-out both; }
.fadeInLeft  { animation: fvcmsFadeInLeft 0.6s ease-out both; }
.fadeInRight { animation: fvcmsFadeInRight 0.6s ease-out both; }
.slideInUp   { animation: fvcmsSlideInUp 0.6s ease-out both; }
.slideInDown { animation: fvcmsSlideInDown 0.6s ease-out both; }
.zoomIn      { animation: fvcmsZoomIn 0.6s ease-out both; }
.bounceIn    { animation: fvcmsBounceIn 0.8s ease-out both; }
.flipInX     { animation: fvcmsFlipInX 0.6s ease-out both; }
.flipInY     { animation: fvcmsFlipInY 0.6s ease-out both; }

/* Background overlay (sits on top of the background image). */
[data-fvcms-bg-overlay] {
  position: relative;
}
[data-fvcms-bg-overlay]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fvcms-bg-overlay, transparent);
  mix-blend-mode: var(--fvcms-bg-overlay-blend, normal);
  pointer-events: none;
  z-index: 0;
}
[data-fvcms-bg-overlay] > * {
  position: relative;
  z-index: 1;
}