/*
Theme Name: ONEIRIC TEASER (J94WxrW9QnH2)
Author: Fivement
Version: 1.0.0
Text Domain: Oneiric-J94WxrW9QnH2
*/

* {
	-webkit-tap-highlight-color: transparent;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
		box-sizing: border-box;
}

html, body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, fieldset, input, textarea, abbr, article, figure, button { 
	margin: 0; 
	padding: 0; 
}
html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	touch-action: none;
}
body {
	background-color: #fff;
	color: #000;
	font-size: 14px;
	font-family: sans-serif;
	line-height: 1.428;
}
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.splash {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	transition: opacity 5s cubic-bezier(0.5, 0, 0.75, 0);
}
body.loading .splash {
	opacity: 0;
}
body.loaded .splash {
	display: none;
}

.splash span {
	background-size: contain;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 235px;
	height: 110px;
	transition: opacity 2s cubic-bezier(0.5, 0, 0.75, 0);
}
.splash .gradient-logo {
	background-image: url('images/bloom-iz/teaser-logo.jpg');
	z-index: 99;
}
.splash .teaser-logo {
	background-image: url('images/oneiric-diary/A2T9cDtUup7J/teaser-logo.jpg');
	opacity: 0;
	z-index: 100;
}
body.init .splash .gradient-logo {
	opacity: 0;
}
body.init .splash .teaser-logo {
	opacity: 1;
}
body.loading .splash span {
	transition: opacity 0.7s cubic-bezier(0.5, 0, 0.75, 0);
	transition-delay: 1s;
	opacity: 0 !important;
}

@media (max-width: 600px) {
	.splash span {
		width: 180px;
		height: 84px;
	}
}

.scene {
	position: fixed;
	top: 0;
	left: 50%;
	width: 100%;
	max-width: 700px;
	transform: translateX(-50%);
	height: 100%;
	z-index: 1;
}
.scene .bg,
.scene .girl {
	position: absolute;
	top: 57.5%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scene .bg {
	background-size: 860px 350px;
	background-repeat: repeat;
	width: 100%;
	height: 350px;
	opacity: 0;
	transition: opacity 4s cubic-bezier(0.5, 0, 0.75, 0);
} 
body.loaded .scene .bg {
	opacity: 1;
}
.scene .bg.izone {
	animation: displace 35s linear infinite;
	background-image: url('images/oneiric-diary/J94WxrW9QnH2/bg-loop-izone.png');
	z-index: 2;
}
.scene .bg.wizone {
	animation: displace 60s linear infinite;
	background-image: url('images/oneiric-diary/J94WxrW9QnH2/bg-loop-wizone.png');
	transition-delay: 1s;
	z-index: 1;
}

@keyframes displace {
	from { background-position: 0 center; } 
	to { background-position: -860px center; }
}

.scene .girl {
	background-image: url('images/oneiric-diary/A2T9cDtUup7J/girl.gif');
	background-size: contain;
	width: 260px;
	height: 260px;
	margin-top: 10px;
	z-index: 3;
}

.scene .mask {
	width: 80px;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 4;
}
.scene .mask.left {
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	left: 0;
}
.scene .mask.right {
	background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	right: 0;
}

@media (max-width: 700px) {
	.scene .mask {
		display: none;
	}
}

.scene .message {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: absolute;
	top: 32.5%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
}
.scene .message .line {
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	width: 300px;
	height: 50px;
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(0.5, 0, 0.75, 0);
	position: relative;
}
.scene .message .second.line {
	transition-delay: 1.8s;
}
.scene .message .third.line {
	transition-delay: 3.5s;
}

.scene .message.fade-in .line {
	opacity: 0.9;
}
.scene .message.fade-out .line {
	opacity: 0;
	transition: opacity 3s cubic-bezier(0.5, 1, 0.89, 1), margin-left 3s linear;
	margin-left: -120px;
}
.scene .message.fade-out .second.line {
	transition-delay: 0;
}

@media (max-width: 600px) {
	.scene .bg,
	.scene .girl {
		top: 62.5%;
	}
	.scene .message {
		top: 30%;
	}
	.scene .message .line {
		width: 228px;
		height: 36px;
	}
}