/* --- Global Styles --- */
:root {
    /* Define cyberpunk-inspired colors */
    --color-dark: #0A0A0A;      /* Deep black for the background */
    --color-neon-blue: #00FFFF;  /* Cyan/Electric Blue for the glow */
    --color-neon-pink: #FF00FF;  /* Magenta/Pink accent */
}

body {
    background-color: var(--color-dark);
    /* Set the fallback font and use Orbitron from Google Fonts */
    font-family: 'Orbitron', sans-serif;
    color: var(--color-neon-blue); /* Default text color */
    
    /* Full viewport size and centering */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    
    /* Remove default text shadows/blur for crispness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden; /* Prevent glitching elements from causing scrollbars */
}

/* --- Container for Centering --- */
.container {
    text-align: center;
    position: relative; /* Needed for positioning glitch elements */
}

/* --- Logo Styling --- */
.logo {
    /* Make the logo huge! */
    font-size: 10vw; /* Responsive font size */
    font-weight: 900; /* Use the heavy weight from Orbitron */
    
    /* Create the iconic neon glow effect */
    text-shadow: 
        0 0 7px var(--color-neon-blue),
        0 0 10px var(--color-neon-blue),
        0 0 21px var(--color-neon-blue),
        0 0 42px var(--color-neon-pink), /* Pink accent in the further glow */
        0 0 82px var(--color-neon-pink),
        0 0 92px var(--color-neon-pink),
        0 0 102px var(--color-neon-pink),
        0 0 151px var(--color-neon-pink);
    
    /* Apply a slight "flicker" animation for a dynamic, cyberpunk feel */
    animation: flicker 1.5s infinite alternate;
    
    /* Give it some space */
    padding: 20px;
    letter-spacing: 5px; /* Spacing out the letters enhances the look */
    
    position: relative; /* For glitch pseudo-elements */
    display: inline-block; /* To make text-shadow and positioning behave */
}

/* --- Glitch Effects (Pseudo-elements) --- */
.logo::before,
.logo::after {
    content: 'abso.ca'; /* Duplicate the text for glitch layers */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Inherit main logo styles */
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    padding: inherit;
    
    /* Ensure they are on top of the main logo but below other layers if any */
    z-index: -1; 
    
    /* Masking for the glitch effect */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Full visibility by default */
}

/* --- Glitch Layer 1 (Blue) --- */
.logo::before {
    color: var(--color-neon-blue);
    text-shadow: 
        0 0 5px var(--color-neon-blue),
        0 0 10px var(--color-neon-blue);
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse; /* Different animation for each layer */
}

/* --- Glitch Layer 2 (Pink) --- */
.logo::after {
    color: var(--color-neon-pink);
    text-shadow: 
        0 0 5px var(--color-neon-pink),
        0 0 10px var(--color-neon-pink);
    animation: glitch-anim-2 3s infinite linear alternate; /* Different animation for each layer */
}

/* --- Flicker Keyframes (from previous version) --- */
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 4px var(--color-neon-blue), 
            0 0 11px var(--color-neon-blue), 
            0 0 19px var(--color-neon-blue), 
            0 0 40px var(--color-neon-pink), 
            0 0 80px var(--color-neon-pink);
    }
    
    20%, 24%, 55% {
        opacity: 0.8;
        text-shadow: 
            0 0 2px var(--color-neon-blue), 
            0 0 5px var(--color-neon-blue), 
            0 0 10px var(--color-neon-blue);
    }
}

/* --- Glitch Keyframes 1 (Blue Layer) --- */
@keyframes glitch-anim-1 {
    0% {
        transform: translate(0, 0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* No glitch */
    }
    2% {
        transform: translate(2px, 0);
        clip-path: polygon(0 0, 100% 0, 100% 3%, 0 3%); /* Small horizontal slice */
    }
    4% {
        transform: translate(-2px, 0);
        clip-path: polygon(0 5%, 100% 5%, 100% 8%, 0 8%);
    }
    6% {
        transform: translate(3px, 0);
        clip-path: polygon(0 10%, 100% 10%, 100% 12%, 0 12%);
    }
    8% {
        transform: translate(-3px, 0);
        clip-path: polygon(0 15%, 100% 15%, 100% 17%, 0 17%);
    }
    10% {
        transform: translate(1px, 0);
        clip-path: polygon(0 20%, 100% 20%, 100% 23%, 0 23%);
    }
    12% {
        transform: translate(-1px, 0);
        clip-path: polygon(0 25%, 100% 25%, 100% 28%, 0 28%);
    }
    100% {
        transform: translate(0, 0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* No glitch */
    }
}

/* --- Glitch Keyframes 2 (Pink Layer) --- */
@keyframes glitch-anim-2 {
    0% {
        transform: translate(0, 0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* No glitch */
    }
    3% {
        transform: translate(-1px, 0);
        clip-path: polygon(0 2%, 100% 2%, 100% 4%, 0 4%);
    }
    5% {
        transform: translate(1px, 0);
        clip-path: polygon(0 7%, 100% 7%, 100% 9%, 0 9%);
    }
    7% {
        transform: translate(-2px, 0);
        clip-path: polygon(0 12%, 100% 12%, 100% 14%, 0 14%);
    }
    9% {
        transform: translate(2px, 0);
        clip-path: polygon(0 17%, 100% 17%, 100% 19%, 0 19%);
    }
    11% {
        transform: translate(-1px, 0);
        clip-path: polygon(0 22%, 100% 22%, 100% 24%, 0 24%);
    }
    13% {
        transform: translate(1px, 0);
        clip-path: polygon(0 27%, 100% 27%, 100% 29%, 0 29%);
    }
    100% {
        transform: translate(0, 0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* No glitch */
    }
}