/* Custom styles for Knosaic website */

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #FFFFFF;
  color: #000000;
}

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.slide-in-left {
  opacity: 0;
}

.slide-in-left.animated {
  animation: slideInLeft 0.8s ease forwards;
}

.slide-in-right {
  opacity: 0;
}

.slide-in-right.animated {
  animation: slideInRight 0.8s ease forwards;
}

.slide-in-bottom {
  opacity: 0;
}

.slide-in-bottom.animated {
  animation: slideInBottom 0.8s ease forwards;
}

.slide-in-top {
  opacity: 0;
}

.slide-in-top.animated {
  animation: slideInTop 0.8s ease forwards;
}

.zoom-in {
  opacity: 0;
}

.zoom-in.animated {
  animation: zoomIn 0.8s ease forwards;
}

/* Animation delay classes */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Form elements */
input, textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: #000000;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

textarea {
  resize: none;
}

.border:focus-within {
  border-color: #000000;
  outline: none;
}

/* Error styles for form validation */
.border-red-500 {
  border-color: #EF4444 !important;
}

.error-message {
  color: #EF4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

/* Placeholder styling */
::placeholder {
  color: #888888;
  opacity: 1;
}

/* Button styles */
button[type="submit"] {
  background-color: #000000;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 63px;
  font-weight: 400;
  transition: all 0.3s ease;
}

button[type="submit"]:hover {
  opacity: 0.9;
}

/* UI Components */
.gradient-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.tracking-tightest {
  letter-spacing: -0.05em;
}

/* Card styles */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.feature-card img {
  transition: transform 0.6s ease;
}

.feature-card:hover img {
  transform: scale(1.1);
}

.gallery-item {
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
}

/* Image scale effects */
.img-scale {
  transition: transform 0.6s ease;
  transform: scale(1.05);
}

.img-scale:hover {
  transform: scale(1.15);
}

/* Theme colors */
.text-dark {
  color: #000000;
}

.bg-white {
  background-color: #FFFFFF;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .md\:w-1\/2 {
    width: 50%;
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
}

@media (max-width: 767px) {
  /* Full-height image for mobile */
  .h-screen {
    height: 50vh;
  }
  
  /* Add spacing on mobile */
  .md\:p-12 {
    padding: 2rem;
  }
}