@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap');

:root {
  --brand: #DEC88E;
  --bg-dark: #080808;
}

/* --- ISOMETRIC FACTORY FLOOR ANIMATION --- */

.perspective-container {
  perspective: 1500px;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.assembly-floor {
  position: relative;
  /* FIX 1: Change fixed 600px to percentage and max-width */
  width: 100%;
  max-width: 600px; 
  height: 400px;
  transform: rotateX(60deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  /* FIX 2: Center the element to prevent off-screen overflow */
  margin: 0 auto; 
}
/* 1. The Conveyor Belt */
.conveyor-belt {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 60px;
  background: #1a1a1a;
  border: 2px solid #333;
  transform: translateY(-50%) translateZ(0);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.moving-slats {
  position: absolute;
  top: 0; left: 0; width: 200%; height: 100%;
  background: repeating-linear-gradient(90deg, transparent, transparent 30px, #333 30px, #333 34px);
  animation: belt-move 2s linear infinite;
}

@keyframes belt-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-60px); } /* Match slat pattern width */
}

/* 2. The Machines (Stations) */
.machine-station {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  transform: translateY(-50%) translateZ(40px); /* Lifted off floor */
  transform-style: preserve-3d;
}

.station-1 { left: 10%; }
.station-2 { left: 45%; }
.station-3 { left: 80%; }

/* Machine Heads (Visuals) */
.machine-head, .machine-arm, .machine-scanner {
  position: absolute;
  bottom: 0; left: 10px; right: 10px; height: 60px;
  background: #222;
  border: 1px solid #444;
  transform-origin: bottom center;
}

.machine-arm {
  background: #333;
  height: 80px;
  animation: arm-action 2s infinite ease-in-out;
}

@keyframes arm-action {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.7); } /* Stamping action */
}

/* Status Lights */
.status-light {
  position: absolute;
  top: -5px; right: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}

/* Labels (Counter-Rotated to face viewer) */
.machine-label {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%) rotateZ(45deg) rotateX(-60deg);
  background: rgba(0,0,0,0.8);
  border: 1px solid #333;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #888;
  white-space: nowrap;
}

/* 3. The Products (Cubes) */
.product-cube {
  position: absolute;
  top: 50%;
  width: 30px; height: 30px;
  background: #555; /* Raw material color */
  border: 1px solid #777;
  transform: translateY(-50%) translateZ(15px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

.cube-1 { animation: production-line 6s linear infinite; animation-delay: 0s; }
.cube-2 { animation: production-line 6s linear infinite; animation-delay: 2s; }
.cube-3 { animation: production-line 6s linear infinite; animation-delay: 4s; }

@keyframes production-line {
  0% { left: -10%; background: #555; }
  
  /* Entering AI Core */
  40% { left: 45%; background: #555; transform: translateY(-50%) translateZ(15px) scale(1); }
  45% { transform: translateY(-50%) translateZ(15px) scale(0.9); } /* Squish */
  50% { left: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); transform: translateY(-50%) translateZ(15px) scale(1); }
  
  /* Finished */
  100% { left: 110%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
}

/* --- UTILS --- */

.mask-fade-sides {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.animate-scroll {
  animation: scroll 40s linear infinite;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .assembly-floor {
    transform: scale(0.6) rotateX(60deg) rotateZ(-45deg);
  }
}