:root {
    
    --auroraColor0: rgb(255 0 0);
    --auroraColor1: rgb(0 255 0);
    --auroraColor1A12: color-mix(in srgb, var(--auroraColor1) 12, transparent );
    --auroraColor2: rgb(0 0 255);

    --auroraStreaks: repeating-linear-gradient( -65deg, var(--auroraColor1) 0px, transparent 50px, transparent 100px, var(--auroraColor1) 150px); 


    --bg0: #FFFFFF;
    --bg: color-mix(in srgb, var(--auroraColor1) 40%, var(--bg0) );
    --bgColor: color-mix(in srgb, #000000 70%, var(--bg) );

    --bgColor90: color-mix(in srgb, #000000 10%, var(--bgColor) );
    --bgColor80: color-mix(in srgb, #000000 20%, var(--bgColor) );
    --bgColor70: color-mix(in srgb, #000000 30%, var(--bgColor) );
    --bgColor60: color-mix(in srgb, #000000 40%, var(--bgColor) );
    --bgColor50: color-mix(in srgb, #000000 50%, var(--bgColor) );

    --bgColor110: color-mix(in srgb, #FFFFFF 10%, var(--bgColor) );
    --bgColor120: color-mix(in srgb, #FFFFFF 20%, var(--bgColor) );
    --bgColor130: color-mix(in srgb, #FFFFFF 30%, var(--bgColor) );
    --bgColor140: color-mix(in srgb, #FFFFFF 40%, var(--bgColor) );
    --bgColor150: color-mix(in srgb, #FFFFFF 50%, var(--bgColor) );
    
    --fireLight1: #ed8d0e;
    --fireLight2: #ffff00;

}

.bgColor { fill: var(--bgColor); }

.bgColor90 { fill: var(--bgColor90); }
.bgColor80 { fill: var(--bgColor80); }
.bgColor70 { fill: var(--bgColor70); }
.bgColor60 { fill: var(--bgColor60); }
.bgColor50 { fill: var(--bgColor50); }

.bgColor110 { fill: var(--bgColor110); }
.bgColor120 { fill: var(--bgColor120); }
.bgColor130 { fill: var(--bgColor130); }
.bgColor140 { fill: var(--bgColor140); }
.bgColor150 { fill: var(--bgColor150); }

*,
*::before,
*::after {
	box-sizing: border-box !important;
	outline: none;
	border: 0;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0px;
}

body {
	
  --auroraStreaks: repeating-linear-gradient( -65deg, var(--auroraColor1A12) 0px, transparent 50px, transparent 100px, var(--auroraColor1A12) 150px); 
  --aurora2Streaks: repeating-linear-gradient( 90deg, transparent 0%, var(--auroraColor1A12) 60%, transparent 100% );
	padding: 0px;
	height: 100vh;
  overflow-x: clip;
	background: var(--bgColor130);

}


@keyframes auroraAnim {
    from { background-position: 0px center; }
    to { background-position: 150px center; }
}
@keyframes aurora2Anim {
    from { background-position: 0px center; }
    to { background-position: -200px  center; }
}

#gsapWrapper {
	
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100vw;
	height: 100vh;
	visibility: hidden;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.9) 50%, var(--bgColor130) 50%, var(--bgColor130) 100%),
	linear-gradient(60deg, var(--auroraColor0), transparent 50%),
	linear-gradient(127deg, var(--auroraColor1), transparent 80%),
	linear-gradient(280deg, var(--auroraColor2), transparent 50%);

	#aurora
	{
		position: fixed;
		display: block;
		top: 0px;
		left: 0px;
		width: 100vw;
		height: 100vh;
		background: var(--auroraStreaks);
		background-size: 150px;
		filter: blur(12px);
		animation: auroraAnim 5s linear infinite;
		background-attachment: fixed;
		mask-image: radial-gradient(ellipse at top center, black 20%, transparent 50%);

		&::before {
			content: " ";
			display: inherit;
			width: inherit;
			height: inherit;
			background: var(--aurora2Streaks);
			background-size: 200px;
			filter: blur(12px);
			animation: aurora2Anim 10s linear infinite;
			background-attachment: fixed;
			mix-blend-mode: difference;
		}

	}

	#moonWrapper {
		position: fixed;
		display: inline-block;
		top: 2px;
		left: 0px;
		right: 0px;
		
		#moonCenter {
			display: block;
			width: 100%;
			max-width: 900px;
			padding: 15px;
			margin-left: auto;
			margin-right: auto;

			#moon {
				display: block;
				width: 250px;
				max-width: 30vw;
				aspect-ratio: 1/1;
				background: #FFFFFF;
				border-radius: 50%;
				margin-left: auto;

				svg {
					opacity: 1;
					width: 100%;
					aspect-ratio: 1/1;
					filter: blur(5px);
				}

			}
		
		}
		
	}

	#gsapBody {
		
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		object-fit: contain;

		-webkit-perspective: 1000px;
		perspective: 1000px;

		.svgWrapper {
			
			position: absolute;
			overflow: visible;
			margin-right: auto;
			transform-style: preserve-3d;
			-webkit-transform-style: preserve-3d;
			will-change: transform;

			&:has(svg#svg00) { transform: translateZ(0px); }
			&:has(svg#svg0) { transform: translateZ(-250px); }
			&:has(svg#svg1) { transform: translateZ(-300px); }
			&:has(svg#svg2d) { transform: translateZ(-325px); }

			&:has(svg#svg2Igloo) { transform: translateZ(-400px); }/*  */
			&:has(svg#svg2), &:has(svg#svg2b), &:has(svg#svgIgloo) { transform: translateZ(-400px); }
			&:has(svg#svg3) { transform: translateZ(-600px); }
			&:has(svg#svg4) { transform: translateZ(-1250px); }
			&:has(svg#svg5) { transform: translateZ(-1500px); }
			&:has(svg#svg6) { transform: translateZ(-1750px); }
			&:has(svg#svg7) { transform: translateZ(-2000px); }

			svg {
				width: 1200px;
				height: 800px;
				overflow: visible;
				margin-right: auto;
				overflow: visible !important;

                #flames use { transform-origin: bottom center; }
                
			}
			
		}
		
	}
	
}

.scrollTriggerWrapper {

    position: relative;
    width: 100%;
    z-index: 1;
  
    .section {
        display: block;
        width: 100%;
        height: 150vh;
        @media ( 992px >= width ) { height: 200vh; }
        @media ( 768px >= width ) { height: 250vh; }
    }

}

/* SVG filters */

linearGradient#branchFill {
    stop:first-of-type { stop-color: var(--bgColor80) }
    stop:last-of-type { stop-color: var(--bgColor130) }
}
linearGradient#branchStroke {
    stop:first-of-type { stop-color: var(--bgColor) }
    stop:last-of-type { stop-color: var(--bgColor150) }
}
linearGradient#iglooFill {
    stop:first-of-type { stop-color: var(--bgColor120) }
    stop:last-of-type { stop-color: var(--bgColor150) }
}
linearGradient#iglooStroke {
    stop:first-of-type { stop-color: var(--bgColor130) }
    stop:last-of-type { stop-color: var(--bgColor120) }
}
#iglooVStroke { stroke: var(--bgColor120); }
#iglooVLight { fill: color-mix(in srgb, #FFFFFF 20%, var(--fireLight1) ); }
#iglooDoorShadow { fill: color-mix(in srgb, #000000 20%, var(--fireLight1) ); }

radialGradient#iglooFire {
    stop:first-of-type { stop-color: var(--fireLight1) }
    stop:last-of-type { stop-color: var(--fireLight2) }
}