/* css/home.css */

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: auto;
  /* Removed smooth scroll for better mobile performance */
  scroll-snap-type: none;
  /* Removed snap for mobile smoothness */
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

/* Custom Scrollbar for Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  /* Slight width */
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Ensure Main container doesn't block snap */
/* Ensure Main container doesn't block snap */
main {
  position: relative;
  z-index: 10;
  background-color: #fff;
  margin-bottom: 0;
  /* Removed extra space for mobile */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  /* Changed to auto for proper interaction */
}

/* Navigation modification for Home */
/* Navigation modification for Home */
/* Navigation modification for Home */
.home-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  /* Glass effect always visible but subtle */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px 3rem;
  transition: all 0.3s ease;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* On scroll, it becomes a solid or stronger glass bar */
.home-navbar.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 15px 3rem;
}

/* Nav Links Visibility */
.home-navbar a,
.home-navbar .brand {
  font-size: 1.1rem;
  /* Increased font size */
  font-weight: 500;
  color: #000;
  /* Ensure black text for contrast against light hero */
  /* If the hero is dark, this should be white. 
       Assuming hero images are mixed, but layout shows white header bg on scroll. 
       Let's stick to black as per original design, or use text-shadow for safety on transparent. */
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  /* Halo for readability */
}

.nav-links {
  display: flex;
  /* Ensure it's flex */
  list-style: none !important;
}

.nav-links a {
  font-size: 1.05rem;
  /* Larger links */
  font-weight: 600;
  margin-left: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s;
  display: inline-block;
  list-style: none !important;
}

/* Ensure no pseudo-elements creating dots */
.nav-links a::before,
.nav-links a::after {
  content: none !important;
}

.nav-links a:hover {
  color: #555;
  text-decoration: underline;
}

/* Global Morph Slider */
/* Global Morph Slider */
.morph-slider-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 5;
  /* Above the footer, below the text column */
  pointer-events: none;
  /* Allow scrolling */
  transform-origin: top left;
  will-change: transform;
  /* Optimize for performance */
  overflow: hidden;
  /* Ensure images don't bleed during scale */
  transform: translateZ(0);
  /* Enable hardware acceleration */
}

.morph-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  /* Reduced from 0.8s for faster transitions */
  will-change: opacity;
}

.morph-slide.active {
  opacity: 1;
}

.morph-controls {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.hero-controls-group {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 50;
}

@media (max-width: 900px) {
  .hero-controls-group {
    padding: 0 1rem;
  }
}

.hero-btn {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #000;
  padding: 12px 24px;
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 130px;
}

.hero-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.hero-btn:active {
  transform: translateY(0);
}

@media (max-width: 900px) {
  .hero-btn {
    padding: 11px 18px;
    font-size: 0.9rem;
    min-width: 100px;
  }
}

/* Main Container */
main {
  position: relative;
  z-index: 10;
  /* Content on top */
  background-color: transparent;
  /* Transparent to see slider */
  /* Reserve room for fixed reveal footer so text never sits under it */
  margin-bottom: 260px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  /* default pass-through */
}

/* SECTION 2: SPLIT CONTENT */
.content-section {
  min-height: auto;
  height: auto;
  padding: 2rem 0 3rem;
  position: relative;
  z-index: 50;
  scroll-snap-align: start;
  pointer-events: none;
  background-color: transparent;
}

@media (max-width: 900px) {
  .content-section {
    min-height: auto;
    padding: 0;
  }
}

.split-layout {
  display: flex;
  align-items: flex-start;
  /* Image and title start at the same top line */
  position: relative;
  pointer-events: auto;
  min-height: 0;
  height: auto;
}

/* Left Column */
.text-col {
  width: 40%;
  padding: 0 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: transparent;
  pointer-events: auto;
  min-height: 0;
  height: auto;
}

/* .declaration-wrapper removed (empty) */

.statement-title {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-weight: 600;
}

.statement-body {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  color: #333;
}

.view-works-link {
  display: inline-block;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
  font-weight: 500;
}

.home-contact {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.home-contact p {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
}

.home-footer {
  font-size: 0.85rem;
  color: #666;
  margin-top: 3rem;
}

/* Right Column Spacer */
.image-col {
  width: 60%;
  height: 480px;
  min-height: 480px;
  margin-top: 0;
  position: relative;
  background-color: transparent;
  /* Transparent so slider shows through */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

.content-next-btn {
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #333;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 20;
  /* Above slider */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .content-next-btn {
    right: 1.5rem;
    font-size: 1rem;
    padding: 10px 12px;
    min-width: 40px;
    min-height: 40px;
  }
}

.content-next-btn.visible {
  opacity: 1;
}

.hero-section.spacer {
  height: 100vh;
  width: 100%;
  pointer-events: none;
  scroll-snap-align: start;
}

/* Homepage reveal footer: sits in the reserved main margin-bottom area */
.reveal-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 180px;
  background-color: #fff;
  z-index: 20;
  padding: 1.25rem 3rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  pointer-events: none;
}

.reveal-footer.visible {
  transform: translateY(0);
  z-index: 20;
  pointer-events: auto;
}

/* .footer-content, .footer-brand, .footer-divider, .footer-bottom, .contact-info, .social-links moved to style.css */

/* Responsive Footer */
@media (max-width: 900px) {

  html,
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  main {
    margin-bottom: 0;
    /* No extra space on mobile */
    pointer-events: auto;
  }

  .morph-slider-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
  }

  .hero-section.spacer {
    height: 100vh;
    width: 100%;
    pointer-events: none;
  }

  .content-section {
    min-height: auto;
    padding: 0;
    position: relative;
    z-index: 50;
    pointer-events: auto;
    background-color: #fff;
  }

  .split-layout {
    display: block;
    min-height: auto;
  }

  .text-col {
    width: 100%;
    padding: 2rem 1.5rem;
    background-color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: auto;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
  }

  .image-col {
    display: none;
    /* Hide image completely on mobile */
    width: 100%;
  }

  .statement-title {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
  }

  .statement-body {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .view-works-link {
    margin-bottom: 2rem;
    font-size: 0.9rem;
  }

  .content-next-btn {
    display: none;
  }

  .reveal-footer {
    position: relative;
    height: auto;
    width: 100%;
    bottom: auto;
    left: 0;
    z-index: 10;
    padding: 2rem 1.5rem;
    background-color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-top: 2rem;
    border-top: 1px solid #eee;
    transform: none;
    transition: none;
  }

  .reveal-footer.visible {
    transform: none;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .social-links {
    align-items: flex-start;
  }

  /* Ensure text doesn't look too big on zoom */
  .contact-info p,
  .social-links a,
  .footer-brand {
    font-size: 0.9rem;
  }

  .home-navbar {
    padding: 15px 1.5rem;
  }

  .home-navbar.scrolled {
    padding: 15px 1.5rem;
  }

  .cursor-nav {
    display: none;
    /* Hide cursor nav on mobile */
  }
}