*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 13px;
	--color-text: #fff;
	--color-bg: #2a2a2a;
	--color-link: rgba(255,255,255,0.5);
	--color-link-hover: #f8c5dc;
	--color-bg-slide: #171719;
	--gradient: linear-gradient(135deg, rgba(0, 255, 231, 1) 0%, rgba(25, 251, 208, 1) 8.99%, rgba(147, 231, 98, 1) 54.51%, rgba(225, 218, 27, 1) 85.73%, rgba(255, 213, 0, 1) 100%);
  	--body-bg: linear-gradient(-135deg,#8800ce 0%, #160c23 100%);
  	--body-modal-bg: linear-gradient(-135deg,#160c23 0%, #8800ce 100%);
  	--gradient-text: linear-gradient(90deg,#d600e9 0%, #f600ff 100%); background-clip: text;
  	--color-shape: rgbA(86, 40, 113 ,54%);
  	--button-bg:linear-gradient(180deg, #ff00f0 0%, #9e0d80 100%);
  	--light-fx-gradient-reverse:radial-gradient( circle farthest-corner at 101.17% 49.46%,, rgba(154, 3, 252, 1) 0%, rgba(146, 13, 221, 0.74) 25.61%, rgba(131, 32, 166, 0.24) 75.71%, rgba(125, 39, 145, 0) 100%);;
  	--light-fx-gradient:radial-gradient( circle farthest-corner at 271.17% 49.46%,rgba(154, 3, 252, 1) 0%, rgba(146, 13, 221, 0.74) 25.61%, rgba(131, 32, 166, 0.24) 75.71%, rgba(125, 39, 145, 0) 100%)

}

body{
	background-image: linear-gradient(-134deg, #8800ce, #160c23), url(/img/bg/lg.webp);
	font-family: 'Display';
}

body.modal__open{
	background-image: url(/img/bg/lg-reverse.png);
}



@media(max-width:768px){
	

	body{
		background-image: url(/img/bg/sm.webp), linear-gradient(-134deg, #8800ce, #160c23);
	}
	body.modal__open{
		background-image: url(/img/bg/sm-reverse.png);
	}


}

.tag-line{
	font-size: clamp(1rem, 4vh, 1.8rem);
	transform: rotate(347deg) skew(344deg);
}

#landing .headline h1:first-child{
	text-align: left;
}


.gradient-fill{
	background: var(--gradient-text);
	background-clip: text;
    -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
}

.cta{
	background: var(--button-bg);
	font-family: 'body';
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
}

#slides {
	overflow: hidden;
	display: grid;
	grid-template-rows: 100%;
	grid-template-columns: 100%;
	place-items: center;
	width: 100%;
	height: 100%;
}

.slide {
	width: 100%;
	height: 100%;
	grid-area: 1 / 1 / -1 / -1;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
	position: relative;
	display: grid;
	place-items: center;
	will-change: transform, opacity;
}

.slide__cta__button
{
	background: var(--button-bg);
	height: 2rem;
	color: #37052c;
	font-weight: 600;
}

.slide__desc{
	font-family: 'body';
} 

@media(max-width:768px){
	#works .slide__img>div{
		background-size: auto 88%;
	    height: 82%;
	    top: 0;
	}
}

.slide .headline{
	line-height: .75;
	text-shadow: 4px 6px 14px #160c23;
}


.slide .slide__text--hidden h1{
	opacity: 0;
}

.slide .slide__img--hidden{
	opacity: 0;
}

.slide--current {
	pointer-events: auto;
	opacity: 1;
}

.slide .headline h1{
	font-size: clamp(4.5rem, 18vw, 12rem);
}

.more__slide--title{
	font-size:clamp(2.5rem, 6vw, 6rem);
	transform: rotate(-7deg) skewX(347deg);
	color: white;
	width: fit-content;
	display: flex;
	align-items: center;
	text-align: center;
}

.more__slide--img-wrapper{
/*	background: url(/img/phone2.png);*/
    background-size: 71%;
    background-position: center;
    background-repeat: no-repeat;
}

@media(max-width:768px){
	.more__slide--img-wrapper{
		background-size: 48.5%;
	}
}
/*#slides:before{
	position:absolute;
	left: 0;
	top: 0;
	content:'';
	height:100%;
	width:100%;
	background-image:url(/img/bg/sm/lightfx.png);
	mix-blend-mode:screen; 
	background-size: cover;
	background-position: center;
}*/
@media(max-width:440px){
	#landing .img, #landing .img-shadow{
		transform: scale(1.2);
		top: 14%;
	}
}

@media (min-width: 768px) {
	#works .slide__shadow{
		transform: translate(-18%, 10%) !important;
	}
	/*#slides:after{
		background-image:url(/img/bg/lightfx.png) 
	}*/
}


/*#contact .slide__img{
	transform:none !important;
}*/


.deco {
	position: absolute;
}

.deco--bg {
	overflow: hidden;
	opacity: 0;
	background-image: url(/img/bg/noise1.png);
	position: absolute;
	height: 300%;
	width: 300%;
	left: -100%;
	top: -100%;
	animation-name: grained;
	animation-iteration-count: infinite;
	animation-duration: 0.5s;
	animation-timing-function: steps(20, end);
	transition: opacity 0.3s;
}

.deco--bg-vert {
	background-image: url(/img/bg/noise2.png);
}

@keyframes grained {
	0% { transform: translate(-10%, 10%); }
	10% { transform: translate(-25%, 0%); }
	20% { transform: translate(-30%, 10%); }
	30% { transform: translate(-30%, 30%); }
	40% { transform: translate(0%,0%); }
	50% { transform: translate(-15%, 10%); }
	60% { transform: translate(-20%, 20%); }
	70% { transform: translate(-5%, 20%); }
	80% { transform: translate(-25%, 5%); }
	90% { transform: translate(-30%, 25%); }
	100% { transform: translate(-10%, 10%); }
}

.deco--shape {
	opacity: 0;
	background: var(--color-shape);
	transform-origin: 50% 50%;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 0.15s;
	animation-timing-function: linear;
}

.deco--shape-hor {
	left: 0;
	width: 100vw;
	transform: scale3d(1,0.2,1);
	animation-name: vibrateHorizontal;
}

.deco--shape-ver {
	top: 0;
	height: 100vw;
	transform: scale3d(0.2,1,1);
	animation-name: vibrateVertical;
}

.deco--shape-1 {
	animation-delay: 0.05s;
}

@keyframes vibrateHorizontal {
	0% { transform: scale3d(1,0.2,1); }
	100% { transform: scale3d(1,1,1); }
}

@keyframes vibrateVertical {
	0% { transform: scale3d(0.2,1,1); }
	100% { transform: scale3d(1,1,1); }
}

.deco--shape-hor.deco--shape-1 {
	bottom: 40vh;
	height: 10vh;
}

.deco--shape-hor.deco--shape-2 {
	bottom: 10vh;
	height: 20vh;
}

.deco--shape-ver.deco--shape-1 {
	width: 5vw;
	left: 15vw;
	height: 100%;
}

.deco--shape-ver.deco--shape-2 {
	width: 15vw;
	left: 25vw;
	height: 100%;
}

.show-deco #deco-hor .deco {
	opacity: 1;
}

.show-vert-deco #deco-vert .deco {
	opacity: 1;
}



.content__thumbs {
/*	grid-gap: 2vw;*/
    justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    top: 0;
}

.content__thumbs-item {
	width: 35%;
	aspect-ratio: 1.5;
	border-radius:10%;
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .4;
}

@media(max-width:768px){
	.content__thumbs-item {
		width: 75%;
	}
}

.active.content__thumbs-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 120%;
    border: 1px solid white;
    top: -10%;
    border-radius: 20%;
}

.unbutton {
    font: inherit;
    fill: currentColor;
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
    align-items: center;
    margin: 0;
    padding: 0;
    display: flex;
}

.content-open .action {
    visibility: visible;
    pointer-events: auto;
}

.action--back {
    grid-area: back;
    justify-self: start;
    padding: 1rem 0;
}
.action {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.active.content__thumbs-item{
	transform: scale(1.3);
	opacity: 1;
}

.article__header .article__title, .article__number{
	font-size: clamp(3rem, 6.5vw, 5.5rem);
    font-weight: 400;
}

.article__wrap{
	width: 90%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 18%;
    align-items: center;
    position: relative;
}

#more__works{
	width: 94%;
    align-items: center;
    height: 90%;
    display: flex;
    justify-content: space-around;
}

.article__description{
	text-shadow: 2px 4px black;
}

.modal__open .slide__current{
	filter: blur(25px);
}

#more{
	display: flex;
    justify-content: center;
    align-items: center;
}

@media(max-width:768px){
	#more__works {
	    flex-direction: column;
	    align-items: center;
	    overflow: hidden;
        overflow-y: scroll;
	}
}

.more__item{
	background: rgba(7, 1, 10, .36);
    backdrop-filter: blur(28px);
    width: 94%;
    height: 86%;
    border-radius: 37px;
    box-shadow: 28px 62px 37px 12px #0000006e;
    border: 1px solid #ffffff69;
    display: flex;
}

.svg {
  position: absolute;
  width: 0;
  height: 0;
}
.clipped-card {
/*  background: linear-gradient(90deg, #401669 0%, #7227BC 45.16%, #9C7ABC 100%);*/
  background: linear-gradient(90deg, #401669 0%, #7227BC 45.16%, #5a2dae 100%);
  -webkit-clip-path: url(#card-clip-path);
  clip-path: url(#card-clip-path);
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.clipped-card::before{
	content: '';
    position: absolute;
    height: 70%;
    width: 90%;
    background-image: url(/img/card-overlay.png);
    mix-blend-mode: screen;
    background-size: cover;
    background-position: center;
    top: -10%;
    z-index: -1;
    opacity: .5;
}

.clipped-button {
  background: #ac02b6;
  -webkit-clip-path: url(#button-clip-path);
  clip-path: url(#button-clip-path);
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 6% !important;
  max-height: 75px;
  min-height: 60px;
}

.clipped-button::before{
	content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(/img/card-overlay.png);
    mix-blend-mode: screen;
    background-size: cover;
    background-position: center;
    top: -20%;
    z-index: -1;
    opacity: .8;
}

@media(min-width:768px){
	.clipped-button {
		height: 111px;
	    max-height: unset;
	    width: 200px !important;
	}
}

.more__slide--paragraph{
	filter: drop-shadow(0px 25px 32px rgba(0, 0, 0, 0.3));
}

.more__slide--paragraph::before{
	content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('/img/dashed.png');
    mix-blend-mode: screen;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    transform: rotate(-7deg);
    left: 2%;
}

#about__paragraph img{
	height: 3rem;
}

.about__page .more__slide--paragraph::before{
	all: unset;
}

.arrow:before {
    content: '';
    position: absolute;
    height: 36%;
    width: 100%;
    transform: rotate(191deg);
    background: url(/img/arrow.png);
    left: -25%;
    top: 22%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.more__slide{
	opacity: 1;
}

.modal__open #more .more__slide.slide--current{
	opacity: 1;
}

.modal__open #more{
	z-index: 3;
}

#close__modal, #more__slides--nav{
	opacity: 1;
}

#loading-text{
	top: 50%;
	left: 40%;
	animation: loading-text .4s linear infinite;
}

body.loading .slide__img, body.loading .slide__text{
	opacity: 0;
}

body.loading .show-vert-deco{
	opacity: 1;
}

@keyframes loading-text {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -3px) rotate(-1deg);
  }
  20% {
    transform: translate(-2px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 3px) rotate(-1deg);
  }
  60% {
    transform: translate(-1px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-2px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}