@font-face {
  font-family: myfont;
  src: url(../BCNNightmareClub.otf);
}

body{

background:#050505;
color:#eaeaea;
font-family:"Cormorant Garamond",serif;
margin:0;
overflow-x:hidden;

}

.hero{
padding:120px 10%;
border-bottom:1px solid #222;
}

h1{
font-family: myfont;
font-size:50px;
}

h1 a{
	color: white;
	text-decoration: none;
	background-color: transparent;
}

.subtitle{

font-size:22px;
max-width:700px;
opacity:.8;

}

.microfooter{

margin-top:40px;
font-size:14px;
opacity:.6;

}

section{

min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding:8%;

}

img{

max-width:100%;
height:auto;

}

.textbox{
max-width:420px;
z-index:3;
padding: 20px;
background:rgba(0,0,0,.35);
padding:20px;
margin-left: 10px;
border-radius:12px;
}

.textbox h2{

font-size:38px;
font-weight:400;

}

.textbox p{

line-height:1.7;
opacity:.85;

}

.fullscreen img{

width:100%;
/* filter:brightness(.75) contrast(1.15); */
}

.overlaytext{

position:absolute;
right:10%;
top:40%;

}

.frame{

border:8px solid #333;
box-shadow:0 0 60px rgba(0,0,0,.9);
padding:15px;
border-radius:8px;

}

.pan img{
width:140%;
animation:pan 40s linear infinite alternate;
}

@keyframes pan{
from{transform:translateX(-25%);} 
to{transform:translateX(25%);} 
}

.zoom img{
width:110%;

animation:zoom 30s ease-in-out infinite alternate;

}

@keyframes zoom{

from{transform:scale(1);} 

to{transform:scale(1.8);} 

}

.bgpanel{
position:relative;
min-height:220vh;
display:block; /* annule le flex global des sections */
}

/* image fixe */
.bgpanel .bg-fixed{
position:sticky;
top:0;
height:100vh;
width:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
z-index:1;
}

/* couche qui défile PAR DESSUS l'image */
.bgpanel .bg-content{
position:relative;
z-index:2;
margin-top:-100vh; /* place le texte au dessus de l'image */
padding-top:120vh; /* le texte arrive après un peu de scroll */
min-height:200vh;
}



/* ----------------------
parallaxe multicouche
---------------------- */

.parallax-layer{
position:absolute;
inset:0;
pointer-events:none;
}

.parallax-layer img{
position:absolute;
will-change:transform;
opacity:.25;
}

/* poussière atmosphérique */

#dust{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
opacity:.45;
z-index:5;
}

/* effet 3D léger */

.tilt{
transform-style:preserve-3d;
transition:transform .2s ease;
}

/* animation flottante */

.float img{

animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{transform:translateY(0px)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0px)}

}

.fade{
opacity:0;
transform:translateY(40px);
}


/* module image fixe type Christies */
.fixed-photo{
position:relative;
min-height:200vh;
display:block; /* annule le flex global des sections */
}

.fixed-photo .fixed-bg{
position:sticky;
top:0;
height:100vh;
width:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
z-index:1;
}

.fixed-photo .scroll-layer{
position:relative;
z-index:2;
padding:0 10% 20vh 10%;
max-width:900px;
}

/* responsive smartphone */


/* module travelling video full */

.travel-full-section{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
gap:60px;
}

.travel-full-frame{
height:100vh;
width:50vw;
max-width:50vw;
overflow:hidden;
position:relative;
}

.travel-full-frame img{
height:100%;
width:auto;
max-width:none; /* empêche la règle globale img{max-width:100%} de compresser l'image */
position:absolute;
top:0;
left:0;
will-change:transform;
}

.asym{
	width:60%
}

@media (max-width:700px){

	.travel-full-section{
		flex-direction:column;
		height:auto;
	}

	.travel-full-frame{
		width:100vw;
		max-width:100vw;
		height:100vh;
	}

	.asym{
		width:100%
	}

	section{
		padding:6%;
		flex-direction:column; /* empile image puis texte */
	}

	/* sur smartphone le texte passe SOUS l'image */
	.textbox{
		position:relative;
		margin-top:20px;
		left:auto;
		right:auto;
		bottom:auto;
		max-width:none;
		background:rgba(0,0,0,.35);
		padding:18px;
		border-radius:12px;
	}

	.frame img,
	.pan img,
	.zoom img{
		width:100%
	}

	section img{
		width:100%;
		display:block;
	}

}


/* halo lumière musée */

body::after{

content:"";
position:fixed;

width:600px;
height:600px;

background:radial-gradient(circle,rgba(255,255,255,.06),transparent);

pointer-events:none;

mix-blend-mode:screen;

transform:translate(-50%,-50%);

}