/* ============================================
   TRANSLUCENT CONTAINER SPECTRUM ANIMATION
   Animates all translucent section containers and glass cards
   across all pages of the portal from Ocean Blue to Emerald Green.
   ============================================ */
@keyframes glassColorSpectrum {
    0% {
        background-color: rgba(10, 61, 98, 0.28) !important;
    }
    25% {
        background-color: rgba(16, 85, 115, 0.28) !important;
    }
    50% {
        background-color: rgba(30, 132, 73, 0.28) !important;
    }
    75% {
        background-color: rgba(184, 134, 11, 0.25) !important;
    }
    100% {
        background-color: rgba(10, 61, 98, 0.28) !important;
    }
}

section.position-relative.overflow-hidden,
section.py-5,
section.py-4,
.section-glass,
.travel-hub-section,
.about-glass-wrapper,
.card-glow-animated,
.glass-card,
.glass-section-card-dark,
.digital-pass-card,
.contact-card-box,
.subtheme-grid-card,
.speaker-card,
.crew-card {
    animation: glassColorSpectrum 16s ease-in-out infinite !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

section:nth-of-type(even),
section:nth-of-type(even) .card-glow-animated {
    animation-delay: -4s !important;
}

section:nth-of-type(3n),
section:nth-of-type(3n) .card-glow-animated {
    animation-delay: -8s !important;
}

section:nth-of-type(4n),
section:nth-of-type(4n) .card-glow-animated {
    animation-delay: -12s !important;
}

/* ============================================
   UNIVERSAL FOOTER BRIGHT WHITE TEXT SYSTEM WITH VIBRANT COLORED ICONS
   ============================================ */
footer.footer p,
footer.footer li a:not(.text-warning):not(.text-success):not(.text-info):not(.text-accent),
footer.footer span:not(.badge):not(.text-warning):not(.text-success):not(.text-info):not(.text-accent),
footer.footer div.small {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Retain Vibrant Brand Accent Colors for Icons & Departmental Links */
footer.footer i.fas,
footer.footer i.fab,
footer.footer i.far,
footer.footer .text-warning {
    color: #f39c12 !important;
}

footer.footer .text-success {
    color: #27ae60 !important;
}

footer.footer .text-info {
    color: #00d2d3 !important;
}

footer.footer .text-accent {
    color: #e67e22 !important;
}

/* ============================================
   UNIVERSAL BRIGHT WHITE HERO THEME & LEAD TEXT
   ============================================ */
.hero-v2-theme,
.page-hero .lead,
.hero-lead,
.hero-subtitle {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   REGISTRATION & LOGIN BUTTON CRISP DARK TEXT SYSTEM
   ============================================ */
.btn-primary-custom,
.btn-register,
.btn-login,
.btn-submit,
a.btn-primary-custom,
button.btn-primary-custom {
    color: #000000 !important;
    font-weight: 900 !important;
    background: #f39c12 !important;
    border-color: #f39c12 !important;
}

.btn-primary-custom:hover,
a.btn-primary-custom:hover,
button.btn-primary-custom:hover {
    color: #000000 !important;
    background: #e67e22 !important;
    border-color: #e67e22 !important;
    box-shadow: 0 8px 25px rgba(243, 156, 18, 0.4) !important;
}

/* ============================================
   UNIVERSAL FORM LABEL CRISP DARK COLOR SYSTEM
   ============================================ */
.form-label,
label.form-label,
form label,
.contact-form label,
.form-section-card label {
    color: #111827 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
}

.text-danger, .form-label .text-danger, span.text-danger {
    color: #dc2626 !important;
    font-weight: 900 !important;
}

/* Hero Lead Text Crisp White Override */
.page-hero .lead,
.page-hero p,
.page-hero-subtitle,
.hero-lead,
.hero-subtitle {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

@keyframes cardMarginAuraPulse {
    0% {
        border-color: rgba(243, 156, 18, 0.8) !important;
        outline: 2px solid rgba(243, 156, 18, 0.6) !important;
        outline-offset: 4px !important;
        box-shadow: 0 12px 35px rgba(243, 156, 18, 0.35), 0 0 25px rgba(243, 156, 18, 0.3) !important;
    }
    33% {
        border-color: rgba(30, 132, 73, 0.8) !important;
        outline: 2px solid rgba(30, 132, 73, 0.6) !important;
        outline-offset: 6px !important;
        box-shadow: 0 12px 35px rgba(30, 132, 73, 0.35), 0 0 25px rgba(30, 132, 73, 0.3) !important;
    }
    66% {
        border-color: rgba(184, 134, 11, 0.85) !important;
        outline: 2px solid rgba(184, 134, 11, 0.65) !important;
        outline-offset: 4px !important;
        box-shadow: 0 12px 35px rgba(184, 134, 11, 0.38), 0 0 25px rgba(184, 134, 11, 0.3) !important;
    }
    100% {
        border-color: rgba(243, 156, 18, 0.8) !important;
        outline: 2px solid rgba(243, 156, 18, 0.6) !important;
        outline-offset: 4px !important;
        box-shadow: 0 12px 35px rgba(243, 156, 18, 0.35), 0 0 25px rgba(243, 156, 18, 0.3) !important;
    }
}

/* Target all public website cards except custom-admin */
body:not(.admin-body) .card,
body:not(.admin-body) .feature-card,
body:not(.admin-body) .feature-highlight-card,
body:not(.admin-body) .sponsor-card,
body:not(.admin-body) .crew-card,
body:not(.admin-body) .system-glass-card,
body:not(.admin-body) .system-glass-card-light,
body:not(.admin-body) .glass-section-card,
body:not(.admin-body) .glass-section-card-dark,
body:not(.admin-body) .subtheme-grid-card,
body:not(.admin-body) .quick-facts-card,
body:not(.admin-body) .workflow-box,
body:not(.admin-body) .timeline-card,
body:not(.admin-body) .contact-card-box,
body:not(.admin-body) .card-glow-animated {
    animation: cardMarginAuraPulse 3.5s infinite ease-in-out !important;
    border-radius: 24px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-top: 5px solid #b8860b !important;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

body:not(.admin-body) .card:hover,
body:not(.admin-body) .feature-card:hover,
body:not(.admin-body) .feature-highlight-card:hover,
body:not(.admin-body) .sponsor-card:hover,
body:not(.admin-body) .crew-card:hover,
body:not(.admin-body) .system-glass-card:hover,
body:not(.admin-body) .glass-section-card-dark:hover,
body:not(.admin-body) .subtheme-grid-card:hover,
body:not(.admin-body) .quick-facts-card:hover,
body:not(.admin-body) .workflow-box:hover,
body:not(.admin-body) .timeline-card:hover {
    transform: translateY(-5px) !important;
}

.system-glass-card-light, .glass-section-card, .subtheme-grid-card, .workflow-box {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(10, 61, 98, 0.12) !important;
    box-shadow: 0 10px 30px rgba(10, 61, 98, 0.08) !important;
    border-radius: 24px !important;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.system-glass-card-light:hover, .glass-section-card:hover, .subtheme-grid-card:hover, .workflow-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(10, 61, 98, 0.15) !important;
    border-color: rgba(243, 156, 18, 0.5) !important;
}

/* Global Link Overrides */
a {
    color: var(--primary-orange);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--dark-orange);
}

/* Specific Email/Highlight Classes */
.text-primary {
    color: var(--primary-orange) !important;
}

.text-accent {
    color: var(--primary-orange) !important;
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-orange), var(--dark-orange)) !important;
    border: none !important;
}

/* Footer Links */
.footer a {
    color: rgba(255, 255, 255, 0.7);
}

.footer a:hover {
    color: var(--primary-orange) !important;
}

/* Engagement Modals */
.engagement-modal-box a {
    color: #fff;
}

.deadline-timer {
    color: var(--primary-orange) !important;
}

/* Branded Icon Highlights (Matching Logo Brush Strokes) */
.branded-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    z-index: 1;
}

.branded-icon::before {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg) skewX(-15deg);
    width: 130%;
    height: 60%;
    background: #e67e22;
    opacity: 0.45;
    border-radius: 3px;
    z-index: -1;
    transition: all 0.3s ease;
}

a:hover .branded-icon::before {
    background: #d35400;
    opacity: 0.8;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.1);
}

.branded-icon i {
    color: #fff !important;
    font-size: 0.9rem;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

/* ============================================
   INTERACTIVE GLOWING HEXAGON ANIMAL THEME STYLING
   ============================================ */
@keyframes hexMarginGlow {
    0% {
        filter: drop-shadow(0 0 12px rgba(243, 156, 18, 0.85)) drop-shadow(0 0 20px rgba(30, 132, 73, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 22px rgba(184, 134, 11, 0.95)) drop-shadow(0 0 32px rgba(243, 156, 18, 0.85));
    }
    100% {
        filter: drop-shadow(0 0 12px rgba(243, 156, 18, 0.85)) drop-shadow(0 0 20px rgba(30, 132, 73, 0.5));
    }
}

.animal-hexagon {
    animation: hexMarginGlow 3.5s infinite ease-in-out !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease !important;
}

.animal-hexagon:hover {
    transform: scale(1.08) !important;
    filter: drop-shadow(0 0 25px rgba(243, 156, 18, 1)) drop-shadow(0 0 40px rgba(230, 126, 34, 0.85)) !important;
    z-index: 20 !important;
}

.hexagon-front, .hexagon-back {
    border: 3px solid #f39c12 !important;
    box-shadow: inset 0 0 15px rgba(243, 156, 18, 0.5), 0 0 20px rgba(243, 156, 18, 0.6) !important;
}

.hex-theme-overlay-front {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    white-space: nowrap;
    pointer-events: none;
}

.hex-theme-overlay-front .badge {
    font-size: 0.68rem !important;
    padding: 4px 10px !important;
    letter-spacing: 0.6px;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
}

.hex-back-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
    filter: blur(2px) brightness(0.6);
    z-index: 1;
}

.theme-icon-glow i {
    filter: drop-shadow(0 0 10px rgba(243, 156, 18, 0.9));
}
