/* ========================================
   COMPONENT STYLES - Micah Portfolio
   ======================================== */

/* Navigation Components */
.nav-link {
  @apply font-medium hover:text-primary transition-colors duration-300 relative;
}

.nav-link::after {
  content: "";
  @apply absolute w-0 h-0.5 bg-primary left-0 bottom-0 transition-all;
}

.nav-link:hover::after {
  @apply w-full;
}

/* Button Components */
.btn-primary {
  @apply bg-primary hover:bg-primary-light px-6 py-2 rounded-md font-bold uppercase tracking-wide transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.btn-accent {
  @apply bg-accent hover:bg-accent-light px-6 py-2 rounded-md font-bold uppercase tracking-wide transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.btn-secondary {
  @apply glass text-white rounded-md hover:bg-primary transition-colors duration-300 px-6 py-2 font-medium;
}

/* Card Components */
.project-card {
  @apply group relative overflow-hidden rounded-md shadow-lg transition-all duration-500 hover:shadow-custom border border-transparent hover:border-primary/30;
}

.project-card::before {
  content: "";
  @apply absolute -z-10 w-full h-full bg-gradient-to-r from-primary/20 to-accent/10 opacity-100;
}

.project-card-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end;
}


/* Skill Components */
.skill-item {
  @apply flex flex-col items-center group;
}

.skill-icon {
  @apply bg-background-light p-6 rounded-md mb-6 shadow-md group-hover:shadow-xl transition-all duration-300 w-28 h-28 flex items-center justify-center group-hover:-translate-y-2 blueprint-element wireframe-box;
}

.skill-progress {
  @apply w-full bg-gray-700 h-1.5 mt-2 rounded-full overflow-hidden;
}

.skill-progress-bar {
  @apply bg-primary h-full rounded-full;
}

/* Form Components */
.form-input {
  @apply w-full p-4 bg-background-light rounded-md border border-gray-700 focus:border-primary focus:outline-none transition-colors;
}

.form-label {
  @apply text-gray-400 block mb-2 font-mono text-sm;
}

.form-textarea {
  @apply w-full p-4 bg-background-light rounded-md border border-gray-700 focus:border-primary focus:outline-none transition-colors;
}

/* Section Components */
.section-header {
  @apply text-center mb-12;
}

.section-title {
  @apply text-3xl md:text-4xl font-bold gradient-text inline-block mb-6 font-heading;
}

.section-subtitle {
  @apply text-primary font-medium uppercase tracking-widest mb-2 block font-heading;
}

.section-divider {
  @apply h-1 w-24 bg-gradient-to-r from-primary to-accent mx-auto;
}

/* Tech Components */
.tech-coordinate {
  @apply absolute top-0 left-0 text-xs text-primary/60 font-mono p-1;
}

.tech-coordinate-right {
  @apply absolute top-0 right-0 text-xs text-primary/60 font-mono p-1;
}

.tech-section-marker {
  @apply absolute top-0 right-0 text-xs text-primary/60 font-mono p-2 border-l border-b border-primary/30;
}

/* Animation Components */
.fade-up {
  @apply opacity-0 transform translate-y-5 transition-all duration-700 ease-out;
}

.fade-up.show {
  @apply opacity-100 translate-y-0;
}

.slide-in-left {
  @apply opacity-0 transform -translate-x-10 transition-all duration-700 ease-out;
}

.slide-in-left.show {
  @apply opacity-100 translate-x-0;
}

.slide-in-right {
  @apply opacity-0 transform translate-x-10 transition-all duration-700 ease-out;
}

.slide-in-right.show {
  @apply opacity-100 translate-x-0;
}

/* Utility Components */
.text-gradient {
  @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
}

.glass-card {
  @apply glass p-8 rounded-md hover:shadow-custom transition-all duration-300 border-l-4 border-accent transform hover:-translate-y-2;
}

.neumorphic-card {
  @apply neumorphic p-8 rounded-md hover:shadow-custom transition-all duration-300 border-t-4 border-primary transform hover:-translate-y-2;
}