/* ===== TAILWIND DIRECTIVES ===== */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== FONTS ===== */
@font-face {
  font-family: 'PinexFont';
  src: url('../fonts/PinexFont-Regular.woff2') format('woff2'),
       url('../fonts/PinexFont-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== ANIMATIONS ===== */
@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }
  .animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
  }
  .animate-zoom-in {
    animation: zoomIn 0.8s ease-out forwards;
  }
  .animate-delay-100 {
    animation-delay: 0.1s;
  }
  .animate-delay-200 {
    animation-delay: 0.2s;
  }
  .animate-delay-300 {
    animation-delay: 0.3s;
  }
  .animate-delay-400 {
    animation-delay: 0.4s;
  }
  .animate-delay-500 {
    animation-delay: 0.5s;
  }
  .animate-delay-600 {
    animation-delay: 0.6s;
  }
  .animate-delay-700 {
    animation-delay: 0.7s;
  }
  .animate-delay-800 {
    animation-delay: 0.8s;
  }
  .animate-delay-900 {
    animation-delay: 0.9s;
  }
  .animate-pulse {
    animation: pulse 2s infinite;
  }
  .animate-ring {
    animation: ring 0.5s ease-in-out;
  }
  .animate-bounce {
    animation: bounce 2s infinite;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slideUp {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes zoomIn {
    from { 
      opacity: 0;
      transform: scale(0.95);
    }
    to { 
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  @keyframes ring {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

/* ===== COMPONENTS ===== */
@layer components {
  /* Navbar */
  .nav-link {
    @apply text-white hover:text-pinex-accent transition-colors duration-300 relative group;
  }
  .nav-link span {
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-pinex-accent transition-all duration-300 group-hover:w-full;
  }

  /* Cards */
  .service-card {
    @apply bg-gray-50 p-8 rounded-xl border border-gray-200 hover:border-pinex-accent transition-all duration-300 group hover:shadow-lg hover:shadow-pinex-primary/20;
  }
  .service-icon {
    @apply w-20 h-20 bg-pinex-primary/10 text-pinex-primary rounded-2xl flex items-center justify-center text-3xl mb-6 mx-auto transition-all duration-500 group-hover:bg-pinex-primary group-hover:text-white group-hover:rotate-6 group-hover:scale-110;
  }

  /* Buttons */
  .btn-primary {
    @apply bg-pinex-accent hover:bg-pinex-accent/90 text-white font-bold py-4 px-8 rounded-full transition-all transform hover:scale-105 shadow-lg shadow-pinex-accent/30 flex items-center;
  }
  .btn-outline {
    @apply border-2 border-white hover:border-pinex-accent hover:bg-white/10 text-white font-bold py-4 px-8 rounded-full transition-all flex items-center;
  }

  /* FAQ Components */
  .faq-item {
    @apply border border-gray-300 rounded-lg overflow-hidden transition-all duration-300 hover:border-pinex-accent hover:shadow-lg;
  }
  .faq-btn {
    @apply w-full text-left p-5 bg-gray-50 font-semibold flex justify-between items-center hover:bg-gray-100 transition-colors duration-300 group;
  }
  .faq-content {
    @apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out;
  }
  .faq-item.active {
    @apply border-pinex-accent shadow-md;
  }
  .faq-item.active .faq-content {
    @apply max-h-[500px] p-5 border-t border-gray-200;
  }
  .faq-item.active .faq-btn i {
    @apply rotate-180;
  }
  .faq-icon {
    @apply rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0 transition-all duration-500;
  }

  /* Hero Sections */
  .hero-section {
    @apply relative pt-32 pb-20 overflow-hidden;
  }
  .hero-bg {
    @apply absolute inset-0 bg-cover bg-center opacity-80;
  }
  .hero-content {
    @apply container mx-auto px-4 relative z-10 text-center;
  }

  /* Testimonial Cards */
  .testimonial-card {
    @apply bg-white p-6 rounded-xl shadow text-center transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg;
  }

  /* About Section */
  .about-section {
    @apply flex flex-col md:flex-row items-center gap-10;
  }
  .about-image {
    @apply rounded-xl shadow-lg w-full h-auto object-cover transform transition-all hover:scale-105 duration-500;
  }
}

/* ===== LAYOUTS ===== */
@layer components {
  /* Modals */
  .service-modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden;
  }
  .service-modal-content {
    @apply bg-white rounded-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto;
  }

  /* Swiper */
  .swiper-slide {
    @apply flex items-center justify-center;
  }
  .brand-logo {
    @apply h-16 max-w-[120px] object-contain grayscale hover:grayscale-0 transition;
  }
}

/* ===== BASE STYLES ===== */
.faq-content {
  will-change: max-height;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  transition: max-height 0.3s ease-out, opacity 0.2s ease;
}

.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  @apply bg-gray-100;
}
::-webkit-scrollbar-thumb {
  @apply bg-pinex-primary rounded-full;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-pinex-accent;
}

/* Selection styles */
::selection {
  @apply bg-pinex-primary text-white;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  body {
    @apply bg-white text-black;
  }
  .print-break {
    page-break-after: always;
  }
}