<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>troisk</title>
    <link rel="icon" href="icon.png">
    
    <!-- Google Fonts: Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght300;400;600&display=swap" rel="stylesheet">
    
    <!-- COMPILED STYLES: This block contains all the necessary CSS to replicate the original design without external script dependencies. -->
    <style>
        /* --- Base Variables & Global Styles (Tailwind look) --- */
        :root {
            --color-black: #000;
            --color-gray-900: #111827;
            --color-gray-800: #1f2937;
            --color-gray-200: #e5e7eb;
            --color-white: #fff;
            --shadow-gray-500: rgba(107, 114, 128, 0.2);
        }

        body {
            background-color: var(--color-black);
            color: var(--color-gray-200);
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
        }
        body::selection { background-color: #4b5563; color: var(--color-white); }

        main {
            width: 100%;
            max-width: 56rem; /* max-w-4xl */
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem; /* gap-8 */
        }

        /* --- Header/Logo Styles --- */
        h1 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: baseline;
            font-size: 1.875rem; /* text-3xl */
            line-height: 2.25rem;
            font-weight: 300; /* font-light */
            letter-spacing: 0.2em; /* tracking-[0.2em] */
            text-transform: uppercase;
            color: var(--color-white);
            transition: color 500ms;
            cursor: default;
        }
        h1:hover { color: #9ca3af; } /* hover:text-gray-400 */
        @media (min-width: 768px) {
            h1 { font-size: 3rem; line-height: 1; } /* md:text-5xl */
        }

        /* --- Navigation Button Styles (.nav-link) --- */
        nav {
            width: 100%;
            margin-top: 1rem; /* mt-4 */
        }
        nav ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem; /* gap-4 */
            /* FIX: Remove list dots */
            list-style: none;
            padding: 0;
            margin: 0;
        }
        @media (min-width: 768px) {
            nav ul { gap: 1.5rem; } /* md:gap-6 */
        }

        .nav-link {
            padding: 0.75rem 1.5rem; /* py-3 px-6 */
            border-radius: 9999px; /* rounded-full */
            border: 1px solid rgba(255, 255, 255, 0.1); /* border border-white/10 */
            background-color: rgba(255, 255, 255, 0.05); /* bg-white/5 */
            backdrop-filter: blur(4px); /* backdrop-blur-md */
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            letter-spacing: 0.1em; /* tracking-widest */
            text-transform: uppercase;
            color: inherit;
            
            /* FIX: Remove underline */
            text-decoration: none; 
            
            /* FIX: Remove box-shadow/undertext effect */
            box-shadow: none; 
            
            transition: all 300ms; /* transition-all duration-300 */
            display: block;
        }

        .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.2); /* hover:bg-white/20 */
            border-color: rgba(255, 255, 255, 0.3); /* hover:border-white/30 */
            transform: scale(1.05); /* hover:scale-105 */
            
            /* FIX: Remove hover box-shadow */
            box-shadow: none; 
        }

        /* --- Video Section Styles --- */
        .video-container {
            position: relative;
            width: 100%;
        }

        .video-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 aspect ratio */
            background-color: var(--color-gray-900);
            border-radius: 0.5rem; /* rounded-lg */
            overflow: hidden;
            border: 1px solid var(--color-gray-800); /* border border-gray-800 */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
        }

        .video-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* --- Video Glow Effect (.video-glow-effect) --- */
        .video-glow-effect {
            position: absolute;
            top: -0.25rem; 
            bottom: -0.25rem;
            left: -0.25rem;
            right: -0.25rem;
            /* bg-gradient-to-r from-gray-800 to-gray-900 */
            background: linear-gradient(to right, var(--color-gray-800), var(--color-gray-900));
            border-radius: 0.5rem; 
            filter: blur(16px); 
            opacity: 0.25; 
            transition: opacity 1000ms; 
            z-index: -1;
        }

        .video-container:hover .video-glow-effect {
            opacity: 0.5; /* group-hover:opacity-50 */
        }

        /* --- Utility/Ambient/Animation Styles --- */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }

        .ambient-glow {
            background: radial-gradient(circle at 50% 50%, rgba(148, 163, 184, 0.1) 0%, rgba(0, 0, 0, 0) 60%);
            position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
        }

        /* Animations */
        @keyframes slideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
        .animate-slide-up { animation: slideUp 0.8s ease-out forwards; }

        /* Custom 'Fra' animation */
        @keyframes revealFra {
            0% { max-width: 0; opacity: 0; }
            100% { max-width: 3.5em; opacity: 1; }
        }
        .fra-anim {
            display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; max-width: 0; opacity: 0;
            animation: revealFra 1.2s cubic-bezier(0.2, 0, 0.2, 1) forwards;
            animation-delay: 1s;
        }
    </style>
</head>
<body>

    <!-- Ambient background light -->
    <div class="ambient-glow"></div>

    <!-- Main Content Container -->
    <main>
        
        <!-- Header / Logo Area -->
        <header class="opacity-0 animate-slide-up" style="animation-delay: 0.1s;">
            <h1 class="cursor-default">
                <span class="fra-anim text-inherit">fra</span><span>troisk</span>
            </h1>
        </header>

        <!-- Video Wrapper: Maintains 16:9 Aspect Ratio perfectly -->
        <div class="video-container opacity-0 animate-slide-up" style="animation-delay: 0.3s;">
            <!-- Glow effect behind video -->
            <div class="video-glow-effect"></div>
            
            <div class="video-wrapper">
                <iframe 
                    class="video-iframe"
                    src="https://www.youtube.com/embed?listType=playlist&list=UUWjk0N69DXqp0N1LyNRCabg" 
                    title="YouTube video player" 
                    frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowfullscreen>
                </iframe>
            </div>
        </div>

        <!-- Navigation Links -->
        <nav class="opacity-0 animate-slide-up" style="animation-delay: 0.5s;">
            <ul>
                <!-- Link Item Template -->
                <li>
                    <a href="https://www.youtube.com/@troisk" target="_blank" rel="noopener noreferrer" 
                       class="nav-link">
                        YouTube
                    </a>
                </li>
                <li>
                    <a href="https://X.com/fratroisk" target="_blank" rel="noopener noreferrer" 
                       class="nav-link">
                        X
                    </a>
                </li>
                <li>
                    <a href="https://steamcommunity.com/id/fratroisk/" target="_blank" rel="noopener noreferrer" 
                       class="nav-link">
                        Steam
                    </a>
                </li>
                <li>
                    <a href="https://battlelog.battlefield.com/bf4/user/fratroisk/" target="_blank" rel="noopener noreferrer" 
                       class="nav-link">
                        Battlelog
                    </a>
                </li>
                <li>
                    <a href="mailto:contact@troisk.com" 
                       class="nav-link">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>

    </main>

</body>
</html>