/* ==========================================================================
   Banti Avchhare - Portfolio Stylesheet (Neo-Neutral System)
   ========================================================================== */

/* Page Viewport & Layout */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: #0c1218;
  color: #f1f5f9;
  font-family: 'Inter', sans-serif;
}

/* Background & Surfaces */
.bg-main-dark {
  background-color: #0c1218;
}

/* Typography */
.font-heading {
  font-family: 'Space Grotesk', sans-serif;
}

.terminal-font {
  font-family: 'JetBrains Mono', monospace;
}

/* Coral Accent Glow */
.coral-glow {
  box-shadow: 0 0 35px -5px rgba(255, 98, 67, 0.35);
}

/* Project Card Image Transition */
.project-card-image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover .project-card-image {
  transform: scale(1.035);
}

/* ==========================================================================
   Skills Conveyor Belt (Infinite Seamless Loop Machine)
   ========================================================================== */
@keyframes conveyor-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.conveyor-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.conveyor-belt,
.animate-marquee {
  display: flex !important;
  width: max-content !important;
  will-change: transform;
  animation: conveyor-scroll 30s linear infinite !important;
}

.conveyor-belt:hover,
.conveyor-belt:focus-within,
.animate-marquee:hover,
.animate-marquee:focus-within {
  animation-play-state: paused !important;
}

/* Conveyor Track for each duplicate instance */
.conveyor-track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.25rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .conveyor-track {
    gap: 1.75rem;
    padding-right: 1.75rem;
  }
}

/* Individual Skill Badges */
.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.5rem;
  background-color: rgba(19, 27, 36, 0.85);
  border: 1px solid rgba(31, 45, 61, 0.7);
  color: #cbd5e1;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.skill-badge:hover {
  border-color: #ff6243;
  color: #ffffff;
  background-color: rgba(24, 34, 46, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px -2px rgba(255, 98, 67, 0.25);
}

/* Conveyor Belt Gradient Fade Masks on sides */
.conveyor-mask {
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}