/* Common Variables */
:root {
  /* Colors */
  --primary-orange: #ffa500;
  --secondary-orange: #ff8c00;
  --dark-bg: #111;
  --light-text: #ffffff;
  
  /* Particle Sizes */
  --particle-size-small: 4px;
  --particle-size-medium: 6px;
  --particle-size-large: 7px;
  
  /* Breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
  --breakpoint-xxl: 1920px;
  
  /* Animations */
  --animation-duration: 6s;
  --animation-timing: ease-in-out;
}

/* Common Particle Styles */
.particle-base {
  position: absolute;
  background: var(--primary-orange);
  border-radius: 50%;
  animation: float var(--animation-duration) var(--animation-timing) infinite;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.6);
  opacity: 0.7;
}

.industry-particle,
.slider-particle,
.particle {
  composes: particle-base;
}

/* Common Media Queries */
@media (max-width: var(--breakpoint-xxl)) {
  .hero-section, #charcoal-animation {
    min-height: 800px;
  }
}

@media (max-width: var(--breakpoint-xl)) {
  .hero-section, #charcoal-animation {
    height: 100vh;
    min-height: 700px;
  }
}

@media (max-width: var(--breakpoint-lg)) {
  .hero-section, #charcoal-animation {
    height: 90vh;
    min-height: 600px;
  }
}

@media (max-width: var(--breakpoint-md)) {
  .hero-section, #charcoal-animation {
    height: 80vh;
    min-height: 500px;
  }
  
  .hero-content {
    padding: 1rem 0.5rem;
    max-width: 95vw;
  }
  
  .hero-heading {
    font-size: 2rem;
  }
  
  .hero-tagline {
    font-size: 1rem;
  }
}

/* Common Animations */
@keyframes float {
  0%, 100% { 
    transform: translateY(100px) rotate(0deg); 
    opacity: 0; 
  }
  50% { 
    transform: translateY(-10px) rotate(180deg); 
    opacity: 0.8; 
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}