/* Custom CSS styling overrides for HomeDecorationHub static site */

/* Animations for scroll-trigger reveals and clean entrances */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scale-up {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-up {
  animation: fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out both;
}

.animate-scale-up {
  animation: scale-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-slide-left {
  animation: slide-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Custom class for images placeholders diagonal stripe */
.placeholder-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    #FAF8F2,
    #FAF8F2 10px,
    #E8E0D5 10px,
    #E8E0D5 20px
  );
}

.dark .placeholder-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    #1E1C18,
    #1E1C18 10px,
    #2E2A24 10px,
    #2E2A24 20px
  );
}

/* Custom transitions and scroll behaviors */
html {
  scroll-behavior: smooth;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar customizations */
::-webkit-scrollbar {
  width: 8px;
}

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

.dark ::-webkit-scrollbar-track {
  background: #161411;
}

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

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

/* Prose-style markdown styling helper for blog detailing */
.prose h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #3C5A40;
  margin-top: 2rem;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

.dark .prose h3 {
  color: #D8C3A5;
}

.prose p {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.75;
  color: #201D18;
  margin-bottom: 1.25rem;
  text-align: justify;
}

.dark .prose p {
  color: #D8C3A5;
}