@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);
  }
}

/* Homepage Hero Blackboard Style */
#hero.hero-blackboard {
  background: var(--brand-blackboard);
  color: var(--brand-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--font-size-sm);
}

.hero-text-centered {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-text-centered h1 {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-6xl);
  margin-bottom: 2rem;
}

.hero-subtext {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-text-centered .hero-subtext {
  margin-bottom: 2.5rem;
  color: var(--brand-white);
}

.hero-text-centered .btn {
  margin-top: 1.5rem;
}

.hero-text-centered h1 br + span {
  color: var(--brand-green);
  display: block;
}

.hero-text-centered .btn.hero-btn {
  background: var(--brand-green);
  color: var(--brand-blackboard);
  font-weight: bold;
  font-size: 1rem;
  padding: var(--font-size-md) var(--font-size-3xl);
  border: 2px solid var(--brand-blackboard);
  border-radius: var(--radius-lg);
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  display: inline-block;
}

.hero-text-centered .btn.hero-btn:hover,
.hero-text-centered .btn.hero-btn:focus {
  background: var(--brand-white);
  color: var(--brand-blackboard);
  border: 2px solid var(--brand-blackboard);
  box-shadow: 0 4px 16px var(--shadow-medium);
  outline: none;
  transform: translateY(-2px);
}

.hero-text-centered .btn.hero-btn:active {
  background: var(--brand-green);
  color: var(--brand-blackboard);
  border: 2px solid var(--brand-blackboard);
  transform: translateY(1px);
}

/* Scroll Down Button */
.scroll-down-btn {
  position: absolute;
  bottom: var(--font-size-3xl);
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: 2px solid var(--brand-white);
  color: var(--brand-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  animation: bounce 2s infinite;
}

.scroll-down-btn:hover {
  background: var(--brand-white);
  color: var(--brand-blackboard);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 4px 16px var(--shadow-medium);
}

.scroll-down-btn:active {
  transform: translateX(-50%) translateY(1px);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* Hero responsive breakpoints (section-organized) */
@media (max-width: 1919px) {
  .hero-text-centered h1 {
    line-height: var(--line-height-3xl);
  }
}
@media (max-width: 1399px) {
  .hero-text-centered h1 {
    line-height: var(--line-height-3xl);
  }
}
@media (max-width: 1023px) {
  .hero-text-centered h1 {
    line-height: var(--line-height-3xl);
  }
}
@media (max-width: 767px) {
  .hero-text-centered h1 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-2xl);
  }
  .hero-subtext {
    max-width: 400px;
  }
}
@media (max-width: 479px) {
  .hero-subtext {
    max-width: 100%;
  }
}

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

/* Custom glow effect for about section image */
@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));
  }
}

/* =============================================================================
   ANATOMY SECTION
   ============================================================================= */

/* Enhanced Glass Card Hover Effects */
@media (hover: hover) and (pointer: fine) {
  #anatomy .glass-card:nth-child(1):hover {
    border-color: var(--brand-green);
    box-shadow: 0 8px 32px var(--shadow-dark), 0 0 20px var(--brand-green);
    transform: translateY(-8px) scale(1.02);
  }
  
  #anatomy .glass-card:nth-child(1):hover h3 {
    color: var(--brand-green);
    transform: scale(1.05);
  }
  
  #anatomy .glass-card:nth-child(2):hover {
    border-color: var(--brand-blue);
    box-shadow: 0 8px 32px var(--shadow-dark), 0 0 20px var(--brand-blue);
    transform: translateY(-8px) scale(1.02);
  }
  
  #anatomy .glass-card:nth-child(2):hover h3 {
    color: var(--brand-blue);
    transform: scale(1.05);
  }
  
  #anatomy .glass-card:nth-child(3):hover {
    border-color: var(--brand-yellow);
    box-shadow: 0 8px 32px var(--shadow-dark), 0 0 20px var(--brand-yellow);
    transform: translateY(-8px) scale(1.02);
  }
  
  #anatomy .glass-card:nth-child(3):hover h3 {
    color: var(--brand-yellow);
    transform: scale(1.05);
  }
}

/* =============================================================================
   DIAGNOSTIC SECTION
   ============================================================================= */

/* Diagnostic section black background overrides */
#diagnostic {
  background: var(--brand-blackboard);
  color: var(--brand-white);
}

#diagnostic h4 {
  color: var(--brand-white);
}

#diagnostic .section-divider {
  background: var(--brand-white);
}

#diagnostic .section-description {
  color: var(--brand-white);
}

/* Timeline pattern overrides for black background */
#diagnostic .timeline-wrapper::before {
  background: var(--brand-white);
}

#diagnostic .timeline-item {
  background: var(--brand-blackboard);
  color: var(--brand-white);
  border: 2px solid var(--brand-white);
  text-align: left;
  align-items: flex-start;
}

#diagnostic .timeline-item::before,
#diagnostic .timeline-item::after {
  background: var(--brand-blackboard);
  border: 2px solid var(--brand-white);
}

#diagnostic .timeline-item h3 {
  color: var(--brand-white);
}

#diagnostic .timeline-item p {
  color: var(--brand-white);
}

/* Hover effects for black background */
@media (hover: hover) and (pointer: fine) {
  #diagnostic .timeline-item:hover {
    box-shadow: 0 4px 16px var(--shadow-dark);
  }
  
  #diagnostic .timeline-item:hover::before,
  #diagnostic .timeline-item:hover::after {
    background: var(--brand-white);
    border-color: var(--brand-white);
  }
  
  /* Brand Color Cycling for Timeline Items */
  #diagnostic .timeline-item:nth-child(1):hover {
    border-color: var(--brand-red);
  }
  
  #diagnostic .timeline-item:nth-child(1):hover h3 {
    color: var(--brand-red);
  }
  
  #diagnostic .timeline-item:nth-child(2):hover {
    border-color: var(--brand-yellow);
  }
  
  #diagnostic .timeline-item:nth-child(2):hover h3 {
    color: var(--brand-yellow);
  }
  
  #diagnostic .timeline-item:nth-child(3):hover {
    border-color: var(--brand-blue);
  }
  
  #diagnostic .timeline-item:nth-child(3):hover h3 {
    color: var(--brand-blue);
  }
  
  #diagnostic .timeline-item:nth-child(4):hover {
    border-color: var(--brand-yellow);
  }
  
  #diagnostic .timeline-item:nth-child(4):hover h3 {
    color: var(--brand-yellow);
  }
  
  #diagnostic .timeline-item:nth-child(5):hover {
    border-color: var(--brand-green);
  }
  
  #diagnostic .timeline-item:nth-child(5):hover h3 {
    color: var(--brand-green);
  }
}