@import "tailwindcss";

@theme {
  --color-brand-brown: #2C1E16;
  --color-brand-beige: #F5F4F0;
  --color-brand-accent: #8B7355;

  --font-sans: var(--font-inter);
  --font-serif: var(--font-playfair);
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lineGrow {
  from { width: 0%; }
  to   { width: 95%; }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@keyframes underlineSlide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-arrow-bounce {
    animation: none !important;
  }
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

::-webkit-scrollbar {
  display: none;
  width: 0px;
  background: transparent;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}