/* ===================== NEURAL PROFILE ANIMATIONS ===================== */

/* Core keyframes - reused across components */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===================== NEURAL SECTION ELEMENTS ===================== */

/* Section container - no animation */
.neural-section {
  opacity: 1;
}

/* Header - no animation */
.neural-header {
  opacity: 1;
}

/* Divider - static */
.neural-divider {
  opacity: 0.5;
}

/* Main content grid */
.neural-content-grid {
  opacity: 0;
  animation: slideInUp 0.8s ease-out 0.3s forwards;
}

/* Left panel */
.neural-left-panel {
  opacity: 0;
  animation: slideInLeft 0.8s ease-out 0.5s forwards;
}

/* Tree content */
.neural-tree-container {
  opacity: 0;
  animation: slideInUp 0.6s ease-out 0.8s forwards;
}

/* Right panel */
.neural-right-panel {
  opacity: 0;
  animation: slideInRight 0.8s ease-out 0.6s forwards;
}

/* Video panel */
.neural-video-panel {
  opacity: 0;
  animation: scaleIn 0.8s ease-out 0.7s forwards;
}

/* Video inner container */
.neural-video-inner {
  opacity: 0;
  animation: scaleIn 0.6s ease-out 1.0s forwards;
}

/* Holo video */
.neural-holo-video {
  opacity: 0;
  animation: fadeIn 0.8s ease-out 1.2s forwards;
}

/* Status panel */
.neural-status-panel {
  opacity: 0;
  animation: slideInUp 0.8s ease-out 0.9s forwards;
}

/* Status grid */
.neural-status-grid {
  opacity: 0;
  animation: slideInUp 0.5s ease-out 1.2s forwards;
}

/* Status items */
.neural-status-item {
  opacity: 0;
  animation: slideInLeft 0.4s ease-out forwards;
}

.neural-status-item:nth-child(1) { animation-delay: 1.4s; }
.neural-status-item:nth-child(2) { animation-delay: 1.5s; }

/* Status labels */
.neural-status-label {
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 1.5s; }
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.6s; }

/* Status values */
.neural-status-value {
  opacity: 0;
  animation: scaleIn 0.3s ease-out forwards;
}

.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.6s; }
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.7s; }

/* Pulse dot */
.neural-pulse-dot {
  opacity: 0;
  animation: scaleIn 0.4s ease-out forwards;
}

.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.7s; }

/* ===================== BACKGROUND ELEMENTS ===================== */

/* Checkered background - static */
.neural-checkered-bg {
  position: relative;
}

.neural-checkered-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 1;
  background-image:
    linear-gradient(45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
  pointer-events: none;
  z-index: 0;
}

/* Scan line - hidden */
.neural-scan-line {
  display: none;
}

/* ===================== RESPONSIVE DESIGN ===================== */

@media (max-width: 1024px) {
  .neural-content-grid,
  .neural-left-panel,
  .neural-video-panel,
  .neural-right-panel {
    animation-duration: 0.6s;
  }
}

@media (max-width: 768px) {
  .neural-content-grid { animation-delay: 0.2s; }
  .neural-left-panel { animation-delay: 0.3s; }
  .neural-right-panel { animation-delay: 0.4s; }
  .neural-video-panel { animation-delay: 0.5s; }
  .neural-status-panel { animation-delay: 0.6s; }

  .neural-status-item:nth-child(1) { animation-delay: 0.8s; }
  .neural-status-item:nth-child(2) { animation-delay: 0.9s; }

  .neural-status-item:nth-child(1) .neural-status-label { animation-delay: 0.9s; }
  .neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.0s; }

  .neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.0s; }
  .neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.1s; }

  .neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.1s; }

  /* Faster animations on mobile */
  .neural-content-grid,
  .neural-left-panel,
  .neural-right-panel,
  .neural-video-panel,
  .neural-status-panel {
    animation-duration: 0.5s;
  }

  .neural-tree-container,
  .neural-video-inner,
  .neural-holo-video,
  .neural-status-grid {
    animation-duration: 0.4s;
  }

  .neural-status-item,
  .neural-status-label,
  .neural-status-value,
  .neural-pulse-dot {
    animation-duration: 0.3s;
  }
}

/* ===================== ACCESSIBILITY ===================== */

@media (prefers-reduced-motion: reduce) {
  *[class*="neural-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
