/* --- Reset & Core Architecture --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100%; height: 100%;
    overflow: hidden;
    background-color: #020202; /* Fallback canvas dark */
    font-family: 'Courier New', Courier, monospace;
    user-select: none;
}

/* --- THE BACKGROUND CANVAS LAYER STATE MATRIX --- */
.chaotic-gif-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2hjOHNtb3M3dHo5MnlraDNxNnYweHlxOHNoa2ZodG1vYXZ3MzJpaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/V6Kr58fq5ika4/giphy.gif') no-repeat center center fixed;
    background-size: cover;
    z-index: 1; /* Shifted to -1 so it stays strictly on top of the black body color */
    opacity: 1;
    /* CALM MODE DEFAULT: Dimmed down, desaturated grey static noise loop */
    filter: contrast(1.1) brightness(0.25) saturate(0.1) hue-rotate(0deg);
    transition: filter 0.2s linear;
}

/* --- CRT Raster Grid Mask --- */
.crt-mesh {
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(16, 16, 16, 0) 50%, rgba(0, 0, 0, 0.55) 50%);
    z-index: 10;
    background-size: 100% 4px;
    pointer-events: none;
}

/* --- Main Alignment Workspace Stage --- */
.portal-workspace {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent; /* Ensures the workspace doesn't block the background GIF */
}

/* --- FIXED CENTERING FOR THE GRAFFITI HEADER --- */
.graffiti-header {
    position: absolute;
    top: -19vh; /* Moved higher to offset the large transparent top padding from your drawing canvas */
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    max-width: 550px; /* Clamps the container width perfectly */
    height: auto; /* Removed the vh restriction so the image can scale fully */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.logo-img {
    width: 100%;
    height: auto; /* Lets the drawing scale up proportional to the width box */
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(163, 255, 0, 0.5));
}

/* --- DEAD CENTER AVATAR ANCHOR BOX --- */
.avatar-gate-node {
    position: absolute;
    top: 50%; /* Lowers the head slightly so it sits comfortably below your signature layout */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px; 
    height: 380px;
    z-index: 10;
}

.avatar-asset {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(163, 255, 0, 0.2));
    transition: filter 0.3s ease-in-out;
}

.mode-glitch { display: none; }
.mode-normal { display: block; }

/* --- INTERACTIVE TRIGGER MUTATION SWAPS --- */
.avatar-gate-node:hover .mode-normal { display: none; }
.avatar-gate-node:hover .mode-glitch {
    display: block;
    filter: drop-shadow(0 0 25px #ff00ff);
    animation: jitter 0.15s infinite;
}

/* --- GLITCH ENVIRONMENT MATRIX SHIFT --- */
.avatar-gate-node:hover ~ .chaotic-gif-bg {
    filter: contrast(1.8) brightness(0.45) saturate(2.5) hue-rotate(290deg);
    animation: bgPanic 0.18s infinite;
}

/* --- Navigation Side Panel Node Layouts --- */
.nav-cluster {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 6;
}

.left-side { left: 8%; }
.right-side { right: 8%; }

.nav-cluster.reveal {
    opacity: 1;
    pointer-events: auto;
}

.neon-link {
    background: rgba(4, 4, 4, 0.95); border: 1px solid #a3ff00;
    padding: 12px 24px; color: #a3ff00; font-size: 13px;
    text-decoration: none; text-shadow: 0 0 5px #a3ff00; letter-spacing: 2px;
    transition: all 0.2s ease;
}
.neon-link:hover {
    background: #a3ff00; color: #000; text-shadow: none; box-shadow: 0 0 25px #a3ff00;
}

.link-pink { border-color: #ff00ff; color: #ff00ff; text-shadow: 0 0 5px #ff00ff; }
.link-pink:hover { background: #ff00ff; color: #000; text-shadow: none; box-shadow: 0 0 25px #ff00ff; }

/* --- ANIMATION SEQUENCES --- */
@keyframes jitter {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    20% { transform: translate(-1px, -1px) rotate(-1deg); }
    40% { transform: translate(-2px, 1px) rotate(1deg); }
    60% { transform: translate(1px, -1px) rotate(0deg); }
    80% { transform: translate(-1px, 1px) rotate(1deg); }
    100% { transform: translate(2px, -1px) rotate(-1deg); }
}

@keyframes bgPanic {
    0% { transform: scale(1) translate(0, 0); }
    25% { transform: scale(1.02) translate(4px, -3px); filter: hue-rotate(290deg) invert(0.04); }
    50% { transform: scale(1.01) translate(-3px, 3px); }
    75% { transform: scale(1.03) translate(2px, -4px); filter: contrast(2.2) saturate(3.2); }
    100% { transform: scale(1) translate(-2px, 2px); }
}

/* --- Textbox Prompts --- */
.portal-textbox {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: rgba(2, 2, 2, 0.95); border: 2px solid #ff00ff;
    padding: 10px 26px; color: #ff00ff; font-size: 20px; font-weight: bold;
    letter-spacing: 6px; text-shadow: 0 0 6px #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.avatar-gate-node:hover .portal-textbox { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.avatar-gate-node.breached:hover .portal-textbox { opacity: 0 !important; }


/* --- THE HOVER CHAOS SWITCH FOR YOUR NESTED LOGO --- */
/* When the main avatar box is hovered, reach inside and trigger the logo shake */
.avatar-gate-node:hover .graffiti-header {
    animation: logoPanic 0.12s infinite !important;
}

/* --- ADJUST POSITION FOR THE NESTED CONTAINER --- */


/* --- THE LOGO SHAKE MATRIX KEYFRAMES --- */
@keyframes logoPanic {
    0% { transform: translateX(-50%) translate(0, 0) scale(1); filter: drop-shadow(0 0 15px #ff00ff) hue-rotate(180deg); }
    25% { transform: translateX(-50%) translate(-4px, 3px) scale(1.02); filter: drop-shadow(-5px 0 12px #00ffff) invert(0.1); }
    50% { transform: translateX(-50%) translate(3px, -4px) scale(0.98); filter: drop-shadow(5px 5px 25px #ff00ff) saturate(2); }
    75% { transform: translateX(-50%) translate(-2px, -2px) scale(1.03); filter: drop-shadow(0 -5px 15px #a3ff00) contrast(1.6); }
    100% { transform: translateX(-50%) translate(4px, 2px) scale(1); filter: drop-shadow(0 0 15px #ff00ff) hue-rotate(360deg); }
}