@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: #AE8B56;
  --color-primary-dark: #9a7a4a;
  --color-primary-light: #c4a06e;
  --color-bg: #FAFAFA;
  --color-text: #2D2D2D;
  --color-gradient-start: #122625;
  --color-gradient-end: #23453F;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide layout chrome before splash screen is ready to avoid flash */
html.splash-pending {
  overflow: hidden;
}
html.splash-pending nav,
html.splash-pending footer {
  display: none !important;
}

/* On reload (returning visitor), force main content visible immediately
   before React hydrates and clears the null-state "hidden" class */
html:not(.splash-pending) #home-main {
  display: block !important;
}

/* Animated Gradient Background for Splash Screen */
.bg-gradient-animated {
  background: linear-gradient(-45deg, #122625, #1a3530, #23453F, #2d5248);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

/* Shine Animation for Splash Screen Button */
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shine {
  animation: shine 0.75s ease-in-out;
}

/* Auto-scrolling carousel */
@keyframes carousel-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.carousel-track {
  display: flex;
  animation: carousel-scroll 55s linear infinite;
  width: max-content;
}

.carousel-track:hover {
  animation-play-state: paused;
}

.carousel-wrapper {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}