/* ===================================
   UNAM 475 — Custom Styles
   =================================== */

/* --- Smooth scroll & selection --- */
::selection {
    background: rgba(196, 168, 53, 0.3);
    color: #002147;
}

/* --- Hero Background: Ken Burns slow zoom --- */
.hero-bg-img {
    animation: kenBurns 25s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes kenBurns {
    0%   { transform: scale(1)   translate(0, 0); }
    100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* --- Hero Vignette: dark soft edges, lighter center --- */
.hero-vignette {
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0, 18, 41, 0.45) 70%,
        rgba(0, 18, 41, 0.8) 100%
    );
}

/* --- Scroll indicator pulse --- */
.scroll-line {
    animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 0.8; transform: scaleY(1.2); }
}

/* --- Fade Up Entrance (hero elements) --- */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s ease-out forwards;
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }
.delay-5 { animation-delay: 0.8s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Scroll Reveal (IntersectionObserver driven) --- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.scroll-reveal.delay-1 { transition-delay: 0.1s; }
.scroll-reveal.delay-2 { transition-delay: 0.2s; }
.scroll-reveal.delay-3 { transition-delay: 0.3s; }
.scroll-reveal.delay-4 { transition-delay: 0.4s; }
.scroll-reveal.delay-5 { transition-delay: 0.5s; }
.scroll-reveal.delay-6 { transition-delay: 0.6s; }

/* --- Nav solid state --- */
#main-nav.scrolled {
    background: rgba(0, 18, 41, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

/* --- Floating particles (subtle golden dust) --- */
.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(196, 168, 53, 0.3);
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float linear infinite;
}

@keyframes particle-float {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-50vh) scale(1);
    }
}

/* --- Timeline responsive line --- */
@media (max-width: 767px) {
    .timeline-item {
        flex-direction: row !important;
    }
}

/* --- Stat counter glow on hover --- */
.stat-card:hover .counter {
    text-shadow: 0 0 30px rgba(196, 168, 53, 0.3);
}

/* --- Smooth body transitions --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Custom scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #001229;
}
::-webkit-scrollbar-thumb {
    background: #C4A835;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #E8D67A;
}