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

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

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

@layer base {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 0% 3.9%; /* Changed saturation to 0% */
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 0% 15.9%; /* Changed saturation to 0% */
    --muted-foreground: 240 0% 64.9%; /* Changed saturation to 0% */

    --accent: 347 80% 55%;  /* #E63462 in HSL */
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 0% 15.9%; /* Changed saturation to 0% */
    --input: 240 0% 15.9%; /* Changed saturation to 0% */
    --ring: 240 0% 83.9%; /* Changed saturation to 0% */

    --radius: 0.75rem;
  }

  * {
    @apply border-border selection:bg-accent/10;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "ss01", "ss02", "cv01", "cv02", "cv03";
  }

  html {
    @apply scroll-smooth;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  
  /* Hero component typography */
  .hero-title {
    font-family: 'Playfair Display', serif;
    @apply tracking-tight text-balance;
  }
  
  .hero-serif {
    font-family: 'Playfair Display', serif;
    @apply leading-relaxed;
  }
  
  .hero-badge {
    @apply px-2 py-1 rounded-sm bg-white/10 text-xs font-medium uppercase tracking-wider;
  }
}

@layer utilities {
  .glass {
    @apply backdrop-blur-xl bg-white/5 border border-white/10 shadow-[0_4px_12px_-2px_rgba(0,0,0,0.3)];
  }

  .neo-blur {
    @apply backdrop-blur-2xl bg-black/40 border border-white/10;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
  
  .text-shadow-sm {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  }
  
  /* Hero component monochromatic overlays */
  .hero-mono-gradient {
    background: linear-gradient(to top, 
      rgb(10, 10, 10) 0%, 
      rgba(20, 20, 20, 0.9) 20%, 
      rgba(30, 30, 30, 0.7) 40%,
      rgba(40, 40, 40, 0.5) 60%, 
      rgba(50, 50, 50, 0.3) 80%, 
      rgba(60, 60, 60, 0) 100%
    );
  }
  
  .hero-side-gradient-mono {
    background: linear-gradient(to right,
      rgb(10, 10, 10) 0%,
      rgba(20, 20, 20, 0.8) 20%,
      rgba(30, 30, 30, 0.6) 40%,
      rgba(40, 40, 40, 0.4) 60%,
      rgba(50, 50, 50, 0.2) 80%,
      rgba(60, 60, 60, 0) 100%
    );
  }
}

#root {
  @apply w-full min-h-screen overflow-x-hidden;
}

.page-transition-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms, transform 400ms;
}

.page-transition-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 300ms, transform 300ms;
}

.media-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.hero-gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 100%);
}

/* Enhanced hero gradient with more depth */
.hero-gradient-enhanced {
  background: linear-gradient(to top, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 0.95) 15%, 
    rgba(0, 0, 0, 0.85) 30%,
    rgba(0, 0, 0, 0.5) 50%, 
    rgba(0, 0, 0, 0.1) 80%, 
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

/* Side gradient for hero */
.hero-side-gradient {
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 30%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.image-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.blur-background {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(15px);
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.details-gradient {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 30%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.9) 75%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Hero text shadow */
.hero-text-shadow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Hero title shimmer effect */
@keyframes titleShimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.hero-title-shimmer {
  background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.1) 40%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShimmer 3s linear infinite;
}

/* Spinner styles with better animation */
.spinner {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
}

.spinner-inner {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Enhanced monochromatic pagination indicators */
@keyframes paginationPulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.pagination-indicator {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-indicator-active {
  animation: paginationPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Hero buttons hover effect */
.hero-button {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.hero-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.hero-button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.hero-button:hover::after {
  transform: translateX(0);
}

/* Enhanced touch interface */
.touch-feedback {
  transition: transform 0.2s ease;
}
