@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

@import "tailwindcss";

@theme {
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Playfair Display', serif;

  --color-cream: #F8F1E7;
  --color-sand: #EFE2D0;
  --color-surface: #FFFFFF;
  --color-espresso: #2B1E16;
  --color-muted: #6F6259;
  --color-terracotta: #B85C38;
  --color-terracottaDark: #9E4B2E;
  --color-gold: #C9A45C;
  --color-olive: #6F7D4C;
  --color-indigo: #243B53;
  --color-borderSoft: #E8DCCB;
}

/* Custom Modern Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f8fafc; /* slate-50 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 10px;
  border: 2px solid #f8fafc; /* creates padding effect */
}

::-webkit-scrollbar-thumb:hover {
  background: #ea580c; /* orange-600 */
}

/* Firefox compatibility */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

.snapfit-heritage-bg {
  min-height: 100vh;
  background-color: #f8f1e7;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 250, 243, 0.45),
      rgba(255, 250, 243, 0.72)
    ),
    url('/assets/batik-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

/* ═══ Page Transition Animations ═══ */
.page-enter-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.page-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(12px);
}
.page-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

/* ═══ Fade Transition ═══ */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ═══ Skeleton Loading Shimmer ═══ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0e6d8 25%, #e8dccb 50%, #f0e6d8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.75rem;
}

/* ═══ Micro-Interaction Animations ═══ */
@keyframes bounce-in {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 92, 56, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(184, 92, 56, 0); }
}

.animate-bounce-in { animation: bounce-in 0.4s ease-out; }
.animate-slide-up { animation: slide-up 0.5s ease-out; }
.animate-slide-down { animation: slide-down 0.3s ease-out; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* ═══ Stagger Animation for Cards ═══ */
.stagger-item {
  opacity: 0;
  transform: translateY(16px);
  animation: slide-up 0.4s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.3s; }
.stagger-item:nth-child(7) { animation-delay: 0.35s; }
.stagger-item:nth-child(8) { animation-delay: 0.4s; }
.stagger-item:nth-child(9) { animation-delay: 0.45s; }
.stagger-item:nth-child(10) { animation-delay: 0.5s; }
.stagger-item:nth-child(11) { animation-delay: 0.55s; }
.stagger-item:nth-child(12) { animation-delay: 0.6s; }

/* ═══ Focus States Premium ═══ */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 92, 56, 0.15);
  border-color: #B85C38;
}

/* ═══ Button Press Effect ═══ */
.btn-press:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* ═══ Hover Lift Effect ═══ */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}