* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    background: #050505;
    color: #fff;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

body::after {
    content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px;
}

@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.reveal-d1 { animation-delay: 0.05s; }
.reveal-d2 { animation-delay: 0.1s; }
.reveal-d3 { animation-delay: 0.15s; }
.reveal-d4 { animation-delay: 0.2s; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.scroll-reveal {
    opacity: 0; transform: translateY(24px); filter: blur(6px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scroll-reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0px); }

.divider { height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.04), transparent); }
.nav-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

.project-card:hover .project-img { transform: scale(1.03); opacity: 0.7; }
.project-card:hover .project-arrow { transform: translate(3px, -3px); opacity: 1; }

.link-underline { position: relative; }
.link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: white; transition: width 0.3s ease; }

.marquee-track { animation: wave-move 40s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes wave-move { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

#mouse-glow {
    position: fixed; top: 0; left: 0; width: 800px; height: 800px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 40%, transparent 70%);
    pointer-events: none; z-index: 1; transform: translate(-50%, -50%); filter: blur(40px);
    transition: opacity 0.5s ease;
}

.particle {
    position: absolute; top: 0; left: 0; pointer-events: none;
    will-change: transform, border-color, box-shadow;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    z-index: 0;
}
.particle.circle { border-radius: 50%; }
.particle.square { border-radius: 4px; }
.particle.diamond { border-radius: 4px; }
.particle.near {
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 0 20px rgba(255,255,255,0.1), inset 0 0 8px rgba(255,255,255,0.03);
}
.particle.near.diamond { filter: blur(0px) !important; opacity: 1 !important; }

.light-obj {
    position: relative; overflow: hidden;
    transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.light-obj.is-near {
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 0 25px -5px rgba(255,255,255,0.1), inset 0 0 15px -5px rgba(255,255,255,0.05);
}

@media (hover: hover) and (pointer: fine) {
    .light-obj::after {
        content: ''; position: absolute; inset: 0;
        background: radial-gradient(circle 120px at var(--rx, -200px) var(--ry, -200px), rgba(255,255,255,0.2), transparent 100%);
        pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 2;
    }
    .light-obj:hover::after { opacity: 1; }

    .light-obj::before {
        content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
        background: radial-gradient(circle 150px at var(--rx, -200px) var(--ry, -200px), rgba(255,255,255,0.7), transparent 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 3;
    }
    .light-obj:hover::before { opacity: 0.6; }

    .link-underline:hover::after { width: 100%; }
}

input.light-obj, textarea.light-obj { z-index: 1; }

#mobile-menu {
    max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 0; padding-bottom: 0;
}
#mobile-menu.open {
    max-height: 200px; opacity: 1; pointer-events: auto;
    padding-top: 8px; padding-bottom: 16px;
}