<div id="app"></div>

$black:  #101010;
$grey: #717171;
$green: #beff00;
$white: #fff; 
$phone: 375px;
$phablet: 767px;
$tablet: 1024px;
$desktop: 1440px;
$wide: 1920px;

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  margin: 0;
  padding: 0;
  position: fixed;
}
a {
  text-decoration: none;
}
h1 {
  margin: 0;
  font-size: 120px;
  font-family: 'Roboto', 'sans-serif';
	}

.head-main {
	background-color: $black;
	color: $grey;
	overflow: hidden;
  overflow-y: scroll;
	height: 100vh;
	a {
		color: $grey;
	}
	&__container {
		max-width: $wide;
		margin: 0 auto;
		overflow: hidden;
		height: calc(100vh - 88px);
		min-height: 400px;
		display: flex;
		flex-direction: column;
		justify-content: stretch;
	}
	&__artist {
		border-bottom: 0.6em solid $grey;
		white-space: nowrap;
		user-select: none;
		width: max-content;
		display: flex;
		align-items: center;
		flex-grow: 1;
		&-1 a {
			color: $grey;
			-webkit-text-fill-color: $black; 
			-webkit-text-stroke-width: 1px;
			-webkit-text-stroke-color: $grey;
		}
		&-3 a {
			color: $grey;
			-webkit-text-fill-color: $black; 
			-webkit-text-stroke-width: 1px;
			-webkit-text-stroke-color: $grey;
		}
	}
	&__name {
		margin: 0;
		cursor: pointer;
    will-change: scroll-position;
		&:hover {
      @media (hover: hover) {
        animation-play-state: paused;
			color: $green;
			-webkit-text-stroke-color: $green;        
      }

		}
		&_long{
			animation: marquee 35s linear 0.2s infinite alternate-reverse both;
		}
		&_short {
			animation: marqueeR 31s linear 0.2s infinite alternate-reverse both;
		}
		&_long2 {
			animation: marquee 41s linear 0.2s infinite alternate-reverse both;
		}
		&_short2 {
			animation: marqueeR 23s linear 0.2s infinite alternate-reverse both;
		}
	}
	&__arrow {
		height: 80px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover > div {
			transform: translateY(2px) scale(1.1) rotate(-45deg);
			cursor: pointer;
			border-color: $green;
		}
		&-symbol {
			height: 14px;
			width: 14px;
			transform: rotate(-45deg);
			border-bottom: 2px solid $grey;
			border-left: 2px solid $grey;
			transition: all 0.2s linear;
		}
	}
}

@keyframes marquee {
	from {transform: translate3d(-60%, 0, 0);}
	to {transform: translate3d(0, 0 ,0);}
}

@keyframes marqueeR {
	from {transform: translate3d(0, 0 , 0);}
	to {transform: translate3d(-53%, 0, 0);}
}

class HeadMain extends React.Component {
 
data = {
artist: [
{
artist_name_en: "very long name",
artist_slug: "long"
},
{
artist_name_en: "short",
artist_slug: "short"
},
{
artist_name_en: "long name also",
artist_slug: "long2"
},
{
artist_name_en: "short one",
artist_slug: "short2"
}
]
}
	render() {
    const lang = 'en';
    const data = this.data;
    
		const content = data ? data.artist.map((artist, i) => 
			<div key={artist.artist_slug} className={`head-main__artist head-main__artist-${i + 1}`}>
			<a href=''>
				<h1 className={`head-main__name head-main__name_${artist.artist_slug}`}> {(artist[`artist_name_${lang}`] + ' ').repeat(10)} </h1>
			</a>
			</div>
		) : null;
		if(true) {
    // console.log(data)
			return (
				<div className="head-main">
					<div className="head-main__container">
						{content}
					</div>
				</div>
		)
		}
		return (
			<h2 className="preload">Loading...</h2>
		)
  }
}

ReactDOM.render(<HeadMain /> , document.getElementById('app'));