/**
 * NumeraIQ Process Section Styles
 * Animations are handled by GSAP in gsap-animations.ts
 * This CSS provides base styles and ensures visibility
 */

/* Process panels - visible by default, GSAP will animate from hidden */
.process-panel {
  opacity: 1;
}

.process-panel-input,
.process-panel-output {
  /* Initial state - will be animated by GSAP */
}

/* Hover effects for panels */
.process-panel-input > div:hover {
  border-color: hsl(var(--lime) / 0.4);
  transition: border-color 0.3s ease;
}

.process-panel-output > div:hover {
  border-color: hsl(var(--lime) / 0.6);
  background-color: hsl(var(--lime) / 0.1);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Mobile connector vertical */
.process-connector-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mobile line fill - starts at 0, animated by GSAP */
.process-line-fill {
  height: 0;
  transition: height 0.5s ease;
}

/* Fallback for no-JS - show full line */
.no-js .process-line-fill {
  height: 100%;
}

/* Mobile spinner */
.process-spinner {
  animation: processSpin 2s linear infinite;
}

@keyframes processSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   SVG Elements - Base Styles
   Initial states set by JavaScript
   ============================================ */

/* SVG container - allow overflow for dots at edges */
.process-graphic svg {
  overflow: visible;
}

/* Lines - visible by default for no-JS fallback */
.process-line-left,
.process-line-right {
  /* stroke-dasharray and stroke-dashoffset set by JS */
}

/* Boxes */
.process-box-outer,
.process-box-inner {
  /* opacity set by JS, rotation handled by GSAP */
}

/* Processing glow */
.process-glow {
  /* opacity set by JS */
}

/* Dots - visible by default for no-JS fallback */
.process-dot-start {
  opacity: 1;
}

.process-dot-end,
.process-dot-center {
  /* opacity set by JS */
}

/* Traveling dot */
.process-traveling-dot {
  /* opacity and position set by JS */
}

/* ============================================
   Mobile Panel Styles
   ============================================ */

.process-panel-mobile {
  opacity: 1;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1023px) {
  /* Hide desktop layout on mobile */
  .process-step > .hidden.lg\:flex {
    display: none !important;
  }

  /* Show mobile layout */
  .process-step > .lg\:hidden {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  /* Show desktop layout */
  .process-step > .hidden.lg\:flex {
    display: flex !important;
  }

  /* Hide mobile layout */
  .process-step > .lg\:hidden {
    display: none !important;
  }
}