/* -- 1. Viewport Scope -- */
div[data-viewport="1"] {
  .homepage-banner-subtitle {
    position: absolute;
    
    bottom: 12.5%;
    left: 2.5vw;

    color: white;
    font-family: var(--website-secondary-font), sans-serif;
    font-size: 2rem;
    font-weight: 700;
    opacity: 1;
  }
  .homepage-banner-subtitle.hidden {
    opacity: 0;
  }
  .homepage-banner-subtitle:not(.hidden) { animation: homepage-banner-subtitle-fade-in 1.5s forwards; }
}

/* -- Animations -- */
@keyframes homepage-banner-subtitle-fade-in {
  0% {
    opacity: 0;
    transform: translateY(12.5vh);
  }
  50% {
    opacity: 0.5;
    transform: none;
  }

  70% { opacity: 0.5; }
  70.1% { opacity: 0; }
  
  75% { opacity: 0.7; }
  75.1% { opacity: 0; }
  
  80% { opacity: 0.5; }
  80.1% { opacity: 1; }
  
  85% { opacity: 1; }
  85.1% { opacity: 0; }
  
  90% { opacity: 0; }
  90.1% { opacity: 1; }
}

/* -- LEGACY CSS -- */
/* -- Apply parallax to main video background -- */
.homepage-banner-video-bg {
  position: absolute;
  z-index: -999;
}

/* -- Cleveland National Forest background -- */
.homepage-banner-cleveland-national-forest-bg {
  background-image: url("../../gfx/interface/cleveland_fog.png");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* -- Rain background -- */
.homepage-banner-rain-bg, .homepage-banner-raindrops-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
}
.homepage-banner-rain-bg {
  background-image: url("../../gfx/interface/rainy_night_bg.png");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;

  filter: brightness(0.65);
}

/* -- Homepage top banner positional settings -- */
.homepage-banner-centre-container {
  width: 100vw;
}
.homepage-banner-video-bg, .homepage-banner-video-bg-misty-forest, .homepage-banner-triumph-and-tragedy-bg, .homepage-banner-cleveland-national-forest-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100dvw;
  object-fit: cover;
}
.homepage-banner-triumph-and-tragedy-bg {
  position: relative;
  height: 100dvh;
  width: 100dvw;
  overflow: hidden; /* This prevents the images from overflowing HTML bounds */
}
.homepage-banner-triumph-and-tragedy-bg img {
  height: 100dvh;
  object-fit: cover;
  position: absolute;
  width: 100dvw;
}
.homepage-banner-video-bg {
  filter: brightness(80%);
}

/* -- Homepage top banner plexus overlay -- */
.homepage-banner-plexus-overlay-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;

  filter: grayscale(100);
  opacity: 0.15;
}

/* -- Homepage top banner - main title styling -- */
/* -- Top banner title positioning -- */
.homepage-banner-main-title {
  top: 0;
  height: 100dvh;
  width: 100vw;
  margin: 0 auto;
  position: absolute;
  overflow: hidden;

  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

[alignment="centre"] {
  justify-content: center;
  text-align: center;
}
[alignment="left"] {
  position: absolute;

  justify-content: left;
  left: 2.5vw;
  text-align: left;
  width: 95vw;
}
[alignment="right"] {
  justify-content: right;
  right: 2.5vw;
  text-align: right;
  width: 95vw;
}

.homepage-banner-main-title[alignment="centre"] {
  width: 80vw;
  left: 10vw;
}

/* -- Top banner title formatting -- */
.homepage-banner-main-title {
  user-select: text;
}
.homepage-banner-main-title.finished-animation .homepage-banner-main-title-text {
  overflow: hidden;
  br { display: none; }
  * { display: inline; white-space: nowrap; }
}
.homepage-banner-main-title-text {
  font-family: "Bahnschrift", sans-serif;
  font-size: 20dvh;
  font-stretch: semi-condensed;
  font-weight: 700;
  line-height: inherit;

  color: white;
  text-transform: uppercase;

  /* -- Prevent any text overflow from occurring -- */
  white-space: nowrap;
}
.homepage-banner-text-subelement {
  padding-left: 0.01vw;
  padding-right: 0.01vw;
}
.homepage-banner-main-title-text span:last-child {
  padding: 0vw;
}
.homepage-caret-container {
  transition: all 0.5s ease;
}
.homepage-caret-spacer {
  color: rgba(0, 0, 0, 0);
  font-family: "Bahnschrift";
  font-size: 20dvh;
  font-stretch: semi-condensed;
  font-weight: 700;

  margin-left: -0.2vw;
  user-select: none;
}
#homepage-caret-wrapper {
  display: inline-block;
  position: sticky;

  align-items: baseline;
  white-space: nowrap;
  right: 0;
}

/* -- Homepage banner footer -- */
.homepage-banner-footer-container {
  position: absolute;
  top: 80%;
  left: 0%;
  width: 100%;
  height: 15%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: visible;
}
.homepage-banner-dots-container {
  position: absolute;
  top: 75%;
  height: 12.5%;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* -- Homepage banner footer change background buttons -- */
.homepage-banner-change-bg-btn {
  width: 2dvh;
  height: 2dvh;
  border-radius: 50%;
  border: 0.1dvh solid white;
  margin-left: 0.5vw;
  margin-right: 0.5vw;

  transition: background-color 0.5s;
  transform: translateY(100dvh);
}
.homepage-banner-change-bg-btn.active {
  background-color: rgb(255, 255, 255);
}
.homepage-banner-change-bg-btn:hover {
  cursor: pointer;
}

/* -- Auxiliary animation stuffs -- */
.enlarged-slash {
  font-size: 50dvh !important;
  overflow-y: visible;
}
.enlarged-text {
  font-size: 30dvh;
}
.enlarged-text-positioning {
  top: 35%;
  left: 0%;
  width: 100%;
  height: 35%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
.fade-out {
  animation: homepage-top-banner-fadeout 3s forwards;
}
.homepage-banner-blinking-caret {
  padding: 0.075em;
  padding-top: 0vw;
  padding-bottom: 0vw;

  font-family: "Bahnschrift";
  font-size: 20dvh;
  font-stretch: semi-condensed;
  font-weight: 700;

  animation: homepage-top-banner-caret-blinking-animation 6s infinite;
}
.slash-positioning {
  top: 25%;
  left: 0%;
  width: 100%;
  height: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}
.subenlarged-text-positioning {
  top: 37.5%;
  left: 0%;
  width: 100%;
  height: 25%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
}

/* -- Chevron -- */
.homepage-banner-chevron-down {
  position: absolute;
  top: 96%;
  height: 4%;
  animation: homepage-chevron-down 4s infinite;
  transition: all 2s ease;
}
.homepage-banner-chevron-down-icon {
  height: 4dvh;
  width: 4dvh;
}

/* -- External settings button -- */
.settings-btn {
  height: 4dvh;
  width: 4dvh;
}
.settings-btn-container {
  margin-top: 3.5dvh;
  height: 4dvh;
  width: 4dvh;

  transition: transform 0.5s;
}
.settings-btn-container.stationary:hover {
  transform: rotate(20deg);
}
.settings-btn:hover, .settings-close-btn:hover, .settings-chevron-btn:hover, .change-bg-select-option-container:not(.selected):hover, .change-overlay-select-option-container:not(.selected):hover {
  cursor: pointer;
}

/* -- Settings UI -- */
/* -- Background containers and positioning -- */
.homepage-banner-settings-container {
  position: absolute;
  bottom: 10dvh;
  right: 4.25vw;

  height: 30dvh;
  width: 30vw;

  transition: all 0.5s ease;
}
.homepage-banner-settings-title-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 5.5dvh;

  background-color: rgba(200, 60, 60, 0.9);
}
.homepage-banner-settings-body-container {
  position: absolute;
  top: 6dvh;
  left: 0px;
  width: 100%;
  height: calc(98% - 5.5dvh);
  max-height: calc(98% - 5.5dvh);

  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: auto;
}

/* -- Title UI elements -- */
.homepage-banner-settings-title-text {
  position: absolute;
  margin-left: 1vw;
  top: 0.75dvh;

  color: white;
  font-family: "Barlow";
  font-size: 3dvh;
  font-weight: 700;
  text-transform: uppercase;
}
.settings-close-btn {
  position: absolute;
  right: 1vw;
  top: 0.75dvh;

  height: 4dvh;
  width: 4dvh;
}
.settings-chevron-btn {
  position: absolute;
  right: calc(1.5vw + 4dvh);
  top: 0.75dvh;

  height: 4dvh;
  width: 4dvh;

  transition: all 0.5s ease;
}
.minimised {
  transform: rotate(180deg);
}
.settings-ruler {
  margin-left: 1vw;
  width: 2vw;
  border: 0.05dvh solid white;
  background: none;
}
.settings-subtitle {
  margin-top: 1dvh;
  margin-bottom: 1dvh;
  margin-left: 1vw;
  margin-right: 1vw;

  color: white;
  font-family: "Barlow";
  font-size: 1.5dvh;
  font-weight: 100;
  text-transform: uppercase;
}

/* -- Change background buttons -- */
.change-bg-container {
  display: flex;
  flex-flow: row wrap;

  height: 20dvh;
  margin-top: 2dvh;
  margin-bottom: 2dvh;
  margin-left: 1vw;
  margin-right: 1vw;
}
.change-bg-select-option-container {
  height: 40%;
  width: 30%;
  margin-right: 3%;
  margin-bottom: 5%;

  border-radius: 0.25dvh;
  transition: border 0.5s;
}
.change-bg-select-option-container:hover {
  box-sizing: border-box;
  border: 0.1dvh solid rgb(100, 100, 100);
}
.change-bg-select-option-container > .change-bg-select-option {
  height: 100%;
  width: 100%;

  background-size: cover;
  background-repeat: no-repeat;

  border-radius: 0.25dvh;
  transition: filter 0.5s;
}
.change-bg-select-option-container > center {
  position: relative;
  display: flex;
  justify-content: center;

  bottom: calc(50% + 2dvh);
  height: 100%;
  width: 100%;
}
.change-bg-select-option-container > center.text-container {
  position: relative;
  display: flex;
  justify-content: center;

  bottom: calc(100% - 0.5dvh);
  height: 1dvh;
  width: 100%;
}
.change-bg-select-option-container > center > .checkmark {
  height: 4dvh;
  width: 4dvh;
}
.change-bg-select-option-container > center > .checkmark {
  opacity: 0;
}
.change-bg-select-option-container > center.text-container > .change-bg-desc {
  color: white;
  font-family: "Quicksand";
  font-size: 1dvh;
  font-weight: 300;

  opacity: 0;
  pointer-events: none;
}

/* -- Selected background buttons -- */
.change-bg-select-option-container.selected {
  box-sizing: border-box;
  border: 0.1dvh solid white;
}
.change-bg-select-option-container.selected > .change-bg-select-option {
  filter: brightness(0.4);
}
.change-bg-select-option-container.selected > center > .checkmark {
  opacity: 1;
}
.change-bg-select-option-container:hover > center.text-container > .change-bg-desc {
  animation: homepage-banner-tooltip-fade 0.5s forwards;
  pointer-events: none;
}

/* -- Change overlay buttons -- */
.change-overlay-container {
  display: flex;
  flex-flow: row wrap;
  overflow-y: auto;

  height: 20dvh;
  max-height: 20dvh;

  margin-top: 2dvh;
  padding-bottom: 2dvh;
  margin-left: 1vw;
  margin-right: 1vw;
}
.change-overlay-select-option-container {
  height: 40%;
  width: 30%;
  margin-right: 3%;
  margin-top: 2%;
  margin-bottom: 2.5%;

  border-radius: 0.25dvh;
  transition: border 0.5s;
}
.change-overlay-select-option-container > .change-overlay-select-option {
  height: 100%;
  width: 100%;

  transition: filter 0.5s;
}
.change-overlay-select-option-container > .change-overlay-select-option > .background {
  height: 100%;
  width: 100%;
  border-radius: 0.25dvh;

  background-size: cover;
  background-repeat: no-repeat;
}
.change-overlay-select-option-container > center {
  position: relative;
  display: flex;
  justify-content: center;

  bottom: calc(50% + 2dvh);
  height: 100%;
  width: 100%;
}
.change-overlay-select-option-container > center.text-container {
  position: relative;
  display: flex;
  justify-content: center;

  bottom: calc(100% - 0.5dvh);
  height: 1dvh;
  width: 100%;
}
.change-overlay-select-option-container > center > .checkmark {
  height: 4dvh;
  width: 4dvh;
}
.change-overlay-select-option-container > center > .checkmark {
  opacity: 0;
}
.change-overlay-select-option-container > center.text-container > .change-overlay-desc {
  color: white;
  font-family: "Quicksand";
  font-size: 1dvh;
  font-weight: 300;

  opacity: 0;
  pointer-events: none;
}

/* -- Selected overlay buttons -- */
.change-overlay-select-option-container:hover {
  box-sizing: border-box;
  border: 0.1dvh solid rgb(100, 100, 100);
}
.change-overlay-select-option-container.selected {
  box-sizing: border-box;
  border: 0.1dvh solid white;
}
.change-overlay-select-option-container.selected > .change-overlay-select-option {
  filter: brightness(0.4);
}
.change-overlay-select-option-container.selected > center > .checkmark {
  opacity: 1;
}
.change-overlay-select-option-container:hover > center.text-container > .change-overlay-desc {
  animation: homepage-banner-tooltip-fade 0.5s forwards;
  pointer-events: none;
}

/* -- Other settings -- */
.other-settings-container {
  position: relative;
  margin-left: 1vw;
  margin-right: 1vw;
}
.other-settings-container .settings-subtitle, .other-settings-container .settings-ruler {
  margin-left: 0vw;
}
.range-input {
  -webkit-appearance: none;
  width: 50%;
  height: 0.1dvh;
  background: white;
  opacity: 0.3;
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.range-input:hover {
  opacity: 1;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 0.5vw;
  width: 0.5vw;
  border-radius: 50%;

  background: white;
  cursor: grab;
}
.range-input::-moz-range-thumb {
  height: 0.5vw;
  width: 0.5vw;
  border-radius: 50%;

  background: white;
  cursor: grab;
}
.added-margin {
  margin-left: 0.5vw;
}
.default-margin {
  margin-left: 1vw;
}
.settings-label {
  color: white;
  font-family: "Quicksand";
  font-size: 1dvh;
  font-weight: 700;

  margin-top: 2dvh;
  margin-left: 1vw;

  position: relative;
}
.text-alignment-button {
  background-color: rgba(0, 0, 0, 0);
  border: 3px solid white;
  padding: 0.5dvh;
  padding-left: 0.5vw;
  padding-right: 0.5vw;

  color: white;
  font-family: "Quicksand";
  font-weight: 300;

  transition: all 0.5s ease;
}
.text-alignment-button:hover, .text-alignment-button.selected {
  cursor: pointer;

  background-color: white;
  color: black;
  font-weight: 400;
}

.ss-main.font-family-dropdown .ss-single-selected, .ss-main.font-family-dropdown, .ss-content {
  font-weight: 400;
  margin-left: 0.25vw !important;
  width: 50% !important;
}

.form-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 3.45dvh;
  height: 1.95dvh;
  background-color: #e6e6e6;
  border-radius: 1.725dvh;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}

.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3.15dvh;
  height: 1.65dvh;
  background-color: rgb(200, 60, 60);
  border-radius: 0.825dvh;
  transform: translate3d(0.15dvh, 0.15dvh, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.65dvh;
  height: 1.65dvh;
  background-color: white;
  border-radius: 0.825dvh;
  box-shadow: 0 0.15dvh 0.15dvh rgba(0, 0, 0, 0.24);
  transform: translate3d(0.15dvh, 0.15dvh, 0);
  transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
  width: 2.1dvh;
  transform: translate3d(0.15dvh, 0.15dvh, 0);
}

.form-switch:active input:checked + i::after {
  transform: translate3d(2.4dvh, 0.3dvh, 0);
}

.form-switch input {
  opacity: 0;
  width: 0px;
}

.form-switch input:checked + i {
  background-color: #4BD763;
}

.form-switch input:checked + i::before {
  transform: translate3d(1.65dvh, 0.15dvh, 0) scale3d(0, 1, 1);
}

.form-switch input:checked + i::after {
  transform: translate3d(1.65dvh, 0.15dvh, 0);
}

/* -- Padded footer -- */
.homepage-banner-settings-padded-footer {
  height: 3dvh;
  width: 100%;
}
.homepage-banner-settings-padded-margin {
  height: 1dvh;
  width: 100%;
}

/* -- ANIMATIONS -- */
/* -- Homepage top banner animations -- */
/* -- Caret blinking animation -- */
@keyframes homepage-top-banner-caret-blinking-animation {
  0% {
    background-color: rgb(255, 255, 255);
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    background-color: rgb(150, 245, 245);
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    background-color: rgb(255, 255, 255);
  }
}
@keyframes homepage-top-banner-fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none !important;
  }
}

/* -- Homepage top banner footer animations -- */
@keyframes homepage-top-banner-btn-hop-up {
  0% {
    transform: translateY(100dvh);
  }
  50% {
    transform: translateY(-4dvh);
  }
  60% {
    transform: translateY(-3dvh);
  }
  80% {
    transform: translateY(2dvh);
  }
  100% {
    transform: translateY(0dvh);
  }
}
@keyframes homepage-top-banner-btn-hop-down {
  0% {
    transform: translateY(0dvh);
  }
  50% {
    transform: translateY(2dvh);
  }
  70% {
    transform: translateY(-3dvh);
  }
  80% {
    transform: translateY(-4dvh);
  }
  100% {
    transform: translateY(100dvh);
  }
}
@keyframes homepage-settings-btn-fade {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes homepage-settings-btn-roll {
  0% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(270deg);
  }
  90% {
    transform: rotate(380deg);
  }
  100% {
    transform: rotate(360deg);
    margin-left: 44vw;
    margin-top: 9dvh;
  }
}
@keyframes homepage-settings-btn-roll-back {
  0% {
    transform: rotate(360deg);
    margin-left: 44vw;
    margin-top: 9dvh;
  }
  70% {
    transform: rotate(90deg);
  }
  90% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes homepage-chevron-down {
  0% {
    opacity: 0;
    transform: translateY(0dvh);
  }
  10% {
    opacity: 1;
    transform: translateY(0dvh);
  }
  50% {
    opacity: 0;
  }
  90% {
    transform: translateY(10dvh);
  }
  100% {
    transform: translateY(5dvh);
  }
}

/* -- Settings button animation classes -- */
.settings-btn-animated-fade-in {
  animation: homepage-banner-settings-btn-fade-in 1s forwards;
  pointer-events: auto;
}
.settings-btn-animated-fade-out {
  animation: homepage-banner-settings-btn-fade-in 1s forwards reverse;
  pointer-events: none;
}

.settings-animated-close {
  animation: homepage-banner-settings-close 0.2s forwards;
  pointer-events: none;
}
.settings-animated-open {
  animation: homepage-banner-settings-open 0.2s forwards;
  visibility: visible;
  pointer-events: auto;
}

/* -- Actual animation defines -- */
@keyframes homepage-banner-settings-btn-fade-in {
  0% {
    opacity: 0;
    transform: rotate(-60deg);
  }
  90% {
    transform: rotate(20deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes homepage-banner-settings-close {
  0% {
    opacity: 1;
  }
  99% {
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes homepage-banner-settings-open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes homepage-banner-tooltip-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* -- Lava lamp parallax background -- */
.homepage-banner-lava-lamp-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100dvw;
  height: 100dvh;

  background: red;
  background: -webkit-linear-gradient(left top, #152a8e, #b1376c);
  background: -o-linear-gradient(bottom right, #152a8e, #b1376c);
  background: -moz-linear-gradient(bottom right, #152a8e, #b1376c);
  background: linear-gradient(to bottom right, #152a8e, #b1376c);
}
.homepage-banner-lava-lamp-bg:before {
  content: "";
  position: absolute;

  width: 100dvw;
  height: 100dvh;
  top: 0px;
  left: 0px;

  opacity: 0.05;
  z-index: 0;
}
#lava-lamp-loader {
  display: inline-block;
  position: relative;

  width: 100dvw;
  height: 100dvh;
}

/* -- Blob styling -- */
rect {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.lava-lamp-blob-container {
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.lava-lamp-blob {
  fill: white;
}