@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Inter:wght@400;500;700&display=swap');

:root {
    /* Background and neutrals */
    --bg-main: #050509;
    --bg-section-dark: #080c14;
    --bg-card: #0e141f;
    --border-subtle: #171c26;
    --text-main: #f5f7ff;
    --text-muted: #9aa3b8;

    /* Brand / accents */
    --accent-blue: #2563ff;
    --accent-green: #37ff63;
    --accent-yellow: #ffe74d;
    --accent-pink: #ff7bd8;
    --accent-purple: #b46bff;
    --accent-red: #ff4b4b;

    /* Section gradients */
    --grad-brown: linear-gradient(to bottom, #2f1a00, #050509);
    --grad-purple: linear-gradient(to bottom, #2e003e, #050509);
    --grad-green: linear-gradient(to bottom, #002f11, #050509);
    --grad-blue: linear-gradient(to bottom, #001b40, #050509);
}

/* Base styles */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Press Start 2P', cursive;
    letter-spacing: 2px;
    line-height: 1.3;
}

.pixel-font {
    font-family: 'VT323', monospace;
}

/* Container */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* Section spacing */
section {
    padding: 6rem 0;
    scroll-margin-top: 80px;
}
/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse-animation {
    animation: pulse 2s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-section-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a71ff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    section {
        padding: 3rem 0;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
}


body {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24'><path fill='%23FFF' stroke='%236C3786' stroke-width='2' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'></path></svg>")
           0 0,
           auto;
}

/* ======= LOADER OVERLAY ======= */
#loader {
  position: fixed;
  inset: 0;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.loader--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  position: relative;
  width: 160px;
  height: 160px;
}

/* ======= DIRT BLOCK ======= */
.block {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  animation: block-hit 0.7s infinite;
}

.block img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated; /* hezky kostičkované */
}

/* malý „poskok“ bloku při úderu */
@keyframes block-hit {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(4px);
  }
}

/* ======= PICKAXE ======= */
.pickaxe {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 50%;
  bottom: 90px;
  transform-origin: bottom left; /* pivot u rukojeti – můžeš doladit */
  animation: swing 0.7s infinite;
}

.pickaxe img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* máchání krumpáčem */
@keyframes swing {
  0% {
    transform: translateX(-25px) rotate(-50deg);
  }
  50% {
    transform: translateX(10px) rotate(5deg);
  }
  100% {
    transform: translateX(-25px) rotate(-50deg);
  }
}

