@charset "UTF-8";
/** @author ivanmoreno @ivanmoreno_xyz **/

@font-face {
    font-family: 'archiamedium';
    /* src: url('archia-medium-webfont.eot');
    src: url('archia-medium-webfont.eot?#iefix') format('embedded-opentype'), */
    src: url('./fonts/archia-regular-webfont.woff2') format('woff2'),
         url('./fonts/archia-medium-webfont.woff') format('woff'),
         url('./fonts/archia-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

:root {
	--title-text-color: #707070;
	--color-0: #60a7bd;
	--color-1: #a1602b;
	--color-2: #3b5278;
	--text-color: #ffffff;
	--main-bg-color: #445561;
}

html, body {
	margin: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	touch-action: none;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: fixed;
    background: #445561;
	/* background: #3E1E68; */
	/* background-image: linear-gradient( to bottom right, #3A6073, #16222A ); */
	font-family: 'Abel', sans-serif;
}

#wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background-color: #445561;
}

#viewport3d {

	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	/* right: 0px; */
	left: 0px;

}

#progressBG {
	width: 100%;
	height: 100%;
	position: fixed;
	/* Above every piece of app chrome, so the loading screen actually covers
	   the editor it is standing in front of: the UIL panels are z-index 10,
	   the docked timeline 800 and the AI prompt bar 850. At 15 this sat UNDER
	   all of them and the prompt bar showed through - it only looked covered
	   while .background above it was an opaque sheet, and that sheet had to
	   lose its colour to stop tinting the screen grey. Stays under #loading
	   ( 1001 ), which is the loader's own content.

	   Covering it also blocks it: this div takes the pointer events, so the
	   prompt cannot be typed into before the app is ready to answer. */
	z-index: 1000;
	opacity: 1.0;
	/* Painted from UIConstants.PALETTES.guiLayerZeroColor by UILoadingScreen,
	   so the loading screen and the GUI cannot drift apart. */
	display: block;
}

#progress {
	position: relative;
	z-index: 16;
}

#progress img {
	position: absolute;
	z-index: 17;
}

.loading {
	position: fixed;
	z-index: 1001;
	top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	/* opacity: 0.0; */
	display: block;
}


/* Loading screen only - the word sits BELOW the diamond, clear of it. The
   diamond's bottom vertex is at +170 ( half-diagonal ) and the stroke is ~7px
   either side of that, so +206 leaves the word's top edge a comfortable ~19px
   under the point. Inside the diamond it had to be small and tucked under the
   logo; out here it can carry the wide tracking that makes a single word read
   as a label rather than as text someone forgot to style. */
.title {
	position: fixed;
	/* A tint of the GUI's own blue-grey rather than a flat neutral, so it
	   belongs to the palette the screen is painted in. */
	color: #9fb0bc;
	top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, calc( -50% + 206px ) );
	-moz-transform: translate( -50%, calc( -50% + 206px ) );
	-ms-transform: translate( -50%, calc( -50% + 206px ) );
	-o-transform: translate( -50%, calc( -50% + 206px ) );
	transform: translate( -50%, calc( -50% + 206px ) );
	text-align: center;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.42em;
	/* Tracking also adds a gap AFTER the last letter, which drags a centred
	   word visually left by half of it. Putting the same amount back as an
	   indent re-centres it optically. */
	text-indent: 0.42em;
}

/* .chapter {
	position: absolute;
	color: #aaaaaa;
	top: 53.5%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	text-align: center;
	font-size: 2.2em;
} */

.gui-container {
	width: 320px;
	height: 100vh;
	background-color: #445561;
	position: fixed;
	left: 0%;
	top: 0%;
}

.gui-container-right {
	width: 320px;
	height: 100vh;
	background-color: #445561;
	position: fixed;
	right: 0%;
	top: 0%;
}

.logo-container {
	background-image: url('./assets/imaginova/gui/imaginava_logo_280x140.jpg');
	width: 280px;
	height: 140px;
	position: relative;
	left: 20px;
	top: 0px;
}


/* The loading screen is a stack centred on the viewport: the logo in the
   middle, the animated diamond under it, then the word. Each is positioned
   from the centre with its own offset rather than by flow, because .loading
   itself is a fixed, centre-translated box. */
.loading-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Sized to the diamond, not to the asset ( which is 280x140 ). A box
       centred in a diamond clears the stroke while half-width + half-height
       stays under the half-diagonal: 96 + 48 = 144 against 170, so ~26px of
       clearance at the logo's corners, which are its closest points to the
       stroke. The plate is opaque, so anything it overlapped it would erase -
       resize this whenever the SVG in UILoadingScreen changes. */
    width: 192px;
    height: 96px;
    /* The 2x asset drawn at 1x size, so it stays sharp on a Retina screen.
       Its baked-in background is the GUI's own #445561, so it sits on the
       loading screen with no visible edge. */
    background-image: url('./assets/imaginova/gui/imaginava_logo_560x280.jpg');
    background-size: 192px 96px;
    background-repeat: no-repeat;
    transform: translate( -50%, -50% );
}

.background {
    width: 100vw;
    height: 100vh;
    /* Deliberately unpainted. This sheet is the top layer of the loading
       screen ( inside #loading, z-index 1001 ), so whatever colour it carried
       WAS the loading screen - it used to be #363b40, a grey that matched
       nothing else in the app and sat over #progressBG rather than beside it.
       Left transparent so the one layer underneath shows through instead:
       #progressBG, painted from UIConstants.PALETTES.guiLayerZeroColor by
       UILoadingScreen. One source of truth for the colour, and it is the GUI's
       own. ( body is that colour too, so even an uncovered edge is right. ) */
    /* background-image: linear-gradient( to bottom right, #3A6073, #16222A ); */
}

.svgLoader {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Dead centre, framing the logo. No scale() - the SVG carries its own size
       ( see UILoadingScreen ) so the stroke keeps its weight. Rotated 45deg,
       its 240px square reads as a diamond 339px across, half-diagonal 170. */
    -webkit-transform: translate( -50%, -50% ) rotate(45deg);
            transform: translate( -50%, -50% ) rotate(45deg);
}

.stroke-still {
    stroke: #232323;
}

.stroke-animation {
    -webkit-animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
            animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-direction: normal;
            animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
            animation-play-state: running;
    -webkit-transform-origin: center center;
            transform-origin: center center;
}

@-webkit-keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@-webkit-keyframes stroke-color {
    /* Shades of ONE hue - the logo's own. The purple square in the wordmark
       measures rgb(147,38,254) = #9326fe = hsl( 270, 99%, 57% ), so the stop
       at 25% IS that colour and the rest are it darkened and lightened.
       Written as hsl() rather than hex so the relationship stays visible and
       the whole cycle re-tints by editing one number, the hue.

       The old cycle ran red -> green, snapped to blue -> white, and repeated,
       so the two hard jumps at 24/25 and 74/75 were colour changes between
       laps of the dash. With a single hue there is nothing to snap between,
       so this is one continuous loop, 100% returning to 0%. */
    0%   { stroke: hsl( 270, 85%, 30% ); }
    25%  { stroke: hsl( 270, 99%, 57% ); }
    50%  { stroke: hsl( 270, 100%, 80% ); }
    75%  { stroke: hsl( 270, 90%, 45% ); }
    100% { stroke: hsl( 270, 85%, 30% ); }
}

@keyframes stroke-color {
    /* Shades of ONE hue - the logo's own. The purple square in the wordmark
       measures rgb(147,38,254) = #9326fe = hsl( 270, 99%, 57% ), so the stop
       at 25% IS that colour and the rest are it darkened and lightened.
       Written as hsl() rather than hex so the relationship stays visible and
       the whole cycle re-tints by editing one number, the hue.

       The old cycle ran red -> green, snapped to blue -> white, and repeated,
       so the two hard jumps at 24/25 and 74/75 were colour changes between
       laps of the dash. With a single hue there is nothing to snap between,
       so this is one continuous loop, 100% returning to 0%. */
    0%   { stroke: hsl( 270, 85%, 30% ); }
    25%  { stroke: hsl( 270, 99%, 57% ); }
    50%  { stroke: hsl( 270, 100%, 80% ); }
    75%  { stroke: hsl( 270, 90%, 45% ); }
    100% { stroke: hsl( 270, 85%, 30% ); }
}

/* @-webkit-keyframes stroke-color {
    0%  { stroke: #3498DB; }
    24% { stroke: #643232; }
    25% { stroke: #327864; }
    49% { stroke: #327864; }
    50% { stroke: #32326e; }
    74% { stroke: #32326e; }
    75% { stroke: #78325a; }
    99% { stroke: #78325a; }
}

@keyframes stroke-color {
    0%  { stroke: #3498DB; }
    24% { stroke: #643232; }
    25% { stroke: #327864; }
    49% { stroke: #327864; }
    50% { stroke: #32326e; }
    74% { stroke: #32326e; }
    75% { stroke: #78325a; }
    99% { stroke: #78325a; }
} */

/*
	 Astrait loading animation from here till the bottom
*/

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	/* Was #030303, left over from the Astrait loader below. Being later in the
	   file it beat this stylesheet's own `html, body` rule at the top, so the
	   page sat near-black behind the loading screen. */
	background: var(--main-bg-color);
}
.svg-a {
	display: none;
}
.blobs {
	filter: url(#goo);
	width: 300px;
	height: 300px;
	position: relative;
	overflow: hidden;
	border-radius: 70px;
	transform-style: preserve-3d;
}
.blobs .blob-center {
	transform-style: preserve-3d;
	position: absolute;
	background: #d1d1d1;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	transform-origin: left top;
	transform: scale(0.9) translate(-50%, -50%);
	animation: blob-grow linear 3.4s infinite;
	border-radius: 50%;
	box-shadow: 0 -10px 40px -5px #d1d1d1;
}
.blob {
	position: absolute;
	background: #d1d1d1;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	animation: blobs ease-out 3.4s infinite;
	transform: scale(0.9) translate(-50%, -50%);
	transform-origin: center top;
	opacity: 0;
}
.blob:nth-child(1) {
	animation-delay: 0.2s;
}
.blob:nth-child(2) {
	animation-delay: 0.4s;
}
.blob:nth-child(3) {
	animation-delay: 0.6s;
}
.blob:nth-child(4) {
	animation-delay: 0.8s;
}
.blob:nth-child(5) {
	animation-delay: 1s;
}
@keyframes blobs {
	0% {
		opacity: 0;
		transform: scale(0) translate(calc(-330px - 50%), -50%);
   }
	1% {
		opacity: 1;
   }
	35%, 65% {
		opacity: 1;
		transform: scale(0.9) translate(-50%, -50%);
   }
	99% {
		opacity: 1;
   }
	100% {
		opacity: 0;
		transform: scale(0) translate(calc(330px - 50%), -50%);
   }
}
@keyframes blob-grow {
	0%, 39% {
		transform: scale(0) translate(-50%, -50%);
   }
	40%, 42% {
		transform: scale(1, 0.9) translate(-50%, -50%);
   }
	43%, 44% {
		transform: scale(1.2, 1.1) translate(-50%, -50%);
   }
	45%, 46% {
		transform: scale(1.3, 1.2) translate(-50%, -50%);
   }
	47%, 48% {
		transform: scale(1.4, 1.3) translate(-50%, -50%);
   }
	52% {
		transform: scale(1.5, 1.4) translate(-50%, -50%);
   }
	54% {
		transform: scale(1.7, 1.6) translate(-50%, -50%);
   }
	58% {
		transform: scale(1.8, 1.7) translate(-50%, -50%);
   }
	68%, 70% {
		transform: scale(1.7, 1.5) translate(-50%, -50%);
   }
	78% {
		transform: scale(1.6, 1.4) translate(-50%, -50%);
   }
	80%, 81% {
		transform: scale(1.5, 1.4) translate(-50%, -50%);
   }
	82%, 83% {
		transform: scale(1.4, 1.3) translate(-50%, -50%);
   }
	84%, 85% {
		transform: scale(1.3, 1.2) translate(-50%, -50%);
   }
	86%, 87% {
		transform: scale(1.2, 1.1) translate(-50%, -50%);
   }
	90%, 91% {
		transform: scale(1, 0.9) translate(-50%, -50%);
   }
	92%, 100% {
		transform: scale(0) translate(-50%, -50%);
   }
}


@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");


.center-center {
	position: fixed;
	right: 10px;
	bottom: 10px;
}
[class*="btn-glitch-"] {
	display: inline-block;
	font-family: "VT323", monospace;
	border: 1px solid #ababab;
	color: #ababab;
	padding: 5px 7px;
	margin-left: 5px;
	min-width: 105px;
	line-height: 1.5em;
	white-space: no-wrap;
	text-transform: uppercase;
	cursor: pointer;
}
[class*="btn-glitch-"] .text, [class*="btn-glitch-"] .decoration {
	display: inline-block;
}
[class*="btn-glitch-"] .decoration {
	display: inline-block;
	float: right;
}
[class*="btn-glitch-"]:hover, [class*="btn-glitch-"]:focus {
	animation-name: glitch;
	animation-duration: 0.2s;
	background-color: rgba(171, 171, 171, 0.7);
	color: black;
	border: 1px solid rgba(171, 171, 171, 0.7);
}
[class*="btn-glitch-"]:hover .text-decoration, [class*="btn-glitch-"]:focus .text-decoration {
	animation-name: blink;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
}
[class*="btn-glitch-"]:hover .decoration, [class*="btn-glitch-"]:focus .decoration {
	animation-name: blink;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
}
[class*="btn-glitch-"]:hover :before, [class*="btn-glitch-"]:focus :before {
	content: " ";
	width: 15px;
	border: 1px solid black;
	position: absolute;
	right: 25%;
	bottom: 3px;
	transform: rotate(35deg);
}
[class*="btn-glitch-"]:hover :after, [class*="btn-glitch-"]:focus :after {
	animation-name: shrink;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	content: " ";
	width: 75%;
	border: 1px solid black;
	position: absolute;
	left: 0;
	bottom: 5px;
}
[class*="btn-glitch-"]:active {
	background: none;
	color: rgb(253, 119, 2);
}
[class*="btn-glitch-"]:active .text-decoration {
	animation-name: none;
}
[class*="btn-glitch-"]:active .decoration {
	animation-name: none;
}
[class*="btn-glitch-"]:active :before, [class*="btn-glitch-"]:active :after {
	display: none;
}
@keyframes glitch {
	25% {
		background-color: red;
		transform: translateX(-10px);
		letter-spacing: 0.01em;
   }
	35% {
		background-color: green;
		transform: translate(10px);
   }
	59% {
		opacity: 0;
   }
	60% {
		background-color: blue;
		transform: translate(-10px);
		filter: blur(5px);
   }
	100% {
		background-color: rgb(50, 50, 20);
		blur: 5px;
   }
}
@keyframes blink {
	50% {
		opacity: 0;
   }
}
@keyframes shrink {
	100% {
		width: 10%;
   }
}