[x-cloak] { display: none !important; }

/* Shared high-visibility input style (used by admin settings + anywhere) */
.admin-input {
    border-color: #cbd5e1;
    color: #1e293b;
    background-color: #ffffff;
}
.admin-input:focus {
    border-color: #C9A84C;
    box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.15);
    outline: none;
}
.admin-btn {
    background-color: #0A1F5C;
    color: #ffffff;
}
.admin-btn:hover { background-color: #1E3A8A; }
.admin-card {
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
}

@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideLeft { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.animate-fade-up { animation: fadeUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-left { animation: slideLeft 0.6s ease-out forwards; }
.animate-slide-right { animation: slideRight 0.6s ease-out forwards; }

/* Scroll-reveal: elements start hidden, .is-visible plays the entrance */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-animate="left"]  { transform: translateX(40px); }
[data-animate="right"] { transform: translateX(-40px); }
[data-animate="left"].is-visible,
[data-animate="right"].is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
.delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
.delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
.delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
.delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
.delay-600 { transition-delay: 600ms; animation-delay: 600ms; }
.delay-700 { transition-delay: 700ms; animation-delay: 700ms; }
.delay-800 { transition-delay: 800ms; animation-delay: 800ms; }

.marquee { animation: marquee 20s linear infinite; }

html { scroll-behavior: smooth; }

/* ── Shared hero background ─────────────────────────────
   Uses the site hero photo directly so the public hero sections render
   the image reliably instead of falling back to the overlay color. */
.hero-bg {
    background-image:
        linear-gradient(135deg, rgba(10, 31, 92, 0.78) 0%, rgba(30, 58, 138, 0.58) 100%),
        url('../images/hero.jpeg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0A1F5C !important;
    background-attachment: scroll !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }