@layer reset, init;

@import url('/core/components/header.css');
@import url('/core/components/footer.css');
@import url('/core/components/layouts/what_we_do.css');
@import url('/core/components/layouts/how_we_do.css');
@import url('/core/components/layouts/what_we_did.css');
@import url('/core/extensions/swiper.css');

@layer reset {
	*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}

	html {line-height: 1.5; text-size-adjust: none; -webkit-text-size-adjust: none; color-scheme: light dark; interpolate-size: allow-keywords;}

	body {min-block-size: 100svh; -webkit-font-smoothing: antialiased;}

	input, button, textarea, select {font: inherit;}

	h1, h2, h3, h4, h5, h6 {text-wrap: balance;}
	p, li, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
	p {text-wrap: pretty;}

	img, picture, video, canvas, svg {display: block; max-width: 100%; height: auto;}
}
@layer init {
	ol, ul {list-style-type: none;}
	dfn, strong, address {font-style: initial;}
	hr {all: initial;}
}

@font-face {font-family: 'default'; src: url('/core/default.ttf'); font-variation-settings: 'wght' 400;}

/*Global*/
html {font-family: 'default', sans-serif; line-height: 1.125; scroll-behavior: smooth;}
body {background: #202020; color: #f0f0f0;}
main {overflow-x: clip;}
section:has(#what_we_do) {background: #202020;}

h1, h2, h3, h4 {font-variation-settings: 'wght' 800; text-transform: uppercase;}
h1 {font-size: 2rem;}
h2, h3 {font-size: 4rem;}
h4 {font-size: 4rem;}

p, li, a, span, figcaption {font-size: 1.5rem;}
p:not(p:last-of-type) {margin-bottom: 2rem;}
a {text-decoration: none; color: #f0f0f0; font-variation-settings: 'wght' 400; &, &::before, &::after {transition: 0.5s;} &:hover {color: #f0c090;}}

strong {font-variation-settings: 'wght' 800; text-transform: uppercase;}

mark {display: inline-block; height: 1.75rem; background: linear-gradient(0deg, #f0c090 0.125rem, transparent 0.125rem); color: #f0f0f0;}

audio {display: none;}

hr {background: #f0c090; width: 100%; height: 0.0625rem;}

/*Custom*/
.meta {display: none;}

#load {
	position: fixed; top: 0%; left: 0%; z-index: 4; width: 100%; height: 100%; background: #202020 url('/media/brand/ru/logo_animated.svg') no-repeat center 25% / 50%; text-align: center;
	& > span {
		position: absolute; transform: translateX(-50%);
		&:first-of-type {bottom: 37.5%; font-size: 2rem; font-variation-settings: 'wght' 800; letter-spacing: 1ch; text-transform: uppercase;}
		&:last-of-type {
			bottom: 12.5%; cursor: pointer; color: #f0c090; border-bottom: 0.0625rem solid #f0c090; transition: 0.5s;
			&:hover {border-bottom: 0.0625rem solid #f0f0f0; color: #f0f0f0;}
		}
	}
}

#progress {position: fixed; top: 0%; left: 0%; z-index: 3; width: 0%; height: 0.25rem; background: #f0c090; transition: 0.01s;}

#top {
	display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; padding: 4rem 25%; overflow: clip;
	& > img:first-of-type {width: 100%;}
	& > h1 {margin-top: 4rem;}
	& > a[href="#about"] {
		position: absolute; left: 50%; bottom: 4rem; transform: translateX(-50%); text-transform: uppercase; text-align: center; letter-spacing: 1ch; font-size: 1.25rem; font-variation-settings: 'wght' 600;
		&::after {
			content: ''; width: 1.5rem; aspect-ratio: 1/1; background: url('/media/icon/stat_3.svg') center no-repeat; position: absolute; left: 50%; transform: translateX(-50%) rotate(180deg); margin-top: 2.25rem;
		}
	}
	& > .swiper {
		position: absolute; top: 0%; left: 0%; z-index: -1; width: 100%; height: 100%;
		& > .swiper-track {
			height: 100%;
			& img {width: 100%; height: 100%; object-fit: cover;}
		}
	}
}

#about {
	background: #f0f0f0; color: #202020; padding: 4rem 25%; perspective: 1rem;
	& > h2 {border-bottom: 0.125rem solid #f0c090; padding-bottom: 1rem; margin-bottom: 2rem;}
	& > p {text-align: justify;}
	& > img {width: 100%;}
}

#our_credo {
	display: grid; gap: 2rem; grid: 'h p_1' 'p_2 ul'; padding: 4rem 18.75%; background: #f0f0f0; color: #202020;
	& > h2 {grid-area: h;}
	& > p:first-of-type {grid-area: p_1; margin: auto;}
	& > p:last-of-type {grid-area: p_2;}
	& > ul {
		grid-area: ul;
		& > li {
			&:not(&:last-of-type) {margin-bottom: 0.75rem;}
			&::before {position: relative; top: 0.25rem; margin-right: 0.75rem; display: inline-block; content: ''; width: 1.5rem; aspect-ratio: 1/1; background: url('/media/icon/check.svg');}
		}
	}
}

/*AOS*/
hr.aos {width: 0%; margin: auto; &.active {width: 100%;}}
h2.aos {transform: scale(0.5); transform-origin: left bottom; &.active {transform: scale(1);}}
#about > img.aos {transform: rotateX(67.5deg); transform-origin: bottom; &.active {transform: rotateX(0deg);}}

/*Rule*/
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;}}
@media (orientation: landscape) {
	h1 {font-size: 2.25rem;}
	h2 {font-size: 6rem;}
	h3 {font-size: 4rem;}
	#load {background: #202020 url('/media/brand/ru/logo_animated.svg') no-repeat center 25% / 12.5%;}
}
@media (orientation: portrait) {
	#top, #about, #our_credo {padding: 4rem 2rem;}
	#our_credo {grid: 'h' 'p_1' 'ul' 'p_2'; & > * {margin: initial !important;}}
}