@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

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

@layer base {
  body {
    @apply font-['Inter'] text-neutral-400 bg-neutral-950 antialiased selection:bg-neutral-800 selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Cormorant_Garamond'] text-white;
  }
}

@layer components {
  .btn-minimal {
    @apply inline-flex items-center justify-center px-10 py-5 border border-white/20 text-white text-[10px] tracking-[0.3em] uppercase hover:bg-white hover:text-neutral-950 transition-all duration-500;
  }
  
  .btn-minimal-dark {
    @apply inline-flex items-center justify-center px-10 py-5 bg-white text-neutral-950 text-[10px] tracking-[0.3em] uppercase font-medium hover:bg-neutral-200 transition-all duration-500;
  }
}

.text-gradient-subtle {
  background: linear-gradient(to right, #ffffff, #888888);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-scrolled {
  @apply bg-neutral-950/90 backdrop-blur-xl border-b border-white/5;
}

.hero-overlay-dark {
  background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.3) 50%, rgba(10,10,10,0.6) 100%);
}

.hover-line {
  position: relative;
  display: inline-block;
}

.hover-line::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.hover-line:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.reveal-img-container {
  overflow: hidden;
  position: relative;
}

.reveal-img {
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-img-container:hover .reveal-img {
  transform: scale(1.05);
}