/* ============================================
   LE CAFARD — Layout (SPA Logic)
   ============================================ */

.app-container {
  position: relative;
  width: 100vw;
  height: 100vh; /* Adjust for mobile nav bar */
  overflow: hidden; /* Hide the scrollbars of the container */
  background-color: var(--bg-primary);
}

/* 
  Views are placed absolutely.
  They take full width/height.
  We animate their transform property to slide them in/out.
*/
.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
  will-change: transform, opacity;
}

/* Scrollable container inside the view so we can scroll content */
.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  padding-bottom: 120px; /* Space for the bottom nav */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.scrollable::-webkit-scrollbar {
  display: none;
}

.view__content {
  min-height: 100%;
  padding: 0;
  margin: 0 auto;
}

/* 
   SPA TRANSLATION LOGIC
   We use CSS :has pseudo-class (modern browsers) to control sibling views 
   based on which view has the .active class.
*/

/* Default positions */
#view-boutique { transform: translate3d(-100%, 0, 0); }
#view-cafe     { transform: translate3d(0, 0, 0); }
#view-art      { transform: translate3d(100%, 0, 0); }

/* If Cafe is active */
body:has(#view-cafe.active) #view-boutique { transform: translate3d(-100%, 0, 0); opacity: 0.5; }
body:has(#view-cafe.active) #view-cafe     { transform: translate3d(0, 0, 0); opacity: 1; }
body:has(#view-cafe.active) #view-art      { transform: translate3d(100%, 0, 0); opacity: 0.5; }

/* If Boutique is active */
body:has(#view-boutique.active) #view-boutique { transform: translate3d(0, 0, 0); opacity: 1; }
body:has(#view-boutique.active) #view-cafe     { transform: translate3d(100%, 0, 0); opacity: 0.5; }
body:has(#view-boutique.active) #view-art      { transform: translate3d(200%, 0, 0); opacity: 0; }

/* If Art is active */
body:has(#view-art.active) #view-boutique { transform: translate3d(-200%, 0, 0); opacity: 0; }
body:has(#view-art.active) #view-cafe     { transform: translate3d(-100%, 0, 0); opacity: 0.5; }
body:has(#view-art.active) #view-art      { transform: translate3d(0, 0, 0); opacity: 1; }