/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  scroll-behavior: smooth;
}

/* --- CATEGORY CARD ANIMATIONS --- */

.cat-card {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

/* The sliding overlay background */
.cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0ea5e9, #0284c7); /* Brand Blue */
  opacity: 0;
  transform: scaleX(0); /* Start hidden/squashed */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  z-index: 0;
}

/* Left-aligned cards slide from Left */
.cat-left .cat-overlay {
  transform-origin: left;
}

/* Right-aligned cards slide from Right */
.cat-right .cat-overlay {
  transform-origin: right;
}

/* HOVER STATES */
.cat-card:hover .cat-overlay {
  opacity: 0.1; /* Subtle blue tint on hover */
  transform: scaleX(1); /* Expand to full width */
}

/* Image Zoom Effect */
.cat-img {
  transition: transform 0.7s ease;
}
.cat-card:hover .cat-img {
  transform: scale(1.05);
}

/* Text movement on hover */
.cat-content {
  transition: transform 0.5s ease;
}
.cat-card:hover .cat-content {
  transform: translateX(10px);
}
.cat-right:hover .cat-content {
  transform: translateX(-10px);
}

/* --- UTILITIES --- */
.tp-widget-container {
  min-height: 200px;
}

/* Loading Spinner Animation */
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0284c7; /* Tailwind sky-600 */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- SHARED MODAL STYLES --- */

/* The dark background behind the modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(15, 23, 42, 0.4); /* slate-900/40 */
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: opacity 0.3s ease;
    opacity: 0; /* Hidden state by default */
    pointer-events: none; /* Click-through when closed */
}

/* The white box content */
.modal-content {
    background-color: white;
    width: 100%;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    overflow: hidden;
    position: relative;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
}

/* State: Open (Toggled by JS) */
/* Note: No space between classes means the element must have BOTH */
.modal-open.modal-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.modal-open .modal-content {
    transform: scale(1);
    opacity: 1;
}