/* ==========================================================================
   FLO ANIMATION PLUGIN ISOLATED CSS (Scoped to .flo-modal-active)
   ========================================================================== */

body.flo-modal-active{
  overflow: hidden;
}

/* 1. Global positioning track limits (Only active when plugin layer runs) */
.flo-modal-active .pattern-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100px;
  z-index: 10;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}
.flo-modal-active .pattern-container.fade-out { 
  opacity: 0; 
}

/* 2. Isolated Grid Layout Columns */
.flo-modal-active .dot-column {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transform: translate(calc(-50% + var(--x-offset)), -50%); 
}

/* 3. Concentric Faint Background Dot Matrix Layer Nodes */
.flo-modal-active .bg-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  opacity: 0; 
}
.flo-modal-active .pattern-container.is-animated .bg-dot { 
  animation: floFadeInTrack 0.3s ease-out forwards; 
}

/* 4. Active Accent Floating Component Targets */
.flo-modal-active .active-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  transform: translate(var(--start-x), var(--start-y));
}
.flo-modal-active .pattern-container.is-animated .active-dot {
  animation: floCrossX 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--active-delay); 
}

/* 5. Central Zooming Circle Element Layout Rules */
.flo-modal-active .form .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-out; 
  z-index: 20;
  opacity: 1;
  pointer-events: none;
}
.flo-modal-active .form.active .circle {
  transform: translate(-50%, -50%) scale(142); 
  transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.5s ease-out;
}
.flo-modal-active .form .circle.fade-out-circle { 
  opacity: 0; 
}

/* 6. Form Container Staging Close Anchor Link */
.flo-modal-active .close-btn {
  position: absolute;
  top: 30px;
  right: 40px;
  background: none;
  border: none;
  font-size: 28px;
  color: #333;
  cursor: pointer;
  z-index: 310;
  transition: transform 0.2s, opacity 0.2s;
}
.flo-modal-active .close-btn:hover { 
  transform: scale(1.1); 
  opacity: 0.7; 
}

/* Unique Keyframe Names to Prevent Conflict */
@keyframes floFadeInTrack { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes floCrossX {
  0% { transform: translate(var(--start-x), var(--start-y)); opacity: 0; }
  100% { transform: translate(0px, 0px); opacity: 1; }
}