/* Custom utilities and animations for Professor Fana Cosmic Theme */

/* Smooth scroll behavior and prevent horizontal overflow natively */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

html {
    scroll-behavior: smooth;
}

/* Custom radial gradient for hero background to simulate deep cosmos/void */
.bg-radial-gradient {
    /* Kept for generic usage, but removed from hero */
    background: radial-gradient(ellipse at center, #1e1b4b 0%, #020617 40%, #000000 100%);
}

/* 
  Micro-animations (Reveal on scroll) 
  Classes to be triggered by script.js intersection observer 
*/
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s ease-out;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s ease-out;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Delay classes for staggered animations */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

/* Custom Embers / Particles Animation */
.particle {
    position: absolute;
    border-radius: 50%;
    background-color: #C0C0C0;
    /* Silver 500 */
    filter: blur(1px);
    opacity: 0;
    animation: floatEmber linear infinite;
}

@keyframes floatEmber {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.1;
    }

    50% {
        opacity: 0.6;
        transform: translateY(-40px) scale(1.2);
    }

    100% {
        transform: translateY(-80px) scale(1);
        opacity: 0.1;
    }
}