<style>
            @font-face {
                font-family: 'iconfont';
                src: url('iconfont.ttf') format('truetype');
            }

            * {
                user-select: none;
            }

            html, body {
                overflow: hidden;
                background-color: #000;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            body {
                position: fixed;
            }

            canvas {
                width: 100%;
                height: 100%;
                position: absolute;
            }

            .dg {
                opacity: 0.9;
            }

            .dg .property-name {
                overflow: visible;
            }
            
            .logo-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 32rem;
                height: auto;
                z-index: 1000;
                display: flex;
                justify-content: center;
                align-items: center;
                pointer-events: auto;
                background: transparent;
            }

            .logo-image {
                position: absolute;
                width: 100%;
                height: auto;
                border-radius: 1.5rem;
                transition: all 0.8s ease-in-out;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
            }

            .black-logo {
                opacity: 0;
                transform: scale(0.95);
                filter: blur(4px);
                z-index: 1002;
            }

            .white-logo {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
                z-index: 1001;
            }

            @media (hover: hover) {
                .logo-container:hover .black-logo {
                    opacity: 1;
                    transform: scale(1);
                    filter: blur(0);
                }

                .logo-container:hover .white-logo {
                    opacity: 0;
                    transform: scale(0.95);
                    filter: blur(4px);
                }
            }

            @media (max-width: 768px) {
                .logo-container {
                    width: 24rem;
                }
                
                .logo-image {
                    transition: all 1s ease-in-out;
                }
            }

            body::after {
                position: absolute;
                width: 0;
                height: 0;
                overflow: hidden;
                z-index: -1;
                content: url("/assets/TAN_only_black.png") url("/assets/full_white_transparent.png");
            }

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

            .interaction-text {
                position: fixed;
                top: calc(50% + 200px);
                left: 50%;
                transform: translate(-50%, 0);
                pointer-events: none;
                z-index: 1000;
                display: flex;
                flex-direction: column;
                align-items: center;
                opacity: 1;
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .interaction-text.hidden {
                opacity: 0;
                transform: translate(-50%, 20px);
                visibility: hidden;
            }

            .interaction-ring {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .interaction-ring::before,
            .interaction-ring::after {
                content: '';
                position: absolute;
                border-radius: 50%;
                animation: pulse 2s ease-out infinite;
                background: radial-gradient(circle, 
                    rgba(255, 255, 255, 0.15) 0%,
                    rgba(255, 255, 255, 0.1) 45%,
                    rgba(255, 255, 255, 0.05) 70%,
                    transparent 100%
                );
            }

            .interaction-ring::before {
                width: 100%;
                height: 100%;
                animation-delay: -0.5s;
            }

            .interaction-ring::after {
                width: 85%;
                height: 85%;
            }

            .interaction-text .text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: rgba(255, 255, 255, 0.8);
                font-family: 'Segoe UI', -apple-system, sans-serif;
                font-size: 0.85rem;
                font-weight: 300;
                letter-spacing: 2px;
                text-transform: uppercase;
                white-space: nowrap;
                background: linear-gradient(
                    to right,
                    rgba(255, 255, 255, 0.9),
                    rgba(255, 255, 255, 0.3)
                );
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                animation: shimmer 3s linear infinite;
                background-size: 200% 100%;
            }

            .mobile-text {
                display: none;
            }

            @keyframes pulse {
                0% {
                    transform: scale(0.95);
                    opacity: 0.8;
                }
                50% {
                    transform: scale(1.05);
                    opacity: 0.3;
                }
                100% {
                    transform: scale(0.95);
                    opacity: 0.8;
                }
            }

            @keyframes shimmer {
                0% {
                    background-position: 100% 0;
                }
                100% {
                    background-position: -100% 0;
                }
            }

            @media (max-width: 768px) {
                .interaction-text {
                    top: calc(50% + 180px);
                }

                .interaction-ring {
                    width: 100px;
                    height: 100px;
                }
                
                .mobile-text {
                    display: block;
                }
                
                .desktop-text {
                    display: none;
                }
                
                .interaction-text .text {
                    font-size: 0.75rem;
                }
            }

            @media (hover: hover) {
                .interaction-text {
                    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                }
            }

            .scroll-indicator {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                display: none;
                pointer-events: auto;
                z-index: 1001;
                opacity: 0;
                cursor: pointer;
                transition: opacity 0.6s ease-out;
                padding-bottom: 50px;
            }

            .scroll-indicator.visible {
                opacity: 1;
            }

            .scroll-icon {
                width: 20px;
                height: 32px;
                border: 2px solid rgba(255, 255, 255, 0.4);
                border-radius: 10px;
                position: relative;
                display: flex;
                justify-content: center;
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
                background: rgba(0, 0, 0, 0.2);
                transition: border-color 0.3s ease, transform 0.3s ease;
            }

            .scroll-icon:hover {
                border-color: rgba(255, 255, 255, 0.6);
                transform: scale(1.05);
            }

            .scroll-icon:active {
                transform: scale(0.95);
            }

            .scroll-icon::before {
                content: '';
                width: 3px;
                height: 6px;
                position: absolute;
                top: 6px;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 1.5px;
                animation: scrollDot 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            }

            .scroll-text {
                display: none;
            }

            @keyframes scrollDot {
                0% {
                    transform: translateY(0);
                    opacity: 0.8;
                }
                50% {
                    transform: translateY(15px);
                    opacity: 0.3;
                }
                100% {
                    transform: translateY(0);
                    opacity: 0.8;
                }
            }

            @media (max-width: 768px) {
                .scroll-indicator {
                    display: block;
                }
            }
        </style>