@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
:root{
	scroll-behavior: smooth;
  --main: #948EFF;
  --secondary: #5A55AA;
  --accent1: #89E2FA;
  --text1: rgba(255,255,255,.85);
  --text2: rgba(255,255,255,.5);
  --text3: rgba(255,255,255,.3);
  --bg1: #10111D;
  --bg2: #242533;
  --bg3: #333542;
  --width: min(90vw, 90rem);
  --margin: calc(1.2rem + .6vmax);
  --curve: ease;
	--curve-out: ease;
	--radius: .4rem;
  --box-radius: .8rem;
	--duration: .25s;
	--duration-out: .25s;
	--transition: all var(--duration) var(--curve);
	--transition-out: all var(--duration-out) var(--curve-out);

  text-wrap: pretty;
  background-color: var(--bg1);
  --dot-bg: rgba(255,255,255,.07);
  background-image:  radial-gradient(var(--dot-bg) 1px, transparent 1px), radial-gradient(var(--dot-bg) 1px, var(--bg1) 1px);
  background-size: 20px 20px;
  background-position: 0 0,10px 10px;

  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, 'PingFang SC', sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
em{font-style: normal;}
img{
  display: block;
	max-width: 100%;
}
::selection{
  background: var(--main);
  color: var(--bg1);
}
a{
	text-decoration: none;
	transition: var(--transition);
	color: var(--main);
}
.mobile-only{
	display: none !important;
}
#sce{
	/* background: var(--bg1); */
  --b1: hsl(32, 18%, 20%);
  --b2: #345;

	/* --ptn-color: #282A3A;
	background-image:  repeating-linear-gradient(45deg, var(--ptn-color) 25%, transparent 25%, transparent 75%, var(--ptn-color) 75%, var(--ptn-color)), repeating-linear-gradient(45deg, var(--ptn-color) 25%, var(--bg1) 25%, var(--bg1) 75%, var(--ptn-color) 75%, var(--ptn-color));
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px; */
}

/* ~General */
.icon{
	--size:auto;
	display: inline-block;
	width: var(--size); height: var(--size);
}

/*~Btns*/
.btn{
	background: #345;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: .4em .7em;
	font-weight:700;
	border: 2px solid #345;
	border-radius: var(--radius);
	transition: var(--transition-out);
	cursor: pointer;
	backface-visibility: hidden;
	user-select: none;
	-webkit-user-select: none;
	font-family: inherit;
	line-height: 1.2;
	outline: none;
	transform: scale(1.008);
	transform-origin: 50% 50%;
	touch-action: manipulation;
}
.primary-btn{
	background: var(--main);
	color: #000;
	border-color: var(--main);
}
.btn:hover{
	transition: var(--transition);
	text-decoration: none;
	transform: scale(1.05);
	background: var(--main);
	/* color: #fff; */
	border-color: var(--main);
	outline: none;
	filter: brightness(1.1);
}
.btn:active{
	filter: brightness(.7)contrast(1.3);
	outline: none;
	transition: var(--transition);
}
.btn.disabled{
  opacity: .25;
  filter: grayscale(.3);
  pointer-events: none;
}
/* ~Nav */
nav{
  padding: .2rem 1rem .2rem;
  /* border-bottom: 1px solid rgba(255,255,255,.25); */
  display: flex;
  justify-content: space-between; align-items: center;
	width: calc(var(--width) + 2rem);
	margin: 1.5rem auto .5rem;
	position: sticky;
	top: 0;
	transform: scale(1);
	z-index: 111111;
	transition: var(--transition);
	border-radius: calc(var(--box-radius) * 2);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.scrolled nav{
  /* width: 100vw; */
	background: rgba(0,0,0,.75);
	backdrop-filter: blur(1rem);
	/* box-shadow: 0 .5rem 1rem -.3rem rgba(0, 0, 0, 0.2); */
}
.logo{
	width: 3.4rem; height: 3.4rem;
	margin-right: .6rem;
  transition: var(--transition-out);
  transform-origin: 0 50%;
  position: relative;
}
.scrolled .logo{
  transition: var(--transition);
  scale: .7;
}
.nav-1{
  display: flex;
	color: #fff;
	flex-grow: 1;
	font-size: .875rem;
	justify-content: flex-end; align-items: center;
}
.nav-link{
	color: rgba(255,255,255,.65);
	display: flex;
	justify-content: flex-start; align-items: center;
}
.nav-link ~ .nav-link::before{
  content: " / ";
  color: var(--text3);
  opacity: .5;
  margin: 0 1em;
}
.nav-link:hover{
	color: var(--main);
}

.nav-1 i{
	/* color: var(--main); */
	opacity: .25;
	margin-right: .2em;
	transition: var(--transition);
}
.nav-1 .icon{
	--size: 2em;
	margin-right: .3em;
  max-width: var(--size);
  transition: var(--transition-out);
  opacity: 1;
  scale: 1;
}
.scrolled a:not(.download) .icon{
  max-width: 0;
  margin-right: 0;
  transition: var(--transition);
  opacity: 0;
  scale: .3;  
}
.nav .download{
	border-radius: .4em;
  transform: skewX(-8deg);
  margin-left: 2em;
  transform-origin: 50% 50%;
}
.nav .download:hover{
  transform: scale(1.04) skewX(-8deg);
}

.nav .download > span{
  display: inline-flex;
  align-items: center;
  transform: skewX(8deg);
}

.nav .download .icon{
  width: 1.4em; height: 1.4em;
}
h1{
	color: rgba(255,255,255,.9);
	font-size: 1.7rem;
	flex-grow: 1;
	line-height: 1;
	font-weight: 400;
	transition: var(--transition-out);
	text-rendering: optimizeLegibility;
}
h1 strong{
	font-weight: 400;
  display: none;
}
h1 svg{
  height: 1.8rem;
  transition: var(--transition-out);
  transform-origin: 0 50%;
  margin: .08em 0;
}
h1 svg path{
  fill: var(--text1);
}


.scrolled h1{
	/* font-size: 1.3rem; */
  transition: var(--transition);
  translate: -1rem 0;
}
.scrolled h1 svg{
  scale: .8;
}
.tagline{
	font-size: .875rem;
	line-height: 1.6;
	font-weight: 400;
	color: rgba(255,255,255,.5);
	transition: var(--transition);
	max-height: 1.2rem;
}
.scrolled .tagline{
	opacity: 0;
	max-height: 0;
}

/* ~BG-img */
.bg-img{
	pointer-events: none;
  position: absolute;
  width: 100%; height: calc(100% + 10rem);
  top: -10rem;
  filter: blur(14px);
  z-index: 0;
}
.bg-img img{
	opacity: 0;
	transition: var(--transition);
	position: absolute;
	z-index: 0;
	left: 0; top: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* filter: blur(14px); */
}
.bg-img img.y{
	opacity: .12;
}

/* ~Hero */
.hero{
  width: 100%;
	margin: var(--margin) auto 0;
  position: relative;
  padding-bottom: calc(var(--margin) * 2 );
}
.hero > .inner{
  display: flex;
  width: var(--width);
  margin: 0 auto;
  gap: var(--margin);
}
/* ~Carousel */
.carousel{
  flex: 1 1 60%;
  position: relative;
  overflow: hidden;    
  user-select: none;
  aspect-ratio: 16 / 9;
  border-radius: var(--box-radius);
  box-shadow: 
    0 .5rem 2rem -.5rem rgba(0, 0, 0, .2),
    0 .3rem .5rem -.1rem rgba(0, 0, 0, .2);
}
.carousel::after{
  content: "";
  position: absolute;
  left: 0; width: 100%;
  bottom: 0; height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.6));
  z-index: 1;
  pointer-events: none;
}
.game{
  width: 100%;
  aspect-ratio: 16 / 9;
  position: absolute;
	cursor: pointer;
  left: 0; top: 0;
  overflow: hidden;  
}
.game img{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: var(--transition-out);
  transform: scale(1.1);
  /* filter: blur(10vmin); */
}
.game.y img{
  transition: var(--transition);
  opacity: 1;
  transform: scale(1);
}
/* ~News */
.news{
  flex: 1 1 30%;
  position: relative;
  font-size: max(.875rem, calc(.35vmax + .6vmin));
  background: rgba(0, 0, 0, .3);
  padding: var(--margin);
  border-radius: var(--box-radius);
  overflow: hidden;
}
.news-h1{
  color: var(--main);
  padding: .8em .8em;
  position: absolute;
  top: 0; left: 0;
  width: 100%; 
  display: flex;
  align-items: center;
  /* display: inline-block; */
  border-radius: .2em;
  /* border-left: 2px solid var(--secondary); */
  font-weight: 700;
  backdrop-filter: blur(15px);
  z-index: 9;
  background: rgba(0, 0, 0, .35);
}
.news-h1 img{
  width: 1.6em; height: 1.6em;
  margin-right: .4em;
}
.news > ul{
  position: absolute;
  top: var(--margin); left: 0;
  width: calc(100% + 2rem); height: 100%;
  counter-reset: item;
  padding: var(--margin) calc(var(--margin) + 2rem) var(--margin) var(--margin);
  overflow: auto;
}
.news > ul::-webkit-scrollbar{
  display: none;
}
.news li{
  padding: 1em 0;
  list-style: none;
  transition: var(--transition-out);
}
.news li:hover{
  transition: var(--transition);
}
.news li ~ li{
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.news li.sticky{
  background: var(--bg2);
  box-shadow: calc( var(--margin) / 2) 0 0 var(--bg2),
  calc( var(--margin) / -2) 0 0 var(--bg2);
}
.news li:nth-child( 1 of .sticky){
  border-top-left-radius: calc(var(--box-radius) / 2);
  border-top-right-radius: calc(var(--box-radius) / 2);
}
.news li:nth-last-child( 1 of .sticky){
  border-bottom-left-radius: calc(var(--box-radius) / 2);
  border-bottom-right-radius: calc(var(--box-radius) / 2);
}
.news li:nth-child( 1 of .normal){
  border: none
}
.news a{
  display: flex;
  color: var(--text1);
  justify-content: space-between;
  
  /* &::before{
    content: counter(item);
    counter-increment: item;
    background: var(--main);
    display: flex;
    justify-content: center;
    align-items: center;
    font-feature-settings: 'tnum';
    width: 1.4em; height: 1.4em;
    font-size: max(1em, 12px);
    flex: 0 0 1.4em;
    overflow: hidden;
    border-radius: 50%;
    color: var(--bg1);
    font-weight: 700;
  } */
}
.news a:hover{
  color: var(--main);
}
.news a > div:first-of-type{
  flex: 1 1 auto;
  padding: 0 1em 0 .5em;
}
.news li em{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.4em;
  padding: .3em .4em;
  font-size: max(.7em, 12px);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: .3em;
  color: var(--text2);
  font-weight: 700;
  background: var(--bg3);
  margin-top: .25em;
  transition: var(--transition-out);
  transform: skewX(-8deg);

}
.news li em > i{
  font-style: normal;
  transform: skewX(8deg);
}
.news li.sticky em{
  background: var(--secondary);
  color: var(--bg1);
}
.news li.sticky div{
  font-weight: 700;
}
.news a:hover em{
  background: var(--main);
  transition: var(--transition);
  color: var(--bg1);  
}

.news-date{
  color: var(--secondary);
  flex: 0 0 max-content;
  font-size: .875rem;
  margin-top: .05rem;
  transition: var(--transition-out);
}
.news li:hover .news-date{
  color: var(--main);
  transition: var(--transition);
}
/* ~EP */
.headline{
  color: #fff;
  position: absolute;
  left: 50%; bottom: 2.4em;
  width: 44%;
  line-height: 1.35;
  /* transform: none; */
  transition: var(--transition);
	display: grid;
	grid-template-areas: "tag  . next" "title title next" "desc desc next";
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto auto;
  z-index: 5;
}
.headline.n{
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-out);
}
.headline-tag{
	grid-area: tag;
	/* background: var(--main); */
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(5px) saturate(1.5);
	color: rgba(255, 255, 255, .7);
	display: inline-block;
	border-radius: .3em;
	padding: .2em .4em;
	font-weight: 400;
	font-size: .75rem;
}
.headline-title{
	grid-area: title;
  font-weight: 700;
  font-size: 2rem;
  transform: translateX(.5em);
  opacity: 0;
  transition: var(--transition-out);
}
.y > .headline-title{
  transform: none;
  opacity: 1;
  transition: var(--transition);
}
.headline-desc{
	grid-area: desc;
	font-size: .875rem;
	opacity: .7;
}


.next{
  grid-area: next;
  transition: all .3s ease;
  animation: shaking 4s ease infinite both;
  transform-origin: center center;
  height: 3rem; width: 3rem;
  border-radius: 1.5rem;
  display: flex;
  justify-content: center; align-items: center;
  margin-left: 1rem;
	position: absolute;
	right: 1em; bottom: 1em;
	z-index: 11;
	--s: #fff;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(8px) saturate(1.5);
  transition: var(--transition-out);
}
.next:hover{
  animation: none;
  transform: scale(1.1);
  background: rgba(0, 0, 0, .3);
  
	transition: var(--transition);
}
.next:active{
  transform: scale(.9);
}
.next svg{
  height: 3rem;
}
@keyframes shaking{
	0%{transform: none;}
	12%{transform: translateX(.2rem);}
	17%{transform: translateX(-.1rem);}
	22%{transform: translateX(.2rem);}
	27%{transform: translateX(-.1rem);}
	32%{transform: translateX(.2rem);}
	100%{transform: none;}
}
.next path{
  stroke: var(--s);
  stroke-width: 1.5px;
  fill: none;
  transition: var(--d-transition);
}
.next:hover path{
  stroke-width: 3px;
}
.paginator{
	position: absolute;
	bottom: 0;
	left: 50%;
	display: flex;
  z-index: 2;
}
.dot{
	width: .5rem; height: .5rem;
	background: rgba(255, 255, 255, 0.2);
	border-radius: .25rem;
  overflow: hidden;
	margin: 0 .8em 1em 0;
	transition: var(--transition);
	cursor: pointer;
}
.dot:hover{
	transform: scale(1.1);
	background: rgba(255, 255, 255, 0.5);
}
.dot.y{
	background: rgba(255, 255, 255, 0.8);
	transform: scale(1.3);
}
/* ~Section */
.section{
  width: 100%;
  background: var(--bg1);
  background: linear-gradient(-34deg, var(--bg1) -5%, var(--bg2) 100%);
  border-top: 3px solid #333;
  border-image: linear-gradient(to right, rgba(255,255,255,.02) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.02) 100%) 1;
  z-index: 1;
  position: relative;
  box-shadow: inset 0 -2rem 2rem rgba(0, 0, 0, .15);
}
.section::before{
  pointer-events: none;
  content: "";
  position: absolute;
  display: block;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient( 98deg, var(--bg2), var(--bg2) 1px, var(--bg1) 1px, var(--bg1) 5px );
  opacity: .2;
  z-index: 0;
}
.about-2::before{
  background: repeating-linear-gradient( -98deg, var(--bg2), var(--bg2) 1px, var(--bg1) 1px, var(--bg1) 5px );
}
.about-2{
  background: linear-gradient(34deg, var(--bg1) -5%, var(--bg2) 100%);
}
.section-content{
	width: var(--width);
  margin: 0 auto;
  padding: calc(3 * var(--margin)) 0;
  display: grid;
  grid-template-areas: "desc figure" "list figure";
  grid-template-columns: 1fr 1fr;
  gap: var(--margin);
  color: rgba(255, 255, 255, .8);
}
.about-2 .section-content{
  grid-template-areas: "figure desc" "figure list";
}
.section-header{
	display: flex;
	justify-content: space-between; align-items: center;
	margin: 0 0 1em;
}

.section-title{
	color: rgba(255, 255, 255, .8);
	font-weight: 700;
	font-size: 1rem;
	display: flex;
	align-items: center;
}
.section-title .icon{
	--size: 2em;
	margin-right: .5em;
}
.section-title-link{
	color: rgba(255,255,255, .35);
	font-size: .75rem;
	margin-left: 3em;
	padding: .2em .9em;
	border-radius: 3em;
	transition: var(--transition);
}
.section-title-link:hover{
	background: rgba(255, 255, 255, 0.2);
		color: rgba(255,255,255, .8);
}
/* ~More */
.grid-section{
	transform: scale(1);
}
.grid-section .section-content{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item{
	flex: 0 0 23%;
	/* background: rgba(255,255,255,.05); */
	border-radius: var(--radius);
	transition: var(--transition);
	overflow: hidden;
	color: #fff;
	margin-bottom: 1rem;
	--ptn-color: #2D3249;
	--ptn-size: 2px;
	background-color: #292C3A;
	background-image:  radial-gradient(var(--ptn-color) var(--ptn-size), transparent var(--ptn-size)), radial-gradient(var(--ptn-color) var(--ptn-size), transparent var(--ptn-size));
	background-size: 16px 16px;
	background-position: 0 0,8px 8px;
}

.item:hover{
	box-shadow: 0 0 0 2px var(--main);
}
.item-meta{
	padding: calc(1vmin + .5vmax);
}
.item-title{
	font-weight: 700;
	opacity: .9;
	font-size: 1rem;
}
.item-desc{
	opacity: .5;
	font-size: .875rem;
	/* font-size: calc(1vmin + .1vmax); */
	line-height: 1.3;
}
.item-cover{
	aspect-ratio: 16 / 9;
	display: block;
	background: #111;
	box-shadow: 0 2em 3em #292C3A;
}

/* ~Lightbox */
.lightbox-open{
	overflow: hidden;
}
.lightbox{
	contain: layout;
	content-visibility:auto;
	text-align: left;
	visibility: hidden;
	position: fixed;
	width: 100%; height: 100vh;
	top: 0; left: 0;
	font-weight: 400;
	font-size: .875rem;
	opacity: 0;
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
	background: rgba(0,0,0,.5);
	color: #fff;
	transition: var(--transition-out);
	transform-origin: center center;
	z-index: 999999;
	line-height: 1.4;
}
.lightbox-open .lightbox{
	visibility: visible;
	opacity: 1;
	transition: var(--transition);
	transform: none;
	-webkit-backdrop-filter: blur(8px) saturate(.3);
	backdrop-filter: blur(8px) saturate(.3);
}
.lightbox > .inner{
	background: #111;
	padding: 1rem;
	line-height: 1.75;
	max-width: 80vw;
	max-height: 70vh;
	transform: scale(.96);
	transition: var(--transition-out);
	border-radius: var(--radius);
	box-shadow: 0 1em 2em #000;
}
.lightbox-open .lightbox > .inner{
	transform: none;
	transition: var(--transition);
}
.lightbox video{
	max-width: 100%;
	max-height: 100%;
}
.lightbox-close{
	margin-top: 1em;
	text-decoration: none;
	width: 2rem; height: 2rem;
	transition: var(--transition);
}
.lightbox-close svg{
	width: 100%; height: 100%;
	fill: none;
	transform: scale(1.01);
	transform-origin: center center;
	stroke: #fff;
	stroke-width: 2px;
}
.lightbox-close:hover svg{
	stroke: var(--main);
	transform: scale(1.04);
}
.lightbox-close:active{
	transform: scale(.95);
}
.box-open{
	position: fixed;
}

/* ~about */
.about-desc{
	grid-area: desc;
	line-height: 1.65;
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--main);
	color: var(--text1);
	font-size: 1rem;
}

.about-text{
  position: relative;
}
[class^="about-deco-"]{
  width: 16vmin; height: 16vmin;
  background: url(../images/deco-3.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: -3rem; left: 10rem;
  z-index: 0;
  animation: decoRotate 60s ease -31s infinite;
  --o: 2.5vmin;
  opacity: calc(.13 - (var(--n) - 1) * .02);
  translate: calc(var(--n) * var(--o)) 0;
  animation-delay: calc(-30s - var(--n) * 0.7s);
}

.about-2 [class^="about-deco-"]{
  translate: 0 calc(var(--n) * var(--o));
}

.about-2 [class^="about-deco-"]{
  background-image: url(../images/deco-1.png);
  animation-name: decoMove1;
}
.about-3 [class^="about-deco-"]{
  background-image: url(../images/deco-2.png);
  /* animation-name: decoScale; */
}
@keyframes decoRotate {
  0%{rotate: 0;}
  100%{rotate: 1turn;}
}
@keyframes decoScale{
  0%{scale: .7;}
  50%{scale: 1.3;}
  100%{scale: .7;}
}
@keyframes decoMove1{
  0%{translate: calc(var(--o) + var(--n) * .5vmin) calc(var(--n) * var(--o)); scale: .9;}
  33%{translate: calc(var(--o) - 7vmin + var(--n) * .5vmin) calc(var(--n) * var(--o)); scale: .8;}
  67%{translate: calc(var(--o) + 7vmin + var(--n) * .5vmin) calc(var(--n) * var(--o)); scale: 1.1;}
  100%{translate: calc(var(--o) + var(--n) * .5vmin) calc(var(--n) * var(--o)); scale: .9;}
}

.about-desc strong{
	font-size: 2.5rem;
	display: block;
	font-weight: 700;
	color: var(--main);
  margin-bottom: .3em;
}
.about-list{
	grid-area: list;
	list-style: none;
}
.about-list li{
	display: flex;
	justify-content: flex-start; align-items: center;
	/* margin-left: calc(1em + .5em * ( 4 - var(--n)) ); */
	padding: .5em .5em .5em .5em;
	border-radius: .6em;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	transition: var(--transition);
	background: linear-gradient(90deg, transparent 0%, transparent 100%);
	color: var(--main);
  position: relative;
  left: -.5em;
  transform: skewX(-8deg);
}
.about-list li:hover{
	background: rgba(0, 0, 0, 0.5);
	/* background: var(--main); */
	color: #fff;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}
.about-list li ~ li{
	margin-top: .1em;
}
.about-list li::after{
	content: "";
	height: .2em;
	flex: 1 0 0;
	display: none;
	margin-left: .5em;
	opacity: 0;
	transition: var(--transition);
}
.about-list li.y::after{
	opacity: 1;
	background: rgba(255, 255, 255, 0.1);
}
.about-list li:hover::after{
	background: var(--main);
}
.about-list em{
	background: var(--main);
	width: 1.5em; 
  /* height: 1.5em; */
	display: flex;
	color: var(--bg1);
	justify-content: center; align-items: center;
	border-radius: .3em;
	font-weight: 700;
	margin-right: .5em;
	background: linear-gradient(210deg, #89E2FA, #645CF1);
	box-shadow: inset 0 -.2em .3em #9D98FF;
	text-shadow: 0 .1em .4em #2B3595;

}

.about-list em i{
  font-style: normal;
  transform: skewX(8deg);
}

.about-list span{
  transform: skewX(8deg);
}
.about-figure{
	grid-area: figure;
	padding: 1em;
  position: relative;
  user-select: none;
}
.about-logo{
  width: 5vw; height: 5vw;
  border-radius: 16%;
  position: absolute;
  display: block;
  top: 90%; left: 0;
}
.mockup{
	transform-style: preserve-3d;
	backface-visibility: hidden;
	contain: layout;
	content-visibility:auto;
	border-radius: .5rem;
}
.mockup img{
	border-radius: .5rem;
	overflow: hidden;
	width: 100%; height: 100%;
	object-fit: contain;
}
.mockup img.abs{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.download-links{
  display: flex;
  grid-area: list;
  gap: 1em;
  align-items: flex-start;
}
.download-links .btn{
  transform: skewX(-8deg);
}
.download-links .btn:hover{
  transform: scale(1.06) skewX(-8deg);
}
.download-links .btn > .inner{
  transform: skewX(8deg);
  display: flex;
  align-items: center;
  gap: .2em;
}
.download-links svg{
  width: 1.1em; height: 1.1em;
}
/* ~footer */
.footer{
	font-size: .875rem;
	background: rgba(0, 0, 0, .4);
  background: linear-gradient(150deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2));
	width: 100%;
	margin-bottom: 0;
}
.footer::before{
  display: none;
}
.footer .section-content{
	display: flex;
	justify-content: space-between;
  color: var(--text2);
}
.footer-1{
  line-height: 1.7;
}
.footer-2{
	display: flex;
	background: rgba(0, 0, 0, .4);
  background: var(--bg2);
	justify-content: space-around;
	border-radius: var(--box-radius);
	padding: 1em calc( var(--margin) / .75) 1em calc( var(--margin) / 2);
  gap: calc( var(--margin) / 2);
  transform: skewX(-8deg);
  background: repeating-linear-gradient( 90deg, var(--bg2), var(--bg2) 1px, var(--bg1) 1px, var(--bg1) 5px );
  transition: var(--transition-out);
}
.footer-2:hover{
  transform: skewX(-8deg) scale(1.5);
  transition: var(--transition);
}
.footer-group{
  /* margin: 0 1em; */
  text-align: center;
  transform: skewX(8deg);
  flex: 1 0 33%;
}
.footer-2 img{
  width: 5rem;
  margin: .5em auto;
}
.footer-group strong{
  font-size: 1.2em;
  color: var(--text1);
  background: var(--bg2);
  display: inline-block;
  padding: .1em .5em;
  border-left: .2em solid var(--main);
  transform: skewX(-8deg);
}
.footer-group strong em{
  transform: skewX(8deg);
  display: block;
}
/*~Small Screens*/
@media (max-width: 1100px){
	.nav-1{
		font-size: .75rem;
	}
  .news-date{
    display: none;
  }
}
@media (max-width: 1000px){
  .footer .section-content{
    flex-direction: column-reverse;
  }
  .footer-2{
    margin-top: 3em;
  }
  .about-1{
    grid-template-areas: "desc" "list" "figure";
    grid-template-columns: unset;
    grid-template-rows: unset;
  }
}
@media (max-width: 900px){
  .hero{
    padding-bottom: 1em;
  }
  .hero > .inner{
    flex-direction: column;
    display: block;
  }
	.bg-img img{
		height: calc(var(--width) * 1);
	}
	.mobile-only{
		display: unset !important;
	}
	.mobile-hide{
		display: none !important;
	}
	.headline,
	.next{
		z-index: 0;
	}
	.paginator{
		bottom: 0;
		left: 0; width: 100%;
		justify-content: center;
	}
	.dot{
		margin: 0 .5em .5em;
	}
	.logo{
		width: 2.4rem; height: 2.4rem;
		margin-right: .5em;
	}
	h1 svg{
		/* font-size: .9rem; */
    height: 1.2rem;
	}
	h1 b{
		font-size: 1.1em;
	}
	.tagline{
		font-size: .7rem;
	}
	.nav{
		padding: .3rem 1.25rem;
	}
	.nav-1{
		/* display: none; */
		position: absolute;
		flex-direction: column;
		right: 0; top: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
		padding: 3em 1em 1em;
		backdrop-filter: blur(1rem);
		-webkit-backdrop-filter: blur(1rem);
		font-size: 1.2rem;
		opacity: 0;
		pointer-events: none;
		transition: var(--transition);
		transform: translateY(-10%);
		z-index: 119;
		border-bottom-left-radius: var(--radius);
		border-bottom-right-radius: var(--radius);
	}
	.nav-1.y{
		pointer-events: auto;
		opacity: 1;
		transform: none;
	}
	nav .nav-1 a{
		margin: 0 0 1em;
		padding: 1em 0 0;
		/* display: block; */
		width: 100%;
		text-align: center;
	}
	nav .nav-1 a ~ a{
		border-top: 1px solid rgba(255, 255, 255, .15);
	}
  .nav-link ~ .nav-link::before{
    display: none;
  }

	.menu-icon{
		margin: .5rem 0;
		width: 1.375rem; height: 1.375rem;
		transition: var(--transition);
		opacity: .9;
		width: 1.375rem; height: 1.375rem;
		display: block;
		transition: var(--transition);
		z-index: 199;
	}
	.menu-icon-bar{
		background: var(--main);
		width: 100%;
		height: .125rem;
		margin: .25rem 0 0;
		transition: var(--transition-out);
	}
	.menu-open	.menu-icon-bar{
		transition: var(--transition);
	}
	.menu-open .menu-icon-bar-1{
		transform: translate(0,.375rem) rotate(45deg);
	}
	.menu-open .menu-icon-bar-2{
		transform: scaleX(0) translateX(-1rem);
		transform-origin: 0 50%;
		opacity: .7;
	}
	.menu-open .menu-icon-bar-3{
		transform: translate(0,-.375rem) rotate(-45deg);
	}
	.nav-link{
		transform: scale(.8);
		display: flex;
		justify-content: center; align-items: center;

		/* transition-delay: calc( var(--duration) / 4 * var(--c) ); */
	}
	.menu-open .nav-link{
		transform: none;
	}
	.nav-link .icon{
		margin-right: .6em;
		margin-top: .2em;
	}
	.menu-open .hero,
	.menu-open .section{
		transition: var(--transition);
		filter: blur(1em);
	}

	.hero{
		/* height: calc(var(--width) / 1.6); */
    height: auto;
	}
	.headline{
	  color: #fff;
	  position: absolute;
	  left: 6%; bottom: 10%;
	  width: 88%;
	}
	.headline-title{
		font-size: 1rem;
	}
	.headline-desc{
		font-size: .75rem;
	}
	.item{
		flex: 1 0 100%;
	}
	.item-title{
		font-size: .8rem;
	}
	.item-desc{
		line-height: 1.25;
	}

	.mockup{
		transform: perspective(80vmin) rotateY(-10deg) rotateX(3deg) rotateZ(2deg);
		transform: none;
		box-shadow: none;
		height: 20vh;
		margin-top: 2em;
	}
	.nav .download{
		padding: .5em 0;
		margin: 0 1em;
	}
	.menu-box{
		background: rgba(255, 255, 255, .1);
		width: 100%;
		padding: .5em 1em .8em;
		border-radius: var(--radius);
		margin-top: 2em;
		text-align: center;
		color: rgba(255, 255, 255, 0.4);
		font-size: .75rem;
		position: relative;
		overflow: hidden;
	}
	.menu-box i{
		position: absolute;
		z-index: 0;
		left: -2%; top: -5%;
		width: auto;
		font-size: 7em;
		opacity: .15;
	}
	.box-title{
		color: rgba(255, 255, 255, 0.7);
		font-weight: 700;
		font-size: 1rem;
	}
	.mobile-download{
		margin-top: .5em;
		font-weight: 400;
		text-align: center;
    color: var(--text1);
    line-height: 1.7;
    background: var(--bg2);
    width: 100%;
    display: flex;
		justify-content: center; align-items: center;
    padding: 1em .5em;
    border-radius: var(--radius);
	}
	.mobile-download b{
		font-weight: 700;
		color: var(--main);
	}
	.mobile-download em{
    color: var(--text2);
    font-size: .85em;
  }
	.lightbox > .inner{
		padding: .5rem;
		max-width: 90vw;
		max-height: 70vh;
		box-shadow: none;
	}
  .news{
    margin-top: 2em;
    padding: var(--margin) 0 0;
  }
  .news ul{
    position: static;
    height: unset;
  }
  .news-date{
    display: unset;
  }
  :is(.about-1, .about-2, .about-3) .section-content{
    grid-template-areas: "figure" "desc" "list";
    grid-template-columns: unset;
  }
  .about-text strong{
    text-align: center;
  }
  .download-links{
    justify-content: center;
  }
  .footer-group{
    font-size: .6rem;
  }
  .footer-group strong{
    font-size: .8rem;
  }
  .footer-2 img{
    width: 2rem;
    margin: .5em auto;
  }
}