/* 
  hero.css 
  Styles for the hero section of the PyConNG 2025 website
*/

/* Main hero section styling */
.hero {
  width: 100%;
  height: 100vh;
  min-height: 150vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../assets/hero-bg.png") no-repeat center center;
  background-size: cover;
  background-position: center center;
  margin: 0;
  padding: 0;
}

/* Background elements - using the provided background image instead */
/* The background image already contains the sky, water, mountains, and sun */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* The following elements are kept for flexibility if you want to modify them in the future */
.hero-water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: transparent; /* Using background image instead */
  z-index: 2;
}

.hero-sand {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-color: transparent; /* Using background image instead */
  z-index: 3;
}

/* Sun element - visible in the background image */
.hero-sun {
  display: none; /* Hidden as it's part of the background image */
}

/* Flying birds - these are part of the background image */
.hero-birds {
  display: none; /* Hidden as birds are in the background image */
}

/* Main hero content container */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
}

/* PYconNG 2025 image (the "logo") */
.hero-logo {
  width: 100%;
  max-width: 500px;
  margin-bottom: 30px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Floating islands */
.floating-islands {
  width: 100%;
  bottom: 25%;
  z-index: 5;
}

/* Island 1 - Bridge structure */
.island-1 {
  position: absolute;
  /* left: 15%; */
  width: 250px;
  height: auto;
  animation: float 3s infinite ease-in-out;
}

/* Island 2 - UFO/Stadium structure */
.island-2 {
  position: absolute;
  right: 20%;
  width: 250px;
  height: auto;
  animation: float 4s infinite ease-in-out;
  animation-delay: 1s;
}

/* Use the provided images instead of CSS-built structures */
.island-1 img, 
.island-2 img {
  width: 175%;
  height: auto;
  display: block;
}

.train-wrapper {
  position: absolute;
  bottom: 30px;
  width: 120%;
  left: -10%;
  z-index: 7;
  display: block;
  overflow: visible; /* Allow train to move beyond bounds */
}

/* Ensure train track spans full width and extends beyond viewport */
.train-track {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  min-width: 120vw;
}

/* Train positioning */
.train {
  position: absolute;
  bottom: 14px; /* Adjust to sit properly on the track */
  left: -200px;
  width: 50%; /* Adjust as needed */
  height: auto;
  z-index: 8;
  animation: moveTrain 15s linear infinite;
}

/* Hero Wave Bottom */
.hero-wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Animation keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes moveTrain {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 250px)); }
}

/* Animated assets below the logo */
.animated-assets {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.asset {
  width: 100px;
  height: auto;
  cursor: pointer;
}

/* Hover bounce and shadow effect */
.hover-bounce:hover {
  animation: bounce 0.6s ease;
  animation-fill-mode: forwards;
}

/* Bounce keyframes */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-20px);
  }
  70% {
    transform: translateY(-10px);
  }
  90% {
    transform: translateY(-3px);
  }
}

/* Media queries for responsiveness */
@media (max-width: 992px) {
  .hero {
    height: 70vh;
    min-height: 900px;
  }
  
  .hero-content {
    transform: translate(-50%, -60%);
  }
  
  .island-1 {
    /* left: 10%; */
    width: 130px;
  }
  
  .island-2 {
    right: 20%;
    width: 150px;
  }
  
  .train {
    width: 500px;
  }
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 90%;
  }
  
  .animated-assets {
    gap: 15px;
  }
  
  .asset {
    width: 80px;
  }
  
  .island-1 {
    width: 30%;
  }

  .train-wrapper {
    bottom: 40px;
    width: 120%;
    left: -10%;
  }
  
  .train {
    width: 200px;
    bottom: 10px;
  }
  
  .intro-section {
    margin-top: -40px;
  }
  
  .island-2 {
    width: 35%;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 60vh;
    min-height: 500px;
  }
  
  .hero-content {
    transform: translate(-50%, -55%);
  }
  
  .hero-logo {
    margin-bottom: 20px;
  }
  
  .animated-assets {
    gap: 10px;
  }

  .train-wrapper {
    bottom: 30px;
  }
  
  .train {
    width: 100px;
    bottom: 8px;
  }
  
  .intro-section {
    margin-top: -30px;
  }
  
  .asset {
    width: 60px;
  }
  
  .island-1 {
    width: 90px;
    /* left: 5%; */
  }
  
  .island-2 {
    width: 100px;
    right: 5%;
  }
  
  .train {
    width: 150px;
    animation-duration: 10s;
  }
}