/*
  This stylesheet defines the visual style for the landing page. The design
  draws inspiration from a modern, monochrome aesthetic similar to the
  reference image provided by the user. The page uses a full-viewport hero
  section with a grayscale image, an oversized typographic overlay, and a
  fixed navigation bar with additional tabs for About Me, Pricing and Demos.
*/

/* Reset some default margins and paddings and set a default font */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #000;
  color: #fff;
}

/* The fixed navigation bar at the top of the screen */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}

/* Branding text in the navbar */
.navbar .logo {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

/* Navigation links */
/* The top navigation bar no longer contains navigation links, so
   related styles are removed. */

/* Hero section that fills the viewport */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Placeholder image used for the background. We apply grayscale and darken
   the image with filters. You can replace `placeholder.jpg` with your own
   image file. */
.hero .background-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*
    Instead of using a photographic placeholder, use a simple dark
    gradient as the background for the hero section. This ensures
    that no extraneous text or imagery appears behind the oversized
    letters.
  */
  background-image: linear-gradient(135deg, #444 0%, #111 100%);
  background-size: cover;
  background-position: center;
  /* No additional filters are necessary for the gradient */
  filter: none;
  z-index: 0;
}

/* Overlay containing the oversized letters. Its opacity is controlled by
   JavaScript to reveal or hide the background image. */
.hero .overlay {
  position: absolute;
  /* Position the overlay slightly lower so that the large ISWM text remains
     visible even when additional content (navigation and testimonials)
     is included. */
  /* Position the overlay so that the large ISWM text remains visible
     without requiring the user to scroll. Slightly above the vertical
     center accommodates additional content below. */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  z-index: 1;
  transition: opacity 0.5s ease;
  /* Center children in a column so the nav appears beneath the text */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;

  /* Make the overlay the containing block for pseudo-elements */
  /* The overlay remains absolutely positioned for centering. The pseudo-element
     defined later will still be positioned relative to this element. */
}

/* Add a dark backdrop behind the overlay content to improve contrast on
   patterned backgrounds. The pseudo-element sits behind the text and
   navigation but above the background image. */
.hero .overlay::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  bottom: -10%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  pointer-events: none;
  border-radius: 10px;
}

/* Large text at the center of the hero section */
.hero .big-text {
  font-size: 18vw;
  /* Use a much heavier weight so the letters stand out against the busy
     background. */
  font-weight: 900;
  letter-spacing: 2vw;
  text-align: center;
  /* For better contrast on alternating dark/light stripes, fill the
     letters with a dark color and apply a thick white stroke. The drop
     shadow adds extra separation from the background. */
  /* Use white letters with a dark stroke so the text remains visible
     regardless of the background stripe color. */
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.8);

  /* Provide a semi-transparent backdrop behind the text for improved
     contrast against the busy audio wave background. Using inline-block
     ensures the background wraps just around the letters. */
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.2em 0.4em;
  border-radius: 8px;
}

/* Instruction text at the bottom of the hero section */
/* Remove the instruction text styling since the prompt has been removed */

/* Sections following the hero. They have a maximum width to improve
   readability and use padding for spacing. */
.content-section {
  padding: 80px 20px;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

.content-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.content-section p {
  font-size: 1rem;
  color: #ddd;
}

/* ------------------------------------------------------------------
   Testimonials Section

   This section appears at the bottom of the page and contains an
   auto-scrolling list of testimonials. The list is duplicated in the
   markup to create a seamless loop. The wrapper is constrained in
   height and overflow is hidden so that only a handful of items are
   visible at any time. The animation moves the list upward over time.
-------------------------------------------------------------------*/
.testimonials {
  padding: 60px 20px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.testimonials h2 {
  font-size: 1.8rem;
  margin-bottom: 30px;
}

.testimonial-wrapper {
  height: 140px;
  overflow: hidden;
  position: relative;
}

.testimonial-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  /* Animate the list upward continuously */
  animation: scrollTestimonials 25s linear infinite;
}

.testimonial-wrapper li {
  margin-bottom: 20px;
  font-size: 1rem;
  color: #ccc;
}

@keyframes scrollTestimonials {
  0% {
    transform: translateY(0);
  }
  100% {
    /* Move up by 50% of the height of the duplicated list */
    transform: translateY(-50%);
  }
}

/* ------------------------------------------------------------------
   Hero Testimonials

   These styles control the scrolling testimonials displayed within the
   hero overlay (beneath the contact link). The testimonials are
   italicized, wrapped in quotation marks via pseudo-elements, and
   scroll vertically to cycle through the messages.
-------------------------------------------------------------------*/
.hero-testimonials {
  width: 100%;
  max-width: 600px;
  color: #fff;
}

.hero-testimonials .testimonial-wrapper {
  height: 90px;
  overflow: hidden;
  position: relative;
}

.hero-testimonials .testimonial-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  animation: scrollHeroTestimonials 25s linear infinite;
}

.hero-testimonials .testimonial-wrapper li {
  margin-bottom: 15px;
  font-size: 0.95rem;
  color: #ddd;
  font-style: italic;
  position: relative;
  padding: 0 20px;
}

.hero-testimonials .testimonial-wrapper li::before {
  content: '“';
  position: absolute;
  left: 0;
  color: #888;
  font-size: 1.2rem;
}

.hero-testimonials .testimonial-wrapper li::after {
  content: '”';
  color: #888;
  margin-left: 5px;
  font-size: 1.2rem;
}

@keyframes scrollHeroTestimonials {
  0% {
    transform: translateY(0);
  }
  100% {
    /* Scroll up half of the list height to loop seamlessly */
    transform: translateY(-50%);
  }
}

/* Styles for the navigation that appears beneath the big text in the hero
   section. The primary navigation row contains the core sections and
   apparel link, while the secondary row contains the contact link. */
.hero-nav {
  /* Stack the primary and secondary nav lists vertically and center
     them within the overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-nav .primary-nav {
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.hero-nav .primary-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  transition: color 0.2s ease;
}

.hero-nav .primary-nav li a:hover {
  color: #ccc;
  text-decoration: underline;
}

/* Secondary navigation row for the contact link. Display it below the
   primary navigation with a slight margin and center the item. */
.hero-nav .secondary-nav {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
  padding: 0;
}

.hero-nav .secondary-nav li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  transition: color 0.2s ease;
}

.hero-nav .secondary-nav li a:hover {
  color: #ccc;
  text-decoration: underline;
}