@font-face {
            font-family: 'Thrashlane';
            src: url('../fonts/Thrashlane.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
        }

        .font-thrashlane {
            font-family: 'Thrashlane', sans-serif;
        }

        body {
            background-color: #050505;
            color: white;
            overflow-x: hidden;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #050505;
        }

        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 3px;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #98062b;
        }

        .mask-fade-sides {
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        /* 3D Utilities */
        .perspective-1000 {
            perspective: 1000px;
        }

        .preserve-3d {
            transform-style: preserve-3d;
        }

        /* Utility Classes */
        .clip-path-polygon {
            clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
        }

        .clip-path-polygon-alt {
            clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%);
        }

        .clip-path-social {
            clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
        }

        /* View Management */
        .view-section {
            display: none;
        }

        .view-section.active {
            display: block;
            animation: fadeIn 0.5s ease-out forwards;
        }

        /* Atmospheric Fog */
        .fog-layer {
            background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/img/fog1.png') repeat-x;
            background-size: 200% auto;
            position: absolute;
            height: 100%;
            width: 100%;
            bottom: 0;
            opacity: 0.3;
            animation: fogMove 60s linear infinite;
            pointer-events: none;
        }

        .fog-layer-2 {
            background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/img/fog2.png') repeat-x;
            background-size: 200% auto;
            animation-duration: 40s;
            opacity: 0.2;
            bottom: 20%;
        }

        /* Ember Particles */
        .ember {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #8d0000;
            border-radius: 50%;
            box-shadow: 0 0 4px #ff0000;
            animation: rise 4s infinite linear;
            opacity: 0;
        }

        @keyframes rise {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

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

        .logo-hover-red {
            transition: filter 0.3s ease;
        }

        .logo-hover-red:hover {
            filter: hue-rotate(0deg) saturate(5) brightness(0.8);
        }

        .social-icon-interactive {
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .social-icon-interactive:hover {
            transform: scale(1.2);
            filter: brightness(1.2) drop-shadow(0 0 8px rgba(152, 6, 43, 0.6));
        }

        /* NEW: Scroll & Parallax Animations */
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* NEW: Mobile Enhancements */
        @media (max-width: 768px) {
            html {
                font-size: 14px;
                /* Increase base font size slightly */
            }

            .text-xs {
                font-size: 0.85rem;
                /* Ensure small text is readable */
            }
        }

        /* Touch Feedback */
        button:active,
        a:active,
        .nav-btn:active,
        .social-icon-interactive:active {
            transform: scale(0.95);
            filter: brightness(0.9);
        }

        /* 3D Model Loading Spinner */
        .loader {
            width: 48px;
            height: 48px;
            border: 5px solid #FFF;
            border-bottom-color: #98062b;
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }

        @keyframes rotation {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Staggered Menu Animations */
        .mobile-menu-link {
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mobile-menu-link.show {
            opacity: 1;
            transform: translateX(0);
        }

        /* Optimization */
        .reveal-on-scroll,
        .mobile-menu-link {
            will-change: transform, opacity;
        }

        /* Prevent horizontal scroll on mobile due to animations */
        html,
        body {
            overflow-x: hidden;
            width: 100%;
        }