/* ==================== BASE & ANIMATIONS ==================== */

/* Smooth scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #fff;
}
::-webkit-scrollbar-thumb {
  background: #fda4af;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fb7185;
}

/* Selection */
::selection {
  background: #fecdd3;
  color: #881337;
}

/* Nav Links */
.nav-link {
  @apply px-4 py-2 text-sm font-medium text-gray-600 rounded-full transition-all hover:text-rose-500 hover:bg-rose-50;
}
.nav-link.active {
  @apply text-rose-500 bg-rose-50;
}

.mobile-link {
  @apply block px-4 py-3 text-gray-700 font-medium rounded-xl hover:bg-rose-50 hover:text-rose-500 transition-colors;
}

/* Navbar scrolled state */
.navbar-scrolled {
  @apply bg-white/90 backdrop-blur-xl shadow-sm shadow-rose-100/50;
}

/* Feature Cards */
.feature-card {
  @apply p-6 rounded-2xl bg-white border border-gray-100 hover:border-rose-100 hover:shadow-xl hover:shadow-rose-50 transition-all duration-300 hover:-translate-y-1;
}

/* Service Cards */
.service-card {
  @apply p-8 rounded-2xl bg-white border border-gray-100 hover:border-rose-100 hover:shadow-2xl hover:shadow-rose-100/50 transition-all duration-300 hover:-translate-y-2;
}

/* Testimonial Cards */
.testimonial-card {
  @apply p-8 rounded-2xl bg-gradient-to-br from-white to-rose-50/50 border border-rose-50 hover:shadow-xl hover:shadow-rose-100/30 transition-all duration-300;
}

/* Blog Cards */
.blog-card {
  @apply bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-rose-100 hover:shadow-xl hover:shadow-rose-100/30 transition-all duration-300 hover:-translate-y-1;
}

/* Portfolio Filter */
.portfolio-filter {
  @apply px-6 py-2.5 text-sm font-medium rounded-full transition-all border;
  @apply text-gray-500 border-gray-200 bg-white hover:border-rose-200 hover:text-rose-500;
}
.portfolio-filter.active {
  @apply bg-gradient-to-r from-rose-400 to-rose-500 text-white border-transparent shadow-lg shadow-rose-200;
}

/* ==================== ANIMATIONS ==================== */

/* Fade up on scroll */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up.delay-100 { transition-delay: 0.1s; }
.fade-up.delay-200 { transition-delay: 0.2s; }
.fade-up.delay-300 { transition-delay: 0.3s; }

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}
.animate-float-delay {
  animation: float 4s ease-in-out infinite;
  animation-delay: 2s;
}

/* Scroll dot */
@keyframes scroll-dot {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}
.animate-scroll-dot {
  animation: scroll-dot 1.5s ease-in-out infinite;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Portfolio item transitions */
.portfolio-item {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.portfolio-item.hidden-item {
  opacity: 0;
  transform: scale(0.8);
  position: absolute;
  pointer-events: none;
}

/* Form focus glow */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .font-display {
    letter-spacing: -0.02em;
  }
}