@import url("https://fonts.googleapis.com/css?family=Lato|Poppins|Kaushan+Script");

/*
  IMPORTANT: For the Ken Burns effect to work, the .hero element itself should NOT
  have a background image or fixed attachment. These are now handled by its
  ::before pseudo-element.
*/
.hero {
  position: relative; /* Essential for positioning pseudo-elements */
  overflow: hidden; /* Essential to contain the scaled ::before pseudo-element */
  /* Remove any direct background-image, background-attachment:fixed, background-size,
     background-position, background-repeat from this .hero rule.
     Bulma's default .hero styling is usually fine as a base. */
}

/* ::before: Holds the actual background image and is animated */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2; /* Behind the ::after overlay and content */

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* Ensures the image covers the ::before element */

  /* The Ken Burns animation */
  animation: kenburns 25s ease-in-out infinite alternate;
  /* You can adjust the duration (30s) and timing function (ease-in-out) */
}

/* ::after: Holds the semi-transparent black overlay */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  z-index: -1; /* Above the ::before image, but below the content */
}

/* Apply the specific background images to the ::before pseudo-element of each hero section */
#hero1::before {
  background-image: url("/images/001.webp");
}
#hero2::before {
  background-image: url("/images/002.webp");
}
#hero3::before {
  background-image: url("/images/003.webp");
}
#hero4::before {
  background-image: url("/images/004.webp");
}
#hero5::before {
  background-image: url("/images/005.webp");
}
#hero6::before {
  background-image: url("/images/006.webp");
}

/* Keyframes for the Ken Burns animation */
@keyframes kenburns {
  0% {
    transform: scale(1.05) translate(1%, 1%); /* Start slightly zoomed & panned */
    /* You can experiment with different start/end scale and translate values */
  }
  100% {
    transform: scale(1.2) translate(-1%, -1%); /* End more zoomed & panned other way */
  }
}

/* Ensure the actual content (.hero-body) is visible above the pseudo-elements */
.hero .hero-body {
  position: relative; /* Establishes a stacking context or ensures it's not static */
  z-index: 1; /* Places it above ::before (z-index: -2) and ::after (z-index: -1) */
}

/* Text styles for the titles */
.hero .title {
  font-family: "Poppins", Lato, Tahoma, sans-serif;
  color: whitesmoke;

  /* Styles for the fade-in/slide-up animation (from previous improvement) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: 0.2s;
}

.hero .title.is-visible {
  /* Class added by JavaScript when element is in view */
  opacity: 1;
  transform: translateY(0);
}

/* ---- SIDE NAVIGATION STYLES ---- */
html {
  scroll-behavior: smooth; /* Essential for smooth scrolling when clicking nav links */
}

.side-nav {
  position: fixed;
  right: 20px; /* Or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000; /* Ensure it's above other content */
}

.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav li {
  margin: 15px 0; /* Spacing between dots */
}

.nav-dot {
  display: block;
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
  position: relative; /* For tooltip positioning */
}

.nav-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.nav-dot.active {
  background-color: whitesmoke; /* Solid white for active section */
  transform: scale(1.3);
}

/* Simple Tooltip for dots (optional but good UX) */
.nav-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 100%; /* Position to the left of the dot */
  top: 50%;
  transform: translateY(-50%) translateX(-10px); /* Adjust spacing */
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* So tooltip doesn't interfere with clicks */
}

.nav-dot:hover::after {
  opacity: 1;
  visibility: visible;
}