@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

/* Base Element Styles */
html {
    scroll-behavior: smooth;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        @apply font-body text-neutral-text antialiased bg-white;
        font-size: 19px;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-heading text-brand-dark;
    }
}

@layer components {
    .hero-title {
        @apply text-hero-mobile md:text-hero text-white mb-6 font-heading font-bold leading-tight drop-shadow-lg;
    }
}

@layer utilities {
    .focus-ring {
        @apply outline-none ring-2 ring-brand-gold ring-offset-2;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hero-overlay-horizontal {
        background: linear-gradient(90deg, rgba(10, 56, 57, 0.9) 0%, rgba(10, 56, 57, 0.6) 50%, rgba(10, 56, 57, 0) 100%);
    }

    .hero-overlay-vertical {
        background: linear-gradient(0deg, rgba(10, 56, 57, 0.4) 0%, rgba(10, 56, 57, 0) 50%, rgba(10, 56, 57, 0.2) 100%);
    }

    .hero-overlay-mobile {
        background: linear-gradient(0deg, rgba(10, 56, 57, 0.8) 0%, rgba(10, 56, 57, 0.4) 100%);
    }

    /* Marquee Animation */
    @keyframes marquee-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    .marquee-track {
        display: flex;
        width: max-content;
        animation: marquee-scroll 40s linear infinite;
    }

    .marquee-content {
        display: flex;
        flex-shrink: 0;
    }

    /* Scroll Reveal Animation Styles */
    .reveal-on-scroll {
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
    }

    /* Floating Animation */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    /* Slow Rotation */
    @keyframes rotate-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .animate-rotate-slow {
        animation: rotate-slow 20s linear infinite;
    }
}

/* Hide Google Translate UI elements */
.skiptranslate.goog-te-gadget > span,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-te-gadget,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}
body {
    top: 0 !important;
}
.skiptranslate {
    display: none !important;
}