@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Space+Grotesk:wght@300;400;500&display=swap');

        :root {
            --bg: #050505;
            --grey: #272727;
            --text: #Eaeaea;
            --accent: #ff0055; /* primary accent color used in preloader */
            --accent-rgb: 255, 0, 85;
            /* Shared nav metrics */
            --nav-height: 1.9rem;
            --nav-font-size: 0.875rem;
            --nav-gap: 1.5rem;
        }

        /* Avoid showing custom cursor on touch or small devices */
        @media (hover: none), (max-width: 600px) {
            #cursor, #cursor-halo { display: none !important; }
        }

        /* Respect reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            #cursor, #cursor-halo { transition: none !important; transform: none !important; }
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Space Grotesk', sans-serif;
            cursor: none;
            overflow-x: hidden;
            /* Prevent scrolling while loading */
            min-height: 100vh; 
        }
        
        /* Restore scrolling after load via JS */
        body.loaded {
            height: auto;
        }

        h1, h2, h3, .display-font {
            font-family: 'Syne', sans-serif;
        }

        /* --- PRELOADER --- */
        #preloader {
            position: fixed;
            inset: 0;
            background-color: #000;
            z-index: 20000; /* Top of everything */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .loader-text {
            font-family: 'Syne', sans-serif;
            font-size: clamp(2rem, 15vw, 8rem);
            font-weight: 800;
            color: #222; /* Dark grey initially */
            position: relative;
            overflow: hidden;
        }
        
        .loader-text-fg {
            position: absolute;
            top: 0;
            left: 0;
            width: 0%; /* Animates to 100% */
            height: 100%;
            color: #fff;
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid #ff0055; /* Progress bar line - more contrast */
            box-shadow: 0 0 8px #ff0055; /* subtle glow for visibility */
        }

        /* --- CUSTOM CURSOR --- */
        #cursor {
            width: 20px;
            height: 20px;
            border: 1px solid white;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transition: transform 0.12s cubic-bezier(.2,.9,.3,1), width 0.18s, height 0.18s, background-color 0.18s, box-shadow 0.18s;
            transform: translate(-50%, -50%);
            background: rgba(255,255,255,0.03);
            box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.02) inset;
            top: 0;
            left: 0;
            will-change: transform; 
        }
        #cursor.hovered {
            background: rgba(255,255,255,0.6);
            box-shadow: 0 14px 36px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
            width: 32px;
            height: 32px;
            border: none;
            mix-blend-mode: difference;
        }
        
        
        #cursor.magnetic {
            transition: width 0.18s ease, height 0.18s ease, background-color 0.18s ease, box-shadow 0.18s;
            /* Removed transform transition so JS drive position/scale */
            background: rgba(255,255,255,0.06);
            box-shadow: 0 10px 30px rgba(0,0,0,0.45);
        }
        
        #cursor.view-case {
            width: 90px;
            height: 90px;
            background: white;
            mix-blend-mode: normal;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            border: none;
            box-shadow: 0 28px 60px rgba(0,0,0,0.55);
        }
        
        #cursor.view-case::after { content: 'VIEW'; }

/* Cursor halo for depth */
/* Cursor halo for depth */
#cursor-halo {
    position: fixed;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9008;
    transform: translate(-50%, -50%) scale(1);
    /* subtle colored gradient that uses the site accent */
    background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.20), rgba(255,255,255,0.04) 8%, transparent 36%);
    opacity: 0.34;
    filter: blur(14px) saturate(120%);
    transition: transform 0.18s cubic-bezier(.2,.9,.3,1), opacity 0.18s, background 0.18s;
}

/* Hovered/modifier states color the halo using the accent color */
#cursor-halo.hovered { opacity: 0.48; transform: translate(-50%, -50%) scale(1.06); background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.26), rgba(255,255,255,0.04) 8%, transparent 36%); }
#cursor-halo.magnetic { transform: translate(-50%, -50%) scale(1.08); background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.34), rgba(255,255,255,0.06) 8%, transparent 36%); }
#cursor-halo.view-case { width: 220px; height: 220px; opacity: 0.62; filter: blur(20px) saturate(145%); background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.40), rgba(255,255,255,0.06) 8%, transparent 36%); }

/* Add a delicate ring to the halo for more premium depth */
#cursor-halo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.16), 0 0 8px rgba(255,255,255,0.02) inset;
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: screen;
}
#cursor-halo.magnetic { transform: translate(-50%, -50%) scale(1.08); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.24), rgba(255,255,255,0.08) 8%, transparent 40%); }
#cursor-halo.view-case { width: 220px; height: 220px; opacity: 0.46; filter: blur(18px) saturate(135%); }

        /* Smooth Texture */
        .smooth-texture {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9000;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.015) 0%, rgba(0, 0, 0, 0.4) 100%);
        }

        /* Layout Utilities */
        .corner-nav {
            position: fixed;
            z-index: 100;
            padding: 2rem;
            mix-blend-mode: difference;
            /* Added transition for smooth disappearance */
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        /* Class to hide nav */
        .corner-nav.nav-hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* Accent utility for developers: add a body class like `.accent-cyan` to change accent globally */
        .accent-cyan { --accent: #00ffd1; --accent-rgb: 0,255,209; }
        .accent-blue { --accent: #4f46e5; --accent-rgb: 79,70,229; }
        .accent-pink { --accent: #ff0055; --accent-rgb: 255,0,85; }

        .top-left { top: 0; left: 0; }
        .top-right { top: 0; right: 0; }
        /* Ensure the top-right nav aligns children vertically centered */
        .corner-nav.top-right { align-items: center; }
        .bottom-left { bottom: 0; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
        .bottom-right { bottom: 0; right: 0; writing-mode: vertical-rl; }

        /* Tablet and Mobile breakpoints - tune nav spacing */
        @media (min-width: 769px) and (max-width: 1024px) {
            :root { --nav-height: 1.75rem; --nav-font-size: 0.875rem; --nav-gap: 1.2rem; }
            .corner-nav { padding: 1.5rem; }
            .top-right { font-size: var(--nav-font-size); gap: 1.2rem; }
            .corner-nav.top-right a.nav-link { height: var(--nav-height); line-height: var(--nav-height); padding: 0 0.45rem; }
            .corner-nav.top-right .lang-switcher { height: var(--nav-height); line-height: var(--nav-height); padding: 0 0.45rem; font-size: var(--nav-font-size); }
            /* Slightly reduce the language group left margin on tablet */
            .corner-nav.top-right > div[role="group"] { margin-left: 0.8rem; }
        }

        @media (max-width: 768px) {
            /* Mobile Menu toggle (hamburger button) */
            .nav-toggle {
                background: transparent;
                color: rgba(255,255,255,0.9);
                border: 1px solid rgba(255,255,255,0.04);
                padding: 0.32rem 0.55rem;
                border-radius: 0.35rem;
                font-size: 1.1rem;
                line-height: 1;
                display: none; /* Visible under breakpoint */
                align-items: center;
                justify-content: center;
            }
            .nav-toggle:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.06); outline: none; }

            /* Show the toggle on small screens and hide the nav links */
            .nav-toggle { display: inline-flex; }
            .corner-nav.top-right a.nav-link { display: none; }
            /* Hide the header language switcher and language group on mobile (we use the mobile overlay instead) */
            .corner-nav.top-right .lang-switcher { display: none !important; }
            .corner-nav.top-right > div[role="group"] { display: none !important; }
            /* ensure nav height and mobile-friendly metrics */
            :root { --nav-height: 1.6rem; --nav-font-size: 0.7rem; --nav-gap: 0.8rem; }
            .corner-nav { padding: 1.25rem 1.5rem; }
            .top-right { font-size: var(--nav-font-size); gap: var(--nav-gap); }
            .corner-nav.top-right a.nav-link { height: var(--nav-height); line-height: var(--nav-height); padding: 0 0.4rem; }
            .corner-nav.top-right .lang-switcher { height: var(--nav-height); line-height: var(--nav-height); padding: 0 0.4rem; font-size: var(--nav-font-size); }
            /* Ensure a comfortable touch target for language buttons & nav links on touch devices */
            .corner-nav.top-right a.nav-link, .corner-nav.top-right .lang-switcher { min-height: 44px; min-width: 40px; padding-left: 0.5rem; padding-right: 0.5rem; }
            .corner-nav.top-right > div[role="group"] { margin-left: 0.6rem; }
        }

        /* Mobile menu overlay */
        .mobile-menu {
            position: fixed;
            inset: 0;
            z-index: 9998; /* below cursor and top-level nav, above content */
            background: rgba(5, 5, 5, 0);
            color: #fff;
            display: flex; /* always flex, use opacity and pointer-events for visibility */
            align-items: flex-start;
            justify-content: flex-end;
            padding: 0;
            overflow-y: auto;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, background 0.3s ease;
        }
        .mobile-menu.open {
            opacity: 1;
            pointer-events: auto;
            background: rgba(5, 5, 5, 0.85);
        }
        .mobile-menu-inner {
            max-width: 400px;
            width: 85%;
            height: 100%;
            background: #050505;
            padding: 4rem 2rem;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            overflow-y: auto;
            box-shadow: -8px 0 24px rgba(0,0,0,0.5);
        }
        .mobile-menu.open .mobile-menu-inner {
            transform: translateX(0);
        }
        .mobile-menu-close {
            background: transparent;
            color: #fff;
            border: none;
            font-size: 1.8rem;
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease;
        }
        .mobile-menu-close:hover {
            transform: rotate(90deg);
        }
        .mobile-menu-list { list-style: none; padding: 0 0 1rem 0; margin: 0; }
        .mobile-menu-link {
            display: block;
            font-size: 2.3rem;
            margin: 1rem 0;
            font-weight: 800;
            text-decoration: none;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            transition: transform 0.2s ease, color 0.2s ease;
            transform-origin: left;
        }
        .mobile-menu-link:hover {
            transform: translateX(8px);
            color: rgba(255,255,255,0.7);
        }
        .mobile-menu .lang-switcher {
            display: inline-flex;
            font-size: 0.95rem;
            padding: 0.6rem 0.9rem;
            transition: transform 0.2s ease;
        }
        .mobile-menu .lang-switcher:hover {
            transform: translateY(-2px);
        }

        /* Marquee */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }
        .marquee-content {
            display: inline-block;
            animation: scroll 25s linear infinite;
        }
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Project Hover Reveal Image */
        .project-preview {
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%) scale(0);
            width: 40vw;
            max-width: 450px;
            height: 50vh;
            max-height: 550px;
            object-fit: cover;
            z-index: 9500; /* appear above content but below cursor */
            pointer-events: none;
            opacity: 0;
            filter: grayscale(100%) contrast(1.1);
            will-change: transform, opacity, left, top;
        }

        /* Hide preview on very small screens to avoid layout/overlap and performance issues */
        @media (max-width: 600px) {
            #preview-img, .project-preview { display: none !important; }
        }

        @media (max-width: 600px) {
            .project-preview {
                width: 80vw;
                height: 40vh;
                max-width: 95vw;
                max-height: 60vh;
            }
            /* Extra mobile polish for nav on very small devices */
            :root { --nav-height: 1.4rem; --nav-font-size: 0.7rem; --nav-gap: 0.6rem; }
            .corner-nav.top-right { gap: 0.6rem; }
            .corner-nav.top-right > div[role="group"] { margin-left: 0.5rem; }
            .corner-nav.top-right a.nav-link { height: var(--nav-height); line-height: var(--nav-height); padding: 0 0.35rem; }
            .corner-nav.top-right .lang-switcher { height: var(--nav-height); line-height: var(--nav-height); padding: 0 0.35rem; font-size: var(--nav-font-size); }
        }
        .hover-trigger { cursor: none; }
        ::-webkit-scrollbar { display: none; }
        ::selection { background: #272727; color: white; }
        
        /* Navigation Links Hover Animation */
        .nav-link {
            position: relative;
            display: inline-block;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: white;
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.3s ease-out;
        }
        .nav-link:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        /* Make nav anchors match the language switcher height and vertical alignment */
        .corner-nav.top-right a.nav-link {
            display: inline-flex;
            align-items: center;
            height: 1.9rem;
            line-height: 1.9rem;
            padding: 0 0.5rem;
            font-size: inherit; /* keep same size as the nav container */
            color: rgba(255,255,255,0.85);
        }
        .corner-nav.top-right a.nav-link:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.06); outline: none; }

        /* Spirit Char Styles */
        .spirit-char {
            display: inline-block;
            transform-origin: center center;
            will-change: transform;
        }

        /* CTA SAY HELLO styling */
        .contact-cta {
            line-height: 0.8; /* compact */
            display: inline-block;
            word-break: break-word;
            hyphens: none;
        }
        .contact-cta:hover {
            text-decoration: none;
        }
        /* Fallback in case Tailwind no-underline didn't apply */
        a.no-underline { text-decoration: none; }
        a.no-underline:hover { text-decoration: none; }

        /* Language switcher active state */
        .lang-switcher.active {
            background: rgba(255,255,255,0.06);
            color: white;
        }

        /* Integrate language switcher into navigation visually */
        .corner-nav.top-right .lang-switcher {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: 500; /* Reduced to match nav items */
            letter-spacing: 0.06em; /* Slightly tightened */
            padding: 0.25rem 0.5rem; /* Slightly smaller for visual balance */
            height: 1.9rem;
            line-height: 1.9rem;
            border-radius: 0.35rem;
            background: transparent;
            color: rgba(255,255,255,0.85);
            transition: background 180ms ease, transform 160ms ease, color 120ms ease;
            border: 1px solid transparent;
        }
        .corner-nav.top-right .lang-switcher:hover,
        .corner-nav.top-right .lang-switcher:focus {
            background: rgba(255,255,255,0.04);
            color: #fff;
            transform: translateY(-1px);
            outline: none;
        }
        .corner-nav.top-right .lang-switcher::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: rgba(255,255,255,0.9);
            margin-top: 6px;
            transition: width 220ms ease;
        }
        .corner-nav.top-right .lang-switcher.active {
            background: rgba(255,255,255,0.08);
            color: #fff;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 18px rgba(0,0,0,0.35);
            border-color: rgba(255,255,255,0.04);
        }
        .corner-nav.top-right .lang-switcher.active::after {
            width: 100%;
        }
        .corner-nav.top-right .lang-switcher:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }

/* ALCHEMY transmutation effect (dual-layer reveal) */
.alchemy-wrap {
    display: inline-block;
    position: relative;
    line-height: 0.9;
}
.alchemy-wrap .alchemy-base,
.alchemy-wrap .alchemy-gold {
    display: inline-block;
    font-weight: 800;
    -webkit-font-smoothing: antialiased;
}
.alchemy-wrap .alchemy-base {
    color: #333; /* base dull color */
}
.alchemy-wrap .alchemy-gold {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    overflow: hidden; /* clip reveal */
    width: 0%; /* will be updated with JS via --mix */
    white-space: pre; /* keep letter spacing consistent */
    /* gold gradient color for a richer look */
    background-image: linear-gradient(90deg, #b8860b 0%, #ffd700 50%, #fff3c7 70%);
    background-size: 250% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.35s linear;
}
/* variable width controlled by CSS var --alchemy-mix */
.alchemy-wrap { --alchemy-mix: 0%; }
.alchemy-wrap .alchemy-gold { width: var(--alchemy-mix); }

/* subtle shimmer effect support when fully transmuted */
.alchemy-wrap.shimmer .alchemy-gold {
    animation: alchemy-shimmer 3s linear infinite;
}
@keyframes alchemy-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 80% 50%; }
    100% { background-position: 0% 50%; }
}