/* Y2K Chaotic Aesthetic CSS */
/* This creates a truly chaotic, organic layout that feels like early 2000s web design */

/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', 'Courier New', sans-serif;
}

body {
    background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23000"/><path d="M0 0L100 100M100 0L0 100" stroke="%23333" stroke-width="1"/></svg>');
    color: #0f0;
    background-size: 20px 20px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Chaotic grid background */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(0, 255, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: -1;
    animation: gridShift 20s linear infinite;
}

@keyframes gridShift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(10px, 10px); }
}

/* Chaotic header */
header {
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
    padding: 15px;
    text-align: center;
    border: 5px solid #ff00ff;
    border-radius: 0;
    position: relative;
    margin-bottom: 20px;
    box-shadow: 0 0 20px #ff00ff, inset 0 0 10px #00ffff;
    transform: skew(-5deg) rotate(1deg);
    margin-left: 10px;
    margin-right: 10px;
    animation: headerFloat 6s ease-in-out infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes headerFloat {
    0%, 100% { transform: skew(-5deg) rotate(1deg) translateY(0); }
    50% { transform: skew(-5deg) rotate(1deg) translateY(-10px); }
}

h1 {
    font-size: 3rem;
    text-shadow: 3px 3px 0 #ff00ff, 6px 6px 0 #00ffff;
    letter-spacing: 2px;
    transform: rotate(-3deg);
    display: inline-block;
    animation: bounce 2s infinite;
    position: relative;
    z-index: 10;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-10px) rotate(-3deg); }
}

/* Chaotic navigation */
nav {
    background: #000;
    border: 3px solid #00ffff;
    border-radius: 0;
    padding: 10px;
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 15px #00ffff;
    animation: navShake 4s infinite;
    transform: rotate(2deg);
}

@keyframes navShake {
    0%, 100% { transform: rotate(2deg) translateX(0); }
    25% { transform: rotate(2deg) translateX(-5px); }
    75% { transform: rotate(2deg) translateX(5px); }
}

nav a {
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    color: #000;
    padding: 8px 15px;
    margin: 5px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 3px 3px 0 #000;
    animation: float 3s ease-in-out infinite;
    transform: rotate(2deg);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

nav a:hover {
    background: linear-gradient(45deg, #00ffff, #ff00ff);
    transform: rotate(-2deg) scale(1.1);
    box-shadow: 0 0 15px #ff00ff;
    text-shadow: 1px 1px 0 #000;
}

/* Chaotic main content */
main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px;
    position: relative;
}

/* Chaotic service grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
    animation: pageShake 5s infinite;
    position: relative;
    z-index: 1;
    min-height: 700px; /* Ensure enough space for service tiles */
}

@keyframes pageShake {
    0%, 100% { transform: translateX(0) translateY(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) translateY(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(10px) translateY(5px); }
}

.service-tile {
    background: #000;
    border: 4px solid #ffff00;
    border-radius: 0;
    padding: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: tileFloat 4s ease-in-out infinite;
    transform: rotate(1deg) skew(2deg);
    box-shadow: 0 0 15px #ffff00;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin: 10px;
    animation-delay: calc(var(--delay) * 0.1s);
    z-index: 3;
    width: calc(100% - 20px);
    max-width: 250px;
    /* Randomized positioning */
    position: absolute;
    top: calc(20% + var(--top-offset, 0px));
    left: calc(15% + var(--left-offset, 0px));
    transform: rotate(1deg) skew(2deg) scale(1);
    /* Prevent overlapping by adding spacing constraints */
    min-height: 220px;
    min-width: 200px;
}

.service-tile:hover {
    transform: rotate(-2deg) scale(1.05);
    box-shadow: 0 0 25px #ff00ff;
    animation: tilePulse 1s infinite;
}

.service-tile:nth-child(2n) {
    transform: rotate(-1deg) skew(-2deg);
}

.service-tile:nth-child(3n) {
    transform: rotate(2deg) skew(3deg);
}

.service-tile:nth-child(4n) {
    transform: rotate(-2deg) skew(1deg);
}

@keyframes tileFloat {
    0%, 100% { transform: translateY(0) rotate(1deg) skew(2deg); }
    50% { transform: translateY(-15px) rotate(1deg) skew(2deg); }
}

@keyframes tilePulse {
    0%, 100% { box-shadow: 0 0 15px #ffff00; }
    50% { box-shadow: 0 0 30px #ff00ff; }
}

.service-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    filter: drop-shadow(2px 2px 0 #000);
    animation: iconSpin 8s infinite linear;
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.service-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 1px 1px 0 #ff00ff;
    animation: textGlow 2s infinite alternate;
}

@keyframes textGlow {
    0% { text-shadow: 1px 1px 0 #ff00ff; }
    100% { text-shadow: 1px 1px 3px #00ffff, 0 0 10px #00ffff; }
}

.service-description {
    font-size: 0.9rem;
    line-height: 1.3;
    color: #0ff;
    animation: descPulse 3s infinite;
}

@keyframes descPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Chaotic footer */
footer {
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
    padding: 15px;
    text-align: center;
    border: 5px solid #00ffff;
    border-radius: 0;
    margin-top: 50px;
    box-shadow: 0 0 20px #ff00ff, inset 0 0 10px #00ffff;
    transform: skew(5deg) rotate(-1deg);
    margin-left: 10px;
    margin-right: 10px;
    animation: footerFloat 7s ease-in-out infinite;
    margin-bottom: 50px;
    position: relative;
    z-index: 5;
}

@keyframes footerFloat {
    0%, 100% { transform: skew(5deg) rotate(-1deg) translateY(0); }
    50% { transform: skew(5deg) rotate(-1deg) translateY(-10px); }
}

footer p {
    font-size: 1.1rem;
    margin: 5px 0;
    animation: footerBlink 1s infinite;
    position: relative;
    z-index: 10;
}

@keyframes footerBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Chaotic about page elements */
.about-content {
    background: #000;
    border: 5px solid #ff00ff;
    border-radius: 0;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 0 20px #00ffff;
    position: relative;
    animation: aboutShake 3s infinite;
    transform: rotate(2deg);
    animation-delay: 1s;
}

@keyframes aboutShake {
    0%, 100% { transform: rotate(2deg) translateX(0); }
    25% { transform: rotate(2deg) translateX(-5px); }
    75% { transform: rotate(2deg) translateX(5px); }
}

.about-content h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ff00ff;
    text-shadow: 2px 2px 0 #000;
    animation: aboutTitleGlow 2s infinite alternate;
    position: relative;
    z-index: 5;
}

@keyframes aboutTitleGlow {
    0% { text-shadow: 2px 2px 0 #000; }
    100% { text-shadow: 2px 2px 3px #ff00ff, 0 0 10px #ff00ff; }
}

.service-tile:nth-child(1) { top: 15%; left: 10%; }
.service-tile:nth-child(2) { top: 15%; left: 40%; }
.service-tile:nth-child(3) { top: 15%; left: 70%; }
.service-tile:nth-child(4) { top: 45%; left: 10%; }
.service-tile:nth-child(5) { top: 45%; left: 40%; }
.service-tile:nth-child(6) { top: 45%; left: 70%; }
.service-tile:nth-child(7) { top: 75%; left: 20%; }
.service-tile:nth-child(8) { top: 75%; left: 50%; }
.service-tile:nth-child(9) { top: 75%; left: 80%; }

/* Chaotic text elements */
.chaos-text {
    animation: textShake 1s infinite;
    display: inline-block;
    position: relative;
    z-index: 2;
}

@keyframes textShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translateX(2px) rotate(1deg); }
}

/* Chaotic links */
a {
    color: #0ff;
    text-decoration: underline;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

a:hover {
    color: #ff0;
    text-shadow: 0 0 10px #ff0;
    transform: scale(1.1);
    animation: linkGlow 0.5s infinite;
}

@keyframes linkGlow {
    0%, 100% { text-shadow: 0 0 10px #ff0; }
    50% { text-shadow: 0 0 20px #ff0, 0 0 30px #ff0; }
}

/* Chaotic responsive adjustments */
@media (max-width: 768px) {
    header {
        padding: 10px;
        margin: 10px 0;
        transform: skew(0deg) rotate(0deg);
    }
    
    h1 {
        font-size: 2rem;
        transform: rotate(0deg);
    }
    
    nav {
        flex-direction: column;
        align-items: center;
        transform: skew(0deg) rotate(0deg);
    }
    
    nav a {
        margin: 3px;
        transform: rotate(0deg);
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .service-tile {
        height: auto;
        margin: 5px;
        position: relative;
        top: auto;
        left: auto;
        transform: rotate(0deg) skew(0deg);
    }
    
    footer {
        transform: skew(0deg) rotate(0deg);
        margin: 10px 0;
    }
}

/* Chaotic loading effect */
.loading {
    animation: loadingPulse 1.5s infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Chaotic glitch effects */
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.glitch {
    animation: glitch 0.3s infinite;
}

/* Chaotic random positioning */
.random-position {
    position: absolute;
    animation: randomFloat 10s ease-in-out infinite;
}

@keyframes randomFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(-2deg); }
    50% { transform: translateY(0) rotate(2deg); }
    75% { transform: translateY(20px) rotate(-1deg); }
}

/* Chaotic background elements */
.background-element {
    position: absolute;
    z-index: 0;
    animation: floatElement 20s ease-in-out infinite;
}

@keyframes floatElement {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(10px, 10px); }
    50% { transform: translate(0, 20px); }
    75% { transform: translate(-10px, 10px); }
}

/* Randomized element sizes */
.random-size {
    width: calc(100% + var(--size-offset, 0px));
    height: calc(100% + var(--size-offset, 0px));
}

/* Chaotic positioning for service tiles */
.service-tile:nth-child(1) { top: 20%; left: 15%; }
.service-tile:nth-child(2) { top: 40%; left: 70%; }
.service-tile:nth-child(3) { top: 60%; left: 25%; }
.service-tile:nth-child(4) { top: 30%; left: 85%; }
.service-tile:nth-child(5) { top: 70%; left: 10%; }
.service-tile:nth-child(6) { top: 50%; left: 50%; }
.service-tile:nth-child(7) { top: 80%; left: 60%; }
.service-tile:nth-child(8) { top: 10%; left: 40%; }
.service-tile:nth-child(9) { top: 65%; left: 80%; }

/* Additional chaotic animations */
@keyframes chaoticPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    25% { opacity: 0.8; transform: scale(1.05); }
    50% { opacity: 0.6; transform: scale(0.95); }
    75% { opacity: 0.9; transform: scale(1.02); }
}

/* Chaotic element overlay */
.overlay-element {
    position: absolute;
    background: rgba(255, 0, 255, 0.1);
    border: 1px dashed #ff00ff;
    z-index: 0;
    animation: overlayShift 15s ease-in-out infinite;
}

@keyframes overlayShift {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(5px, 5px); }
    50% { transform: translate(0, 10px); }
    75% { transform: translate(-5px, 5px); }
}