/* General */
html { scroll-behavior: smooth; }
body {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    background-color: #1A0D26;
    color: #fff;
    cursor: none;
    overflow-x: hidden;
    position: relative;
}

/* Canvases */
#bgCanvas, #glitchCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}
#glitchCanvas {
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.2;
}

/* Cursor */
#cursor {
    width: 14px; height: 14px;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: #FF69B4;
    border: 1px solid #fff;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 10px #FF69B4;
}

/* Header */
header {
    text-align: center;
    padding: 60px 20px;
    background: rgba(44,11,63,0.85);
    position: relative;
    z-index: 2;
}
#logo {
    width: 80px; border-radius: 12px;
    border: 2px solid #FFD700;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: transform 0.3s, box-shadow 0.3s;
}
#logo:hover { transform: scale(1.1) rotate(-5deg); box-shadow: 0 8px 16px rgba(0,0,0,0.7); }
.glitch { font-size: 3rem; position: relative; color: #FFD700; animation: flicker 2s infinite; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left:0; width:100%; overflow:hidden; }
.glitch::before { top:-2px; color:#FF69B4; animation: glitchTop 1s infinite; }
.glitch::after { top:2px; color:#0ff; animation: glitchBottom 1s infinite; }

@keyframes glitchTop {0%{transform:translate(-1px,-1px);}25%{transform:translate(2px,-2px);}50%{transform:translate(-2px,1px);}75%{transform:translate(1px,2px);}100%{transform:translate(0,0);}}
@keyframes glitchBottom {0%{transform:translate(1px,1px);}25%{transform:translate(-2px,2px);}50%{transform:translate(2px,-1px);}75%{transform:translate(-1px,-2px);}100%{transform:translate(0,0);}}
@keyframes flicker {0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;}20%,24%,55%{opacity:0.4;}}

header .tagline {margin-top:10px;font-size:0.8rem;color:#fff;font-style:italic;}
nav a {color:#FFD700;text-decoration:none;margin:0 15px;font-weight:bold;transition:color 0.3s, text-shadow 0.3s;}
nav a:hover {color:#FF69B4;text-shadow:0 0 8px #FF69B4;}

/* Sections */
section { padding:60px 20px; text-align:center; position:relative; z-index:2; }
section h2 { color:#FFD700; font-size:2rem; margin-bottom:20px; }
section p { max-width:700px; margin:0 auto 20px; }
ul { list-style:none; padding-left:0; }
ul li::before { content:"• "; color:#FF69B4; }

/* Connect */
.connect-links li { margin:10px 0; font-size:0.9rem; transition:all 0.3s ease; }
.connect-links li a { color:#FFD700; text-decoration:none; transition:all 0.3s ease; position:relative; }
.connect-links li a:hover { color:#FF69B4; text-shadow:0 0 10px #FF69B4,0 0 20px #FFD700; }
.connect-links li a::after { content:''; position:absolute; left:0; bottom:-3px; width:100%; height:2px; background:#FF69B4; transform:scaleX(0); transform-origin:right; transition:transform 0.3s ease; }
.connect-links li a:hover::after { transform:scaleX(1); transform-origin:left; }

/* Buttons */
.btn { display:inline-block; background-color:#FFD700; color:#2C0B3F; padding:10px 20px; border-radius:8px; text-decoration:none; font-weight:bold; margin-top:15px; transition:transform 0.3s, background-color 0.3s, box-shadow 0.3s; }
.btn:hover { background-color:#FF69B4; transform:scale(1.1); box-shadow:0 0 10px #FF69B4; }

/* Gallery */
.gallery { display:flex; justify-content:center; gap:20px; overflow-x:auto; padding:20px; scroll-behavior:smooth; }
.gallery img { height:200px; border:2px solid #FFD700; border-radius:10px; transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.gallery img:hover { transform:scale(1.05); border-color:#0ff; box-shadow:0 0 10px #0ff; }

/* Footer */
footer { text-align:center; padding:40px; background-color:rgba(44,11,63,0.85); font-size:0.8rem; color:#aaa; position:relative; z-index:2; }

/* Responsive */
@media screen and (max-width:768px){
    .glitch{font-size:2rem;}
    nav a{display:block;margin:10px 0;}
    .gallery img{height:150px;}
    .connect-links li{font-size:0.8rem;}
}