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

/* Global grayscale treatment for content images */
main img {
  filter: grayscale(100%) brightness(0.8) contrast(1.05);
  transition: filter 0.3s ease;
}

/* Restore color on hover */
main img:hover {
  filter: grayscale(0%) brightness(1) contrast(1);
}

/* Project gallery exclusion */
#projectsGrid .project-image,
#projectModal img,
#imageEnlargeModal img {
  filter: none !important;
}

@keyframes projectOverlaySlide {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*
  These are component styles. Wrapping them in @layer components
  is a good practice for organization with Tailwind.
*/
@layer components {
  .project-overlay {
    /* The default hidden state */
    transform: translateY(100%);
    opacity: 0;
    /* Add a transition for a smooth exit if the mouse leaves quickly */
    transition: opacity 0.3s ease;
  }

  .project-card:hover .project-overlay {
    /* On hover, run the slide-in animation */
    animation: projectOverlaySlide 0.4s ease-out forwards;
  }

  .project-card .project-image {
    /* Add a transition for the zoom effect */
    transition: transform 0.6s ease-out;
  }

  .project-card:hover .project-image {
    /* On hover, zoom the image */
    transform: scale(1.1);
  }
}

@layer components {

  /* Reusable Component for Navigation Links */
  .nav-link {
    @apply block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors font-montserrat opacity-0;
  }

  .nav-link.active {
    @apply text-kh3-red;
  }

  .nav-link-span {
    @apply hidden md:inline;
  }

  .project-overlay {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  }


  /* Menu Button Styles */
  #menuWrap {
    position: relative;
    overflow: visible;
  }

  .menu-waves {
    position: absolute;
    inset: -20px;
    z-index: 1;
    pointer-events: none;
  }

  #menuWrap.open #menuPetal {
    opacity: 1;
  }

  #menuWrap.open #menuGrid {
    opacity: 0;
  }

  .menu-outline {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    outline: 1px solid rgba(255, 255, 255, 0.6);
    outline-offset: 6px;
  }

  .menu-waves .wave {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    opacity: 0;
    transform: scale(1);
    animation: waveBurst 5.8s ease-in-out infinite;
    will-change: transform, opacity;
  }

  .menu-waves .wave:nth-child(2) {
    animation-delay: 0.3s;
  }

  .menu-waves .wave:nth-child(3) {
    animation-delay: 0.6s;
  }
}

@layer base {

  /* General Animations */
  @keyframes spin {
    from {
      transform: scale(1.5) rotate(0deg);
    }

    to {
      transform: scale(1.5) rotate(360deg);
    }
  }

  @keyframes waveBurst {

    0%,
    69% {
      opacity: 0;
      transform: scale(1);
    }

    77% {
      opacity: 0.38;
      transform: scale(1.18, 1.12);
    }

    92% {
      opacity: 0.22;
      transform: scale(1.55, 1.42);
    }

    100% {
      opacity: 0;
      transform: scale(1.95, 1.75);
    }
  }

  /* Page Transitions */
  @keyframes pageEnter {
    0% {
      opacity: 0;
      transform: scale(1.02);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes pageExit {
    0% {
      opacity: 1;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(0.98);
    }
  }

  @keyframes staggerFadeOut {
    100% {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
  }

  /* Image Slider Transitions */
  @keyframes slideOutLeft {
    100% {
      transform: translateX(-100%) scale(0.8);
      opacity: 0;
    }
  }

  @keyframes slideOutRight {
    100% {
      transform: translateX(100%) scale(0.8);
      opacity: 0;
    }
  }

  @keyframes zoomInFromLeft {
    0% {
      transform: translateX(-100%) scale(1.3);
      opacity: 0;
    }

    100% {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
  }

  @keyframes zoomInFromRight {
    0% {
      transform: translateX(100%) scale(1.3);
      opacity: 0;
    }

    100% {
      transform: translateX(0) scale(1);
      opacity: 1;
    }
  }

  /* Specific Component Animations */
  @keyframes arrowPulse {

    0%,
    100% {
      transform: translateY(0);
      opacity: 0.7;
    }

    50% {
      transform: translateY(10px);
      opacity: 1;
    }
  }

  .animate-arrowPulse {
    animation: arrowPulse 2s ease-in-out infinite;
  }

  @keyframes diagMaskReveal {
    0% {
      opacity: 0;
      clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
      transform: scale(1.03);
    }

    55% {
      opacity: 1;
      clip-path: polygon(82% 0, 100% 0, 100% 100%, 64% 100%);
    }

    100% {
      opacity: 1;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }

  /* NEW: Styles from about.html */
  @keyframes diamondPulse {

    0%,
    100% {
      transform: rotate(45deg) scale(1);
      box-shadow: 0 0 0 rgba(220, 38, 38, 0);
    }

    50% {
      transform: rotate(45deg) scale(0.8);
      box-shadow: 0 0 0 rgba(220, 38, 38, 0);
    }

    75% {
      transform: rotate(45deg) scale(1.1);
      box-shadow: 0 0 15px rgba(220, 38, 38, 0.4), 0 0 25px rgba(220, 38, 38, 0.2);
    }
  }

  .diamond-pulse {
    animation: diamondPulse 2s ease-in-out infinite;
  }
}

@layer components {
  .value-item {
    @apply cursor-pointer text-lg md:text-2xl font-semibold text-neutral-400 transition-all duration-300 md:pl-6 md:border-l-4 border-neutral-200;
  }

  .value-item.active {
    @apply text-kh3-red border-kh3-red;
    transform: translateX(4px);
  }

  .value-content-block {
    @apply absolute opacity-0 transition-opacity duration-500 ease-in-out;
  }

  .value-content-block.active {
    @apply static opacity-100;
  }

  /* Mobile (Card-based) Layout */
  @media (max-width: 767px) {
    .value-content-block {
      @apply static opacity-100 mb-8 p-6 border border-neutral-200 rounded-lg;
    }

    .value-item {
      @apply hidden;
      /* Hide the list on mobile */
    }
  }

  .form-input {
    @apply w-full bg-neutral-900 border border-neutral-700 text-white px-4 py-3 rounded-md transition-colors duration-300;
    @apply focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent;
  }

  .form-input::placeholder {
    @apply text-neutral-500;
  }

    .service-item {
    @apply bg-neutral-900/50 border border-neutral-800 rounded-lg p-4 flex items-start gap-4 transition-all duration-300;
  }
  .service-item:hover {
    @apply border-kh3-red/50 bg-neutral-900 scale-[1.02];
  }
  .service-item-icon {
    @apply w-5 h-5 text-kh3-red mt-1 flex-shrink-0;
  }
}