/* Custom styles for College Website */

:root {
    --primary-color: #003366; /* Deep blue for a professional look */
    --secondary-color: #ffcc00; /* Gold for highlights */
    --text-color: #333;
}

body {
    background-color: #f8f9fa;
    color: var(--text-color);
}
 .bg-maroon { background-color: #800000; }
.text-maroon { color: #800000; }
.bg-gold { background-color: #D4AF37; }
.text-gold { color: #D4AF37; }
.border-gold { border-color: #D4AF37; }

@keyframes slideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-30px); /* Starts 30px above the original position */
  }
  100% {
    opacity: 1;
    transform: translateY(0);    /* Moves to the original position */
  }
}

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

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-up {
    opacity: 0;
    animation: slideUp 0.6s ease-out forwards;
}

.animate-slide-left{
    opacity: 0;
    animation: slideLeft 0.6s ease-out forwards;
}

.animate-slide-right {
    opacity: 0;
    animation: slideRight 0.6s ease-out forwards;
}

.delay-100 { animation-delay: 100ms !important; transition-delay: 100ms !important; }
.delay-200 { animation-delay: 200ms !important; transition-delay: 200ms !important; }
.delay-300 { animation-delay: 300ms !important; transition-delay: 300ms !important; }
.delay-400 { animation-delay: 400ms !important; transition-delay: 400ms !important; }
.delay-500 { animation-delay: 500ms !important; transition-delay: 500ms !important; }

/* Pulse animation for Play Button */
@keyframes pulse-white {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.animate-pulse-white {
    animation: pulse-white 2s infinite;
}

/* Video Modal Styles */
#video-modal {
    transition: opacity 0.3s ease-in-out;
}

#video-modal.hidden {
    display: none;
    opacity: 0;
}

#video-modal:not(.hidden) {
    display: flex;
    opacity: 1;
}

/* Error Message Styles for Stable Layout */
.input-group {
    position: relative;
    padding-bottom: 14px; /* Space reserved for error message */
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-up { transform: translateY(60px); }

.reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

.error-msg {
    position: absolute;
    left: 4px;
    bottom: 0;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    display: block !important; /* Always in DOM for stable layout */
}

.error-msg.visible {
    opacity: 1;
    transform: translateY(0);
}

.input-error {
    border-color: #dc2626 !important; /* red-600 */
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbars globally on mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none;
    }
    body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

 .glass {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }



   @keyframes cinematic-slider {
        0% { transform: scale(1) translateX(0); opacity: 0; }
        5% { opacity: 1; } /* Quick Fade In */
        30% { opacity: 1; } /* Hold */
        38% { opacity: 0; transform: scale(1.08)  } /* Fade out while moving */
        100% { opacity: 0; }
    }

    /* Staggered starts for 3 images */
    .slide-1 { animation: cinematic-slider 9s infinite ease-in-out; }
    .slide-2 { animation: cinematic-slider 9s infinite ease-in-out 3s; }
    .slide-3 { animation: cinematic-slider 9s infinite ease-in-out 6s; }   

    /* Custom Film Grain Overlay for Depth */
    .film-grain::after {
        content: "";
        absolute: inset-0;
        opacity: 0.04;
        pointer-events: none;
        z-index: 1;
    }

    /* Modern Gold-Maroon Gradient for Text */
    .text-gradient-gold {
        background: linear-gradient(to right, #ffffff 30%, #ffd700 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .bg-maroon { background-color: #800000; }
    .border-maroon { border-color: #800000; }