:root {
    --bg: #0a0a0a;
    --text: #e0e0e0;
    --red: #8b0000;
    --font-head: 'Pirata One', cursive;
    --font-body: 'Special Elite', cursive;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow: hidden; cursor: none; }

.noise-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0.05; pointer-events: none; background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E'); z-index: 100; }

.cursor { position: fixed; width: 10px; height: 10px; background: var(--red); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; box-shadow: 0 0 10px var(--red); transition: width 0.1s, height 0.1s; }
.cursor.buzzing { width: 30px; height: 30px; background: transparent; border: 2px solid var(--red); animation: shake 0.05s infinite; }

.nav { padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; }
.logo { font-family: var(--font-head); font-size: 3rem; color: var(--red); }
.links a { color: var(--text); text-decoration: none; margin-left: 2rem; font-size: 1.2rem; transition: color 0.3s; }
.links a:hover { color: var(--red); }

.hero { height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
h1 { font-family: var(--font-head); font-size: 8rem; margin-bottom: 1rem; position: relative; z-index: 2; transition: 0.3s; }
h1:hover { color: var(--red); transform: scale(1.05); }
p { font-size: 1.5rem; letter-spacing: 5px; position: relative; z-index: 2; }

.image-reveal { position: absolute; width: 400px; height: 500px; opacity: 0; filter: grayscale(100%); transition: 0.5s; z-index: 1; mix-blend-mode: luminosity; }
.image-reveal img { width: 100%; height: 100%; object-fit: cover; }
.hero:hover .image-reveal { opacity: 0.3; }

@keyframes shake {
    0% { transform: translate(calc(-50% + 2px), calc(-50% + 2px)); }
    50% { transform: translate(calc(-50% - 2px), calc(-50% - 2px)); }
    100% { transform: translate(calc(-50% + 2px), calc(-50% - 2px)); }
}