/* Reset & Global Styles */
html,
body {
  position: relative;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #000;
  overflow-y: auto; /* Allow scrolling on about page */
}

/* Custom cursor styles - temporarily commented out */
/*
.cursor-arrow-left,
.cursor-arrow-right {
  position: fixed;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  transform: translate(-50%, -50%);
  filter: invert(1); 
}
*/

/*
.cursor-arrow-left img,
.cursor-arrow-right img {
  width: 100%;
  height: 100%;
  display: block;
}
*/

/*
.cursor-arrow-left img {
  transform: rotate(180deg);
}
*/

/*
.mySwiper2,
.projectSwiper {
  cursor: none;
}
*/

/* Top Container: holds Main Gallery & Project Detail */
.top-container {
  position: relative;
  height: calc(var(--vh, 1vh) * 80);
  margin-top: 50px;
  overflow: hidden; /* Prevent any overflow issues during animations */
}

/* Base Swiper Styles */
.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden; /* Ensure scaled images don't overflow */
  margin-right: 3px !important; /* Added to override existing margin */
}

/* Main Gallery (Home View) */
.mySwiper2 {
  height: 100%;
  width: 100%;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Bottom Thumbnail Gallery (Home View) */
.mySwiper {
  height: calc(var(--vh, 1vh) * 20 - 50px);
  box-sizing: border-box;
  padding: 3px 0;
}

.mySwiper .swiper-slide {
  width: auto;
  height: 100%;
  opacity: 0.4;
  cursor: pointer;
}

.mySwiper2 .swiper-slide {
  width: auto;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease; /* Base transition for image scaling */
  will-change: transform; /* Hint to the browser to optimize this element */
}

/* Different zoom stages - can be applied with JS */
.swiper-slide.zoom-stage-1 img {
  transform: scale(1.1);
}

.swiper-slide.zoom-stage-2 img {
  transform: scale(1.2);
}

.swiper-slide.zoom-stage-3 img {
  transform: scale(1.3);
}

.swiper-slide.zoom-stage-4 img {
  transform: scale(1.4);
}

/* Fade stages for surrounding items */
.swiper-slide.fade-stage-1 {
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.swiper-slide.fade-stage-2 {
  opacity: 0.5;
}

.swiper-slide.fade-stage-3 {
  opacity: 0.2;
}

.swiper-slide.fade-stage-4 {
  opacity: 0.1;
}

/* Replace the keyframe animations with smoother cubic-bezier transitions */
.swiper-slide.zooming img {
  /* Instead of animation, use a longer transition with an ease-out curve */
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(1.4);
}

.swiper-slide.surrounding {
  /* Smoother fade transition */
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 0.1;
}

/* For the reverse animation, use smooth transitions too */
.swiper-slide.zooming-out img {
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: scale(1);
}

.swiper-slide.fading-in {
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 1;
}

/* Remove redundant keyframe animations if not being used */
@keyframes zoomIn {
  0% { transform: scale(1); }
  100% { transform: scale(1.4); }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0.1; }
}

@keyframes zoomOut {
  0% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  0% { opacity: 0.1; }
  100% { opacity: 1; }
}

/* Hover Button Styles */
.hover-button {
  position: absolute;
  bottom: 5%;
  left: 5%;
  transform: scale(0.5);
  border: 1.5px solid white;
  border-radius: 40px;
  padding: 20px 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
  mix-blend-mode: exclusion;
}

/* Show the hover button on slides that are sufficiently visible (50% or more in viewport) */
.swiper-slide.sufficiently-visible .hover-button {
  opacity: 0;
  transform: scale(0.9);
}

/* Enhance visibility on hover */
.swiper-slide.sufficiently-visible:hover .hover-button {
  opacity: 1;
  transform: scale(1);
}

.hover-button:hover {
  border-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
  .hover-button {
    /* display: none; */ /* Removed */
    display: flex; /* Ensure it's displayed */
    opacity: 1; /* Always visible */
    transform: scale(1); /* Always full size */
    bottom: 20px; /* Adjust position */
    left: 20px;   /* Adjust position */
    padding: 12px 30px; /* Smaller padding */
    /* mix-blend-mode is inherited */
    transition: none; /* No transition needed */
  }

  /* Ensure hover doesn't change it */
  .swiper-slide.sufficiently-visible:hover .hover-button {
    opacity: 1;
    transform: scale(1);
  }

  /* Ensure visibility regardless of hover or 'sufficiently-visible' class */
   .swiper-slide.sufficiently-visible .hover-button {
     opacity: 1;
     transform: scale(1);
   }
}

/* Top Navigation Bar - ensure consistent height and positioning */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 20px 0 16px;
  z-index: 2100;
}

/* Reusable Grid Column Widths */
.grid-col-30 { width: 30%; }
.grid-col-55 { width: 55%; }
.grid-col-15 { width: 15%; }

.nav-left,
.nav-center,
.nav-right {
  display: flex;
  align-items: center;
}

.nav-left {
  justify-content: flex-start;
}

.nav-center {
  justify-content: flex-start;
}

.nav-right {
  justify-content: flex-end;
}

.nav-name,
.project-name,
.project-detail-title,
.nav-about {
  color: white;
  text-decoration: none;
}

.nav-name:hover,
.nav-about:hover {
  opacity: 0.8;
}

/* Highlight current page in nav */
.about-page .nav-about {
  opacity: 0.7;
}

/* Project Detail View (Expanded Project) */
.project-detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 2000;
  padding-top: 0;
}

.project-detail.active {
  opacity: 1;
  pointer-events: auto;
}

/* For the nav center content */
.home-view-content,
.detail-view-content {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Structure for the arrow and project name */
.arrow-space {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  margin-top: -1px;
}

/* Fix back arrow styling and ensure it's clickable */
.back-arrow {
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  z-index: 2150;
  cursor: pointer;
  position: static;
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-top: -2px;
}

/* Style for the back arrow SVG */
.back-arrow-svg {
  width: 24px;
  height: 24px;
  transform: rotate(180deg);
  filter: invert(1);
}

/* Project name and detail title styles */
.project-name,
.project-detail-title {
  /* Left align within its container */
}

/* Project Detail Swiper (Detail Gallery) */
.projectSwiper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.projectSwiper .swiper-slide {
  width: auto;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.projectSwiper .swiper-slide img {
  display: block;
  height: 100%;
  object-fit: cover;
}

/* Fixed Info Button Styles (in project detail view) */
.info-button {
  position: absolute;
  left: 40px;
  bottom: 40px;
  border: 1.5px solid white;
  border-radius: 40px;
  padding: 20px 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  text-decoration: none;
  color: #ffffff;
  white-space: nowrap;
  z-index: 2100;
  mix-blend-mode: exclusion;
}

.info-button:hover {
  border-color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------- */
/* 2) NEW: Sidebar for Info Content   */
/* ---------------------------------- */
.info-sidebar {
  position: fixed;
  top: 50px; /* Directly below the top bar */
  left: 0;
  width: 100%; /* Change width to 100% */
  max-width: 720px; /* Add max-width */
  height: calc(100vh - 50px);
  background-color: black; /* Solid black to match the image */
  color: #fff;
  padding: 0px 20px;
  z-index: 2200;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow-y: auto;
  /* box-shadow: 33px 4px 50px 23px rgba(0, 0, 0, 0.50); */
  box-sizing: border-box;
}

.close-info {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 20px;
  right: 25px;
  padding: 0; /* Remove padding if any */
  line-height: 0; /* Prevent extra space */
  width: 28px; /* Match SVG size */
  height: 28px; /* Match SVG size */
}

.close-info img {
  display: block; /* Ensure image takes up button space */
  width: 100%;
  height: 100%;
  filter: invert(1); /* Make SVG white */
}

.close-info:hover {
  opacity: 1;
}

.info-sidebar.open {
  transform: translateX(0%);
  box-shadow: 33px 4px 50px 23px rgba(0, 0, 0, 0.50);
}

.info-content {
  margin-top: 20px;
}

/* Title section */
.info-content h4 {
  margin-bottom: 40px;
}

/* Two column layout */
.columns-container {
  display: flex;
  gap: 40px;
}

.column {
  flex: 1;
}

.column h3 {
  margin-top: 0;
  margin-bottom: 0px;
}

.column p {
  margin-bottom: 20px;
}

/* Mobile adjustments */
@media (max-width: 784px) {
  .info-sidebar {
    width: 100%;
  }
  
  .columns-container {
    flex-direction: column;
    gap: 24px;
  }

  .column {
    width: 100%; /* Ensure columns take full width when stacked */
  }
}

/* Add a class for the first project detail slide to initially match the zoom level */
.projectSwiper .swiper-slide.initial-zoom img {
  transform: scale(1.4);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Add a class to animate it back to normal size after a delay */
.projectSwiper .swiper-slide.zoom-normalize img {
  transform: scale(1);
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Override any conflicting display styles */
.detail-view-content[style*="display: none"] {
  display: none !important;
}

.detail-view-content[style*="display: flex"] {
  display: flex !important;
}

/* Scale animation for project detail images */
.projectSwiper .swiper-slide.scale-start {
  transform: scale(0.8);
  opacity: 0.8;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.projectSwiper .swiper-slide.scale-end {
  transform: scale(1);
  opacity: 1;
}

/* Make sure initial-zoom and scale-start don't conflict */
.projectSwiper .swiper-slide.initial-zoom.scale-start img {
  /* This ensures the initial-zoom class still controls the image zoom */
  transform: scale(1.4);
}

/* Make back arrow visible in the detail view and about page */
.detail-view-content .back-arrow,
.about-page .back-arrow {
  opacity: 1;
}

/* Custom Scrollbar for Info Sidebar */
.info-sidebar {
  /* Firefox scrollbar styling */
  scrollbar-width: auto; /* Changed from thin to auto */
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent; /* thumb color track color */
}

/* Webkit scrollbar styling */
.info-sidebar::-webkit-scrollbar {
  width: 16px; /* Changed from 6px */
}

.info-sidebar::-webkit-scrollbar-track {
  background: transparent; /* Make track invisible */
}

.info-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
  border-radius: 8px; /* Changed from 3px */
  border: none; /* Ensure no border */
}

.info-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.8); /* More opaque on hover */
}

/* ------------------------------ */
/* Styles previously in about.css */
/* ------------------------------ */

/* About Page Styles */
body.about-page {
  background: #000;
  color: #fff;
  overflow-y: auto;
}

/* Page wrapper */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 50px); /* Minus top bar height */
  margin: 0; /* Ensure no default margins */
  padding: 0; /* Ensure no default padding */
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between; /* This distributes space, pushing footer down */
  height: calc(100vh - 50px); /* Add explicit height for full browser height */
}

/* ADDED: Push page-wrapper down on desktop for about page to account for fixed header */
body.about-page .page-wrapper {
  margin-top: 50px;
}

/* Content row - add flex-grow to allow it to expand */
.content-row {
  display: flex;
  align-items: flex-start; /* Align tops of columns */
  margin-top: 32px;
  margin-left: 0; /* Explicit zero margin */
  margin-right: 0; /* Explicit zero margin */
  padding: 0 20px; /* Consistent padding with top bar */
  box-sizing: border-box; /* Include padding in width */
  min-height: fit-content; /* Allow content to determine height */
  height: 100%; /* Take full height of parent */
  flex-grow: 1; /* Allow content to grow and push footer down */
}

/* Ensure the image column respects the image height */
.content-row .grid-col-30 {
  height: auto; /* Allow image to determine height */
  display: flex;
  align-items: flex-start;
}

/* Profile image styling */
.profile-img {
  width: 75%; /* Make image take up 15% of page width as requested */
  display: block;
  height: auto; /* Let image maintain its aspect ratio */
  object-fit: contain; /* Ensure the entire image is visible */
}

.width-420 {max-width: 460px;}

/* OLD Rules to REMOVE or comment out */
/* 
.about-container {
  display: flex;
  flex-direction: row;
  margin-top: 60px; 
  max-width: 1200px; 
  gap: 40px; 
}

.about-image {
  flex: 0 0 220px;
  margin-right: 0; 
}

.about-content {
  padding-top: 10px;
}
*/

/* Keep: Placeholder until you have the actual image */
.image-placeholder {
  width: 100%;
  height: 310px;
  background-color: #111;
}

/* Keep: Text Content Styling */
.about-intro {
  margin-top: 0; /* Ensure no top margin pushes text down */
  margin-bottom: 30px;
  margin-left: 32px;
}

.about-mission {
  /* Any specific styles for mission text */
}

/* Footer Styles */
footer {
  margin-top: auto; /* Push to bottom of flex container */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  padding: 20px 20px; /* Added horizontal padding for consistency */
  box-sizing: border-box;
  flex-shrink: 0; /* Prevent footer from shrinking */
}

/* Add a container for the footer to allow flex layout */
.footer-container {
  display: flex;
}

/* Contact Section */
.contact-section {
  /* flex: 1; */ /* Remove this to let grid classes control width */
}

.contact-section h2 {
  margin-bottom: 20px;
  margin-top: 0px;
}

/* Impressum section */
.impressum-section {
  display: flex;
  align-items: flex-end; /* Align with top of contact section */
}

.impressum-section a {
  margin-bottom: 0px;
}

/* Remove nested div for contact info since it's unnecessary */
/* Note: Specific contact-* classes were removed from HTML */
.contact-section p {
  margin: 4px 0;
}

.contact-section a,
.impressum-link {
  color: #fff;
  text-decoration: none;
}

.contact-section a:hover,
.impressum-link:hover {
  text-decoration: underline;
}

.add-padding-left {padding-left: 32px;}



/* Keep responsive adjustments */
@media (max-width: 768px) {
  .content-row {
    flex-direction: column; /* Stack columns */
    /* margin-top: 40px; */ /* Remove margin, handled by page-wrapper now */
  }

  /* Make grid columns full width on mobile */
  .content-row > div { /* Target direct children */
     width: 100% !important; /* Override grid-col-* widths */
     margin-left: 0; /* Align left */
     margin-right: 0; /* Align left */
  }

  /* Keep footer responsive styles */
  .footer-container {
    flex-direction: column;
  }
  
  .footer-container > div {
    width: 100% !important; /* Override grid column widths on mobile */
  }
  
  .impressum-section {
    margin-top: 30px;
  }

  /* Adjust top container margin to account for taller nav */
  .top-container {
    margin-top: 90px;
    /* Adjust height based on remaining space after 90px nav */
    height: calc((100vh - 90px) * 0.8);
  }
  .mySwiper {
    /* Adjust height based on remaining space after 90px nav */
    height: calc((100vh - 90px) * 0.2);
  }
  body.about-page .page-wrapper {
    margin-top: 90px; /* Add margin for the taller mobile nav */
    min-height: calc(100vh - 90px); /* Adjust min-height for taller mobile nav */
    height: calc(100vh - 90px); /* Also adjust height */
  }

  /* --- Mobile Navigation Layout for About Page --- */
  .about-page .top-bar {
    height: auto; /* Allow height to adjust */
    flex-wrap: wrap; /* Allow items to wrap */
    padding: 12px 20px; /* Consistent padding */
  }

  /* Row 1: Name */
  .about-page .nav-left {
    width: 100%; /* Full width */
    order: 1;    /* First row */
    justify-content: flex-start; /* Align name to the left */
  }

  /* Row 2: Arrow + About Title */
  .about-page .nav-center {
    width: 100%; /* Full width */
    order: 2;    /* Second row */
    justify-content: flex-start; /* Align content to the left */
  }

  /* Hide the empty right container on mobile */
  .about-page .nav-right {
    display: none;
    order: 3; /* Keep order consistent just in case */
  }

  /* Ensure the back arrow is visible */
  .about-page .back-arrow {
    opacity: 1;
  }
  
  /* Ensure arrow space is visible on About page mobile */
  .about-page .home-view-content .arrow-space {
    display: flex; /* Override the general display: none */
  }

  /* Remove arrow space margin if it causes issues */
  .about-page .home-view-content .arrow-space {
    margin-right: 8px; /* Keep consistent spacing */
  }
  
}

/* Mobile Navigation Layout */
@media (max-width: 768px) {
  .top-bar {
    height: auto;
    flex-wrap: wrap;
    padding: 12px 20px;
  }

  /* First row: Name and About */
  .nav-left {
    width: 70%;
    order: 1;
  }
  
  .nav-right {
    width: 30%;
    order: 2;
  }
  
  /* Second row: Project name/back arrow */
  .nav-center {
    width: 100%;
    order: 3;
    margin-top: 8px;
  }

  .home-view-content .arrow-space {
    display: none; /* Hide the arrow space in home view on mobile */
  }

  /* Adjust top container margin to account for taller nav */
  .top-container {
    margin-top: 90px;
  }

  .content-row {
    margin-top: 8px;
  }

  .profile-img {
    width: 100%; /* Make image take up 15% of page width as requested */
    display: block;
    height: auto; /* Let image maintain its aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible */
    margin-bottom: 24px;
  }

  .info-button {
    bottom: 20px;
    left: 20px;
    padding: 12px 30px;
    opacity: 1; /* Ensure visibility */
    transform: scale(1); /* Ensure full size */
    transition: none; /* No transition needed */
  }

  /* Make sure hover doesn't change it on mobile */
  .info-button:hover {
    border-color: white; /* Keep original border color */
  }

  /* Apply custom scrollbar to the body on mobile */
  body {
    /* Firefox scrollbar styling */
    scrollbar-width: thin; /* Use thin scrollbar */
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent; /* thumb color track color */
    scrollbar-gutter: overlay; /* Attempt overlay scrollbar */
  }

  /* Webkit scrollbar styling for body on mobile */
  body::-webkit-scrollbar {
    width: 6px; /* Make scrollbar thinner */
  }

  body::-webkit-scrollbar-track {
    background: transparent; /* Make track invisible */
  }

  body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    border-radius: 3px; /* Adjust radius for thinner bar */
    border: none; 
  }

  body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.8); /* More opaque on hover */
  }

  .width-420 {
    max-width: none; /* Remove max-width constraint on mobile */
  }

  .info-sidebar {
    position: fixed;
    top: 72px; /* Directly below the top bar */
    left: 0;
    width: 100%; /* Change width to 100% */
    height: calc(100vh - 50px);
    background-color: black; /* Solid black to match the image */
    color: #fff;
    padding: 0px 8px 0px 20px;
    z-index: 2200;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow-y: auto;
    box-sizing: border-box;
  }
}