/*

	Designed with love, coded with passion
		
	            	 ________  ___  ___  _______   ___  ___  __    ___  ___     
	            b   |\   ____\|\  \|\  \|\  ___ \ |\  \|\  \|\  \ |\  \|\  \	
	             y  \ \  \___|\ \  \\\  \ \   __/|\ \  \ \  \/  /|\ \  \\\  \	
	 _____    __  _  \ \_____  \ \   __  \ \  \_|/_\ \  \ \   ___  \ \   __  \	
	/\ '__`\ /\ \/'\  \|____|\  \ \  \ \  \ \  \_|\ \ \  \ \  \\ \  \ \  \ \  \	
	\ \ \L\ \\/>  </    ____\_\  \ \__\ \__\ \_______\ \__\ \__\\ \__\ \__\ \__\
	 \ \ ,__/ /\_/\_\  |\_________\|__|\|__|\|_______|\|__|\|__| \|__|\|__|\|__|
	  \ \ \/  \//\/_/  \|_________|                                            
	   \ \_\ 	
	    \/_/	                                        
                               

	 © 2023 adamek.design 

*/

/* –––––––––––––––––––––––––––– */
/*            I N I T           */
/* –––––––––––––––––––––––––––– */

@import 'setup/css/reset.css';
@import 'setup/css/boot.css';

@import 'setup/css/home.css';
@import 'setup/css/logos.css';
@import 'setup/css/webs.css';
@import 'setup/css/uiux.css';
@import 'setup/css/web3.css';
@import 'setup/css/books.css';

@import 'setup/css/switchboard.css';

:root {
	--logo: var(--ak);
	--logoFill: var(--akC);

	/*--pink: #fb99f9;*/
	--peach: #F4D6BE;
	--pink: #FF7DFC;
	--black: #121212;
	--white: #FFFFFF;

	--headerDrop: 55px;
	--contentGap: 34px;
	--baseLH: 15px;

/*	--headerHeight: calc(var(--headerDrop) + 3* var(--baseLH) + 3* var(--contentGap));*/

	--lineHeight: 28px;
	--backgroundColor: var(--white);
	--textColor: var(--black);
	--textColorHL: var(--pink);
	--textColorBO: var(--black);

	--fontSize: 13px;
}

.jsOnly {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}

html, body {
	height: 100%;
	width: 100%;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: 'Courier New', 'Courier', monospace;
	font-size: var(--fontSize);
	background-color: var(--backgroundColor);
}

span[lang] {
	font-size: inherit;
	font-weight: inherit !important;
	text-decoration: inherit;
	color: inherit;
	cursor: inherit;
}

h1, label.h1 {
	letter-spacing: .34px;
	font-weight: bold;
	color: var(--textColorBO);
}

nav, p {
	line-height: var(--lineHeight);
}

.inline {
	display: flex;
	flex-direction: row;	
}


/* –––––––––––––––––––––––––––– */
/*          C U R S O R         */
/* –––––––––––––––––––––––––––– */

a, label:not(.h1), .stand,
input[name='scene']#home-switch:not(:checked) ~ header .signLayer,
input[name='scene']#home-switch:not(:checked) ~ header .h1 {
	cursor: pointer;
}
.book-showcase > div > div {
	cursor: zoom-in;
}
.full-screen, .full-tab .stand {
	cursor: zoom-out;
}
header, nav, h1, label.h1, a, .uiux-showcase, .book-showcase, p.tittle {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* –––––––––––––––––––––––––––– */
/*         Z - I N D E X        */
/* –––––––––––––––––––––––––––– */

.full-tab {
	z-index: 1;
}
nav {
	z-index: 2;
}
aside {
	z-index: 3;
/*	z-index: 5;*/
}
header > nav.verse,
header > .inline,
header > .h1 {
	z-index: 4;
}
.full-screen {
	z-index: 5;
}
#preLoader {
	z-index: 10;
}


/* –––––––––––––––––––––––––––– */
/*         A N I M A T E        */
/* –––––––––––––––––––––––––––– */

article, .tab, .device, .web3-showcase, .book-showcase, iframe {
	animation: show-up forwards 800ms ease-in-out
}


/* –––––––––––––––––––––––––––– */
/*       p r e L O A D E R      */
/* –––––––––––––––––––––––––––– */

#preLoader {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: var(--backgroundColor);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#percent {
	/*color: var(--peach);*/
}
#bar {
    width: 60%;
    margin-top: 20px;
    /*background-color: var(--peach);*/
}
#barconfrm {
    width: 1%;
    padding: 1px 0px;
    background-color: var(--textColorHL);
}


/* –––––––––––––––––––––––––––– */
/*             C U T            */
/* –––––––––––––––––––––––––––– */

header,
.scene > nav > ol,
.subscene > nav,
.absCenter > article {
	width: calc(100% - 50px);
}
@media (min-width: 450px) {
	header,
	.scene > nav > ol,
	.subscene > nav,
	.absCenter > article {
		min-width: 400px;
		width: 30%;
	}
}




/*main#stage > .scene#logo > .subscene#logo-00-scene .inline {
	width: 980px;
}*/


/*p, h1, label.h1, label, a {
	color: var(--textColor);
}*/


/* –––––––––––––––––––––––––––– */
/*          H E A D E R         */
/* –––––––––––––––––––––––––––– */

header {
	display: flex;
	flex-direction: column;
/*	line-height: var(--baseLH);*/
}

header > nav.verse {
	display: flex;
	justify-content: flex-end;
}

header > nav.verse,
header > .inline {
	align-items: flex-end;
	background-color: var(--backgroundColor);
}
header > nav.verse:first-of-type {
	height: calc(5vw + var(--baseLH));
}
@media (min-width: 600px) {
	header > nav.verse:first-of-type {
		height: calc(var(--headerDrop) + var(--baseLH));
	}
}
header > .inline {
	height: calc(var(--contentGap) + var(--baseLH));
	justify-content: space-between;
}
header > .inline > label#sign {
	height: 80%;
	aspect-ratio: 2813 / 1680;
	position: relative;
}
@media (min-width: 600px) {
	header > .inline > label#sign {
		height: 69%;
	}
}
header > .inline > label#sign > .signLayer {
	position: absolute;
	width: 100%;
	height: 100%;
}
header > .inline > label#sign > .signLayer#signCurve {
	background: center / contain no-repeat var(--logo);
}
header > .inline > label#sign > .signLayer#signColor {
	background: center / contain no-repeat var(--logoFill);
	animation: show-up forwards 800ms ease-in-out
}

input[name='scene']#home-switch:not(:checked) ~ header > .inline > label#sign > .signLayer#signColor {
	animation: hide-it forwards 500ms ease-in-out;
}

input[name='scene']#home-switch:not(:checked) ~ header > .inline > label#sign:hover > .signLayer#signColor {
	animation: show-up forwards 500ms ease-in-out
	/*background: center / contain no-repeat var(--akC)*/
}


header > label.h1 {
	padding-top: var(--contentGap);
	margin-bottom: var(--contentGap);
	background: linear-gradient(
		to bottom,
		var(--backgroundColor), 
		transparent
	);
}
header > label.h1 > span.pink {
	color: var(--pink);
	font-weight: bold;
}


/* –––––––––––––––––––––––––––– */
/*          S T I C K Y         */
/* –––––––––––––––––––––––––––– */

.scene > nav,
.subscene > nav {
	position: sticky;
}
.scene > nav {
	top: 0;
/*	top: var(--lineHeight);*/
}
.subscene#web3-00-scene > nav {
	top: calc(2 * var(--lineHeight))
/*	top: calc(var(--lineHeight) + 2 * var(--lineHeight))*/
}

aside {
	position: fixed;
/*	top: 25px;*/
	right: 25px;
	line-height: var(--lineHeight)
}
@media (min-width: 450px) {
	aside {
		right: min(calc(50% - 375px / 2), calc(50% - 30% / 2));
/*		top: var(--lineHeight);*/
/*		right: var(--lineHeight);*/
	}
}

aside > label,
.scene > nav > ol > li > label,
.scene > nav ol ol > li > label > a,
.scene > nav ol ol > li > label:before,
.subscene > nav > ol > li:before,
.subscene > nav > ol > li > a,
nav .dots > label:before {
	background-color: var(--backgroundColor);
}
/*.scene > nav {
	background-color: rgba(255, 255, 255, .1);
	backdrop-filter: blur(6px);
}*/



/* –––––––––––––––––––––––––––– */
/*          F O O T E R         */
/* –––––––––––––––––––––––––––– */

/*aside > label,*/
footer > nav.verse {
	display: flex;
	line-height: calc(var(--baseLH));
/*	padding: 0 6px;*/
}



footer {
	position: fixed;
	bottom: calc(var(--lineHeight));
	right: calc(var(--lineHeight));

	height: calc(2* var(--lineHeight) + var(--baseLH));

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;

	z-index: 10;
}

footer > nav.verse {
	background-color: var(--backgroundColor)
}
/*aside > label:before,
footer > nav.verse:before {
	content:'\00a0 ';
}*/

@media (min-width: 450px) {
/*	footer {
		position: fixed;
	}*/

}


/* –––––––––––––––––––––––––––– */
/*   S T A G E  &  S C E N E s  */
/* –––––––––––––––––––––––––––– */

main#stage, .scene, .subscene {
	width: 100%;
	position: relative;
}
main#stage, .subscene {
	height: 100%;
}
.scene {
	height: auto;
	min-height: 100%;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	/*background-color: rgba(238, 130, 238, 0.5);*/
}
.scene > nav {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.scene > .subscene {
	max-width: 100vw;
	/*background-color: rgba(138, 130, 238, 0.5);*/
}

.absCenter {
	min-height: 100%;
	width: 100%;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/*background-color: rgba(106, 90, 205, 0.5);*/
}
.absCenter.uiux-showcase {
	padding-top: var(--contentGap);
	min-height: calc(100% - var(--contentGap));
}
.absCenter.logo-showcase {
	padding: var(--contentGap) 0;
	min-height: calc(100% - 2* var(--contentGap));
}
.absCenter > article {
	padding-bottom: var(--contentGap);
}





/* –––––––––––––––––––––––––––– */
/*       S E T U P  N A V       */
/* –––––––––––––––––––––––––––– */

nav.verse > ol {
	display: flex;
	flex-direction: row;
	gap: 8px;
	padding-left: 8px;
}
nav.verse > ol > li:not(:last-of-type):after {
	content: ' |';
}
nav.verse > ol > li > label {
	font-weight: normal;
}
nav.verse > ol > li > label:hover {
	color: var(--textColorHL);
}
input[name='language']#pl-PL:checked ~ header > nav.verse#lang > ol > li > label[for='pl-PL'],
input[name='language']#en-US:checked ~ header > nav.verse#lang > ol > li > label[for='en-US'],
input[name='mode']#light:checked ~ header > nav.verse#mode > ol > li > label[for='light'],
input[name='mode']#dark:checked ~ header > nav.verse#mode > ol > li > label[for='dark'],
input[name='language']#pl-PL:checked ~ footer > nav.verse#lang > ol > li > label[for='pl-PL'],
input[name='language']#en-US:checked ~ footer > nav.verse#lang > ol > li > label[for='en-US'],
input[name='mode']#light:checked ~ footer > nav.verse#mode > ol > li > label[for='light'],
input[name='mode']#dark:checked ~ footer > nav.verse#mode > ol > li > label[for='dark'] {
	color: var(--textColorHL);
	font-weight: bold;
	pointer-events: none;
	/*cursor: default;*/
}	


/* –––––––––––––––––––––––––––– */
/*            N A V s           */
/* –––––––––––––––––––––––––––– */

nav > ol > li > label {
	font-weight: bold;
	color: var(--textColorBO)
}
nav > ol > li > label:before {
	font-weight: normal;
}
nav#navMenu > ol > li > label:before {
	content: '∥ —— ';
}
nav#navMenu > ol > li > label.init:before {
	content: '⤴ ';
}
nav#navMenu > ol > li > label.initTouch:before {
	content: '⤶ ';
}
nav#navMenu > ol > li > label.out:before {
	content: '↗ ';
}
nav#navMenu > ol > li > label.mailto:before {
	content: '⇾ ';
}
nav#navMenu > ol > li > label > a {
	font: inherit;
	color: inherit;
}
nav#navMenu > ol > li:nth-of-type(2),
nav#navMenu > ol > li:nth-last-of-type(2) {
	margin-top: var(--lineHeight);
}
.scene nav > ol > li > label:before {
	content: '↵ —— ';
}
nav#navMenu > ol > li > label:hover,
.scene nav > ol > li > label:hover:before {
	color: var(--textColorHL);
}

nav > ol ol > li {
	margin-left: 38px;
}
.scene nav > ol ol > li {
	display: flex;
	justify-content: space-between;
}
nav#navMenu > ol ol > li:before,
.scene nav > ol ol > li > label:before {
	content: '∟ ';
	/*content: '∟ − ∷ ⊢ ⋯ ☞ ↩ ← ↵ ⇜ ⇦ ⤶ ↯  ≡ ∣ ∥——— ↯ * —➔  —— ➔➚ ◹';*/
}
nav#navMenu > ol ol > li:hover:before {
	color: var(--textColorHL);
}

nav#navMenu > ol ol > li > a:hover,
.scene nav > ol ol > li > label > a:hover {
	border-bottom: .5px solid;
}





/* –––––––––––––––––––––––––––– */
/*     F U L L  S C R E E N     */
/* –––––––––––––––––––––––––––– */

.full-tab, .full-screen {
	inset: var(--inset);
	width: var(--width);
	height: var(--height);
	/*background:rgba(155, 55, 255, .3);*/
}


/* –––––––––––––––––––––––––––– */
/*     F U L L  S C R E E N     */
/* –––––––––––––––––––––––––––– */
/*           L O G O s          */
/* –––––––––––––––––––––––––––– */

.full-tab {
	position: absolute;
	animation: go-full-tab forwards 800ms ease-in-out;
}
.shrink-tab {
	animation: go-full-tab reverse backwards 400ms ease-in-out !important;
}
.hide-tab {
	animation: hide-it forwards 400ms ease-in-out;
}
.show-tab {
	animation: show-up forwards 1000ms ease-in-out !important;
}
@keyframes go-full-tab {
	from {
		inset: var(--inset);
		height: var(--height);
		width: var(--width);
	}
	to {
		inset: 0;
		width: var(--fullTabWidth);
		height: var(--fullTabHeight);
		top: max(
			 	calc((100% - var(--fullTabHeight))/2), 
			 	calc(var(--contentGap))
			 );
		left: calc((100% - var(--fullTabWidth))/2);
		/*background-color: aqua;*/
	}
}
@keyframes hide-it {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes show-up {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* –––––––––––––––––––––––––––– */
/*     F U L L  S C R E E N     */
/* –––––––––––––––––––––––––––– */
/*           B O O K s          */
/* –––––––––––––––––––––––––––– */

.full-screen {
	position: fixed;
	animation: go-full-screen forwards 400ms ease-in-out;

  	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.shrink-down {
	animation: go-full-screen reverse backwards 400ms ease-in-out !important;
}

@keyframes go-full-screen {
	from {
		inset: var(--inset);
		width: var(--width);
		height: var(--height);
	}
	to {
		inset: 0;
		width: 100%;
		height: 100%;
	}
}