/* Improved Scroll Reveal System */
.reveal {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0) !important;
}

.reveal-up {
    transform: translateY(60px);
}

.reveal-down {
    transform: translateY(-60px);
}

.reveal-left {
    transform: translateX(60px);
}

.reveal-right {
    transform: translateX(-60px);
}

.reveal-zoom {
    transform: scale(0.9);
}

.reveal-blur {
    filter: blur(20px);
}

.reveal-blur.active {
    filter: blur(0);
}

/* New: Skew Reveal for Headers */
.reveal-skew {
    transform: translateY(40px) skewY(2deg);
    transform-origin: left top;
}

/* Typewriter Word Reveal */
.type-word {
    display: inline-block;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateX(-10px);
}

.type-word.active {
    opacity: 1;
    transform: translateX(0);
}

/* Technical Enhancements */
.parallax-bg {
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
}

/* Premium Hover Interactions */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -15px rgba(31, 78, 121, 0.15);
}

/* Smooth Interactive States */
.btn-interactive {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-interactive::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-interactive:hover::before {
    width: 300%;
    height: 300%;
}

/* Existing Legacy Animations (keeping for compatibility but will migrate) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s both;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes bounceSlow {

    0%,
    100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce-slow {
    animation: bounceSlow 3s infinite;
}

/* Orbital Motion Animation */
@keyframes revolve {
    from {
        transform: rotate(0deg) translateY(-160px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateY(-160px) rotate(-360deg);
    }
}

@keyframes revolve-reverse {
    from {
        transform: rotate(360deg) translateY(160px) rotate(-360deg);
    }

    to {
        transform: rotate(0deg) translateY(160px) rotate(0deg);
    }
}

.animate-revolve {
    animation: revolve 15s linear infinite;
}

.animate-revolve-reverse {
    animation: revolve-reverse 20s linear infinite;
}

/* Spin Slow */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

/* Glassmorphism Utility */
.glass-morphism {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Navigation Link Underline Effect */
.nav-link {
    position: relative;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #1F4E79;
    /* brand-blue */
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: #1F4E79;
}

/* Scroll to Top Specific Animations */
@keyframes bounceIn {
    0% {
        transform: scale(0.3) translateY(100px);
        opacity: 0;
    }

    50% {
        transform: scale(1.1) translateY(-10px);
    }

    70% {
        transform: scale(0.9) translateY(5px);
    }

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

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(31, 78, 121, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(31, 78, 121, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(31, 78, 121, 0);
    }
}

.scroll-top-visible {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) both, pulse-border 2s infinite;
}

.scroll-top-hidden {
    opacity: 0;
    transform: scale(0.5) translateY(50px);
    pointer-events: none;
    transition: all 0.5s ease-in-out;
}

/* Additional specific overrides if needed */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes pulse-blue-green {

    0%,
    100% {
        color: #3b82f6;
        /* blue-500 */
    }

    50% {
        color: #22c55e;
        /* green-500 */
    }
}

.animate-pulse-blue-green {
    animation: pulse-blue-green 2s ease-in-out infinite;
}