/* ABOUTME: Main stylesheet for pixel chaos bio page */
/* ABOUTME: Handles platforms, cats, responsive layout, and chaos aesthetics */

/* Custom cursors */
* {
    cursor: url("/cursors/pointer.png"), auto;
}

a,
button,
.platform-link,
[role="button"] {
    cursor: url("/cursors/hand.png"), pointer;
}

/* Full viewport setup */
html,
body {
    height: 100%;
    overflow: hidden;
    font-family: "MedievalSharp", cursive;
}

body {
    background-image: url("/backgrounds/3.webp");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    image-rendering: pixelated;
}

body.night {
    background-image: url("/backgrounds/3_night.webp");
}

/* Chaos canvas - fullscreen behind content */
#chaos-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Main container */
.bio-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

/* Avatar section */
.avatar-section {
    text-align: center;
    margin-bottom: 40px;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #5c3d1e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.name {
    font-size: 2.5rem;
    color: #f5e6d3;
    text-shadow:
        3px 3px 0 #2a1a08,
        -1px -1px 0 #5c3d1e;
    margin-top: 20px;
}

.headline {
    font-size: 1.1rem;
    color: #e8d5b0;
    text-shadow: 2px 2px 0 #2a1a08;
    margin-top: 10px;
    max-width: 400px;
}

/* Night mode text adjustments */
body.night .name {
    color: #d0d8e0;
    text-shadow:
        3px 3px 0 #0a1020,
        0 0 20px rgba(100, 150, 200, 0.3);
}

body.night .headline {
    color: #a0b0c0;
}

/* Platforms container - scattered layout on desktop */
.platforms-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 600px;
    margin-top: 20px;
}

/* Individual platform */
.platform {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Scattered positions for 7 platforms - feels organic */
.platform[data-index="0"] {
    left: 5%;
    top: 0;
}
.platform[data-index="1"] {
    left: 55%;
    top: 5%;
}
.platform[data-index="2"] {
    left: 20%;
    top: 20%;
}
.platform[data-index="3"] {
    left: 65%;
    top: 25%;
}
.platform[data-index="4"] {
    left: 10%;
    top: 45%;
}
.platform[data-index="5"] {
    left: 50%;
    top: 50%;
}
.platform[data-index="6"] {
    left: 30%;
    top: 70%;
}

/* Platform ground tile - hidden, cats walk on buttons now */
.platform-ground {
    display: none;
}

/* Platform link button */
.platform-link {
    position: relative;
    z-index: 2;
    padding: 10px 24px;
    background: linear-gradient(180deg, #c4a060 0%, #9a7a40 100%);
    border: 1px solid #5c3d1e;
    border-radius: 4px;
    font-size: 1.3rem;
    color: #2a1a08;
    text-decoration: none;
    font-weight: bold;
    box-shadow:
        inset 1px 1px 0 #e8d5b0,
        inset -1px -1px 0 #7a5a30,
        3px 3px 0 rgba(0, 0, 0, 0.3);
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
    margin-bottom: 8px;
}

.platform-link:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 1px 1px 0 #f0e0c0,
        inset -1px -1px 0 #8a6a40,
        5px 5px 0 rgba(0, 0, 0, 0.25);
    background: linear-gradient(180deg, #d4b070 0%, #aa8a50 100%);
}

.platform-link:active {
    transform: translateY(1px);
    box-shadow:
        inset -1px -1px 0 #e8d5b0,
        inset 1px 1px 0 #7a5a30,
        1px 1px 0 rgba(0, 0, 0, 0.3);
}

/* Cat sprite container - walks on top of the button */
.cat {
    position: absolute;
    top: -65px;
    left: -20px;
    width: 96px;
    height: 96px;
    z-index: 3;
    pointer-events: none;
}

.cat img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* Theme: Cabin (default - warm wood tones) */
.platform.theme-cabin .platform-link {
    background: linear-gradient(180deg, #c4a060 0%, #9a7a40 100%);
    border-color: #5c3d1e;
    color: #2a1a08;
    box-shadow:
        inset 1px 1px 0 #e8d5b0,
        inset -1px -1px 0 #7a5a30,
        3px 3px 0 rgba(0, 0, 0, 0.3);
}

.platform.theme-cabin .platform-link:hover {
    background: linear-gradient(180deg, #d4b070 0%, #aa8a50 100%);
    box-shadow:
        inset 1px 1px 0 #f0e0c0,
        inset -1px -1px 0 #8a6a40,
        5px 5px 0 rgba(0, 0, 0, 0.25),
        0 0 15px rgba(196, 160, 96, 0.5);
}

/* Theme: Cyberpunk (neon pink/cyan) */
.platform.theme-cyberpunk .platform-link {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #ff2a6d;
    color: #00fff5;
    text-shadow: 0 0 10px #00fff5;
    box-shadow:
        inset 1px 1px 0 #2a2a4e,
        inset -1px -1px 0 #0a0a1e,
        3px 3px 0 rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 42, 109, 0.3);
}

.platform.theme-cyberpunk .platform-link:hover {
    background: linear-gradient(180deg, #2a2a4e 0%, #1a1a3e 100%);
    box-shadow:
        inset 1px 1px 0 #3a3a5e,
        inset -1px -1px 0 #1a1a2e,
        5px 5px 0 rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 42, 109, 0.5),
        0 0 30px rgba(0, 255, 245, 0.3);
}

/* Theme: Fantasy (purple/gold magical) */
.platform.theme-fantasy .platform-link {
    background: linear-gradient(180deg, #4a3a6a 0%, #2a1a4a 100%);
    border: 1px solid #ffd700;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    box-shadow:
        inset 1px 1px 0 #6a5a8a,
        inset -1px -1px 0 #1a0a3a,
        3px 3px 0 rgba(0, 0, 0, 0.4),
        0 0 10px rgba(138, 43, 226, 0.3);
}

.platform.theme-fantasy .platform-link:hover {
    background: linear-gradient(180deg, #5a4a7a 0%, #3a2a5a 100%);
    box-shadow:
        inset 1px 1px 0 #7a6a9a,
        inset -1px -1px 0 #2a1a4a,
        5px 5px 0 rgba(0, 0, 0, 0.35),
        0 0 20px rgba(138, 43, 226, 0.5),
        0 0 15px rgba(255, 215, 0, 0.4);
}

/* Theme: Sci-Fi (blue/silver metallic) */
.platform.theme-sci-fi .platform-link {
    background: linear-gradient(180deg, #4a6a8a 0%, #2a4a6a 100%);
    border: 1px solid #00b4d8;
    color: #caf0f8;
    text-shadow: 0 0 6px rgba(0, 180, 216, 0.5);
    box-shadow:
        inset 1px 1px 0 #6a8aaa,
        inset -1px -1px 0 #1a3a5a,
        3px 3px 0 rgba(0, 0, 0, 0.4),
        0 0 8px rgba(0, 180, 216, 0.3);
}

.platform.theme-sci-fi .platform-link:hover {
    background: linear-gradient(180deg, #5a7a9a 0%, #3a5a7a 100%);
    box-shadow:
        inset 1px 1px 0 #7a9aba,
        inset -1px -1px 0 #2a4a6a,
        5px 5px 0 rgba(0, 0, 0, 0.35),
        0 0 20px rgba(0, 180, 216, 0.5);
}

/* Theme: Underwater (teal/aqua) */
.platform.theme-underwater .platform-link {
    background: linear-gradient(180deg, #0a6a6a 0%, #084a4a 100%);
    border: 1px solid #20b2aa;
    color: #7fffd4;
    text-shadow: 0 0 6px rgba(127, 255, 212, 0.4);
    box-shadow:
        inset 1px 1px 0 #2a8a8a,
        inset -1px -1px 0 #043a3a,
        3px 3px 0 rgba(0, 0, 0, 0.4),
        0 0 10px rgba(32, 178, 170, 0.3);
}

.platform.theme-underwater .platform-link:hover {
    background: linear-gradient(180deg, #1a7a7a 0%, #0a5a5a 100%);
    box-shadow:
        inset 1px 1px 0 #3a9a9a,
        inset -1px -1px 0 #084a4a,
        5px 5px 0 rgba(0, 0, 0, 0.35),
        0 0 20px rgba(32, 178, 170, 0.5),
        0 0 15px rgba(127, 255, 212, 0.3);
}

/* Night mode platform adjustments */

body.night .platform-link {
    background: linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
    border-color: #1a2a3a;
    color: #d0d8e0;
    box-shadow:
        inset 1px 1px 0 #5a6a7a,
        inset -1px -1px 0 #2a3a4a,
        3px 3px 0 rgba(0, 0, 0, 0.4),
        0 0 15px rgba(100, 150, 200, 0.2);
}

body.night .platform-link:hover {
    background: linear-gradient(180deg, #5a6a7a 0%, #4a5a6a 100%);
    box-shadow:
        inset 1px 1px 0 #6a7a8a,
        inset -1px -1px 0 #3a4a5a,
        5px 5px 0 rgba(0, 0, 0, 0.35),
        0 0 20px rgba(100, 150, 200, 0.3);
}

/* Mobile: Stack platforms vertically */
@media (max-width: 768px) {
    .bio-container {
        padding: 20px 15px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .avatar {
        width: 120px;
        height: 120px;
    }

    .name {
        font-size: 1.8rem;
    }

    .headline {
        font-size: 1rem;
    }

    .platforms-container {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Reset absolute positioning for mobile */
    .platform {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 90%;
        max-width: 300px;
    }

    .platform-link {
        width: 100%;
        text-align: center;
    }

    .cat {
        top: -28px;
        left: -15px;
        width: 42px;
        height: 42px;
    }
}

/* Very small phones */
@media (max-width: 400px) {
    .avatar {
        width: 100px;
        height: 100px;
    }

    .name {
        font-size: 1.5rem;
    }

    .headline {
        font-size: 0.9rem;
    }

    .platform {
        width: 95%;
    }

    .platform-link {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* Page load fade-in */
.bio-container {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Platform hover glow on button */
.platform:hover .platform-link {
    box-shadow:
        inset 1px 1px 0 #f0e0c0,
        inset -1px -1px 0 #8a6a40,
        5px 5px 0 rgba(0, 0, 0, 0.25),
        0 0 15px rgba(196, 160, 96, 0.4);
}

body.night .platform:hover .platform-link {
    box-shadow:
        inset 1px 1px 0 #6a7a8a,
        inset -1px -1px 0 #3a4a5a,
        5px 5px 0 rgba(0, 0, 0, 0.35),
        0 0 20px rgba(100, 150, 200, 0.4);
}