/* Sci-fi themed styles for Asteroid Requiem */

/* Custom Font */
@font-face {
  font-family: 'Azonix';
  src: url('Azonix-1VB0.otf') format('opentype');
}

/* Typography */
.uk-heading-medium,
.uk-card-title {
  font-family: 'Azonix', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Paragraph styling */
.uk-text-lead {
  font-family: 'Crimson Text', serif;
  font-size: 1.3rem;
  line-height: 1.7;
}

/* Adjust letter spacing for better readability */
.uk-card-title {
  letter-spacing: 0.05em;
  font-size: 1.4rem;
}

/* Starry background effect with parallax */
.uk-section-secondary {
  background: linear-gradient(to bottom, #000000, #111111);
  position: relative;
  overflow: hidden;
}

/* Stars container */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

/* First star layer - distant stars (slow moving) */
.stars-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 50px 100px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 150px 50px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 250px 250px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 350px 150px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 450px 350px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 550px 50px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 650px 250px, white, rgba(0,0,0,0));
  background-size: 700px 400px;
  background-repeat: repeat;
  opacity: 0.5;
  z-index: 1;
}

/* Second star layer - mid-distance stars */
.stars-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 25px 75px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 100px 25px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 175px 175px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 250px 75px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 325px 275px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 400px 25px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 475px 175px, white, rgba(0,0,0,0));
  background-size: 500px 300px;
  background-repeat: repeat;
  opacity: 0.4;
  z-index: 2;
}

/* Third star layer - close stars */
.star-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 10px 50px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 75px 15px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 125px 125px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 175px 50px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 225px 175px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 275px 15px, white, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 325px 125px, white, rgba(0,0,0,0));
  background-size: 400px 200px;
  background-repeat: repeat;
  opacity: 0.3;
  z-index: 3;
}

/* Parallax scrolling effect */
@media (min-width: 640px) {
  .stars-container::before {
    animation: parallax-back 60s linear infinite;
  }
  
  .stars-container::after {
    animation: parallax-mid 40s linear infinite;
  }
  
  .star-layer {
    animation: parallax-front 20s linear infinite;
  }
}

@keyframes parallax-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 700px 400px;
  }
}

@keyframes parallax-mid {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 500px 300px;
  }
}

@keyframes parallax-front {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 200px;
  }
}

/* Content container */
.uk-container {
  position: relative;
  z-index: 5;
}

/* Glowing title effect */
.uk-heading-medium {
  text-shadow: 0 0 10px rgba(255,255,255,0.5),
               0 0 20px rgba(255,255,255,0.3),
               0 0 30px rgba(255,255,255,0.2);
  position: relative;
  z-index: 5;
}

/* Card hover effects */
.uk-card-secondary {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(145deg, rgba(0,0,0,0.95), rgba(17,17,17,0.95));
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 5;
}

.uk-card-secondary:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5),
              0 0 15px rgba(255,255,255,0.1);
}

/* Light card styles */
.uk-card-default {
  position: relative;
  z-index: 5;
}

/* Download button hover effect */
.uk-button-secondary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Azonix', sans-serif;
  font-size: 0.9rem;
  z-index: 5;
}

.uk-button-secondary:hover {
  background: #000;
  box-shadow: 0 0 15px rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
}

/* Asteroid trail effect */
.asteroid-particle {
  position: fixed;
  pointer-events: none;
  width: 12px;
  height: 12px;
  background: rgba(255, 147, 41, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  box-shadow: 
    0 0 4px rgba(255, 147, 41, 0.3),
    0 0 8px rgba(255, 147, 41, 0.2),
    0 0 12px rgba(255, 147, 41, 0.1);
  mix-blend-mode: screen;
}

.asteroid-particle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  filter: blur(2px);
  animation: pulse 1.5s ease-out infinite;
}

.asteroid-particle.fade-out {
  animation: fadeOut 1.5s forwards;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 0.15;
    transform: scale(1) translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: scale(0) translate(-50%, -50%);
  }
}