/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
    height: 100%;
    background: #e0e0e0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.centered {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 0;
}

h1 {
    font-size: clamp(3rem, 15vw, 6rem);
    font-weight: 800;
    letter-spacing: 0.25em;
    color: #2d2d2d;
    padding-right: 0.25em;
    text-rendering: geometricPrecision;
    margin-right: -0.25em;
    position: relative;
    text-shadow: 
        1px 1px 1px rgba(0,0,0,0.1),
        -1px -1px 1px rgba(255,255,255,0.5);
    margin-bottom: 2rem;
}

/* Header styles */
header {
    padding: 2rem 0;
    text-align: center;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.logo {
    width: 50px;
    height: 50px;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

/* Main content styles */
main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero {
    text-align: center;
    padding: 3rem 0;
}

/* Footer styles */
footer {
    width: 100%;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.heart {
    color: #ff5d5d;
    display: inline-block;
    animation: heartbeat 12s ease-in-out infinite;
    margin: 0 0.2em;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    
    /* Initial appearance */
    10% { transform: scale(1.1); opacity: 1; }
    20% { transform: scale(1); opacity: 0.8; }
    
    /* First merge phase */
    30% { transform: scale(1.15); opacity: 1; }
    40% { transform: scale(1); opacity: 0.8; }
    
    /* Second merge phase */
    50% { transform: scale(1.2); opacity: 1; }
    60% { transform: scale(1); opacity: 0.8; }
    
    /* Reverse sort phase */
    70% { transform: scale(1.15); opacity: 1; }
    80% { transform: scale(1); opacity: 0.8; }
    
    /* Return phase */
    90% { transform: scale(1.1); opacity: 1; }
    95% { transform: scale(1); opacity: 0.8; }
}

/* Puzzle Container */
.puzzle-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: clamp(160px, 30vw, 180px);
    height: clamp(160px, 30vw, 180px);
    transform-style: preserve-3d;
    perspective: 1000px;
    transform: rotateX(45deg) rotateZ(45deg);
    padding: 20px;
}

.puzzle-piece {
    transform-style: preserve-3d;
    transform: scale(0) translateZ(0);
    animation: 
        solvePuzzle 0.8s ease-out forwards,
        mergeSortAnimation3D 12s ease-in-out infinite;
    animation-delay: 
        calc(var(--delay) * 0.1s), 
        calc(0.8s + var(--delay) * 0.1s);
    transition: all 0.3s ease-in-out;
}

.puzzle-piece.light {
    background: #c8c8c8;
}

.puzzle-piece.dark {
    background: #404040;
}

@keyframes solvePuzzle {
    0% {
        transform: scale(0) translateZ(-50px) rotateX(180deg);
    }
    50% {
        transform: scale(1.1) translateZ(30px) rotateX(90deg);
    }
    100% {
        transform: scale(1) translateZ(0) rotateX(0deg);
    }
}

@keyframes mergeSortAnimation3D {
    /* Initial state */
    0%, 100% {
        transform: translateZ(0);
    }
    
    /* Split into pairs and sort within pairs */
    10% {
        transform: 
            translateX(calc((var(--delay) - 12) * 8px))
            translateY(calc(floor(var(--delay) / 2) * 20px))
            translateZ(20px);
    }
    
    /* Sort pairs */
    20% {
        transform: 
            translateX(calc((var(--value) - 13) * 8px))
            translateY(calc(floor(var(--delay) / 2) * 20px))
            translateZ(20px);
    }
    
    /* Merge pairs into groups of 4 */
    30% {
        transform: 
            translateX(calc((var(--value) - 13) * 8px))
            translateY(calc(floor(var(--delay) / 4) * 40px))
            translateZ(30px);
    }
    
    /* Sort groups of 4 */
    40% {
        transform: 
            translateX(calc((var(--value) - 13) * 8px))
            translateY(calc(floor(var(--delay) / 4) * 40px))
            translateZ(30px);
    }
    
    /* Final merge into single sorted array */
    50% {
        transform: 
            translateX(calc((var(--value) - 13) * 8px))
            translateY(0)
            translateZ(40px);
    }
    
    /* Hold sorted state */
    55%, 60% {
        transform: 
            translateX(calc((var(--value) - 13) * 8px))
            translateY(0)
            translateZ(40px);
    }
    
    /* Split for reverse sort */
    70% {
        transform: 
            translateX(calc((26 - var(--value) - 13) * 8px))
            translateY(calc(floor(var(--delay) / 4) * 40px))
            translateZ(30px);
    }
    
    /* Reverse merge sort in progress */
    80% {
        transform: 
            translateX(calc((26 - var(--value) - 13) * 8px))
            translateY(calc(floor(var(--delay) / 2) * 20px))
            translateZ(20px);
    }
    
    /* Return to original positions */
    90%, 95% {
        transform: translateZ(0);
    }
}

/* Media Queries */
@media (max-width: 768px) {
    h1 {
        font-size: clamp(2rem, 10vw, 4rem);
        margin-bottom: 1.5rem;
    }
    
    .puzzle-container {
        width: clamp(140px, 25vw, 160px);
        height: clamp(140px, 25vw, 160px);
    }
}

@media (max-width: 480px) {
    .puzzle-container {
        width: clamp(120px, 20vw, 140px);
        height: clamp(120px, 20vw, 140px);
    }
    
    h1 {
        margin-bottom: 1rem;
    }
}