/*
DEFAULT
*/

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    zoom: 100%;
    -ms-zoom: 100%;
    -moz-transform: scale(1.0);
}

html {
    scroll-behavior: smooth;
    font-size: 1em;
    line-height: 1.4;
    overflow-x: hidden;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
GLOBAL STATES
*/

#intro-text-pin {
    padding-top: 5vh;
    margin-bottom: auto;
    padding-left: 10%;
    transition: opacity 0.1s ease;
}

.scene-container {
    box-shadow: -10px 0px 10px 1px #aaaaaa93;   
    
    flex: none;
}

.hidden {
    opacity: 0;
}

#main-content {

    scroll-behavior:smooth;

    display: flex;
    flex-direction: column;
}




/*
PART 1 CONTENT
*/

#part-1 {
    height: 500vh;
    width: 100vw;
    background: rgb(255, 236, 212);
}
/* Scrolls with scene 1 */
#part-1-env {
    position: sticky;
    top: 1px;
    left: 1px;
    height: 80vh;
    width: 100vw;
    background: #ddd7d5;
    filter: drop-shadow(10px 0px 6px rgba(0, 0, 0, 0.2));
    box-shadow: 0px 0px 0px 1px #aaaaaa93;   
    border-radius: 20px;

    transition: height 0.4s ease, width 0.4s ease, left 0.4s ease, top 0.4s ease;
}
#part-1-env.shift-right {
    height: 100vh; 
    width: 50vw;
    left: 50vw;   
}
#part-1-env.shift-up {
    width: 100vw; 
    height: 50vh; 
    left: 0vw; 
    top: 50vh;
}


#scene-1-text {
    position: sticky;
    width: 100vw; 
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-top: 60vh;
    gap: 60vh;

    transition: height 0.4s ease, width 0.4s ease, top 0.4s ease;
    padding-left: 10vw; 
    padding-right: 10vw;
}
/* If you change the width here, remember to update other .shift-right */
#scene-1-text.shift-right {
    height: 100vh; 
    width: 50vw; 
}
#scene-1-text.shift-up {
    height: 40vh; 
    width: 100vw;
    top: -100vh;  
}


/* 
Particles for Scene 1
*/
.animated-co2-particle {
    position: absolute;
    height: 16vh;
    width: 16vh;
    background-color: #f5a5a5;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;

    top: 5vh;
    left: 2vw;

    transition: opacity 0.8s ease-in-out;
}
.animated-o2-particle {
    position: absolute;
    height: 16vh;
    width: 16vh;
    background-color: #c4fdff;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;

        top: 5vh;
        left: 50vw;

        transition: opacity 0.8s ease-in-out;
    }

.animate-particle-conversion {
    opacity: 1;
    animation: particle-animation-co2 2s infinite; 
}

/* 
TREE 3
*/

.tree_3 {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));

    top: 42vh; 
    left: 36vw;
    transform: rotate(0deg);
    transition: left 0.2s ease, top 0.2s ease, scale 0.5s ease, opacity 0.5s ease, transform 1.8s ease;      
}
.tree_3.shift-right {
    transform: rotate(13deg);
    opacity: 0.7;
}
.trunk_3 {
    height: 40vh;
    width: 2vw; 
    background-color: rgb(145, 115, 77);    
}
.canopy_3 {
    position: absolute;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));
    width: 0; 
    height: 0;
    border-left: 15vh solid transparent;
    border-right: 15vh solid transparent;
    border-bottom: 30vh solid rgb(45, 138, 65);
}
.canopy_3:nth-child(2) {
    left: -6.5vw;
    top: -10vh;
}
.canopy_3:nth-child(1) {
    top: -5vh;
    left: -6.5vw;
}
.canopy_3:nth-child(3) {
    left: -6.5vw; 
    top: -15vh;
}


/*
TREE 2
*/

.spot_2 {
    position: absolute;
    height: 2vw; 
    width: 2vw;

    background-color: black;
}
.spot_2:nth-child(3) {
    top: 32vh;
    left: 1vw;
}
.spot_2:nth-child(4) {
    top: 20vh;
    left: -1vw;
}

.tree_2 {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));

    top: 42vh; 
    left: 16vw;
    transform: rotate(0deg);
    transition: left 0.2s ease, top 0.2s ease, scale 0.5s ease, opacity 0.5s ease, transform 1.8s ease;     
}
.trunk_2 {
    height: 40vh;
    width: 2vw; 
    background-color: rgb(231, 207, 180);
}
.tree_2.shift-right {
    transform: rotate(-13deg);
    opacity: 0.7;
}
.leaf_2 {
    position: absolute;
    width: 5vw;
    height: 5vw; 
    border-radius: 20px;
    background-color: rgb(207, 164, 44);  
}
.leaf_2:nth-child(2) {
    left: -13vh;
    width: 10vw;
    height: 20vh;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));
    box-shadow: -10px 0px 10px 1px #00000065;   
}
.leaf_2:nth-child(1) {
    height: 30vh;
    width: 10vw;
    left: -3.75vw;
    top: -18vh;
}


/* 
TREE 
*/
.tree {
    position: absolute;

    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));

    top: 30vh; 
    left: 47vw;
    transition: left 0.2s ease, top 0.2s ease, scale 0.5s ease; 
}
.tree.shift-right {
    top: 40vh;
    left: 25vw;
}
.tree.shift-up {
    scale: 2;
    top: 60vh;  
}
.trunk {
    height: 40vh;
    width: 4vw; 
    background-color: rgb(184, 143, 96);
}
.branch {
    position: absolute;
    width: 1vw; 
    height: 20vh;
    background-color: rgb(184, 143, 96);
}
.leaf {
    position: absolute;
    width: 5vw;
    height: 5vw; 
    border-radius: 20px;
    background-color: green;
}

.leaf:nth-child(odd) {
    transform: rotate(67deg);
    left: -2vw; 
    top: -2vw;
}
.branch:nth-child(odd) {  
    transform:rotate(-67deg);
    top: 5vh;
    left: -1.5vw;
}
.branch:nth-child(even) {
    transform: rotate(67deg);
    left: 6vw;
}
.canopy {
    position: absolute;
    height: 12vw;
    width: 12vw;
    background-color: green;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));

    top: -20vh;
    left: -4vw;
    border-radius: 40px;

}


.ground {
    display: none;
    width: 26vw; 
    height: 10vh;
    
    top: 70vh; 
    left: 36vw;
    transition: left 0.5s ease, top 0.4s ease; 
    
    background-color: rgb(228, 227, 156);
    position: absolute;
    border-radius: 60px;

    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.1 ));
}

.ground.shift-right {
    top: 80vh;
    left: 15vw;
}


/*
PART 2 CONTENT
*/

#part-2 {
    display: flex; 
    flex-direction: row;
    height: 200vh;
    width: 100vw; 
    background-color: rgb(255, 255, 255);
}

#scene-2-text {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

#deforestation_map {
    width: 40vw;
    height: 40vw;
    
    border-radius: 70px;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));
}
.main-text-scene-2 {
    min-width: 100vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 5vw;
    display: flex;
    flex-direction: row;
}

/*
PART 3 CONTENT
*/

#part-3 {
    height: 550vh;
    width: 100vw; 
    background-color: rgb(179, 160, 119);
}
#part-3-env {
    position: sticky;
    top: 1px;
    left: 1px;
    height: 100vh;
    width: 100vw;
    opacity: 0.6;
    background-color: rgb(255, 255, 255);
}
#scene-3-text {
    position: absolute;
    height: 400vh;
    width: 20vw;
    padding-left: 10vw;;
}


.bar-plot {
    opacity: 0;
}
.bar-s3-x {
    position: absolute;
    bottom: 10vh;
    left: 10vw;
    background: black;
    width: 60vw;
    height: 1vh;
}
.bar-s3-xlab {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
}
.bar-s3-y {
    position: absolute;
    bottom: 10vh;
    left: 10vw;
    background: black;
    width: 40vw;
    height: 1vh;
    transform-origin: 0% 0%;
    transform: rotate(270deg);
}
.bar-s3-ylab {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;    
}



/* 
LOG
*/
.log {

    position: absolute;
    width: 5vw;
    height: 80vh;
    top: 10vh;
    left: -10vw;
    
    
    opacity: 0;
    scale: 0.5;

    transition: left 0.5s  ease-in-out, top 0.5s ease-in-out, opacity 0.5s cubic-bezier(1, 0, 0, 1), scale 0.5s ease-in-out, transform 0.5s ease-in-out, height 0.5s cubic-bezier(1, 0, 0, 1), transform-origin 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.log::before {
    content: "";
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: calc(var(--h) * 2.5vw);
    border: 5px solid #8b4513;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    background: repeating-linear-gradient(90deg,#a0522d,#8b4513 10px,#8b4513 20px);
}
.bar-content {
    font-size: 1.5vw;
    transform: rotate(270deg);
    opacity: 0;
}
.bar-content.visible {
    opacity: 1;
}

/* Starts at 2 since the axes are the "first child" */
.log.timber:nth-child(2) {
    scale: 1;
    opacity: 1;
    left: 10vw;
}
.log.timber:nth-child(3) {
    scale: 1;
    opacity: 0.95;
    left: 17vw;
}
.log.timber:nth-child(4) {
    scale: 1;
    opacity: 0.9;
    left: 24vw;
}
.log.timber.fallen:nth-child(2) {
    transform-origin: 100% 100%;
    top: 10vh;
    transform: rotate(90deg);
}
.log.timber.fallen:nth-child(3) {
    transform-origin: 100% 100%;
    left: 36vh;
    transform: rotate(90deg);
}
.log.timber.fallen:nth-child(4) {
    transform-origin: 100% 100%;
    left: 52vh; 
    
    transform: rotate(90deg);
}

.log.timber.fallen.start-bar {
    top: calc( (-70 + 20 * var(--i)) * 1vh);
    left: 5vw;
}



/* 
PART 4 CONTENT
*/

#part-4 {
    height: 150vh;
}

.main-text-scene-4 {
    min-width: 100vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 5vw;
    display: flex;
    flex-direction: row;
}


/* 
PART 5 CONTENT
*/

#part-5 {
    height: 500vh;
    width: 100vw;
}

#part-5-env {
    position: sticky;
    left: 1px; 
    top: 1px;

    background: linear-gradient(rgb(105, 165, 255), rgb(135, 224, 197));
    
    height: 100vh;
    width: 100vw;

}
#part-5-parallax {
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 100;
}

/*
 PARRALAX BACKGROUNDS
*/
.wood-parallax {
    position: absolute;
    background: repeating-linear-gradient(90deg,#a0522d,#8b4513 10px,#8b4513 20px);

    border: 5px solid #8b4513;
    width: 80vw;
    right: -20vw;
    top: 15vw;
    height: 10vh;
    rotate:calc(30deg);
}

.bush-parallax {
    position: absolute;
    top: 140vh;
    left: 5vw;
    width: 30vw;
    height: 30vw;
    border-radius: 30px;
    background: green;
    opacity: 0.4;
}

/* 
THAT ONE LEAF IN SCENE 5
*/ 

.leaf-s5 {
    position: absolute;
    left: 50vw;
    width: 100px;
    height: 200px;
    border-radius: 50% 0;
    background: green;
    transform: rotate(-5deg);
}
.leaf-s5-stem {
    position: absolute;
    clip-path: polygon(100% 0, 0 0, 53% 100%);
    background-color: rgb(42, 212, 42);
    height: 20vh;
    width: 2vw;
    top: -6vh;
    left: 3vw;
    transform: rotate(30deg)
}
.leaf-s5-vein {
    position: absolute;
    width: 2vw;
    height: 4vh;
    background-color: rgb(77, 102, 57);
    clip-path: polygon(100% 44%, 0 43%, 51% 75%);
    transform: rotate(30deg);
    left: 3vw;
    z-index: 5;
}


.scatter-s5 {
    position: sticky;
    left: 1px;
    top: 1px; 
    height: 100vh;
    width: 100vw;
    scale: 0.0;
    opacity: 0.0;
}
.scatter-s5-x {
    position: absolute;
    bottom: 10vh;
    left: 10vw;
    background: black;
    width: 60vw;
    height: 1vh;
}
.scatter-s5-xlab {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
}

.scatter-s5-y {
    position: absolute;
    bottom: 10vh;
    left: 10vw;
    background: black;
    width: 40vw;
    height: 1vh;
    transform-origin: 0% 0%;
    transform: rotate(270deg);
}
.scatter-s5-ylab {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;    
}

.scatter-points {
    position: absolute;
    height: 40vw;
    width: 60vw;

    bottom: 10vh;
    left: 10vw;
}
.s-point {
    position: absolute;
    width: 1vw;
    height: 1vw;
    border-radius: 60px;
}
.s-line {
    position: absolute;
    width: calc(60/7 * 1vw);
    height: 0.5vh;
}


.tick-label {
    background: black;
    height: 5vh;
    width: 0.1vw; 
    font-size: 1.8vw;
    
}
.tick-label-small {

    height: 3vh;
    width: 0.1vw; 
    font-size: 1vw;    
}

.y {
    transform: translateY(-110%);
}

/*
PART 6 CONTENT
*/

#part-6 {
    height: 200vh;
    width: 100vw;
}
#part-6-env {
    position: sticky;
    left: 1px; 
    top: 1px;
    height: 100vh;
    width: 100vw;
}
.text-animate-fire {
    position: absolute;
    left: 2vw;
}

.fire-shape {

}
.fire-red-circle {

}
.fire-red-triangle:nth-child(1) {

}

.fire-orange-circle {

}
.fire-orange-triangle {

}
.fire-yellow-circle {

}


/*
PART 7 CONTENT
*/

#part-7 {
    height: 500vh;
    width: 100vw;
}

#part-7-env {
    height: fit-content;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
}
#map { 
    
    height: 100vh; 
    width: 100vw ;
    
}


/* 
    TEXT FONTS PRESET
*/

.preset-font-wood {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
    color: rgb(0, 0, 0);
    letter-spacing: 1px;
}

.preset-font-bark {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 4em;
    color: rgb(0, 0, 0);
    letter-spacing: 4px;
}

.preset-font-twig {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 3em;
    color: black;
    letter-spacing: 2px;
}

.animate-text {
    scale: 0.0;
    opacity: 0.0;
    transition: scale 0.5s ease-in-out, opacity 0.5s ease-in-out
}
.animate-text.play-fade-in {
    scale: 1.0;
    opacity: 1.0;
}


/* 
TEXT BUBBLES 
*/

.text-bubble-thin {
    position: relative;
    width: 25vw;
    height: fit-content;
    padding: 2vh;
    background-color: #ffffff;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));
    outline-style:groove;
}

.text-bubble-classic {
    position: relative;
    width: fit-content;
    height: fit-content;
    padding: 2vh;
    background-color: #ffffff;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));
    outline-style:groove;
}
.text-bubble-wide {
    position: relative;
    width: 50vw; 
    height: fit-content;
    padding: 2vh;
    background-color: white;
      filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.2));
    outline-style:groove;  

}

/* 
ANIMATION KEYFRAME SECTION
*/

@keyframes particle-animation-co2 {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(50vw);
        opacity: 0;
    }
}