@import url('../base/globals.css');

/* =============================================================================
   GLOBAL CONSOLIDATIONS
   ============================================================================= */

/* Animation performance optimizations */
#services .alternating-content-item.animation-complete,
#about .image-text-wrapper.animation-complete {
  transition-delay: 0s !important;
}

/* Scroll animation initial states */
#services .alternating-content-item,
#about .image-text-wrapper {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

/* Reset transitions after animation completes */
#services .alternating-content-item.animate-in,
#about .image-text-wrapper.animate-in {
  transition: all 0.3s ease;
  will-change: auto;
}

/* Visible state when in view */
#services .alternating-content-item.animate-in,
#about .image-text-wrapper.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  #services .alternating-content-item,
  #about .image-text-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   HERO SECTION
   ============================================================================= */

#hero {
  background: var(--gradient-green-blue-h);
}

@media (max-width: 1023px) {
  #hero {
    background: var(--brand-blue);
  }
}

/* =============================================================================
   SERVICES SECTION
   ============================================================================= */

#services .alternating-content-item {
  cursor: pointer;
}

#services .alternating-content-item::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: -8px;
  bottom: -8px;
  border: 1px solid var(--brand-blackboard);
  background: transparent;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Staggered animation delays - ONLY during scroll animation */
#services .alternating-content-item:nth-child(1):not(.animation-complete) { 
  transition-delay: 0.1s; 
}

#services .alternating-content-item:nth-child(2):not(.animation-complete) { 
  transition-delay: 0.2s; 
}

#services .alternating-content-item:nth-child(3):not(.animation-complete) { 
  transition-delay: 0.3s; 
}

/* Services hover effects */
@media (hover: hover) and (pointer: fine) {
  #services .alternating-content-item:hover {
    transform: translateY(-8px);
    border: 2px solid var(--brand-blackboard);
    box-shadow: 0 8px 25px var(--shadow-medium);
  }

  #services .alternating-content-item:hover::before {
    opacity: 1;
  }

  /* Brand Color Cycling for Services */
  #services .alternating-content-item:hover {
    border-color: var(--brand-blackboard);
  }

  #services .alternating-content-item:hover::before {
    border-color: var(--brand-blackboard);
  }
}

/* Mobile overrides - disable services hover effects */
@media (max-width: 767px) {
  #services .alternating-content-item {
    cursor: default;
  }

  #services .alternating-content-item:hover {
    transform: none !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    transition: none !important;
  }

  #services .alternating-content-item:hover::before {
    opacity: 0 !important;
    transition: none !important;
  }
}

/* =============================================================================
   ABOUT SECTION
   ============================================================================= */

/* About section uses global image-text-wrapper - no overrides needed */

/* Custom glow effect for about section image */
#about .image-text-image img {
  transition: filter 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  #about .image-text-wrapper:hover .image-text-image img {
    filter: drop-shadow(0 0 30px var(--brand-green)) 
            drop-shadow(0 0 60px var(--brand-blue)) 
            drop-shadow(0 0 90px var(--brand-yellow));
  }
}