/*
 * Global styles for Overbrink website
 *
 * This stylesheet defines the dark‑themed aesthetic, responsive layout
 * and gentle animations used throughout the site. Each section
 * references a unique background image set in CSS for better
 * performance and caching.
 */

/* Reset and basic styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Enable smooth scrolling for anchor links */
  scroll-behavior: smooth;
  /* Use scroll snapping so that each full‑height section aligns
     cleanly at the top of the viewport after a scroll gesture. This
     produces the "click into page" effect requested by the user.
     The mandatory value ensures that the browser snaps even when the
     user drags the scrollbar. */
  scroll-snap-type: y mandatory;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #0c0c0c;
  color: #eeeeee;
  line-height: 1.6;
}

/* Ensure each full‑height section snaps to the viewport when scrolling.
 * We apply the same alignment to the hero header for consistency. The
 * scroll-snap-stop property prevents the browser from skipping over
 * intermediate sections when scrolling quickly. */
#hero,
.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  z-index: 100;
  /* Keep the navigation bar completely transparent at all times.  We
     remove the dark background so photos fill the full viewport. */
  background: none;
  box-shadow: none;
  transition: color 0.3s ease;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.navbar a {
  color: #eeeeee;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  transition: color 0.3s ease;
}

.navbar a:hover {
  /* Green accent for nav hover */
  color: #6ae138;
}

.navbar .logo {
  width: 60px;
  height: auto;
}

/* Nav background when scrolled */
.navbar.scrolled {
  /* Remove the dark background and shadow when the navbar is scrolled. */
  background: none;
  box-shadow: none;
}

/* Hero section */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  /* Remove the explicit hero background to avoid duplicating the hero
     image. The hero background is now provided solely by the fixed
     .bg-hero layer and will fade seamlessly into the next section. */
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
}


.hero-content {
  position: relative;
  z-index: 2;
}

.hero-logo {
  width: 150px;
  height: auto;
  margin: 0 auto 1rem;
}


/* Hero headings */
.hero .brand {
  font-size: 3rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.hero .tagline {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  /* Use the green from the logo for the tagline instead of yellow */
  color: #6ae138;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.scroll-down {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  /* Use the dark blue from the logo for the button on the hero page */
  border: 2px solid #144f76;
  color: #144f76;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.scroll-down:hover {
  /* On hover, flip to the green accent colour with dark text */
  background: #6ae138;
  color: #0c0c0c;
  border-color: #6ae138;
}

/* Section common styles */
.section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.section.dark {
  color: #eeeeee;
}

.section .content {
  max-width: 800px;
  padding: 3rem;
  /* Use a lighter backdrop for readability while preserving the dark theme */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Default colour for headings; specific sections override below */
  color: #3b8a51;
}

/* Specific heading colours matching their backgrounds */
#about .content h2 {
  /* Mission section stays green */
  color: #3b8a51;
}
#global .content h2 {
  /* Bright yellow to match the glowing cities */
  color: #ffce3e;
}
#partners .content h2 {
  /* Warm orange/gold to match the sunrise */
  color: #f5a623;
}
#contact .content h2 {
  /* Purple/pink tone to match the sunset sky */
  color: #c26ba0;
}

.section p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Background images for each section */
/*
 * Section backgrounds are now handled via fixed background layers
 * defined in .bg classes. We leave these definitions empty to
 * override previous settings and ensure no inline backgrounds on
 * sections.
 */
#about,
#global,
#partners,
#contact {
  background: none;
}

/* Partner form styles */
.partner-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.partner-form label {
  align-self: flex-start;
  font-weight: 600;
}

.partner-form input,
.partner-form textarea {
  padding: 0.75rem 1rem;
  border-radius: 5px;
  border: none;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.partner-form input:focus,
 .partner-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #6ae138;
}

.partner-form button {
  padding: 0.75rem;
  background: #144f76;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.partner-form button:hover {
  background: #6ae138;
  color: #0c0c0c;
}

/* Footer styles */
.footer {
  padding: 2rem 1rem;
  text-align: center;
  background: #000000;
  color: #666666;
}

.footer p {
  font-size: 0.9rem;
}

/* Animation classes for fade‑in effect */
/* Generic animation state: sections start invisible. Specific transform values
 * are set via more specific classes below. */
.animate {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

/* When a section enters the viewport, it becomes fully opaque. Transforms
 * reset to their final state via more specific selectors. */
.visible {
  opacity: 1;
}

/* Custom animation classes */
/* Slide in from the left */
.slide-left.animate {
  /* Reduce horizontal offset and shorten the transition to prevent
     overshooting past the viewport on initial load. */
  transform: translateX(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-left.visible {
  transform: translateX(0);
}

/* Slide in from the right */
.slide-right.animate {
  transform: translateX(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-right.visible {
  transform: translateX(0);
}

/* Zoom in */
.zoom-in.animate {
  transform: scale(0.9);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.zoom-in.visible {
  transform: scale(1);
}

/* Fade up */
.fade-up.animate {
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .navbar ul {
    gap: 0.75rem;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .section .content {
    padding: 2rem;
  }
  .section h2 {
    font-size: 2rem;
  }
  .section p {
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------ */
/* Background layers                                                   */
/*
 * Each section in the document has a corresponding fixed-position
 * background element inserted in the HTML. These elements fill the
 * viewport, sit behind all content and fade in/out as the user
 * scrolls. We combine a dark overlay with the underlying image
 * directly in the background-image property for better contrast. The
 * opacity of each layer is toggled via JavaScript.
 */

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  opacity: 0;
  /* Slightly longer fade transition for smoother image changes. This
     value balances responsiveness and comfort for the user. */
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.bg-hero {
  /* Dark overlay + hero image */
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('images/hero.png');
}
.bg-about {
  /* Dark overlay + mission image */
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('images/mission.png');
}
.bg-global {
  /* Dark overlay + global network image */
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('images/global.png');
}
.bg-partners {
  /* Dark overlay + sunrise image */
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('images/sunrise.png');
}
.bg-contact {
  /* Dark overlay + contact image */
  background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('images/contact.png');
}

/* Active background: the section currently in view */
.bg.active {
  opacity: 1;
}

/* Slide-up animation definitions */
.slide-up.animate {
  opacity: 0;
  /* Reduce the initial offset and shorten the duration to avoid
     overshooting when the page first loads. Using ease-out
     provides a natural deceleration as the element settles into
     place. */
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}