/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	-webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale; /* Firefox */
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-feature-settings: "c2sc" 1;
  font-family: "Sabon GEO W01 Regular", Times, serif;
  background-color: #f4f4f4;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr{
	display: inline;
	align-content: left;
	width: 100%;
}

html {
  	scroll-behavior: smooth;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	color: #4a07e8;
}

/* GLOBAL STYLES */ 


.smcp { 
	display: inline;
  -moz-font-feature-settings: 'smcp';
  -webkit-font-feature-settings: 'smcp';
  -o-font-feature-settings: 'smcp';
  font-feature-settings: 'smcp';
}

.phoneIndicatif {
	display: inline;
	font-variant-numeric: lining-nums;
	font-variant: small-caps;;
}

.mainWrapper {
	width: 100%;
}

.social-links  {
    display: inline-flex; 
}


.social-links li {
    display: inline; /* Makes the <li> elements inline */
}


/* Default dotted grid (for non-amine pages) */
.image-placeholder {
    background: radial-gradient(circle, #000 1px, transparent 1px);
    background-size: 8px 8px; /* Fine grid effect */
    background-color: #f4f4f4; /* Light background */
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
}

/* Dotted grid for amine page */
.amine-page .image-placeholder {
    background: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 8px 8px; /* Fine grid effect */
    background-color: #000; /* Dark background for Amine page */
}

/* Ensure images inside the placeholder container fill up the area */
#images-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hide the image on load */
.lazyload {
    visibility: hidden;
    opacity: 0; /* Also make it invisible for smoother transition */
    transition: opacity 0.3s ease; /* Fade-in effect */
}

/* When the image has been loaded, make it visible */
.lazyloaded {
    visibility: visible;
    opacity: 1; /* Fully visible */
}


/*--------------------------mini query----------------------*/
@media handheld,screen and (max-width: 1100px) {


.full-height-container {
  height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); /* optional, avoid content touching nav */
  box-sizing: border-box;
}




.breaker {
	display: block;
}


.project {
	display: block;
	padding: 4vw;
}


#mainWrapper {
	width: 100%;
	overflow-y: scroll;
}

/* Make each room fill the entire viewport width */
.rooms {
    display: flex; /* Align the rooms horizontally */
    width: 100vw; /* Full viewport width */
}

/* Enable scroll snapping on the .rooms container */
.rooms {
    scroll-snap-type: x mandatory; /* Snap horizontally */
    display: flex;
    width: 100vw;
    overflow-x: scroll; /* Enable scrolling horizontally */
    scroll-behavior: smooth;
}

.room {
		margin-top: 2vw;
    flex: 0 0 100vw;
    height: var(--app-height);
    scroll-snap-align: start; /* Ensure each room aligns with the start of the scroll area */
    transition: transform 0.3s ease-in-out;
    overflow-x: hidden; /* Prevents any overflow */
    justify-content: center; /* Centers the content (images) */
    align-items: center; /* Ensures content is vertically centered */
    display: block;
    flex-shrink: 0;
}



.room img {
    width: 100%; /* Make the images fill the container width */
    height: auto; /* Maintain the aspect ratio */
    object-fit: cover; /* Ensure the image covers the area without distorting */
}

.project {
	margin-bottom: 6vw;
}

.project img {
	margin-bottom: 1.5vw;
	lazyloading: true;
}


.navbar {
        display: none;
    }

/* Mobile nav bar at the bottom */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        padding: 4vw;
        padding-top: 3vw;
        padding-bottom: 2vw;
        background-color: #f4f4f4;
    }

    
    .mobile-nav .room-nav {
        display: flex;
        gap: 1.2vw;
    }

  	.mobile-nav .page-nav {
    flex-direction: column;  /* Stack the squares vertically */
    justify-content: center; /* Align them at the center vertically */
    align-items: center;     /* Align them at the center horizontally */

 		}

    .mobile-nav .page-nav .square,
    .mobile-nav .room-nav .square {
        width: 2.5vw;
        height: 2.5vw;
        background-color: lightgrey;
    }



.amine-page .mobile-nav .page-nav .square,
.amine-page .mobile-nav .room-nav .square {

        background-color: #636363;
    }
    .mobile-nav .page-nav .square.active,
    .mobile-nav .room-nav .square.active {
        background-color: black;
    }

    /* Specific color for the Amine page */
    .amine-page .mobile-nav .room-nav .square.active,
    .amine-page .mobile-nav .page-nav .square.active {
        background-color: white;
    }

		.amine-page .mobile-nav {
		    background-color: black;
		}

		.amine-page {
				background-color: black;
		}

		.split-view {
			display: flex;
		}

		.iframe-wrapper {
				top: 0;
				position: fixed;
		    height: calc(var(--app-height) / 2);  /* Ensure each iframe takes half of the viewport height */
		    width: 100vw;
		}



	.room > .room:first-child {
        display: none;
    }

.project {
	display: block;
}

#mehdi-wrapper {
	    height: calc(var(--app-height) / 2);
}

.project-metadata {
	word-wrap: break-word;
}


.bio-section {
	font-variant-numeric: oldstyle-nums;
	font-size: 6vw;
	width: 100vw; 
	margin:3.5vw;
	margin-top: 0;
	margin-left:2vw;
	overflow: hidden;
}


.mehdi-bio {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background: white;
	color: black;
	overflow-y: auto;
	padding-top: 4vw;
	background-color: #f4f4f4;
}


.amine-bio {
	position: fixed;
	margin-top: calc(var(--app-height) / 2);
	left: 0;
	background: black;
	z-index: 9999;
	overflow-y: auto;
	color: white;
	padding-top: 3.5vw;
}


.mehdi-bio-overlay {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #f4f4f4;
	z-index: 9999;
	color: black;
	overflow-y: auto;
	padding-top: 4vw;
	pointer-events: none;
}

.amine-bio-overlay {
	opacity: 0;
	position: fixed;
	margin-top: calc(var(--app-height) / 2);
	left: 0;
	background: black;
	z-index: 9999;
	overflow-y: auto;
	color: white;
	padding-top: 3.5vw;
}

.mehdi-bio-overlay a,
.amine-bio-overlay a {
  pointer-events: auto;
}


/* Shown when overlay is active */
.overlay-visible .amine-bio-overlay,
.overlay-visible .mehdi-bio-overlay {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.artist-preview {
	height: calc(var(--app-height) / 2);
	overflow: hidden;
}

#amine-preview {
	background-color: black;
}


.overlay {
    position: fixed;
    left: 0;
    width: 100vw;
    height: calc(var(--app-height) / 2);
    background-color: #f4f4f4;
    opacity: 0;
    z-index: 999;
    overflow: hidden;
}


/* Overlay on Amine's page = content appears at top */
.overlay-top {
    top: 0;
}

/* Overlay on Mehdi's page = content appears at bottom */
.overlay-bottom {
    position: fixed;
    left: 0;
    top: calc(var(--app-height) / 2);
    width: 100%;
    height: calc(var(--app-height) / 2); /* Ensure the overlay takes the bottom half */
    background-color: black;
    display: flex;
}

.overlay-bottom .rooms {
	display: flex;
    position: fixed;
    top: 0; /* Position the content at the bottom */
}

.overlay-bottom .rooms .project img{
    object-fit: cover;
    width: 100%;
}


.overlay.show {
    display: block; /* Show the overlay when the class is added */
    opacity: 1;
    transition: opacity 0.1s ease;
}




#amine-wrapper {
		position: fixed;
    left: 0;
    top: calc(var(--app-height) / 2);
    width: 100%;
    height: calc(var(--app-height) / 2); /* Ensure the overlay takes the bottom half */
    background-color: black;
    display: flex;

}


#amine-wrapper #amine-preview .rooms {
	display: flex;
	position: fixed;
	top: 0;
}

#mehdi-wrapper #mehdi-preview .rooms {
	display: flex;
	position: fixed;
	top: 0;
}

#amine-wrapper #amine-preview .rooms .project img{
    object-fit: cover;
    width: 100%;
}

.arrowBack {
  font-size: 5vw;
  padding-top: -2.2vw;
  margin-top: -2.5vw;
  font-family: 'Hedvig Letters Serif', serif;";
}


.amine-page .arrowBack {
  color: white;
  padding-top: -2.6vw;
  margin-top: -2.6vw;
}

#mehdi-wrapper .rooms {
    clip-path: none !important;
}

.overlay-top .rooms {
    clip-path: none !important;
}

}
/*--------------------------standard query----------------------*/
@media handheld,screen and (min-width: 1101px) {

body {
	font-family: 'Sabon GEO W01 Regular', serif;
	letter-spacing: -0.01vmin;
	
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

html {
  scroll-behavior: smooth; /* Optional for smooth scrolling */
}

.amine-page {
				background-color: black;
				margin-right: calc(100vw - 100%);
		}

/* Make sure iframes and clickable layers are positioned correctly */
.iframe-wrapper {
    position: fixed; /* Use fixed positioning so they stick to the viewport */
    width: 50vw;     /* Each wrapper should occupy half of the viewport */
    height: var(--app-height);   /* Full viewport height */
    top: 0;
    overflow: hidden; /* Prevent overflow */
}

/* The iframe takes up the full width and height of the container */
iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* The clickable layers that take up half of the screen */
.clickable-layer {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;   /* Keep clickable layer above iframe */
    background: rgba(0, 0, 0, 0); /* Transparent layer */
}

/* Mehdi section is the left half of the screen */
#mehdi-wrapper {
    left: 0;
}

/* Amine section is the right half of the screen */
#amine-wrapper {
    left: 50vw; /* Positioned to the right half of the viewport */
				background-color: black;
		
}

#amine-preview {
	position: absolute;
	left: -50vw;
	overflow: hidden;
}

.bio a {
    pointer-events: auto; /* Allow interaction with links inside iframe */
}

.iframe-wrapper.iframe-active .clickable-layer {
    pointer-events: none;  /* Disable the clickable layer if iframe is clicked */
}

.bio-links a {
    pointer-events: auto;  /* Allow interaction with links inside iframe */
}


.mobile-nav {
	display: none;
}

#amine 	a:hover {
	color: #c5c6fc;
}


#navMobile {
	display: none;
}

.socialMedia {
	display: block;
	line-height: 140%;
}

.separatorbar {
	display: inline-table;
}

.breaker {
	display: none;
}


.room {
	display: none;
	width: 60vw;
}

.room :first-child {
	margin-top: 1.5vw;
}

.project {
	overflow: hidden;
	margin-bottom: 5%;
}

.project img {
  display: block;
  width: 100%;
  margin-bottom: 1%;
  lazyloading: true;
}

.navbar {
	display: flex;
  justify-content: flex-start; /* pushes divs to edges */
  align-items: stretch; 
	font-size: 0.85vmax;
	font-variant-numeric: oldstyle-nums;
	line-height: 110%;
  position: fixed;
  bottom: 10vw;
  width: 20vw;
  z-index: 999;
}


body.amine-page {
    background-color: black; /* Black background */
    color: white; /* White text */
}

body.amine-page .room, 
body.amine-page .room-link, 
body.amine-page .project h3 {
    color: white; /* Ensures text in rooms, links, and projects is white */
}


/* Default for Mehdi */
.navbar--left {
    margin-left: 5vw;
}

.roomList {
	position: fixed;
}

.navbar--left .roomList {
	left: 20vw;
}

.rooms--right {
    margin-left: 35vw;
}

/* For Amine */
.navbar--right {
	position: fixed;
    right: -2vw;
    color: white;
}

.navbar--right .roomList {
	right: 20vw;
}


.rooms--left {
    margin-left: 5vw;
}

.room.hidden {
    display: none;
}

/* Visible rooms */
.room.visible {
    display: block; /* Show the visible room */
    opacity: 1;
    transition: opacity 0.08s ease-in-out; /* Fade in transition */
}


.mehdi-bio-overlay, 
.amine-bio-overlay {
	display: none;
}


.mehdi-bio,
.amine-bio {
	display: none;
}


}