/*
 * index.css > home page: one full viewport with the division collage as
 * background (women's / men's, crossfaded with a simple opacity swap),
 * the big logo, the division toggle and the cities bar at the bottom.
 */

body.page_index{
	overflow:hidden;
}

body.page_index main[data-page]{
	display:flex;
	min-height:0;
}

#home_hero{
	position:relative;
	flex:1;
	overflow:hidden;
}

/* The two collages stacked; index.js moves .on between them. */
.home_bg{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
	opacity:0;
	transition:opacity .8s var(--ease);
}

.home_bg.on{
	opacity:1;
}

#home_bg_women{
	background-image:url("/img/women_horiz.jpg");
}

#home_bg_men{
	background-image:url("/img/men_horiz.jpg");
}

/* The vertical collages fit portrait screens better. */
@media (orientation:portrait){
	#home_bg_women{
		background-image:url("/img/women_vert.jpg");
	}
	#home_bg_men{
		background-image:url("/img/men_vert.jpg");
	}
}

/* ------------------------------------------------------------ center bit -- */

#home_center{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-52%);
	/* display:flex; */
	align-items:center;
	/* gap:52px; */
	width: 700px;
	max-width: 83%;
}

#home_logo{
	/* width:clamp(240px,32vw,440px); */
	width: 100%;
	display:block;
}

#home_logo.mobile{
	display: none;
}

#division_btns{
	position: absolute;
	display:flex;
	flex-direction:column;
	gap: 18px;
	top: 18%;
	right: 0;
}

.division_btn{
	min-width:170px;
	padding: 9px 0;
	border:1px solid var(--white);
	color:var(--white);
	font-size:12px;
	letter-spacing:.14em;
	text-align:center;
	cursor:pointer;
	transition:background-color .35s var(--ease),color .35s var(--ease);
}

.division_btn:hover{
	background:rgba(255,255,255,.2);
}

.division_btn.active{
	background:var(--white);
	color:var(--ink);
}

@media (max-width:760px){
	#home_center{
		top: 40%;
	}
	#home_logo.desktop{
		display: none;
	}
	#home_logo.mobile{
		display: block;
	}
	#division_btns{
		top: 140%;
		left: 0;
		flex-direction: row;
	}
	.division_btn {
		font-size: 3vw;
		min-width: auto;
		width: 50%;
	}
}