/*
 * Agbon Unity Club Portal
 * File: /assets/css/style.css
 * Description: Premium Envato-standard UI enhancements, dynamic dark blue backgrounds, white typography, and custom animations.
 */

/* ==========================================================================
   Base Overrides, Typography & Scrollbar
   ========================================================================== */
body {
    background-color: #020617; /* Deep slate/blue fallback */
    color: #ffffff;
}

/* Enforce white text across the platform */
h1, h2, h3, h4, h5, h6, p, label, span, a {
    color: #ffffff !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #1e3a8a; /* Dark blue thumb */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1e40af;
}

/* Fix browser autofill styling for Dark Blue Mode */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Global Form Element Overrides for Dark Branding */
input, select, textarea {
    background-color: rgba(15, 23, 42, 0.7) !important; /* Dark blue transparent */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

input::placeholder, textarea::placeholder {
    color: #94a3b8 !important; /* Light slate placeholder */
}

input:focus, select:focus, textarea:focus {
    border-color: #f97316 !important; /* Orange focus ring */
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
}

/* ==========================================================================
   Dynamic Background Effects (The Premium Look)
   ========================================================================== */
.animated-bg {
    /* Rich, moving gradient using Dark Blue professional colors */
    background: linear-gradient(-45deg, #020617, #1e3a8a, #1d4ed8, #0f172a);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Glassmorphism Cards - Dark Blue Tint */
.glass-card {
    background: rgba(15, 23, 42, 0.85) !important; /* Dark blue glass */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255,255,255, 0.03) inset;
}

/* Transparent Dark Mode variations for Login Banner */
.glass-dark {
    background: rgba(2, 6, 23, 0.75); /* Deeper dark blue */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   Animations
   ========================================================================== */
/* Smooth Floating Object Effect */
.animate-float {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Subtle Pulsing for background shapes */
.animate-pulse-slow {
    animation: pulse-slow 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-slow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

/* Fade In Up (Staggered Entrance for Form elements) */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}
@keyframes fadeInUp {
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Stagger Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ==========================================================================
   Interactive Elements & Brand Colors
   ========================================================================== */
/* Orange for all Phosphor Icons universally */
.ph, i[class^="ph-"], i[class*=" ph-"] {
    color: #f97316 !important; /* Premium vibrant orange */
}

/* Input Form Focus Highlights */
.form-group:focus-within label {
    color: #f97316 !important; /* Orange label on focus */
    transition: color 0.3s ease;
}

/* Ripple Button Effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
    background-color: #1d4ed8 !important; /* Force professional blue button */
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
}
.btn-ripple:hover {
    background-color: #1e40af !important;
}

.btn-ripple::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    padding-top: 300%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
.btn-ripple:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: 0s;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}