/* ===================================
   Alronics Tech - Main Stylesheet
   Tailwind CSS + Custom Utilities
   =================================== */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== Custom Components ===== */

/* ===== BUTTON STYLES ===== */
@layer components {
  /* Base Button Styles - Common properties for all buttons */
  .btn-base {
    @apply inline-block font-bold py-3 px-6 rounded-lg text-sm transition-all duration-200 ease-out;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white;
    @apply disabled:opacity-60 disabled:cursor-not-allowed;
  }

  /* Primary Button - Orange, used for main CTAs (Subscribe, Start, etc.) */
  .btn-primary {
    @apply bg-orange-500 text-white shadow-lg hover:shadow-xl;
    @apply hover:bg-orange-600 active:bg-orange-700 active:shadow-md;
    @apply focus:ring-orange-400;
    @apply transform hover:scale-105 active:scale-100 transition-transform;
  }

  /* Secondary Button - Cyan, used for explore/view actions */
  .btn-secondary {
    @apply bg-cyan-500 text-white shadow-lg hover:shadow-xl;
    @apply hover:bg-cyan-600 active:bg-cyan-700 active:shadow-md;
    @apply focus:ring-cyan-400;
    @apply transform hover:scale-105 active:scale-100 transition-transform;
  }

  /* Outline Button - White border, used on colored backgrounds */
  .btn-tertiary {
    @apply border-2 border-white text-white shadow-lg hover:shadow-xl;
    @apply hover:bg-white hover:text-indigo-700 active:bg-slate-100 active:text-slate-900;
    @apply focus:ring-white;
    @apply transform hover:scale-105 active:scale-100 transition-transform;
  }

  /* Small Button - Compact secondary action */
  .btn-small {
    @apply bg-indigo-600 text-white py-2 px-5 text-xs shadow-md hover:shadow-lg;
    @apply hover:bg-indigo-700 active:bg-indigo-800 active:shadow-sm;
    @apply focus:ring-indigo-400;
    @apply transform hover:scale-105 active:scale-100 transition-transform;
  }

  /* Outline Button - Border style for secondary actions */
  .btn-outline {
    @apply border-2 border-indigo-600 text-indigo-600 hover:shadow-md;
    @apply hover:bg-indigo-50 active:bg-indigo-100 active:border-indigo-700 active:text-indigo-700;
    @apply focus:ring-indigo-400;
    @apply transform hover:scale-105 active:scale-100 transition-transform;
  }

  /* Link Button - Minimal style for text links */
  .btn-link {
    @apply text-indigo-600 font-semibold hover:text-indigo-700 hover:underline;
    @apply focus:ring-indigo-400 focus:ring-2 focus:ring-offset-2;
    @apply transition-colors duration-200;
  }

  /* ===== HEADING STYLES ===== */
  /* Main page heading */
  .heading-lg {
    @apply text-5xl font-bold text-slate-900 mb-4;
  }

  /* Section heading */
  .heading-md {
    @apply text-3xl font-bold text-slate-900 mb-8;
  }

  /* Subsection heading */
  .heading-sm {
    @apply text-2xl font-bold text-slate-900 mb-3;
  }

  /* Small feature label */
  .heading-xs {
    @apply text-lg font-bold text-slate-900 mb-2;
  }

  /* Center-aligned heading (for sections) */
  .heading-center {
    @apply text-center mb-20;
  }

  /* ===== EXISTING COMPONENTS ===== */
  /* Code block with custom styling */
  .code-block {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm font-mono border border-gray-700;
  }

  .code-copy-btn {
    @apply absolute top-2 right-2 bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-xs transition-colors;
  }

  /* Hero badge */
  .badge-hero {
    @apply inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium;
  }

  /* Card hover effect */
  .card-hover {
    @apply rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer;
  }

  /* Category card */
  .category-card {
    @apply p-6 rounded-lg bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 hover:shadow-md transition-shadow;
}

/* ===== Animations ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.slide-down {
  animation: slideDown 0.4s ease-out;
}

/* ===== Accessibility Improvements ===== */
/* Skip to main content - Already handled by inline CSS in HTML head
   The inline <style> tag in the <head> ensures visibility control works
   DO NOT add conflicting CSS here to avoid fighting with inline styles */

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  @apply outline-2 outline-offset-2 outline-cyan-500;
}

/* Smooth transitions on interactive elements */
a,
button {
  @apply transition-colors duration-200;
}

/* ===== Code Highlighting (Basic) ===== */
.code-keyword {
  @apply text-pink-400;
}

.code-string {
  @apply text-green-400;
}

.code-comment {
  @apply text-gray-500 italic;
}

.code-function {
  @apply text-yellow-300;
}

/* ===== Mobile Menu Animations ===== */
@keyframes slideInMenu {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mobile-menu {
  animation: slideInMenu 0.3s ease-out;
}

/* ===== Hero Text Fade-Up Animation ===== */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.7s ease-out;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Robot Assembly Animation Keyframes ===== */
@keyframes fadeInRobot {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes subtleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes bounceRobot {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes scaleRobot {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes rotateLeftArm {
  0%, 100% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(-45deg);
  }
}

@keyframes rotateRightArm {
  0%, 100% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(45deg);
  }
}

@keyframes moveLeftLeg {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-6px);
  }
}

@keyframes moveRightLeg {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

@keyframes floatAssembly {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.1);
  }
}

/* ===== Robot Animation Classes ===== */
.animate-fade-in {
  animation: fadeInRobot 0.8s ease-out forwards;
}

.animate-subtle-float {
  animation: subtleFloat 4s ease-in-out infinite;
}

.animate-bounce-robot {
  animation: bounceRobot 2s ease-in-out infinite;
}

.animate-scale-robot {
  animation: scaleRobot 2.2s ease-in-out infinite;
}

.animate-rotate-left-arm {
  animation: rotateLeftArm 1.8s ease-in-out infinite;
}

.animate-rotate-right-arm {
  animation: rotateRightArm 1.8s ease-in-out infinite;
}

.animate-move-left-leg {
  animation: moveLeftLeg 2s ease-in-out infinite;
}

.animate-move-right-leg {
  animation: moveRightLeg 2s ease-in-out infinite;
}

.animate-float {
  animation: floatAssembly 2.4s ease-in-out infinite;
}

/* ===== Print Styles ===== */
@media print {
  .no-print {
    @apply hidden;
  }

  a {
    @apply underline;
  }
}