/* -------------------------------------------------
   Tailwind Custom Utilities
--------------------------------------------------*/
@tailwind base;
@tailwind components;
@tailwind utilities;

/* -------------------------------------------------
   Fluid Animated Multi-Color Border Frame with Glow
--------------------------------------------------*/
@layer utilities {
  .colourful-border {
    @apply relative overflow-hidden rounded-[22px] border-[5px] border-transparent shadow-[0_6px_24px_rgba(57,18,107,0.14)];
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(90deg,#e8308c,#2184cd,#ed8034,#feb123,#e8308c) border-box;
    animation: animateBorder 6s linear infinite;
  }

  @keyframes animateBorder {
    0% {
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(90deg,#e8308c,#2184cd,#ed8034,#feb123) border-box;
      box-shadow: 0 0 16px 2px #e8308c66, 0 8px 24px rgba(57,18,107,0.14);
    }
    33% {
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(90deg,#feb123,#ed8034,#2184cd,#e8308c) border-box;
      box-shadow: 0 0 24px 6px #2184cd44, 0 8px 24px rgba(57,18,107,0.14);
    }
    66% {
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(90deg,#ed8034,#e8308c,#2184cd,#feb123) border-box;
      box-shadow: 0 0 20px 4px #ed803455, 0 8px 24px rgba(57,18,107,0.14);
    }
    100% {
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(90deg,#e8308c,#2184cd,#ed8034,#feb123) border-box;
      box-shadow: 0 0 16px 2px #e8308c66, 0 8px 24px rgba(57,18,107,0.14);
    }
  }
}

/* -------------------------------------------------
   Tab Fade + Slide Animation
--------------------------------------------------*/
@layer utilities {
  .tab-pane {
    @apply absolute left-0 top-0 w-full opacity-0 translate-y-5 transition-all duration-700 ease-[cubic-bezier(.4,1,.3,1)];
  }
  .tab-pane.active {
    @apply opacity-100 translate-y-0 relative z-[2];
  }
}

/* -------------------------------------------------
   Card / Faculty Image Hover
--------------------------------------------------*/
@layer utilities {
  .singel-course img {
    @apply rounded-[13px] shadow-[0_2px_12px_rgba(33,132,205,0.10)] transition-transform duration-500 ease-[cubic-bezier(.48,1.41,.47,1.01)];
  }
  .singel-course:hover img {
    transform: scale(1.07) rotate(-1.5deg);
    box-shadow: 0 11px 32px rgba(232,48,140,.18);
  }
  .singel-course p {
    @apply font-medium tracking-[0.01em] text-[#39126b];
  }
}

/* -------------------------------------------------
   Sidebar Fluid Glow Gradient
--------------------------------------------------*/
@layer utilities {
  .sidebar-board {
    background: linear-gradient(120deg,#ed8034 0%,#e8308c 90%);
    box-shadow: 0 6px 20px rgba(232,48,140,0.18);
  }

  .colourful-sidebar {
    @apply rounded-[10px] transition-all duration-500;
  }

  .colourful-sidebar.active,
  .colourful-sidebar:hover {
    background: linear-gradient(90deg,#2184cd,#e8308c 65%);
    @apply text-white shadow-[0_4px_14px_#2184cd33] rounded-[12px];
  }
}

/* -------------------------------------------------
   Main Board Clean Look
--------------------------------------------------*/
@layer utilities {
  .main-board {
    @apply bg-white shadow-none;
  }
}

/* -------------------------------------------------
   Responsive Adjustment (≤991px)
--------------------------------------------------*/
@media (max-width: 991px) {
  .colourful-border {
    @apply rounded-[10px] border-[3px] p-[6px];
  }
}

/* -------------------------------------------------
   Tab Underline Hover Animation
--------------------------------------------------*/
@layer utilities {
  .nav-justified > li > a {
    @apply relative font-bold pb-[5px] transition-colors;
  }

  .nav-justified > li > a::after {
    content:"";
    @apply absolute left-0 bottom-0 w-0 h-[3px] rounded-[2px] transition-all duration-700 ease-[cubic-bezier(.4,2,.35,1)];
    background: linear-gradient(90deg,#e8308c,#2184cd);
  }

  .nav-justified > li > a.active::after,
  .nav-justified > li > a:hover::after {
    @apply w-full;
  }
}