/* Custom Styles */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Selection Color */
::selection {
    background: #ff4848;
    /* Brand Accent */
    color: #0a0a0a;
}

/* Navigation Scroll State */
.nav-scrolled {
    background-color: #000000 !important;
    background-image: none !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

/* Animation Utilities */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

.animate-fade-in {
    animation: fadeIn 1.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Cinematic Reveal Animation */
@keyframes cinematic-reveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(1.1);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.animate-cinematic {
    animation: cinematic-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
    /* Start hidden */
}

/* Spectacular Text Reveal Animations */
@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.animate-tracking-in-expand {
    animation: tracking-in-expand 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

.animate-focus-in-expand {
    animation: focus-in-expand 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Image Hover Effects */
.group:hover img {
    filter: grayscale(0%);
}

/* iOS Safe Area Utility */
.footer-safe {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}