/* Gear Animation Styles */
/* public/css/gear-animation.css */

.container {
  width: 100%; /* Span the new full-area parent */
  height: 100%; /* Span the new full-area parent */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* For text positioning */
  /* min-height removed as it's now a full background layer */
}

.machine {
  width: 120%; /* Adjusted size for better fit */
  height: auto;
  fill: rgb(59, 130, 246); /* Blue color from logo */
  filter: blur(2px); /* Slight blur for background effect */
  opacity: 0.3; /* More visible but still subtle */
  transform: scaleX(-1); /* Mirror the gears */
}

.small-shadow, .medium-shadow, .large-shadow {
  fill: rgba(20, 184, 166, 0.2); /* Teal shadow color */
  opacity: 0.5; /* Visible shadows for depth */
}

.small {
  animation: counter-rotation 5s infinite linear; /* Slower */
  transform-origin: 100.136px 225.345px;
}

.small-shadow {
  animation: counter-rotation 5s infinite linear; /* Slower */
  transform-origin: 110.136px 235.345px;
}

.medium {
  animation: rotation 7.5s infinite linear; /* Slower */
  transform-origin: 254.675px 379.447px;
}

.medium-shadow {
  animation: rotation 7.5s infinite linear; /* Slower */
  transform-origin: 264.675px 389.447px;
}

.large {
  animation: counter-rotation 10s infinite linear; /* Slower */
  transform-origin: 461.37px 173.694px;
}

.large-shadow {
  animation: counter-rotation 10s infinite linear; /* Slower */
  transform-origin: 471.37px 183.694px;
}

@keyframes rotation {
  from {transform: rotate(0deg);}
  to   {transform: rotate(359deg);}
}

@keyframes counter-rotation {
  from {transform: rotate(359deg);}
  to   {transform: rotate(0deg);}
}

/* Text Animations - Relative to .container or its parent */
.text-requirements,
.text-product {
  display: none; /* Hide the animated text */
  z-index: 1; /* Ensure text is above the gears within the animation container */
  position: absolute;
  font-size: 1.2rem; /* Adjusted size */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9); /* Semi-transparent white text */
  text-shadow: 0 0 5px rgba(0,0,0,0.3); /* Subtle shadow for readability */
  /* Base positions - will be overridden by animations */
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%); /* Center by default */
  white-space: nowrap; /* Prevent text wrapping */
}

.text-requirements {
  animation: svg-requirements-flow 10s linear infinite;
}

.text-product {
  animation: svg-product-flow 10s linear infinite;
  animation-delay: 5s; /* Half of the cycle */
}

/* Keyframes for text animation with SVG gears */
/* These values might need tweaking based on the SVG's rendered size and position */
@keyframes svg-requirements-flow {
  0%    { left: -20%; top: 45%; opacity: 0; transform: scale(0.8); }
  10%   { left: 15%;  top: 45%; opacity: 1; transform: scale(1); }   /* Enter from left */
  40%   { left: 40%;  top: 45%; opacity: 1; transform: scale(1); }   /* Move towards center */
  50%   { left: 50%;  top: 45%; opacity: 0; transform: scale(0.5); } /* Fade/shrink at center */
  100%  { left: 50%;  top: 45%; opacity: 0; transform: scale(0.5); }
}

@keyframes svg-product-flow {
  0%    { left: 50%;  top: 55%; opacity: 0; transform: scale(0.5); } /* Start at center, hidden, slightly lower */
  10%   { left: 60%;  top: 55%; opacity: 1; transform: scale(1); }   /* Emerge from center */
  40%   { left: 85%;  top: 55%; opacity: 1; transform: scale(1); }   /* Move right */
  50%   { left: 120%; top: 55%; opacity: 0; transform: scale(0.8); } /* Exit right, fade */
  100%  { left: 120%; top: 55%; opacity: 0; transform: scale(0.8); }
}

/* Global Network Indicator Styling (already present, ensure it's not affected or adjust if needed) */
.global-network {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8px 12px;
    border-radius: 20px;
    color: #e0e0e0;
    font-size: 0.8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 20; /* Ensure it's above other elements if needed */
}

.global-network-indicator {
    width: 10px;
    height: 10px;
    background-color: #4CAF50; /* Green for active */
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
  .machine {
    filter: blur(1px); /* Near to no blur on mobile */
  }
}