@import "tailwindcss";

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

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 25s linear infinite;
}

/* @keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 20s linear infinite;
} */


.hover\:paused:hover {
  animation-play-state: paused;
}

/*  this is for the new annoucment tab */
@keyframes slide-left {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-slide-left {
  animation: slide-left 25s linear infinite;
}






@layer utilities {
  .nav-link {
    @apply relative hover:text-cyan-800 transition-all duration-300;
  }

  .nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: linear-gradient(to right, #00c6ff, #0072ff);
    transition: width 0.3s ease;
  }

  .nav-link:hover::after {
    width: 100%;
  }

  .glow-text {
    text-shadow: 0 0 5px rgba(0,255,255,0.5), 0 0 10px rgba(0,255,255,0.3);
  }
}




/*
@layer utilities {
  .fancy-link {
    @apply px-3 py-1 rounded transition-all duration-300 relative text-white;
  }

  .fancy-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: #f59e0b; 
    transition: width 0.3s ease-in-out;
  }

  .fancy-link:hover::after {
    width: 100%;
  }

  .fancy-link:hover {
    color: #3674B5;
    background-color: rgba(236, 171, 5, 0.2); 
    backdrop-filter: blur(2px);
  }
}
 */

 @keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out forwards;
}
.delay-200 {
  animation-delay: 0.2s;
}

@keyframes fadeSlideUpZoom {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-slideUpZoom {
  animation: fadeSlideUpZoom 1.2s ease-out forwards;
}

@keyframes diagonalReveal {
  0% {
    opacity: 0;
    transform: translate(-30px, 30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.animate-diagonalReveal {
  animation: diagonalReveal 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}


@keyframes glowFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 0px rgba(255, 255, 255, 0.4);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  }
}

.animate-glowFadeIn {
  animation: glowFadeIn 1.5s ease-out forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0 0 0px rgba(255, 255, 255, 0.4);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  }
}

@keyframes slideUpZoom {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes diagonalReveal {
  0% {
    opacity: 0;
    transform: translate(-30px, 30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.animate-fadeUp {
  animation: fadeUp 1.2s ease-out forwards;
}

.animate-glowFadeIn {
  animation: glowFadeIn 1.5s ease-out forwards;
}

.animate-slideUpZoom {
  animation: slideUpZoom 1.2s ease-out forwards;
}

.animate-diagonalReveal {
  animation: diagonalReveal 1.3s ease-out forwards;
}


@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { transform: scaleX(1); opacity: 0.6; }
  50% { transform: scaleX(1.1); opacity: 1; }
}

.animate-slideDown {
  animation: slideDown 0.6s ease-out forwards;
}

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


@keyframes riseFade {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-riseFade {
  animation: riseFade 1.2s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* images life at vikrant */
@keyframes scrollX {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll-x {
  animation: scrollX 22s linear infinite;
}

.pause-animation {
  animation-play-state: paused ; 
}
/* !important */

  .form-input {
    @apply w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-amber-500 shadow-sm transition duration-300;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fadeIn {
    animation: fadeIn 1.5s ease-in-out;
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-slideUp {
    animation: slideUp 1.2s ease-out;
  }

  .prose img {
  display: inline-block !important;
  vertical-align: middle !important;
  max-width: 48% !important; /* side by side */
  margin: 0.5rem !important;
}



/* Keyframes for scrolling announcements */
@keyframes slide-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-200%);
  }
}

.announcement-scroll {
  animation: slide-left 40s linear infinite;
}

.announcement-scroll-container:hover .announcement-scroll {
  animation-play-state: paused;
}


/* Auto-scrolling animation */
@keyframes scroll-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* half width if duplicated */
}

.animate-scroll-x {
  display: flex;
  animation: scroll-x 80s linear infinite;
}

/* Pause on hover */
.gallery-container:hover .animate-scroll-x {
  animation-play-state: paused;
}